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

　　去年六月，我蹲在客户现场改一个新闻类 App 的 Webview 内嵌页——不是前端，是我在做安卓端的离线缓存逻辑，顺手帮他们看一眼 H5 的可访问性问题。后台给的页面是 Vue3 + Vant4 搭的，无障碍标签加得挺齐：role=“article”，aria-label 全打了，甚至 tabindex 也都设了-1。我原以为就是走个过场，结果用 TalkBack 扫到第三屏，那个“更多报道”按钮直接失声了。

　　它不朗读。点它没反应，滑过去像空气。我切回开发者工具查 computed 属性，dom 是活着的，focusable 状态也对，但 aria-live=“polite” 那行被套在了父容器上，而按钮自己没加任何语义标记。我改了一次，加了 aria-labelledby，没用；又加了 role=“button”，还是哑的。后来发现，Vant4 的 Button 组件在 disabled=false 但 pointer-events: none 的样式下，TalkBack 就自动跳过——这玩意儿根本没进可访问树。我删掉那行 CSS，按钮说话了，可点击反馈又没了。再补上 focus-ring 样式，颜色对比度又掉到 2.8:1……

　　甲方坐在旁边啃苹果，汁水滴在键盘上。他听见我嘀咕“怎么又卡这儿”，抬头说：“要不就别让盲人点这个按钮？”我愣了一下，没接话。他接着咬一口：“反正他们也不看‘更多报道’。” 我不知道他是不是真这么想，反正我盯着他苹果核上粘着的两粒芝麻没说话。

　　后来我切出调试器去倒水，路过茶水间看见保洁阿姨在擦玻璃，她踮脚够高处，手背青筋绷得很紧，右耳戴着一个助听器——银色外壳，旧款，电池仓盖子有点松动，晃来晃去。我数到第七次晃动时，她突然转头对我笑了一下，左手还捏着湿抹布。那一刻我脑子空了半秒：原来“优胜劣汰”真不是修辞。它不发生在代码里，发生在人伸出手、够不到、又慢慢缩回去的时候。

文章配图，仅供参考

　　我回到工位把 aria-disabled=“false” 改成 true 再立刻切回 false，靠 DOM 重绘强制触发一次语义刷新——成了。按钮能说了，点击有声效，焦点环亮蓝边，对比度刚好够到 4.5:1。可当我用 TalkBack 持续滑动三分钟，中间一次没停顿——它没念“加载中”，也没报“共 17 条，已读 8 条”。那两个数字，系统压根没当它是数字，只读成“十七条”和“八条”，中间缺了个“已读”。我试了八次，换三种 screen reader，结果一样。不是 bug，是规则。WAI-ARIA 里没规定怎么报这种状态组合，浏览器厂商各猜各的。

　　我也不知道为什么非要报“已读”。也许只是因为我刚才看见她擦玻璃时，耳朵上那个晃动的助听器盖子——它没坏，就是松了，没人拧紧，但它照样工作。所以到底要不要报？我改不动了。手指悬在键盘上，光标在 aria-live=“assertive” 和 aria-live=“polite” 之间闪了二十来分钟。

　　还有个细节：我笔记本左下角贴着张便签，上面写着“记得问后端加 X-Frame-Options”。其实已经加了，上周就加好了。另一个细节：客户会议室空调出风口滴水，正对着白板角落，积了浅浅一汪，反光映出我后脑勺的轮廓，像块灰斑。删掉这两句，前面的事一点没少，全说得通。

　　有谁碰到过这个吗？

（编辑：航空爱好网）

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