量子工程师视角：无障碍建站避坑指南

　　我原以为“无障碍建站”就是加个 aria-label、扔个 skip-nav、alt 写全——结果上线第三天，盲人测试员老周在会议室摸着键盘说：“你这个‘立即开通’按钮，焦点停在那儿不动，像卡在薛定谔的态里。”我当场打开 DevTools，console 里正飘着一行没 catch 的 Promise rejection，而屏幕阅读器根本没机会读到它后面那行“服务暂不可用”的提示文字。冷眼。

　　不是不重视。我们组四个人，两个写量子线路优化器的，一个调超导谐振腔参数的，还有一个——对，就那个天天蹲机房听 dilution fridge 嗡嗡响的张工，他前天还在我工位旁站着看了十八秒我写的 React 组件，然后伸手把我的键盘往右推了三厘米：“你左手老悬空按 tab，肘关节角度超过一百二十五度，长期下来腱鞘炎比退相干还难修复。”他话音刚落，桌上的外卖盒盖子被空调出风口掀开了一条缝，油星溅到我笔记本边缘的 USB-C 接口上。这个我敢打包票。

　　优胜劣汰不是口号。上周我给三个前端团队讲过同一件事：当你的 modal 弹窗用 display: none 而不是 aria-hidden + visibility:hidden 配合 focus trap 时，屏幕阅读器用户点进页面第一件事就是听二十秒空白噪音——就像你给一个量子比特施加了未校准的 X 脉冲，它坍缩在哪？不知道。但后果你知道：那个用户直接关掉浏览器，再也没回来。至于为什么？我说不准。但我知道他们走的时候，监控大屏刚好闪了一下，红光跳了两次，没人抬头看。

　　我盯着 Figma 里的组件库看了一下午。设计师阿哲画得真漂亮，每个状态都分图层标好：focus / hover / disabled / invalid / loading…可一到实现，工程师小林把整个 form 表单包在 div 里，用 class 名模拟语义，还美其名曰“解耦”。我说你这是拿哈密顿量当 CSS 变量使啊？他笑：“又不是真跑 Shor 算法。”他刚说完，手机震了一下——是运维李哥发来的告警短信：“/accessibility-coverage 下降至 0%，人工检测通道已熔断。”窗外天黑了，楼对面广告牌刚亮起来，字是紫色的，衬在灰墙上，我眯眼看了三秒，确认这不是色觉障碍测试图——但它真是。真不是。

　　说回避坑。第一坑：别信“自动修复工具”。去年有个客户买了某厂的无障碍扫描 SaaS，扫完打 92 分，我去看源码，发现它把所有 标签强制插了个 alt=""，连 logo 图都不放过。logo 是文字变形的 SVG，里面包着 path。结果呢？屏幕阅读器念出十七个无意义的 Unicode 符号，跟听一个乱序的量子门序列似的——有顺序？没顺序？执行完输出啥？你猜。我删了那段脚本，手动补了 role="img" aria-label="量子计算应用开发平台"，老周测完点头：“这次终于听见名字了。”

　　第二坑：别把 tabindex="0" 当万能胶。看见谁给 div 加 tabindex="0" 还配 click 事件就该报警。那天我和小林改一个数据看板卡片，他坚持用 div + onClick 实现折叠逻辑，说“React 不让用 button 嵌套 div”。我反手把他的 useEffect 改成 useReducer，再把卡片外层换成 ……他盯着控制台愣了半分钟，最后自己把鼠标挪开，点了三次右键检查元素，才点出那个被藏在 shadow DOM 底下的 summary 元素。浏览器开着三十个标签，其中十七个是不同年份的 WCAG 技术文档 PDF。我没关任何一个。

　　第三坑最绝：别在“跳转到主内容”链接后面塞空格。对，就那个 #main 的 skip link。我们之前版本加了   保证视觉对齐，结果盲人用户用 JAWS 切换到“跳过导航”后，听到的是“跳过导航（空格）”。他问我：“你们网站礼貌吗？”我没接住这话。后来查规范才发现，W3C 明确写了 skip link 后不得有空白字符或不可见节点——你这不是留白，是插入了一个未声明的量子态：看不见，但干扰测量。

　　昨天复盘会上，张工突然问：“如果一个站点无障碍达标率 100%，但所有交互都依赖 JavaScript 初始化，那 JS 失效时怎么办？”全场静了五秒。我下意识去摸键盘，发现右手食指停在 Caps Lock 上，按下去又弹起来，没锁。没人回答。其实我心里有数：我们去年做的那个内部管理后台，就用了纯 HTML fallback 方案——表单提交不用 fetch，错误提示不用 toast，而是原生 form action + server-render error page。上线后，那个负责残联合作项目的同事悄悄把首页 footer 里“无障碍符合标准”的图标，换成了她自己手绘的一只眼睛。那只眼睛没瞳孔，但睫毛画得很细。

　　所以我不写“建议使用语义化标签”，也不列 checklist。你懂。真正在意的人早就在改了；不在意的，你贴一百条 WCAG 条款也救不了。量子领域里退相干时间越短，系统越难维持叠加态——网站也是，无障碍不是终点，是衰减曲线上的一个点。你只能拉长它。至于怎么拉？去听听老周敲键盘的节奏，去翻翻小林浏览器里那三十个标签页哪个还没关，去闻闻张工工位旁边那台老服务器散热口飘出来的焦糊味儿……

文章配图，仅供参考

（编辑：PHP编程网 - 金华站长网）

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