视障友好建站：12年技术预研避坑指南

　　第九版切图发出去三小时，前端微信弹窗：「tab切换焦点没动」——我盯着那行字，手悬在键盘上，数位笔的笔尖刚换过，还有点涩。

　　我原以为只要加aria-label、配好role=“tablist”就完事了。结果测试员说：「语音报读是‘按钮，未选中’，但实际不是按钮，是div+onclick」。我翻规范看到「tab角色必须绑定keyboard event handler」那一行，手指停住了。不是不懂，是压根没往那儿想。去年过年期间，我们改稿改到初四下午，连饺子都是外卖送进工位的，谁记得键盘事件要自己写focus管理？

　　色板里那个说不清的灰，还挂在Figma主文件第7页右下角——没人动它，也不归类，就叫「按钮禁用态#2」。我问前端要不要重命名，他说：「先跑通再说」。结果跑通那天，空态里一个icon用了这个灰，语音朗读直接跳过，因为contrast比低于4.5，屏幕阅读器干脆不触发text alternative。我查了三遍对比度，还是没发现，直到测试员用NVDA拖着念「空白区域」，我才反应过来：不是没替代文本，是它压根没被识别为可读元素。

文章配图，仅供参考

　　谁在旁边刷短视频外放。音量调不高，但「duang～」那种合成音效特别穿透，每次响一声，我就条件反射抬一下头。不是烦声音，是烦那节奏——和我们改稿的节奏一样，没逻辑、靠感觉、等甲方一句话突然转向。他们说「视觉要呼吸感」，我们调间距；说「要温暖一点」，我们换蓝灰渐变；结果视障测试一上来，首屏五个CTA全是无语义div，tab键从左到右扫过去，报的是「区域、区域、区域、区域、区域」。连「搜索」都念成「内容容器」。不是前端懒，是切图文件夹里的命名乱七八糟：search-bar-v3-final-真正最终版@2x.png——他哪知道哪个才是带语义结构的那个。

　　反常识结论？不是技术做不到，是所有验收点都长在「眼睛看见」的维度上。栅格对齐了，间距0.5px误差没有，字体大小按设计稿像素级还原……可无障碍检查表第一项「每个交互元素有唯一可识别名称」，我们在第几版里写过？没有。压根没列进Checklist。我翻过所有PRD附件，只有一页半讲动效缓动曲线，零字提alt文本长度限制。产品说「用户能看懂就行」，我说「那得看谁看」，她点头说对，转头就把「无障碍适配」放进「二期优化」，三期再议，反正首页数据还没跑出来。

　　显示器有点色偏，右下角泛黄，校过两次，校色仪报告显示Delta E

（编辑：草根网）

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