无障碍设计：从首行代码践行技术尊重

　　凌晨三点十七分，告警系统在钉钉里炸出三百七十二条未读——不是数据库主从延迟，不是K8s Pod重启风暴，是Lighthouse无障碍审计跑挂了，报错堆栈里卡着一个aria-labelledby指向的ID根本不存在。我盯了两分钟屏幕，冷气从机房下送风口直往上钻，后颈发麻。DBA老张刚把咖啡泼在工牌上，褐色渍边还在晕，他擦都没擦，就蹲在机柜旁拿万用表测PDU电压。

　　我原以为只是CI流水线配错了Lighthouse阈值。结果ssh进beta环境查DOM，发现是前天merge的那个按钮组件：设计师给的Figma稿里写了“高对比度模式兼容”，前端同学顺手加了role="button"，但没加tabindex="0"，也没处理space/enter双触发——而更绝的是，这个组件被复用了十七次，其中五处嵌在ng-if的异步加载块里，DOM渲染完才挂事件监听。我敢打包票：那五处，focus根本落不进去。你信不信？你去devtools里点那个焦点环试试，它就飘在半空，像没户口的幽灵。

文章配图，仅供参考

　　老板的手机响了一声没接。不是微信语音，是那种老式安卓提示音，“嘀——嘀——”，两声，然后戛然而止。他正翻着上周的OKR复盘页，手指停在“提升可访问性得分”那行，没划下去。我本来想拍桌子，手抬到一半，看见他电脑右下角弹出HR系统通知：“王磊调休申请（1月12日）已驳回”。算了。我切回终端，重跑Lighthouse——这次手动禁用JavaScript，只测静态结构。分数从58跳到83。你笑不笑？我们天天吹“渐进增强”，结果一关JS，盲人用户能用，明眼人反而卡在loading动画里等一辈子。

　　去年一月份的事。那个组件上线第三天，客服工单里出现一条：“语音助手念不出提交按钮文字，只说‘按钮’”。没人转给前端。它沉在“交互类”二级分类里，归档前自动打标“低优先级”。后来我翻原始工单号，发现同一天还有一条：“iPhone 14 Pro Max 外接Braille Display时页面闪退”，标记人写的是“待排期”，时间戳是凌晨四点零三分——谁值的夜班？后端小陈。他当时正连着三台测试机抓WebSocket心跳包，耳机里放《野狼DISCO》循环。我查了Git blame，改那行aria-label的commit作者确实是小陈，但message写的是“fix typo in footer”。typo在footer，他改的却是header里的button。这事儿我说不准，可能是他半夜手抖选错了文件。也可能是压根没看PR描述，直接点了Approve。

　　优胜劣汰。这个词我嚼了三个月。不是说残障用户“淘汰”掉不友好产品——是代码先淘汰自己人。当你的label和input没显式绑定，当focus-visible被CSS重置成none，当整个SPA的路由切换跳过document.title更新……搜索引擎爬虫照样抓，Lighthouse照样跑，但axe-core会当场报错。去年Q4我们砍掉了三个长期低于60分的页面，不是因为DAU跌了，是因为它们连续六周没通过内部a11y Gate。没走流程，没写纪要，就是DBA老张在每日站会说了一句：“那个首页轮播图的焦点管理脚本，吃掉我0.8%的Redis内存。”——第二天早上，它就404了。

　　对面工位的前端换了双拖鞋。灰蓝色，鞋头有点翘，左脚那只后跟磨得发白。他昨天刚提离职，offer里写的职级比现在高一级，JD第一条写着“主导无障碍方案落地”。我没问他要不要带个影子项目走，毕竟他走那天，正好轮到我值无障碍专项的oncall。值班表贴在茶水间冰箱上，我撕下来的时候，发现下面压着两张被咖啡浸透的纸——一张是2022年9月的a11y checklist打印件，另一张是2021年7月的字体大小适配测试记录。字迹都模糊了。

　　我删过一次生产环境的aria-hidden="true"——就删了一个引号。线上所有modal的screen reader支持立刻失效。不是报错，是安静地、彻底地哑了。监控没响，日志没报，只有用户反馈里零星几条：“点了没反应”“不知道当前在哪”。我们花了十八秒定位，三分钟回滚。但你知道最难受的是什么吗？是回滚之后，我手动检查所有modal的aria-modal属性，发现有四个地方写了true，两个地方写了"true"（字符串），还有一个地方写成了aria-modal="false"却绑定了display: block。这种事儿，AI扫描不出来，Lighthouse也懒得标——它只认逻辑真值，不认人类的疲惫。

　　所以现在我的习惯是：第一行代码写完，不测接口，不跑单元，先开NVDA。哪怕只是console.log('hello')，也得听它念出来。这不是仪式感，是止损点。你永远不知道哪一行会成为漏网之鱼——比如上周，我们修复了一个SVG图标title未翻译的问题，结果发现它父容器用了transform: scale(0.95)，NVDA直接跳过整个group。这种bug，文档里不会写，测试用例不会覆盖，只有人在深夜戴着耳机，一边喝冷掉的美式，一边等语音引擎把“放大镜”念成“放…大…镜…”，才会听见它裂开的第一道缝。

　　空调嗡的一声，忽然停了。整个工区暗了两秒，应急灯亮起微黄光。我合上笔记本。明天上午九点，得把这份无障碍自检表交给人力——不是技术文档，是新版入职考核项。第十三条：能独立修复至少一处WCAG 2.1 AA级失效项，不依赖工具自动建议。我还没填完。现在先去把茶水间那张浸咖啡的纸，抽出来烧了。

（编辑：站长网）

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