媒体网站无障碍设计：9个运维老手最易忽略的适配点

文章配图，仅供参考

　　最绝的是导航栏的键盘焦点陷阱。我们特意把“无障碍入口”放在页面左上角，结果测试员按Tab键时，焦点在轮播图的左右箭头上循环打转，死活跳不到主菜单。老李拍着桌子喊：“我明明写了 tabindex=0！”可人家盲协的人冷笑：“你们把箭头设成 tabindex=1，主菜单设成 tabindex=2，但轮播图自动切换时，焦点会被强制拽回箭头——这哪是导航？是陷阱！”当时老李的脸比机房的应急灯还白，我低头看表，发现午饭的外卖盒在桌上堆了三个小时，汤都凝成胶了。

　　再说说表单验证。我们觉得“必填项标红”够醒目了，结果测试员填完信息提交时，屏幕阅读器只读了“错误：请填写姓名”，但没告诉他具体是哪个字段没填。更离谱的是验证码——我们用了图形验证码，却没准备语音验证码的备用方案。测试员说：“你们这是把盲人用户直接挡在门外。”老周在旁边嘟囔：“可甲方没提这个需求啊……”话音没落，盲协的人把手机怼到他脸上：“需求？《无障碍环境建设条例》白纸黑字写着，你们是装瞎还是真瞎？”

　　视频播放器的适配更搞笑。我们加了字幕开关，但没考虑色盲用户——字幕背景是纯黑，文字是纯白，对比度倒是够，可红绿色盲的人根本分不清字幕里的“停止”和“开始”（我们用了红绿按钮）。测试员说：“你们这是把色盲用户当色盲测试卡用？”老陈在旁边擦汗：“可我们团队没色盲啊……”对方直接怼：“所以你们连自己做的产品谁在用都不知道？”

　　还有个细节我到现在都后怕：我们为了“美观”，把“跳过导航”的链接藏在了页面顶部的一个像素级小点里，只有用鼠标悬停才会显示。测试员按Tab键时，这个链接根本不会被激活——他说：“你们这是把无障碍功能当彩蛋藏呢？”我翻了下代码，发现我们居然给这个链接加了 display:none，理由是“避免影响视觉设计”。那天晚上老张请客吃烧烤，他喝多了说：“咱们干了十七年运维，居然被个屏幕阅读器教做人……”

　　最讽刺的是，我们自以为“贴心”的“高亮当前焦点”功能，反而成了障碍。测试员按Tab键时，焦点框会闪一下，但闪得太快，他根本跟不上。我们查了代码，发现是CSS里写了 transition: all 0.3s——为了“动画效果”，结果把无障碍功能搞成了障碍。老李说：“我原以为动画能提升用户体验，结果……”他没说下去，但我们都懂——优胜劣汰，用户不会因为你的“用心”买单，只会因为你的“不用心”离开。

　　现在回头看，这九个适配点（ARIA标签、键盘焦点、表单验证、备用验证码、字幕配色、隐藏链接、焦点动画、动态内容提示、屏幕阅读器兼容）哪个不是基础中的基础？可我们六个老手，居然全栽了。为什么？因为我们都陷入了“我能看见，所以用户也能看见”的思维陷阱。那天散场时，盲协的人留了句话：“无障碍不是给残疾人做的，是给所有人做的——毕竟谁没个眼睛疲劳、手受伤、网络卡顿的时候？”我站在机房门口，看着冻雨把地面砸出一个个小坑，突然觉得，我们这十七年的运维经验，可能还不如人家屏幕阅读器里的一行代码有用。

　　下个月要去给另一个媒体网站做无障碍培训，我准备带瓶老白干——不是为了应酬，是想在讲到这些坑时，能借着酒劲说点真话。毕竟，有些教训，光靠理性讲不清，得靠酒劲儿才能吐干净。

（编辑：站长网）

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