无障碍建站：重构人与信息的技术关系

　　跟产品吵架那会儿，会议室白板上还印着三天前画的流程图，下半截被咖啡渍洇开，箭头全糊成毛边——她指着那个模糊的“无障碍入口”说：“就加个按钮，跳转到‘辅助模式’页，不改现有逻辑。”我敲键盘敲得指甲盖发烫，回她：“你让设计师把 focus-outline 的色值标出来，我把 tabindex 撸完，现在这个 button 的 aria-label 还写着‘点我’。”她笑了一下，端着杯子站了很久，水汽在镜片上蒙了层雾，没接话。

　　去年1月，项目类型是后台系统，那种每个表格都带搜索、筛选、导出、权限粒度拧到字段级的玩意。上线前三天，测试机型号是 Win10 + NVDA 2023.1 + Chrome 119，我们第一次用屏幕阅读器跑全流程。首屏转圈、按钮点了没反应、控制台一片红——不是报错，是 warning：`[Violation] 'focus' handler took 127ms`，连刷三行，像被按了复读键。我切到 Performance 面板拖选那段录制，看到 layout 回溯线陡得跟断崖似的，源头钉在 `` 上那个动态计算的 width 计算逻辑里——它每 render 一次，就重跑一次 getComputedStyle，而 NVDA 每扫一个单元格，就 trigger 一次 focusin，于是那串计算被 call 了 47 次。我截图发群，下面跟着一句：“别动 DOM 结构，后端说接口不能改。”

　　键盘上有个键掉了，是右下角的 Alt 键，胶垫翘起来半截，按下去要多压 0.3 秒才触发。我用它切了七次 devtools，切出 console、Elements、Lighthouse、Accessibility 标签页，最后停在 Lighthouse 的「Accessibility」tab 里，分数栏空着，底下写着「Not run due to page load timeout」。我清缓存重跑，timeout 还是。再试，换成本地 serve，跑通了，分是 62。没截图，懒得存——那 62 分里，23 条 issue 是 color contrast 不足，11 条是 missing alt，剩下 28 条全是“no heading level found”，可设计稿标注里明明写了 h2–h4 的层级关系，只是开发时全被套进 div 里，加了 role=“heading”，但 aria-level=“2” 这行，在某次提交记录里被删了，commit message 写的是“remove redundant aria-level”。我翻 git log，sha 是 a5f2c8d，作者是前端实习生，那天他交完班就去赶地铁，工位显示器是竖着的，还没关。

　　有人在背后走过碰了椅子，金属腿刮地声刺啦一下。我就着那声回头，看见测试同事正把耳机摘下来，耳廓上还印着 NVDA 语音的压痕。“读到第三行表头就开始卡顿，‘操作’列里的三个按钮，它念成‘按钮 按钮 按钮’，没名字。”她说。我扒拉 Elements，发现那三个按钮共享一个父容器，父容器有 role=“group”，但内部按钮全没 aria-label，只靠 span 文本撑着，而那段文本在 CSS 里被 `text-indent: -9999px` 掩埋了。我把它改成 `clip-path: inset(100%)`，reload，NVDA 继续念“按钮”。又试 `aria-hidden="true"` 套在 span 外，还是念。最后发现是那行 JS 脚本：`button.textContent = ''` 在 mount 后执行，把文本干掉了——可 screen reader 已经缓存了初始 DOM，后面改不掉。我在控制台手动 setAttribute('aria-label', '编辑'), 效果立竿见影。但没人愿意动这行脚本，因为“历史兼容性要求保留初始 textContent 行为”。

　　“无障碍建站：重构人与信息的技术关系”——这话本身没错。错在我们天天重构 DOM 树、CSSOM、JS 执行栈，唯独绕开信息路径。用户不是先拿到 HTML 再解析语义，是靠 AT 工具直接爬 DOM+ARIA+CSS 的三角锚点；而我们写代码时，DOM 是骨架，CSS 是皮相，JS 是神经，却把 ARIA 当成贴纸，哪块缺了补哪块，补完发现整张脸不对称。不是语义缺失，是语义和渲染不同步：aria-expanded 和 class 名不一致、role="dialog" 的弹窗没加 aria-modal="true"、focus-trap 逻辑漏了 tab 键反向循环……这些不是 bug，是契约撕毁现场。

文章配图，仅供参考

　　外卖到了没人去拿，堆在茶水间门框边，塑料袋印着“准时达”三个字，油渍正往“达”字最后一横里渗。我盯着那行字想，什么叫准时？是资源加载完成，还是信息抵达有效？首屏转圈结束那一刻，视觉上是好了，可对于靠键盘 tab 导航的人，焦点还在 document.body，他不知道该往哪走。那不是技术延迟，是意图阻塞——我们把“能用”当成终点，忘了“可寻址”才是起点。

　　下一步？今晚就把 build 日志里那条 `[warn] [a11y] missing label for input#search` 的 suppress 关掉，让 CI 卡住。不是为了提 PR 过审，是让下次谁改 input，必须直面那个红色警告框。别的先不动。承认局限：我没力气改设计稿里那套无层级的灰色图标系统，也没法让后端把 23 个接口字段的 desc 字段补全。我就盯住键盘上那个掉了的 Alt 键——每次它翘起来，我就修一行 focus 管理逻辑。够了。

（编辑：站长网）

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