别让视障用户绕过你的网站：无障碍建站运维避坑指南

　　接口超时告警那一刻，我正蹲在茶水间扒拉微波炉里那盒冷透的咖喱饭——叮一声响，手机震得我手抖，饭盒盖弹开，米粒蹦到咖啡机残骸上。那台咖啡机去年十月就坏了，漏电，插头胶皮卷边，没人修，反正也没人喝。现在它就杵在那儿嗡嗡响，像台老式路由器，自己给自己散热。

　　你猜谁先冲进监控室？小陈，后端组那个穿洞洞鞋的，手里还捏着半截没拆封的蛋白棒，鞋带散着。他拍着屏幕喊“缓存击穿！肯定又是首页推荐位那张图的兜底逻辑”，结果切日志一看——全是在刷 aria-label 为空的按钮。不是慢查询，是整个 screen reader 用户根本卡在登录页第三步。去年4月的事，我原以为是前端配错 focus order，结果查到 DB 里，字段名是 user_input_hint，但 value 存的是“点我看看”，连空格都没过滤，aria-describedby 指向的 ID 在 SSR 那轮根本没生成。

　　你改过线上字段就懂：字段一动，下游三处报错，两处默默吞异常，一处直接把 error message 当提示语吐给盲文阅读器。我们那个搜索框的 placeholder，写着“搜点啥？（试试‘iPhone’）”，结果读屏软件把它念成“搜点啥？括号试试单引号iPhone单引号括号”，再念一遍。不是 bug，是它真这么读的。而我们上线前压根没让测试走一遍语音导航流程——连语音朗读都开了，就为赶五一活动，灰度切了70%，没人记得关掉那个“跳过无障碍校验”的 feature flag。

　　工位隔断上贴的便签卷了边，是我写的“别动 footer nav 的 ul 嵌套”，底下用红笔补了句“李工说要保旧结构”，落款日期模糊，油墨晕开。李工去年四月提的 PR，merge 时加了个注释：“兼容性优先”，没写兼容谁。我后来翻 commit，发现他把原本的 role="navigation" 全删了，换成 div + CSS Grid，理由是“布局更灵活”。他不知道 flex 和 grid 在某些 AT（辅助技术）里不触发语义树重建。也不知道 screen reader 跟着 tabindex 流动时，卡在那个没设 tabindex="-1" 的 loading spinner 上，停了整整四秒才往下跳——因为 spinner 是用 visibility: hidden 藏的，不是 display: none。后者能被读屏跳过，前者不能。

　　外卖筷子掉在地上时，我在看一份 Jira 单，标题叫“用户反馈：读屏时页面突然静音”。点了进去，附件是条 12 秒语音录屏，背景有地铁报站声。声音是从一个按钮开始的：“提交订单……提交订单……提交订单……”，无限循环。我们后来查出来，是因为那个按钮在异步失败后，状态没回滚，aria-busy 还是 true，但视觉层早已灰掉。AT 认为它还在忙，死等。而开发改完代码只跑了 Cypress，没跑 axe-core。我说要不要加个 timeout，产品经理在隔壁工位打电话谈房租，声儿特大，说什么“押金不可能退一半”……我就没再说下去。

　　优胜劣汰这事儿吧，真不靠发版节奏。你见过哪个大厂把 WCAG 2.1 AA 级认证当发版拦截项？没有。但你见过他们下线一个日活三万的旧频道，只因为审计报告里写了三十七条「无法通过键盘操作完成支付闭环」。没报警，没雪崩，就 quietly redirect 到新域名，连埋点都懒得迁。老系统时间线越长，越容易出那种 bug：表结构改过七次，每次迁移脚本都 patch 了一部分 accesskey 字段，但没人管过那张配置表里早该弃用的 legacy_a11y_mode 字段，值还是 "on"，开关却早没了。它还在那儿，像个幽灵 toggle，每次发版都随缘生效。

　　我原以为只要把所有 button 加上 aria-label 就算完事，结果上线三天，视障用户投诉翻倍——因为我们在 loading 态把整个表单区域 disabled 了，但 screen reader 不认 fieldset 的 disabled 属性，照常读标签，可输入焦点又进不去。用户听着“收货地址（必填）”，伸手敲 tab，卡住。键盘党比鼠标党更早发现我们忘了重置 tabIndex。而我们运维那晚在回滚，回的不是功能，是那行把 套进 里、导致 VoiceOver 把 label 文本重复两遍的改法。对，就那一行。

文章配图，仅供参考

　　监控大盘上那条绿色的线一直在抖。不是 QPS 抖，是那个自研的无障碍巡检服务的可用率曲线。它每小时扫一次 DOM，但每次扫到 modal 背景层时，都会把 backdrop 的 z-index 误判为 -1，然后报“覆盖层级异常”。我们已经屏蔽这个告警两周了，因为修复得动到全局 CSS 变量，而变量定义文件 last modified 是 2019 年。谁改谁背锅。所以我现在看告警，第一眼先找是不是它在抖。别的，先放着。

　　下一步？我不知道。但我明天得去趟行政领新咖啡机滤芯——旧的早没了，新申请单上，审批人栏还是空的。估计得等下次全员无障碍培训之后才批。培训定在下个月。我报名了，带笔记本，封面印着“WCAG 速查备忘”。里面第一页空白，第二页画了个歪歪扭扭的 keyboard-only flow 图，第三页粘着张从旧白板上撕下来的残片，字迹潦草：“别让视障用户绕过你的网站”。

（编辑：站长网）

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