无障碍设计失灵？动态跨界整合破局

　　跟产品吵。昨天下午三点，PM 把无障碍自查表甩进钉钉群，Excel 表头还带着上个月的修订痕迹——第三列「语音导航兼容性」旁边手写了“待对齐”，字迹是蓝黑墨水，不是那种细签字笔，是老式钢笔漏墨那种。我盯着看了十八秒，没点开附件，直接回了句“WCAG 2.2 的 focus-visible 做了吗”，她秒回“先上线再优化”。我原以为她在推脱，结果她真把这句话写进了周会纪要里，加粗，标红，还附了个小星星图标。

　　Lighthouse 跑分截图发到群里没人回。不是闪一下就沉，是发完十分钟，群里新消息二十七条：两个请假、一个同步 CDN 账单超支截图（四百一十二块）、一个问“React Server Components 还要不要配 SSR 渲染兜底”，我的那张图卡在中间，灰底白字，AXE 扫出十九个 warning，其中七个标着“critical”。我划了三遍，没找到那个叫“语义化按钮嵌套 div”的节点——它根本不在 DOM 树里，是 runtime 用 createPortal 挂到 body 下的悬浮操作栏。你告诉 screen reader “这个按钮控制浮层开关”，可它连 tabindex 都没设，只靠 onClick 绑定。我说不准这算不算 WCAG 违规，但我知道，iOS VoiceOver 划到那儿会跳过去，像那地方空了一块砖。

　　对面工程师换了一根充电线。Type-C 公头，银灰色外壳，插进他 MacBook 的时候有轻微“咔”一声。我注意这个是因为他昨天还在用那根紫铜芯的老线，今天突然换了——可能只是随手从包里掏的，也可能上周我们联调完他去京东搜了“低延迟充电线”。无所谓。重点是他前脚换线，后脚就帮我定位了那个被 React.memo 误判成“无变化”、结果绕过 aria-live 更新的 toast 区域。这个我敢打包票：useEffect 里依赖项漏了 isAnnounced，他补上之后，NVDA 吐字终于连上了。可补完他又说：“但用户真会等五秒听完整播报吗？” 我没接话。倒不是觉得他说得不对，是那会儿我正想中午是不是该去接水——饮水机在茶水间第三排架子后面，纸杯架斜着，每次拿都得歪脖子。

　　动态跨界整合破局？破个屁局。就是把原来塞在 a11y-utils.ts 里的十七个 hooks 全拆了，每个按触发时机切片：focus trap 独立成 package，live region 抽成微服务级 Web Component，键盘导航逻辑扔进 iframe 内部沙箱跑，由主应用发 CustomEvent 控制。好处？优胜劣汰。不是理想主义的优胜劣汰，是血淋淋的：上周四，QA 发现三个品牌页的 skip-link 在 Safari 17.5 上全失效，查下来是 和 router.push 同时作用，路径拼错了。修复方案？砍掉 skip-link，改用 keyboard-only navigation map（那个 SVG overlay），因为 map 是静态生成的，不走路由劫持，而且支持 focus-ring 轨迹重绘——虽然这玩意儿在 IE11 里画出来是错位的马赛克，但 IE11 已经被我们策略性放弃。这个决策是我签的字。签的时候手抖了一下，不是紧张，是刚喝完半杯冰美式，手指尖发麻。

　　桌面那个没关的录屏。录的是早上的无障碍验收会议，声音断断续续，中间有四十七秒空白——后端在讲数据库索引优化，音量太低，录屏软件自动静音了。我暂停了一下，看时间戳：十点零七分二十三秒。那时PM正在说“视障用户占比不到0.8%，咱们KPI不看这个”，我按下空格键继续录，但没保存。后来删文件的时候才发现，删掉的其实是上午十点零六分那份——那里面我拍了张屏幕：一个盲文点显器连接 USB-C hub，hub 上还插着另一根充电线，和对面那位换的那根一模一样。

　　先扔结论后补细节。无障碍设计失灵？不是技术不行，是协作链断在了交接缝里。比如焦点管理，前端做完，测试只验 tab 键顺序，不测 shift+tab+esc 组合；交互设计师画原型时不标注 focus state 切换路径，只标 hover 和 active；而老板审 PR 的时候，只扫 commit message 里有没有“fix”、“perf”、“feat”，看见“a11y”直接跳过——他上一次点开 aria-label 属性值，还是三年前帮儿子改学校网站的家长留言框。这事儿没法靠规范兜底。WCAG 是律条，不是施工图。你按 4.1.2 写了个 role=“application”，可用户真正操作时发现它根本不响应 arrow key 导航，这时候谁来填坑？不是写 spec 的人，是你凌晨一点对着 devtools 找 missing role 的人。

文章配图，仅供参考

　　我今早勾选合并请求。第一步，拉最新 main；第二步，本地起 storybook，开 Chrome+NVDA，手动跑三遍表单流；第三步，确认 aria-invalid 切换时机和错误提示 DOM 插入顺序一致。然后点了 merge。没有 CI 自动校验，因为那个 check-a11y.yml 我上周就删了——它总在 false positive 里报错，有一次把 里一个没闭合的 span 当成语义泄漏，闹得大家改了两小时。现在我们靠人眼盯。盯得住吗？不一定。但至少现在，当产品经理问“这个能不能下周上线”，我能指着 devtools 里那个高亮的 aria-live="polite" 节点说：“能，但用户听到的是‘提交成功’，不是‘已收到您的申请，预计二十四小时内处理完毕’。”

　　CDN 账单的事还没结清。运维说上月流量突增十七个百分点，原因是图片懒加载用了 IntersectionObserver，但 fallback 图片尺寸写死了三百七十二 KB，每次降级都硬载。这和无障碍没关系。但有意思的是，那个 fallback 图片，alt 文本写的是“服务不可用占位符”，可实际上它是个绿色对勾图标。没人改。就像没人改那个始终没被 focus 的 skip-link。我不打算修。下周一我要试下把 keyboard-navigable-map 的 SVG export 成 WASM 模块，跑在 web worker 里做实时 focus 轨迹推演——如果跑得通，就把它扔进 CI，挂一个 stage:accessibility 的 gate。挂不住再说。

（编辑：站长网）

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