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

　　去年中考期间，我盯的教育类账户崩了一次——不是转化差，是后台数据不对那一刻，整个计划列表里飘着十七八个「未知设备类型」，刷出来全是空白 UA，连基础归因都断了。我原以为是平台新埋点出 bug，结果查日志发现：那批流量全来自某省残联官网跳转，页面用的是无障碍语义化标签+屏幕阅读器兼容 JS 注入方案，而我们广告落地页的按钮 class 名叫「btn-blue-hover-active-2」，没写 role="button"，更没加 aria-label。阅读器读出来就是「div div div 点击点击点击」——用户划到这儿，手指悬在半空三秒，撤回。销售当天下午发来张截图，说客户投诉「点不动」，我点开一看，她截的是手机自带朗读模式下高亮框卡在空 div 上的画面，窗口右上角还挂着我微信正在打字的气泡。窗外天黑了。

文章配图，仅供参考

　　我认了。真认了。不是因为怕甲方，是那天复盘时翻到他们首页底部那段小字：「本页面已通过 WCAG 2.1 AA 级认证，支持视障、听障及运动障碍用户无障碍访问」。我盯着看了两分钟，手边咖啡凉透，办公室空调太冷，膝盖上盖着件同事昨天落下的薄衬衫。其实我早该知道——五年前刚接这个项目时，技术侧提过要补 alt 文本和焦点管理，被销售一句「家长不看这些，先跑量」带过去了。现在倒好，量是跑出来了，但跑进来的根本不是人，是阅读器模拟的机械指令流，撞上我们那个写了三年没人改过的表单 submit 按钮——它没 type 属性，靠 onclick 绑定，阅读器压根不认。

　　跟老板吵那回就在这之后。他拍桌说「又不是做公益，你把时间花在看不见 ROI 的地方？」我反问他：「去年咱们投中考冲刺课，最贵的 CPM 是什么人群？」他卡住。我报出来：「视力障碍学生家庭，人均点击成本比普通家长高三倍多。」他愣了三秒，说「那…算漏斗底层？」我点头，说「对，漏斗最底端不是转化率最低的地方，是连漏斗门都找不到的人。」他没接话，低头抠手机壳缝里的一粒饭渣——中午跟客户吃简餐，他碗里青菜叶沾在牙缝上，我说了句，他立马去卫生间擦。这种事不用教，人自己会。代码也是。

　　我原来以为无障碍就是加几个 aria 标签、换掉图片 alt，折腾完一两周就完事。结果真动手才发现：我们的 H5 是 Vue + Webpack 打包的，所有组件挂载都依赖 mounted 钩子，但阅读器初始化比 JS 执行快，等它扫到 DOM，我们的「立即领取」按钮还没 render 出来。同事小陈试了七种异步检测方案，最后用 MutationObserver 监听 button 插入再手动 addRole，烧了不少，一直上不去。有天凌晨两点我手机快没电，一边充电一边改 CSS，突然发现：我们那个「弹窗关闭叉」图标用了 iconfont，没有文字替代，也没有 title。盲人用户点进来第一眼听到的就是「叉叉叉」——这词在中文语音合成里念作「chā chā chā」，像钉子敲墙。我删掉 font-class，换成了带 aria-label="关闭当前弹窗" 的 SVG，顺手把整个弹窗的 tabindex 从 -1 改成 0。那一版上线后，那个省份的跳出率跌了八个百分点。我不知道是不是因果关系，反正我信。

　　前两天销售又拉了个新客户，聊到一半，甲方总监推了推眼镜说：「我们校长要求所有合作方页面必须提供键盘 tab 导航路径图」。销售脸都绿了，在群里吼「谁会画这个？！」我没回，默默点了收藏夹里那个三年没打开的 W3C 键盘导航规范 PDF。后来我翻出来，发现里面写得清清楚楚：Tab 键应按 DOM 顺序线性移动；Enter/Space 应触发默认操作；ESC 必须关闭模态框。我们页面有个搜索框，按 Tab 进去后，按 Enter 没反应，得用鼠标点那个微小的放大镜图标——这图标 width 是 16px，触控热区不足 44px，手指稍抖就滑出去。我原以为这是体验问题，结果客户那边统计显示：用屏幕阅读器的用户中，有 63% 在搜索环节放弃，不是因为不想搜，是根本找不到确认键在哪。不是不想学，是键盘没教他们「按空格能提交」——我们连个最基础的 role="search" 都没写。

　　上周五午休，我和隔壁组搞 OCR 的老李蹲在茶水间煮挂面。他边搅面边说：「我们新模型识别率提了 2%，但客户反馈说识别课本上的手写体还是不准。」我随口接：「是不是行间距太小？」他猛地抬头：「你怎么知道？」——原来他团队试过调宽行距，可 UI 原型里固定写死「行高 1.4em」，开发不敢动。我忽然想到我们那个表单：label 和 input 之间只留了 8px 间隙，视觉干净，但语音导航时，阅读器把 label 和 input 当成两个孤立节点，中间没语义连接，用户听到的是「姓名输入框」「请输入真实姓名」，分两句，断层。其实只要加个 for="xxx" 就成。就这么简单的事，卡了三年。

　　优胜劣汰这词，真不是抬杠。你看后台那些沉默的数据——跳出率异常高、停留时长趋近于零、转化漏斗在第三步全量消失……很多根本不是用户不想买，是系统压根没让他们摸到开关。就像服务器机柜里一块背板松了，风扇狂转，温度报警灯亮着，你却只盯着 CPU 使用率说「负载正常」。今年我想试试把无障碍校验嵌进 CI 流程，让每次 commit 都跑 axe-core 扫描。不过昨天运维大哥告诉我，咱们测试环境那个 Jenkins 插件老是后台页面一直在转圈，也不知道是内存不够还是啥。算了，先让小陈下周把登录页的密码输入框加上 show/hide 按钮的 aria-live 区域吧——至少让用户知道，「眼睛看不见」和「密码没隐藏」，这两件事别堆在一起发生。

（编辑：站长网）

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