Ruby老兵亲述：媒体网站无障碍设计9大盲区

文章配图，仅供参考

　　机房空调一直嗡嗡响，像台老拖拉机挂了三档空转。我盯着 DevTools 里那个红色叹号图标发愣，旁边弹出 Slack 提示：@zhangfan 已撤回消息。她三小时前发的是“轮播图自动播放已关”，撤回理由没写。其实根本没关。我把鼠标移到 autoplay 属性上，右键——编辑属性——删掉 `autoplay` 值，页面不动。再检查，发现是用 JS 动态 setAttribute 塞进去的，而那个脚本被 webpack 打包进了一个叫 `feature.legacy.js` 的 chunk 里，埋得比我们当年写的 Rails 2.3 应用还深。我喝了一口冷掉的咖啡，杯子底结了薄霜。

　　第四个盲区是搜索框。不是没 label，是 label 用了 ``，但实际 input 的 id 是 `search__input--v2-2023`。这个连字符+年份后缀是设计师提的需求，说“体现迭代感”。结果 VoiceOver 念“搜索横杠 v2 横杠二零二三”，念三遍，用户还在输“疫情”。更绝的是，搜索建议列表出来后，用方向键上下选中某条，回车——没提交，只聚焦在该条目上。原来 submit 按钮被 CSS opacity:0 后又 position:absolute 覆盖在建议列表下方三像素处，键盘焦点根本触不到。这 bug 我在 2008 年用 Prototype 写新闻聚合站时见过，当时叫“视觉陷阱”。十五年了，换汤不换药。

　　我桌上那盒牙签昨天断了两根，斜插在葱油饼渣里。今天还没人收。上周五晨会，产品总监讲 KPI，说“要让银发用户一键触达权威信源”。他左手无名指戴着婚戒，右手一直在转一支三菱铅笔，转了整整二十三圈，铅芯断了三次，都没停。我说“先给搜索建议加 role=listbox 和 aria-activedescendant”，他点点头，铅笔继续转。散会后保洁阿姨来收垃圾，看见我桌上牙签和饼渣，皱眉，但没动。她总把绿植浇水壶放在茶水间第二格柜子上，铁皮壶底锈了一圈红痕。

　　视频页的字幕按钮？那个 SVG 图标用了 ``，而 sprite 文件在 CDN 上 404 了两个月。所以图标不显示，按钮却存在，屏幕朗读器念作“button，未命名”。用户不知道这是字幕，还是分享，还是举报。我原以为是个资源加载问题，结果 grep 全库才发现：2022 年上线时，前端构建脚本漏写了 svg-sprite-webpack-plugin 的 fallback 配置。没人测，也没人问——因为测试用例里压根没这条：“验证 SVG 图标缺失时按钮可访问性状态”。

　　最扯的是文章正文里的引文区块。用了 ``，但每个 `

` 里面塞了 `` 包着关键词，而 highlight 类设置了 `position:relative; z-index:9999;`。结果 NVDA 碰到这个 span 就卡顿半秒，像被磁铁吸住。不是报错，是停顿。用户听见“……推动基层治理……（停顿）……现代化转型”，中间那半秒真空，谁也不知道发生了什么。后来发现是 z-index 让辅助技术在渲染树里多绕了三道弯。我们删掉 z-index，加了 `isolation: auto`，好了。就这么简单。可没人愿意碰这个类名，因为它是三年前外包团队写的，注释里写着“适配某省政务云审查插件”，没人敢动。

　　昨天晚饭吃的是便利店关东煮，萝卜浮在汤上，白胖，没入味。我边吃边看 PR review，一个 junior 提交的 fix：给图片懒加载加 `loading="eager"` 回退逻辑。我 comment 说“别修这儿，先修 img 标签上缺的 decoding=async，不然 Safari 15 以下会阻塞主线程”。他回了个 OK 的 emoji，十分钟后又 push 一次，把 `decoding` 改成了 `decoding="async"`，但忘了加 `loading="lazy"` 的兜底检测——现在所有头条图都 eager 加载了。我没再 comment。窗外雨停了，但玻璃上水汽没散，糊着对面写字楼的光斑，像一堆乱码。

　　第九个？我不列了。列不完。上周四 QA 发邮件说“无障碍报告通过率 97%”，附件里 PDF 页脚印着 WCAG 2.1 AA 字样，但打开第一页，PDF 自带的标签树是空的。我用 Adobe Acrobat Pro 打开，导出结构树，发现全页只有七个 Tag，全是

，没一个 或 。他们用 headless Chrome 自动生成 PDF，而 Puppeteer 不会主动注入语义结构。我说不准这算不算盲区——毕竟 PDF 不是我们前端输出的。但用户拿到手的，就是这份 PDF。

　　我现在正在重写侧边栏订阅按钮的 focus ring 样式。不是为了好看，是发现它在高对比度模式下完全消失。Windows 11 的强制高对比主题会把 `outline` 强制重绘为白色实线，而我们用了 `outline: 2px solid transparent` 配 `outline-offset` 模拟圆角。透明 outline 在高对比下被系统吃掉了。我打算试 `box-shadow: 0 0 0 2px currentColor`，但不确定是否破坏现有色值继承链。先试试。要是失败，我就去楼下便利店买第三根牙签，把剩下的饼渣挑干净。

（编辑：站长网）

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