视障友好架构指南：20年经验避坑实战

　　去年暑假，我蹲在杭州西溪园区B3机房的冷凝水管正下方——那根管子隔三差五滴水，滴在防静电地板缝里，滋啦一声像烧红的铁钎蘸了水。我正对着一台刚上架的WAF集群做无障碍访问链路压测，耳机里放着NVDA读屏声，左手捏着个凉透的葱油饼，右手悬在键盘上没敲下去。小王从后面绕过来，把半杯美式搁我显示器右下角，咖啡渍在金属边框上洇开一圈黄边。他刚说“邵工你看这focus管理”，机柜顶上的蜂鸣器就响了第三声，短促、偏高频，和去年双十一凌晨三点二十七分那个告警一模一样。

文章配图，仅供参考

　　我原以为加个aria-live="polite"就完事了。结果真让视障同事用JAWS跑了一遍采购下单流，直接卡在支付页的“微信扫码”按钮上——那个按钮是SVG+伪元素叠出来的，role=button但tabindex=-1还被JS劫持了click事件。开发说“反正鼠标能点”。我说那你把鼠标塞进盲文点显器里点一个我看看？老张当时在隔壁工位拆硬盘，螺丝刀拧到一半停住，抬头说：“你们这算什么‘友好’，这是‘假装友好’。”他说完就继续拧，咔哒，硬盘托架松了。

　　WAF误拦真用户这事我见得太多。上季度末我们把token校验逻辑从API网关前移到CDN层，理由是“降低后端压力”。结果盲人用户用TalkBack刷商品详情页，每次滚动到底部触发懒加载，CDN就判定为异常请求模式——因为HTTP头里User-Agent带了“Mobile”但Accept-Language又写了“zh-CN;q=0.9, zh;q=0.8”，而我们规则库里恰好有条“非浏览器UA+语言权重不匹配→429”。客服电话打爆那天，我正蹲在食堂窗口排队打紫菜蛋花汤，听见背后俩实习生聊：“是不是该加个user-agent白名单？”我没回头，舀汤的手抖了一下，蛋花全沉底了。

　　优胜劣汰不是玄学。是活下来的架构，都熬过了三轮真实场景暴击：第一轮是合规审计查WCAG 2.1 AA；第二轮是盲协志愿者突击测试，他们不告诉你哪里不对，就问“这一步我要怎么知道它成功了”；第三轮最狠——内部残联小组提了个需求：必须支持NVDA + IE11 + Windows7 SP1组合，因某个政务合作方的终端就是这配置。我们试过用polyfill模拟role，也试过动态注入focus-trap，最后是运维老陈半夜改nginx配置，在header里强行塞了X-UA-Compatible: IE=Edge……可IE11根本认不出aria-pressed，最后妥协成：所有开关控件，强制渲染两个DOM节点，一个visible-only给屏幕阅读器听，一个visually-hidden给正常用户看。这不是设计，是跪着砌墙。

　　说到砌墙——前两天去深圳参加信安标委闭门会，会议室空调开太低，我外套搭在椅背上，袖口蹭到桌上半包没拆的山楂片，碎渣掉进笔记本散热孔。有个新来的合规顾问举手问：“邵工，你们怎么保证第三方SDK也满足AA？”我咬开一颗山楂片，酸得腮帮子发紧，说：“我们不保证。我们只干一件事：把所有第三方脚本的执行时机，卡死在document.readyState == 'interactive'之后，且强制加上sandbox="allow-scripts allow-same-origin"——连iframe都加。至于它自己有没有写aria-label？让它去死。”台下有人笑，笑声还没落，会议室灯闪了一下，黑了十八秒。应急灯亮起时，我看见投影幕布右下角贴着张便签，字是蓝墨水写的：“请勿拔插HDMI线——已坏三条”。

　　最荒唐的是表单验证。我们写了整整七页文档教前端怎么处理error message的语义关联：aria-describedby要绑定到input，message本身要role=status且live="assertive"，还得监听input的input事件而非blur——因为盲人不会“失焦”，他们靠方向键移动。结果上线三天，客服收到十七起投诉，说“输入手机号后没提示，等了十秒才突然说话，吓一跳”。查日志发现，是读屏软件把status区域里的文字缓存了——只要上一条消息没读完，新消息就排队。我们连夜把aria-live改成off，改用js动态替换textContent，再用setTimeout强制触发一次focusout再focusin……操。后来才知道，iOS VoiceOver默认禁用live region，除非用户手动打开“语音反馈”开关。这玩意儿藏在辅助功能菜单第七层。没人会翻。包括我们自己。

　　上周五，产品总监把我拉进会议室，说要搞“无障碍体验升级月”。PPT第一页写着：“打造行业无障碍标杆”。我盯着那几个字看了四十二秒，窗外雨开始下，很大，打在玻璃上像撒了一把黄豆。我忽然想起三年前在合肥，也是这种暴雨天，一个视障工程师远程接入我们的内网测试环境，连不上。排查两小时，发现是他本地VPN客户端用了自定义证书校验，而我们WAF在TLS握手阶段就把OCSP stapling响应掐了——因为配置里写了“忽略OCSP响应状态”。我就坐在那儿，听着他用读屏软件反复读“无法建立安全连接”，一遍，两遍，三遍。最后他笑了笑：“没事，我换手机热点。”然后挂了。我盯着屏幕上残留的SSH会话ID，没关，就让它挂着，绿光一跳一跳的。

　　所以现在？我不碰标准文档。我只干三件事：第一，每季度抽三天，关掉显示器，纯用键盘+NVDA走一遍主流程；第二，逼所有前端在MR里贴两张图——一张Chrome DevTools的Accessibility面板截图，一张实际NVDA朗读的语音波形（用Audacity录）；第三，留一个后门接口，/api/debug/aria-status，返回当前页面所有focusable元素的role、name、state三元组快照——运维监控直接接这个，告警阈值设成“缺失aria-label的button超过两个”。至于“标杆”？让标杆自己立去吧。我现在只管一件事：别让下一个下雨天，还有人对着黑屏听“无法建立安全连接”。

（编辑：站长网）

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