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

　　2026年8月，我蹲在客户机房改一个表单提交的 aria-live 区域——不是因为需求写了，是他们上个月上线后，视障同事反馈“提交成功弹窗像幽灵，听得到但抓不住焦点”。我盯着那段用 display:none 临时藏起又用 JS 切回来的 toast，手在键盘上悬了十八秒。窗外在下雨，雨点砸在玻璃上是闷的，像没调好频的对讲机杂音。

　　旁边运维老张接了个电话，说“哎呀这个我真不归我管”，挂了就把保温杯盖子拧紧，咔一声，特别清脆。我顺手点了外卖——酸辣粉，加蛋不要香菜。那会儿我原以为只要补个 role="alert"、tabindex="-1" 再 focus 进去就完事了。结果测到第三台读屏机（NVDA 2026.2），它压根不理我的 tabindex，非说“当前区域不可聚焦”，而 JAWS 在同一个 DOM 节点上反复念“按钮，未启用”，明明它已经 click 了。我敢打包票：这个 tabindex="-1" 是它妈生的，但不是它爸教的——父级 div 的 pointer-events:none 让整个事件流断在半路，连 keydown 都没进得来。

　　那个穿蓝衬衫的测试员小陈，右手无名指一直无意识地敲桌面，嗒、嗒、嗒。他不用读屏，他是色觉障碍，靠的是高对比模式+自定义 CSS。我们俩对着同一段“已选中 3 项”的 status badge 拉锯了四十七分钟。我改了七版 contrast-ratio；他最后说：“你把 background-color 改成 #4a1e7c，字体 weight 加到 700，再加个 text-shadow: 0 0 2px #000 —— 我能看见了。”我说好，刚敲完回车，他手机响了，是女儿发语音：“爸爸，老师说我画的太阳是紫色的。”他笑着按掉，没解释，也没看我。

　　优胜劣汰？呵。不是淘汰残障用户——是淘汰那种写完 就去喝咖啡的 API 工程师。淘汰写 fetch 时连 abortController 都懒得配、更别说 error-boundary fallback 的人。淘汰把 accessibility 当成 QA 最后一道卡口、而非第一行 useState 初始化里就要塞进去的人。我们当年做支付网关，有个字段叫 “cardholderName”——名字后面自动跟个 span aria-label="请用与身份证一致的汉字填写"，结果前端把它干掉了，理由是“UI 不要 label 叠加层”。我说那换 title 属性？对方回复：“title 太丑。” 我当时就想把那句“太丑”塞进他的 commit message 里当 description。

　　机房空调坏了，嗡嗡声比平时大，风扇转速忽高忽低。我摸出一包薄荷糖，剥糖纸声音太响，小陈抬头看了我一眼。桌上那碗酸辣粉浮着一层红油，蛋花沉在底下，像一块没融开的旧雪。你说尊重从第一行代码起？扯淡。尊重是从你敲第一个 function 关键字之前，先删掉自己 IDE 里那堆“auto-import on save”的插件开始的。不然你 import { useFocusRing } from '@react-aria/focus' 的时候，脑子里还在想“这玩意儿会不会拖慢首屏？”——那就已经输了。

　　上周碰见架构组的老李，在茶水间煮枸杞。他说他们准备上新协议，把所有 4xx 错误统一返回带 problemDetails 的 JSON Schema。我随口问：“里面有没有 required 元素说明字段含义和无障碍交互路径？”他愣了三秒，把枸杞倒进杯子，又倒出来，重洗了一遍。我没追问。这种问题问一次就够了。问多了显得我不信任人，问少了又怕他真以为“语义化错误码=无障碍兼容”。

　　所以现在我改规矩：新建项目脚手架里，eslint-config-airbnb 加了一条硬规则——禁止任何组件导出前没有配套的 useAccessibleProps hook。hook 里至少得有 aria-labelledby 或 aria-describedby 默认绑定逻辑，哪怕只是空串。不为别的，就为让 PR 合并前，新人被迫去看一眼 MDN 上 aria-live 的三个取值区别。至于效果？我说不准。可能三个月后又被某个“快速上线”需求给注释掉了。但至少有个人踩过那块地板，知道下面埋着线缆，而不是水泥。

文章配图，仅供参考

（编辑：站长网）

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