媒体网站无障碍设计：9个元数据工程师最易忽视的技术适配点

　　去年8月份搞无障碍适配，产品经理拍着桌子说"就这么点东西，两周搞定"，结果被测试组按在地上摩擦了三个月——元数据这块的坑，比我们想象中深多了。最离谱的是，有次地铁上掏手机复现问题，旁边大妈盯着我屏幕看了半天，问"小伙子你这网站是不是坏了？怎么光有字没图啊？" 我原以为只是图片alt文本没写全，结果发现是ARIA标签嵌套三层直接把屏幕阅读器干懵了。

　　第一个坑：动态内容更新通知。我们用某个小版本的React，组件更新时没给aria-live设"polite"，结果视障用户听到的全是"内容已更新"的机械音轰炸——测试机在桌上排成一排，每台都跟得了帕金森似的狂念。后来发现是元数据里漏了role="alert"的兼容判断，某些旧版NVDA直接忽略aria-live属性。

　　第二个更阴间：表格跨行跨列的aria-labelledby。UI走查时测试员突然沉默，盯着屏幕半天说"这表读起来像绕口令"。原来是我们把表头ID写死在模板里，结果动态加载数据时ID重复，屏幕阅读器把北京上海广州三个城市的天气，硬生生念成了"北京北京北京温度湿度风速"。最绝的是外卖凉了都没人发现——测试员戴着耳机听了一下午bug，午饭外卖在工位上放了三小时。

　　第三个坑我敢打包票：多媒体控件的元数据冗余。我们给视频加了track标签，又塞了WebVTT字幕文件，还在meta里写了description——结果Chrome直接叠加三套字幕，屏幕阅读器念完视频描述又念字幕文本，最后还把WebVTT的时间轴标签当台词读出来。有次直播测试，主播说"现在插播一条广告"，屏幕阅读器抢着喊"00:00:03.500 --> 00:00:06.000 广告开始"——直播间当场笑场。

　　说到直播，第四个坑是实时字幕的元数据同步。我们用WebSocket推字幕数据，结果前端把时间戳存在data-timestamp里，测试组用JAWS读的时候，时间戳被当成普通文本念出来："当前字幕：大家好，时间戳：十六点三十分"。后来发现是元数据存储位置错了，应该塞进aria-describedby引用的元素里，结果改完又把旧版Firefox的ARIA支持给干崩了。

　　第五个坑特别反常识：隐藏内容的元数据泄露。我们用aria-hidden="true"藏了导航栏，结果测试员用VoiceOver扫页面时，突然念出一串"首页、分类、我的"——原来是有段CSS动画把hidden属性给覆盖了，元数据虽然藏了但DOM结构还在。最搞笑的是产品经理路过说"这无障碍适配挺有意思啊"，结果屏幕阅读器把他随口说的"有意思"也当页面内容念出来了。

　　第六个坑我到现在都没搞明白：SVG图标的元数据穿透。我们给图标加了title标签，结果屏幕阅读器把父元素的aria-label和图标的title一起念，比如"搜索按钮，放大镜图标"。后来发现是SVG的xmlns属性没写全，某些浏览器把title当成了独立元素处理。测试员吐槽说："这比听相声报菜名还热闹。"

文章配图，仅供参考

　　第八个坑是自定义控件的元数据映射。我们用div模拟按钮，加了role="button"和tabindex="0"，结果测试员用Switch Access扫描时，按钮根本没法聚焦——原来是我们漏了keyboard事件的重写，元数据声明了可交互但实际没响应。后来发现是某个小版本的Chrome对role的解析变了，得额外加一层事件委托。

　　最后一个坑最绝：多语言页面的元数据编码。我们用lang="zh-CN"声明中文，结果日文用户访问时，屏幕阅读器把中文标点念成了日文发音——比如"？"被念成"はてなマーク"。后来发现是元数据里没声明字符集，浏览器自动用了系统语言解析。测试员说："这比听机器翻译念诗还诡异。"

　　现在回头看，这些坑有个共同点：都藏在元数据的"边角料"里——不是主流程的alt文本，不是核心的aria-label，而是那些"应该没问题"的兼容处理、"反正没人用"的旧浏览器支持、"下次优化再说"的边缘场景。但无障碍适配就是这么残酷：优胜劣汰，漏一个细节就能让整个页面对部分用户完全不可用。我现在见着产品经理就说："别问多久能做完，先问哪个细节会翻车。"

　　对了，上周测试组又报了个新坑：Web Components的Shadow DOM把ARIA属性给隔离了，屏幕阅读器根本读不到内部元素——这坑我暂时还没找到解法，有同行碰过的话，欢迎来内网论坛吐槽。

（编辑：站长网）

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