媒体网站无障碍设计：9个运维工程师忽视的关键适配点

　　去年八月，选题会上那支蓝黑中性笔横在会议桌左上角，没动过。总编把iPad翻到第十七页无障碍自查表时，我正盯着它——笔帽歪着，漏出半截笔芯，像根卡住的探针。他念“焦点顺序应符合视觉流”，我点头，心里想的是CDN缓存头里那个忘删的X-Frame-Options: DENY。这玩意儿和屏幕阅读器根本没仇，但它让iframe里的字幕组件直接失能。没人提。没人问“字幕弹窗被挡掉算不算阻断信息通道”。

文章配图，仅供参考

　　隔壁桌咖啡洒了。深褐色的液面漫过键盘右下角，洇进USB-C接口缝里。小编低头擦，袖口沾上一点，没抬头。我就突然想起年初那个A/B测试：把图片alt文本从“配图”改成“主播王磊在演播室手持麦克风，背景有蓝色调光板”，打开率没变，但残障用户停留时长多出十八分钟。数据埋点早做了，报表也发了——但谁点开过“accessibility_events”那个分表？连路径都没人加进grafana dashboard。我们监控502比监控aria-live还勤快。

　　再说视频播放器。去年十月，我们切了新CDN，把所有m3u8分片加了AES-128加密。加密本身没问题。问题是key server返回的Content-Type是text/plain，而某些旧版NVDA（就是那个2021年发布的v2021.2）会因为它不认text/plain为合法密钥响应，直接跳过解密流程，喂给播放器一个全黑帧。用户听见声音，看不见画面。我们查了三天404日志，直到作者在钉钉群里发截图：语音助手念“正在加载…正在加载…正在加载…”循环了三百七十二稿，最后崩出“无法定位视频轨道”。我们才发现，是那个被当成垃圾header删掉的Content-Type: application/octet-stream。现在想起来手抖——这种东西，不该在预发环境做header diff吗？

　　总编手机响了一声。铃声是微信默认音，短促，刺耳。他摸出来扫了一眼，锁屏，推回去。我没看清谁发的，但知道肯定不是运营部——他们群消息从来不用@全体。可就是那一声，让我记起另一个坑：媒体网站常挂第三方评论插件，那些JS加载时会偷偷注入自己的焦点管理逻辑。我们的SPA路由切换后，正常情况下document.activeElement该是，但插件硬把焦点塞进它的input#comment-text里——而那个input压根没设label，aria-label还是空字符串。屏幕阅读器一进页面就喊“编辑框”，没上下文，没说明，没用途。我查过三次source map，最后一次发现它连webpack chunk name都混淆成_7c1f0d，根本不敢碰。所以我们就……没动。等下次大重构吧。这个我说不准。

　　还有那个“无障碍开关”。藏在页脚第七个图标按钮里，图标是轮椅剪影。我们测过，点开真能切换高对比度样式——前提是你的浏览器没开Windows的强制颜色模式。一旦开了，CSS的@media (forced-colors: active) 会被覆盖，我们的class toggle直接哑火。而国内媒体站里，用Win系统+开启高对比模式的视障用户比例，我查不到真实数据。但我知道，上个月技术中台发的《2023 Q3无障碍问题TOP5》里，这条排第四，备注写着“暂无通用兼容方案，建议降级为提示文案”。我们点了确认。然后继续发版本。顺带说，我上个月KPI里有一条叫“保障首页可用性SLA≥99.95%”，写报告时我把“可用性”定义为“HTTP 200且首屏可交互”，括号里没提“对AT可访问”。这不算造假吧？

　　外卖凉了。铝箔盒盖子掀开，米饭结出一层膜，西兰花梗泛黄。没人吃。总编夹了一筷子，又放下筷子，去够桌上那杯已经冷透的美式。我盯着他左手无名指上那道浅疤——去年修IDC机柜时被扎的，到现在还没完全消。忽然觉得，我们天天搞灰度发布、滚动回滚、自动扩缩容，可最该滚动验证的，是每次DOM树变更后，aria-hidden="true"有没有误吞掉本该朗读的段落摘要；是每次资源压缩后，SVG的和标签还在不在base64里；是每次WAF规则更新，会不会把aria-expanded="false"当成XSS特征给干掉。这些事没有仪表盘，不报错，不告警，只是悄悄把一个人堵在信息门外。门没锁，钥匙在你手里，你却当它从来没存在过。

　　下次选题会我打算闭嘴。就坐那儿，看那支笔。如果它还歪着，我就把它扶正。如果总编再翻到第十七页，我就递过去一张便签，上面写：“请让前端把audio标签的controlsList='nodownload'删了——它会让VoiceOver跳过整个播放控件。”别的，不说。反正这篇可能活不过三小时。

（编辑：站长网）

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