无障碍设计：从第一行代码起的尊重

　　无障碍设计：从第一行代码起的尊重

　　去年中考期间，我陪视障考生小林调试他用的志愿填报辅助插件——那是我第7次现场修改focus管理逻辑，因为前6次都卡在Chrome 124的Shadow DOM透传问题上。他戴着JAWS 2023，屏幕朗读到“提交按钮”时突然静音，我盯着DevTools里被React 18自动包裹的发了两分钟呆——它把aria-label吞掉了，像吃掉一句没说出口的道歉。

　　那周我重装了三台测试机：Win11+NVDA 2023.3.2（语音延迟实测420ms）、MacOS Sonoma+Siri语音控制（手势识别率仅68%）、国产统信UOS+阳光读屏V5.1（不兼容WebAssembly加载的OCR模块）。最棘手的是某地教育局系统用了jQuery 1.12.4——它把所有button的tabindex设为-1后又不提供键盘聚焦替代方案。我们临时打了补丁，但补丁本身让Android TalkBack在滑动列表时跳过第3、7、11项。这事儿没进任何公开日志，只写在我私人笔记第42页右下角：“别信‘向后兼容’，信自己测过的tab键走位。”

文章配图，仅供参考

　　无障碍设计：从第一行代码起的尊重

　　新技术真香。Web Components的自定义元素天然支持role映射，去年我用Lit 3重构旧系统的搜索框，把ARIA属性直接声明在HTML模板里，不用再靠JavaScript动态注入——上线后Screen Reader首次朗读准确率从73%跳到96.8%。但新也坑人：Chrome Canary 125刚加的``默认焦点行为会绕过aria-modal="true"校验，我蹲守三天才摸清它偷偷把focus移到body根节点的时机——就在CSS transform动画帧触发后的第17ms。这种细节，W3C文档里连个脚注都没有，全靠抓包+录屏+倒放逐帧数毫秒。

　　失败案例得记牢。2022年双十一，我们给电商后台加了个“语音筛选商品”功能，用的是某大厂ASR SDK。上线当天，听障同事老张用实时字幕模式打开，发现所有口语指令都被翻译成“用户未发言”，排查发现SDK强制要求麦克风权限，而他的系统因隐私策略默认关闭——可错误提示写的却是“网络异常”。我们紧急回滚，但那个红色感叹号图标已经刻进他浏览器收藏夹三个月。这事让我明白：无障碍不是加几个aria标签，是得把用户没点开的设置页面、没触发的系统弹窗、甚至ta刚换的新键盘驱动都当第一现场。

　　我的主观判断很偏——觉得WebRTC比Web Audio API更适合做实时字幕桥接，虽然它多消耗23%内存。因为AudioContext在iOS Safari里会随页面切换暂停，而RTCPeerConnection的datachannel能扛住Safari后台3分钟不掉线。这个选择可能错，但小林去年用这个方案把志愿填报时间从47分钟压到19分钟——他妈妈发微信说“孩子自己点完提交时，手指在屏幕上停了七秒”。我就信这七秒。

　　现在我在写一个VS Code插件，自动检测JSX中缺失的alt文本和非语义化div嵌套。它已经能揪出82种危险模式，但还不能识别“用span模拟button却忘了加role=button”的案例——因为有些团队故意这么干，就为绕过CSS reset。我打算下周去深圳残联信息中心蹲点两天，看真实用户怎么用触控笔在1080p屏上划出他们要的“下一步”。

（编辑：站长网）

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