媒体网站无障碍设计：9个UI测试工程师常忽略的关键点

　　去年九月，灰度推完俩小时，设计跑来说“读屏软件念错标题”，我盯着控制台里一堆 aria-label 嵌套 aria-labelledby 念得跟绕口令似的，手在键盘上悬了三秒——不是不会修，是压根没测过这玩意儿。编译进度条卡在 78% 那会儿，后端老张甩来截图：“用户反馈‘点不了’”，截图里他手指戳着触控板边缘，屏幕放大到 200%，页面右侧直接切掉半个导航栏。

　　第一个坑：媒体站的“跳转锚点”根本不是锚点。我们写了 跳到视频，但读屏一念就是“跳到视频，链接”，它根本不管后头有没有 video 标签。我原以为加个 id=video 就完事，结果测试用 NVDA 一扫，它把整个 div 里的字幕文本全塞进“跳到视频”里当附加说明念……念了十七秒。设计坐我旁边看，手里咖啡凉透，说“那咱改文案？”我说“改啥文案？这是 DOM 结构问题。”她点头，然后掏出手机刷小红书去了。

　　第二个坑：图片懒加载和 alt 的时序崩了。图还没 load 出来，读屏先念“图片，无描述”，等图下来了 alt 才补上——但读屏早翻篇了。你猜怎么着？我试了三版，发现 Chrome 自带的 lazy loading 和 IntersectionObserver 触发时机差 300ms 左右，而 VoiceOver 恰好在这 300ms 窗口里完成本轮遍历。窗外在下雨，雨点砸玻璃的声音像在敲键盘，我就蹲那儿重放 DevTools 录制，盯了四十七次，确认不是代码写错，是浏览器行为……认了。

　　第三个坑：播放器进度条。咱们埋点打得贼准，click、hover、seek、drag-end 全覆盖，但无障碍测试员一上手就卡住——进度条没 role=slider，没 aria-valuenow，没 aria-valuemin/max，连 tabindex 都没设。后端看了眼 PR 评论说：“这东西又不传参，加这干啥？”我说：“它得能被 tab 到，还得能按方向键调，还得让用户知道当前 32%。”他回了个 ????‍♂️ 表情包，群聊里立刻有人发“火锅底料已下单”的图。

　　第四个坑：字幕开关按钮藏在三级菜单下。图标是个喇叭，底下没文字，颜色对比度 3.2:1——够 WCAG AA 了？够。但它在深灰背景上，iOS 的 Smart Invert 一开，喇叭图标直接消失。那天下午产品冲进来拍我桌子：“为什么字幕功能找不到？”我说：“你上次评审说‘要极简’，我们就砍了文字标签。”她愣住，然后掏出平板打开色盲模拟插件，自己试了两分钟，默默关掉 Safari 关掉电脑，走了。我盯着她椅子空出来的弧度看了五秒，才想起外卖到了，塑料袋搁在工位隔板上，油印了一小片暗黄。

　　第五个坑：直播流切换清晰度时，下拉框用了 div + ul + li 模拟 select，aria-expanded 写了，aria-controls 也写了……但漏了 aria-activedescendant。NVDA 不进选项列表，直接跳到下一个 focusable 元素。我 debug 到凌晨四点，最后发现是某次 webpack 构建把自定义 hook 里 setAriaActiveDescendant 的逻辑优化掉了——它没报错，只静静删了。烦。

　　第六个坑：新闻正文里的引用块。设计师给 quote 画了个倾斜边框，CSS 是 transform: skewX(-5deg)，字体大小设成 0.9em，行高 1.6。无障碍测试时，JAWS 直接把整段 quote 当成乱码跳过。不是因为语义缺失，是因为它读取 computed style 发现 text-rendering: optimizeLegibility 开启时，skew 变形会让字体光栅化出毛边，底层引擎自动屏蔽……我查 MDN 查了俩小时，最后删了那行 transform。旁边的风扇声忽然停了，整个工区静得吓人。

　　第七个坑：搜索建议下拉的 aria-live 区域，我们设的是 polite，但用户输入“冬奥”，建议弹出“北京冬奥会高清回放（4K）”，读屏念“北京冬奥会高清回放，括号四K”，念完立刻又来一条“冬奥闭幕式全场起立（含手语翻译）”。两个提示堆一起，前一个没听完后一个就抢麦——不是体验问题，是 aria-live 区域没加 clear logic。我试过改 assertive，结果用户输个字母，语音炸锅。后来发现 Chrome 的 Speech Synthesis API 对连续触发有熔断机制，但 Firefox 没……算了，随缘。

　　第八个坑：视频暂停按钮的 icon-font。用 Unicode 字符 U+E02C，font-family 设的 iconfont。读屏不认字符语义，也不读伪元素 content；更骚的是，有些安卓机连这个字都不渲染，按钮变空心方块。我原以为替换成 SVG 就万无一失，结果 SVG 里 path 没 title，没 desc，照样是“图形，无描述”。最后还是换回 button+span+中文“暂停”，样式重写三版。招人面试时有个应届生问我：“SVG 不是更现代吗？”我没回答，看他简历上写着“熟悉 Figma 插件开发”，就点了下通过。

文章配图，仅供参考

　　其实这些事，去年十一月就该补，但中间插了两次大促保稳，一次白屏事故排查，还有我休了十天病假。回来打开周报，发现“无障碍”那一栏还写着“Q4 推进”，后面跟着仨点。我不打算推了。下周一提个 PR，把播放器焦点链、图片懒加载时机、字幕开关三个点先硬刚过去。别的？等哪天灰度不炸，产品不改需求，设计没提新动效，我再碰。反正优胜劣汰嘛——不是人被淘汰，是那个没加 aria-current 的分页导航，早晚会被用户亲手划掉。

（编辑：我爱资讯网）

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