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

　　去年7月接了个政务官网改版，产品经理甩过来的需求文档里连个“无障碍”的影都没见着。我盯着屏幕冷笑——这年头连政府项目都敢明目张胆忽略WCAG2.1了？结果第二天测试组的小姑娘举着手机冲进会议室：“张工，这个导航栏用读屏软件根本读不出来！”我接过她的iPhone13，VoiceOver在页面上卡成PPT，焦点乱跳得像喝多了的醉汉，控制台报错堆得比我的键盘还高——全是aria-hidden和role属性冲突的警告。

　　那天下午我把产品经理堵在白板前，白板上的原型图还留着上轮需求变更的马克笔痕迹，没擦干净的地方洇着蓝色墨水。“您知道现在政务网站不通过无障碍验收，连域名备案都过不了吗？”我敲着屏幕上的WCAG标准，“从第一行HTML开始就得嵌语义化标签，您这设计稿里连个alt属性都没标，让视障用户怎么用？”他挠着头笑：“哎呀我们之前没接触过这个，要不你改改？”我盯着他背后那台竖着的显示器——上面还贴着“奋斗者”的便利贴——心里骂了句脏话。

　　改代码那周简直是一场噩梦。设计给的切图里，所有图标都是背景图，我硬着头皮给每个img标签补alt属性，结果测试说读屏软件读出来是“图片1.png”“图片2.png”——得，还得找设计重新出SVG。后端更绝，返回的JSON数据里连个“标题”字段都没有，我为了给列表项加aria-labelledby属性，不得不在前端拼字符串，结果构建日志里全是“Warning: Missing aria-label for interactive element”的警告。最离谱的是产品经理临时加需求：“导航栏要加个下拉菜单，但不用考虑键盘操作，反正视障用户用不到。”我当场把键盘上的“Tab”键抠下来拍在桌上：“您知道键盘导航是无障碍的基础吗？没有它，读屏软件用户连菜单都打不开！”

　　后来还是测试组的小姑娘帮了大忙。她拉着我蹲在工位旁边，键盘上掉了个“Ctrl”键，她用胶带粘了个临时补丁：“张工你看，我们测试无障碍的时候，会关掉显示器，纯靠键盘和读屏软件操作。”她演示着用Tab键跳转焦点，用Enter键激活按钮，“像这种没有键盘陷阱的设计，我们得测三遍——读屏软件能不能正确朗读，焦点顺序对不对，交互反馈够不够明显。”我盯着她屏幕上跳动的光标，突然想起上周产品经理说的“视障用户用不到”——他大概从来没见过有人真的关掉显示器写代码吧？

文章配图，仅供参考

　　现在回头看，那项目最该骂的不是产品经理，也不是设计——他们确实不懂无障碍，但至少愿意听我骂。最气人的是测试环境里那台老旧的Mac Mini，跑Safari的时候VoiceOver经常卡死，我们不得不借了台M1的测试机。还有外卖到了没人去拿的那天，我蹲在楼梯间啃冷掉的汉堡，突然想到：如果连我们这些写代码的人都不把无障碍当回事，那些真的需要它的人，该有多绝望？

　　上周新项目启动会，我提前把WCAG2.1的标准打印出来贴在会议室墙上。产品经理刚要开口，我指了指墙上的纸：“这次需求文档里必须有无障碍专项，设计稿要标语义化标签，后端API要过滤冗余字段——否则我连第一行HTML都不写。”他笑着点头，我转头看见测试组的小姑娘在擦白板——这次她擦得很干净，连马克笔的痕迹都没留下。

　　当然，我也知道这远远不够。比如读屏软件对动态内容的支持还是一坨屎，比如某些浏览器对ARIA属性的解析依然有bug，比如我们连视障用户的真实使用场景都没摸透——但至少，从这一行代码开始，我们学会了尊重。

（编辑：站长网）

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