媒体网站无障碍设计：9个技术盲区

　　告警响的那一刻，我正把泡面桶从键盘旁边挪开——汤汁滴到U盘上了，U盘插在左下角那个常年积灰的USB口里，没拔。不是不想拔，是手抖得怕碰歪键帽。红灯闪第三下时我瞟了眼屏幕右下角，Windows时间显示凌晨三点半，主屏还开着十二个标签页：三个监控大盘、一个未关的Git diff、两个Chrome开发者工具（一个卡在Console报错，另一个停在Network里半截XHR请求）、还有五个知乎页面全息缩略图——其中一个是“媒体网站无障碍合规被罚案例汇总”，打开十分钟没动过。

　　开发老张电话进来时我在敲curl，试第十七次GET那个叫/a11y-skip-link的路由，返回404。他吼：“是不是你删了Nginx alias？上回说要清历史静态资源！”我说“没动alias”，顺手切窗口看了眼Ansible日志，结果发现那行红字根本不是我跑的——是运维小陈昨儿半夜自动部署脚本带的，注释里写着“修复SEO跳转”，但脚本末尾多了一行rm -rf /usr/share/nginx/html/skip，skip后面没加空格，也没加引号。我原以为是误删静态文件，结果查完才知道：skip-link不是文件，是前端用JS动态注入的DOM节点，而那段JS被Webpack打包进vendor.js里，vendor.js又因为CSP策略里缺了'unsafe-eval'白名单，在Firefox和某些读屏器环境直接报SyntaxError——连执行都执行不了。根因没查清，现在连CSP是哪个CDN节点注入的都懒得翻。

文章配图，仅供参考

　　机房很冷。穿秋衣秋裤来的，站那儿盯着三台机器的负载图，像看三根垂死的脉搏。同事老赵叼着牙签过来问“轮播图焦点陷阱有没有绕过？”，我指着监控页面说“有，按Tab能进，但按Shift+Tab出不来，因为nextSibling被Vue的v-if干掉了”。他“哦”一声就走了，十分钟后发微信：“刚才问了UI，说设计师没做焦点流设计。”我回：“她上次做的无障碍色标，色差比值是2.8：1，WCAG AA标准要4.5：1。”他回了个捂脸表情包，再没说话。

　　其实真不是技术难。九个盲区里七个我都能一条命令修掉：alt文本批量补、aria-hidden漏设、表单label没for绑定、video没字幕轨道、跳转链接没语义化、焦点顺序被CSS order打乱、键盘操作没监听keyup。但剩下两个——语音交互适配和认知障碍支持——压根没法靠shell搞定。有个编辑后台的富文本框，读屏软件一进去就崩溃，连JAWS都报“unhandled accessibility tree invalidation”。我们改了三版WAI-ARIA role，最后发现是React的Strict Mode下useEffect执行两次，触发了两次ref挂载，Accessibility API直接懵了。这事到现在没修，因为开发说“等Q3重构Editor组件”。反正十一前一周上线的，赶在长假前封版，代码库里还留着一句注释：// TODO: a11y focus loop — 作者署名是我去年带的实习生，早离职了。

　　窗外天快亮了。灰蓝泛白的那种，云底下压着一线薄光。我突然想起老婆昨天微信问“十一回不回老家”，我说“不一定，可能值班”，她回“那我把饺子馅剁好了放冷冻，你回来自己煮”。我没回。现在看着终端里反复滚动的curl -I响应头，Cache-Control: no-store, must-revalidate，心说这玩意儿跟我们家冰箱冷冻层一样，东西堆久了就结霜，解冻时水漫金山，谁也分不清哪块肉是新买的哪块是去年剩的。

　　我骂过测试组。真骂了。上周他们提测邮件里写“无障碍测试通过率92%”，附截图是NVDA读出“欢迎来到新闻首页”，声音流畅、停顿合理。但没人试过用VoiceOver配合Switch Control点三次开关进入视频播放器——那个播放器用模拟按钮，iOS会把它当成可编辑区域播报“double-tap to edit”，结果用户双击之后光标卡死，连Home键都退不出去。测试组说“苹果官方没要求必须支持Switch Control”，我说“那是苹果的事，不是我们推脱的理由”，说完就关了邮件客户端。其实我也知道，生产环境里七成流量来自安卓+微信WebView，微信根本不认aria-modal，你写了等于贴创可贴治骨折。

　　这事站得住的地方，确实是优胜劣汰。不是政策淘汰谁，是用户用脚投票淘汰你。十一那天下午四点，我们监测到搜索关键词“XX网听不见”陡增，来源全是老年大学论坛和视障社群微信群。当晚凌晨，一位退休教授留言说：“你们的‘要闻摘要’音频按钮，点了没反应，但我用TalkBack长按识别，发现它是button元素却没设置onclick——它只绑了click事件，而TalkBack默认触发的是onActivate。”我当场grep了整个前端仓库，find . -name ".js" | xargs grep "document.getElementById.button" | grep -v onclick，揪出来二十三处。改是能改，可改完谁敢上线？CDN缓存刷一遍要二十分钟，回滚呢？回滚脚本上个月迁移时删了，说是“手动回滚更可控”，我信了。

　　火大归火大，但这事本来能避免。上个月开发晨会我说“下个迭代把a11y audit塞进CI”，老大点头说“好，下周排期”。结果第二天运营拉会讲“双十一弹窗AB测试”，排期表上a11y audit变成“暂缓”，后面跟着括号备注：（依赖法务确认文案合规）。法务那边？他们上周还在为“弹窗关闭按钮是否需标注‘关闭广告’”扯皮。我认了。反正硬盘里还有去年备份的Lighthouse报告，HTML压缩包里躺着十六个失败项，其中第十一条就是“缺失controls属性且无文字替代”，标题叫：【高危】无法播放即无法获取信息——写得挺狠，可压缩包密码是“2023q3”，我早就忘了。

（编辑：站长网）

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