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

　　去年国庆节，我盯着编辑后台的预览窗，眼看着一篇国庆特稿封面图在读屏软件里念出“图片”，然后就没了——连替代文字都没挂上，更别说焦点顺序乱成毛线团。我原以为只是alt属性漏填，结果发现是CSS里的display: none硬生生把整个标题栏从可访问树里摘了出去，连带着里面那个带aria-label的按钮也成了幽灵。

　　同事小杨在隔壁工位喊我：“你那儿键盘Tab能跳到‘阅读全文’吗？”我按了八次Tab键，光标卡死在第三张轮播图的导航点上，再往后全是空白。可那块区域明明写了visibility: hidden，没写display: none啊？我扒开开发者工具一看，原来轮播组件用了transform: translateX(-9999px)做隐藏，但读屏软件根本不理这个，只认渲染树里有没有节点——而这个transform压根没让节点消失，它只是把内容塞进屏幕外三公里远的虚空里。

文章配图，仅供参考

　　那天下午我改了七版焦点样式，最后一次加了@media (prefers-color-scheme: dark) { :focus { outline-color: #4fd1c5; } }，测试通过。但小杨突然指着手机说：“你看看这个。”他打开的是安卓端Chrome+TalkBack，同一个:focus样式，在那里根本不起作用——TalkBack根本无视outline，它只认:focus-visible，而且必须配着user-action触发。我原以为加了:focus-visible就能过，结果发现iOS VoiceOver又不认:focus-visible，它老老实实认:focus，但要求outline不能是none也不能是auto……

　　有次我试着用:focus { outline: none; box-shadow: 0 0 0 3px #007aff; }绕过去，结果备案审核时被驳回——不是因为样式，是因为那个box-shadow生成的伪元素被算进了可访问节点数，超了平台规定的每页可访问节点上限。我翻记录，第九次提交才过审，前八次全栽在不同浏览器对:focus的不同解读上。反正最后上线那天，首页Banner的跳转按钮在iOS上能被聚焦、在安卓上要双击才响应、在桌面端Tab五次才能碰到——但它通过了所有自动化检测。

　　办公室空调坏了两周，维修单贴在茶水间门上，第七天我才发现那张纸右下角印着一行小字：“无障碍适配已由第三方检测机构确认符合GB/T 37668-2019”。我拿手机扫了下，二维码跳转到一份PDF，第十二页写着“本次检测未覆盖VoiceOver与Android TalkBack并行场景”。我也不知道他们怎么测的，但检测报告盖着红章，首页banner的跳转按钮在iOS上依然得连按两下才说话。

　　后来我悄悄把轮播图的nav按钮z-index调高了三层，不是为视觉，是为让TalkBack优先读它——结果首页SEO掉了半格，收录时间推迟了一天。运营跑来问：“为啥昨天发的稿子今天才被百度抓？”我说：“可能因为焦点顺序改了，爬虫误判成页面结构异常。”她点点头走了，没再追问。但我知道不是这个原因，是那行z-index让某个监测脚本判定DOM树深度突变，直接暂停了爬取二十来分钟。

　　现在每次上线前我都先关掉显示器，纯靠键盘和读屏过一遍。但上周四，测试到评论区折叠按钮时，VoiceOver念完“展开评论（按钮）”，停顿两秒，突然开始朗读后台API返回的错误提示：“ERR_NAME_NOT_RESOLVED”——这玩意儿根本没在DOM里出现过，是fetch失败后console.error里的字符串。我不知道它是怎么捞到这句的，可能V8引擎的error对象被挂到了window上，又被读屏扫进了上下文？

　　有谁碰到过这个吗

（编辑：航空爱好网）

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