媒体网站无障碍设计：9个运维常忽略的技术适配点

　　我越来越觉得“媒体网站无障碍设计：9个运维常忽略的技术适配点”是错的。

文章配图，仅供参考

　　结果上线后第二天早上八点二十三分，盲人用户群炸了：首页“突发推送”栏每次弹新稿，NVDA直接卡死，键盘焦点钉死在header导航不动，连ESC都按不下去。我原以为只是属性写法不规范，结果抓包一看——整个页面用了三个独立的React微前端子应用，各自挂载自己的aria-live区域，而主框架的全局focus trap根本没拦截跨子应用的tab顺序。更绝的是，其中一个子应用用的是React 17的createPortal，另一个硬切到了18的concurrent rendering，两套渲染优先级打架，焦点管理器互相覆盖。原理我说不清，但我知道这跟“加个polite”毫无关系。

　　李工那天在监控台边啃冷包子，手抖着敲kill -9杀掉两个Node进程；张婷在后台删了三版预加载脚本，发现CDN edge node居然把role="alert"的响应体自动gzip压缩到400字节以下，导致部分AT解析时截断了DOM树深度；我自己蹲在机房柜子后面查nginx access日志，看见同一个IP每3.2秒发一次OPTIONS请求，全是来自JAWS读屏软件的试探性探测——可我们反爬规则里写了“高频OPTIONS拒接”。这事儿和九个适配点里任何一条都没血缘关系。我们修了三个月，最终不是改代码，是改WAF白名单、重写微前端通信桥接层、再手动给所有iframe塞title属性——哪怕它只显示“广告位_右下角”。现在那个title还挂在生产环境，注释写着“勿删，否则视障用户听不到这是广告”。

　　再说个更贱的细节：上周巡检，我发现静态资源CDN回源策略里有一条规则——当HTTP头带Accept: application/json且URL含/api/时，强制返回Content-Type: text/plain。为啥？因为2023年某个外包团队用curl压测时误触了这个头，后端JSON解析崩了三次，运维老赵连夜写的兜底。结果呢？VoiceOver在某些iOS版本里发起资源探测时，会偷偷带这个头。于是所有图片的alt文本加载失败，读屏软件念出一串“undefined”。没人知道，没人管，就挂那儿。这算第几个“适配点”？

　　还有——别跟我提CSS media query的prefers-reduced-motion。我们部署过，但CDN缓存KEY没包含Sec-CH-Prefers-Reduced-Motion这个Client Hints头，所以服务器永远只吐一份动效版CSS给所有人。用户开了系统级减少动画，网页照跳转、照轮播、照闪。这事我们直到审计方用MacBook Pro外接BrailleNote设备实测时才露馅。他们说：“你们缓存太‘懂事’，懂事到帮用户关掉了自己的辅助设置。”

　　我承认，我们确实漏过那九个点里的六个：表单缺少label for关联、视频字幕未用track内联而是靠JS插入、SVG图标没加aria-hidden="true"……但这些是毛细血管破口，真正要命的是整条循环系统早停摆了。就像有人天天检查汽车雨刷水壶是不是满的，却不知道刹车油三年没换，踩下去全是空气。我们总在补“怎么让读屏软件读懂”，从来没人问一句：“读屏软件凭什么必须靠我们喂？”

　　前天和某银行的架构师吃饭，他酒后指着手机说：“我们搞零信任网关的时候，连鼠标悬停事件都拆成原子权限。你们媒体站还在让JavaScript自作主张劫持Tab键？真是荒唐。”我没反驳。他喝的是二锅头，我喝的是枸杞茶，但他说得对。我们给每个按钮加role="button"，却允许一个懒加载库在首屏注入12KB的无名匿名函数，直接让ChromeVox的DOM遍历卡顿200ms——这玩意儿连webpack的chunk name都没有，更别说source map。运维日志里它叫“未知js#3421”，报警邮件标题是“疑似挖矿流量”，其实它就是个没打码的图片懒加载钩子。

　　还有件事挺滑稽：我们所有A/B测试页面都带一个埋点SDK，初始化时会主动获取window.screen宽高。而某些Linux桌面AT（比如Orca）启动时会临时把screen.availWidth设成1，用来触发降级渲染逻辑。结果SDK判定“小屏设备”，强行切进移动版模板——没有语义化标题层级，没有导航跳转锚点，全靠一堆堆出来。这bug藏了一年半，直到有用户投诉“点了三天返回键都回不去主页”。我们查了半天，发现根源是SDK初始化比AT接管DOM早了87毫秒。

　　这事我也可能就运气好。上次审计团带队的是个七十岁的老工程师，耳朵几近失聪，全靠读唇+振动反馈仪工作。他没测NVDA，也没碰ChromeVox，就拿一台Win10旧笔记本，插着最便宜的USB盲文显示器，从首页一路按Tab键摸过去。五分钟后，他指着我们的404页说：“这儿少了一个h1。不是视觉隐藏，是真没有。” 我们翻代码才发现——404页面用的是单独的Vue SFC组件，开发者忘了在setup里return出。它压根没进DOM。就这么简单。可我们之前所有自动化扫描工具都把它放过了，因为那些工具只校验“是否存在h1”，不校验“是否存在可聚焦且含文字内容的h1”。

（编辑：站长网）

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