无障碍设计：从第一行代码起的尊重

　　无障碍设计：从第一行代码起的尊重——这行字我去年6月份贴在团队晨会白板右上角，墨迹还没干透，测试工程师老张就指着它笑：“你真打算让React组件一创建就挂ARIA标签？”

　　去年6月份，我们上线「医联快问」小程序v2.3.1，交付前夜，视障测试员李姐用iPhone VoiceOver跑完全流程，卡在挂号页的“立即预约”按钮——它用了button元素但aria-label为空，且CSS设置了opacity:0 + absolute位移伪装成图标按钮。她反复双击三次无响应，最后靠滑动到下个控件绕开。那个按钮的JS逻辑里藏着一句console.warn('skip aria for icon-only btn')——是前端小陈写的，他觉得“用户看得见图就不需要读出来”。

　　我删掉了那行注释，也删了那个按钮。

　　真正刺痛我的不是bug本身。是第二天复盘会上，小陈翻着AXE插件报告嘟囔：“按WCAG 2.1 AA级，只要label文本存在就行，又没强制要求label必须可读…”——他没说错。但当我把屏幕朗读器音量调到最大，听着机械女声把“预约”念成“yù yuē”，把“科室”读成“kē shì”，而李姐一边听一边快速盲打微信回复“刚挂上，谢谢”，我才意识到：技术标准只是地板，而尊重是悬在头顶的、随时可能落下的玻璃天花板。新技术？比如Web Components的shadow DOM默认隔离语义树，比如React Server Components的hydration缺失导致SSR生成的ARIA属性被客户端抹掉——它们不是障碍，是放大器，把我们偷懒时埋的伏笔炸得更响。

　　上周四，实习生小路提交PR#447，给所有Icon组件加了useContext(AnnouncementContext)自动注入aria-label，但忘了在fallback逻辑里处理SVG内嵌title被CSS display:none隐藏的case。我合并时手动补了display:inline!important ——结果iOS Safari 16.4的VoiceOver突然开始重复播报两次。查了三天，发现是苹果那个 infamous 的“title-element-inside-SVG-when-display-inline-but-not-when-rendered-via-CSS”怪异行为，连Apple Feedback Tracker SR#FB12876549都挂着。我们改了五版，最后用role="img" + aria-hidden="true"套一层div才止住复读。这种事，文档里没有，Stack Overflow上全是过期答案，只能靠真人试、真人骂、真人录屏回放帧——去年6月份李姐录的那段37秒视频，现在还在我桌面命名为「0607_vo_error_loop.mov」。

　　无障碍不是等UI定稿再填的表单。

　　我主观判断：当前所有所谓“无障碍自动化检测工具”，在真实多端交互流里有效率不超过63.7%——这是我拿Axios+Playwright+VoiceOver模拟127次手势路径后统计的，其中iOS的tap-hold-trigger-ARIA-live区域延迟导致的误判占41%。工具能抓出alt缺失，但抓不出「医生头像旁‘在线’绿点」这个视觉线索背后该配什么status文本——设计师写“实时响应中”，工程师却塞进aria-live="polite"，而用户只听到“在线”，根本不知道医生正在打字。这中间差的不是技术，是两小时蹲点观察视障用户如何靠节奏感判断对方是否在输入——我们没做过。

文章配图，仅供参考

　　下周二下午三点，我带三个工程师去盲校机房，不带电脑，只带录音笔和纸笔。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!