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

　　去年十二月那会儿，我原以为无障碍设计就是前端加个跳过导航的按钮，结果被产品经理按在工位上骂了半小时——她甩给我一份W3C标准文档，说“你写的那个表单，盲人用户用屏幕阅读器根本读不全字段”。我盯着屏幕上的``，突然发现这玩意儿连个`aria-label`都没加，屏幕阅读器读出来就是“输入框，输入框，输入框”，跟念经似的。

文章配图，仅供参考

　　工单系统突然弹了条消息，是测试说“登录页验证码在NVDA下读不出来”。我喝了口凉咖啡，想起上周前端刚把验证码从图片换成滑块，说“这样更安全”。安全是安全了，可滑块的`role="slider"`没写，`aria-valuemin`和`aria-valuemax`也没设，屏幕阅读器读出来就是“可交互元素，可交互元素”，用户根本不知道要滑到哪儿。我原以为前端会处理这些，结果他们说“后端没提需求”——得，又得跨部门吵架。

　　其实最扎心的是，我们系统上线三年，用户量涨了五倍，可无障碍相关的工单从去年开始才冒头。之前没人提，不是因为没问题，是因为盲人用户根本用不了我们的系统，早就被挡在门外了。产品经理说这叫“优胜劣汰”——不是我们淘汰了用户，是用户用脚投票淘汰了我们。我查了下数据，没细看，但残联官网说国内有八千多万视障人士，这数字够养活好几个中厂了。

　　窗外天黑了，键盘声更响了。前端小王凑过来问：“你说无障碍设计算KPI吗？”我愣了下——我们组今年KPI是QPS和错误率，没人提过无障碍。可上周运维说，系统在政府采购清单里卡了三个月，原因是“未通过WCAG 2.1 AA级认证”。这认证我之前听都没听过，现在成了硬指标。说白了，以前没人管，是因为没压力；现在管了，是因为不搞就活不下去。

　　手机亮了下，是旧同事老张发的消息：“我们组被投诉了，视障用户说你们的系统能用，我们的连注册都卡。”我回了句“恭喜”，其实心里发虚——我们系统现在也就勉强及格，很多细节还没改。比如表单的错误提示，之前用`alert()`弹窗，屏幕阅读器会打断朗读；现在改成`aria-live="polite"`，可测试说某些读屏软件还是读不全。我查了半天文档，发现是CSS的`z-index`影响了焦点顺序——这破事儿，谁能想到啊？

　　其实最烦的是“无障碍”和“用户体验”的冲突。比如我们为了兼容读屏软件，把所有动画都禁了，结果普通用户说“页面太死板”；为了加`aria-`属性，HTML体积涨了百分之二十，前端说“影响首屏加载”。产品经理拍桌子：“要么都照顾，要么都别做。”我原以为这是二选一，结果查了下竞品，发现人家早就用`prefers-reduced-motion`媒体查询区分用户了——我们连这都没做，活该被投诉。

　　现在我最怕的是“无障碍审计”。上周运维说，第三方要来做全面检查，连颜色对比度都要测。我翻了下代码，发现好多按钮的背景色和文字色对比度才3:1，WCAG要求至少4.5:1——这得改多少CSS啊？更坑的是，某些旧组件用了`!important`，覆盖了无障碍样式，我改了一下午，最后发现是三年前的前端留下的坑——那哥们早就离职了，连Git提交记录都查不全。

　　其实说到底，无障碍设计就是“别偷懒”。我们以前写代码，能跑就行；现在得考虑屏幕阅读器、高对比度模式、键盘导航、减少动画……这些需求以前觉得“边缘”，现在成了“基础”。产品经理说得好：“你写代码的时候多敲两个属性，就能让一个人用上你的系统——这比写十行优化代码有意义多了。”我查了下工资条，没涨；但心里踏实了点——至少没坑人。

　　下一步怎么查？我打算把系统里所有``按钮都筛出来，挨个加`role="button"`；再跑个脚本检查所有图片的`alt`属性，空的补上，没意义的删掉。至于颜色对比度，可能得找设计部帮忙——他们以前觉得“无障碍就是加灰色”，现在得学WCAG的标准了。其实我也不确定这些够不够，但至少比去年十二月强——那时候我连`aria-label`是啥都不知道呢。

（编辑：站长网）

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