你的网站能过无障碍检测吗？2026年Web可访问性实操指南

去年底一个政府客户提了个硬性要求——网站必须通过WCAG 2.1 AA级无障碍检测，不通过不验收。逼着自己啃了一个月的规范，发现大部分改动不复杂。

先说颜色对比度。这是最容易被检测出来的问题。浅灰色文字在白色背景上，正常视力的人看着"小清新"，视力障碍的人根本看不清。标准是正文文字对比度不低于4.5:1，大文字（18px以上加粗或24px以上）不低于3:1。Chrome DevTools直接能测——打开元素检查，点颜色的小方块，能看到对比度评分。我们站改了14处颜色，改完整体视觉没受影响。

键盘导航。用Tab键从头到尾走一遍你的网站，如果有些按钮点不到、弹窗关不掉、下拉菜单展不开——这就是问题。我们的解决办法是三句话：所有可交互元素用原生HTML标签（button而不是div+onclick），弹窗打开时焦点自动跳进去，弹窗关闭时焦点回到触发按钮。aria-label给图标按钮加上文字描述。

图片alt文字。这个最容易被忽略。不是所有图片都需要alt——装饰性图片加（空字符串），内容性图片要写清楚"图里是什么"。不要写"图片"、"logo"这种废话，写"王尘宇logo——返回首页"。工具推荐WAVE浏览器插件，一键扫出所有alt问题。

最后提醒一点：别只测Chrome。用屏幕阅读器（Windows自带"讲述人"，Mac有VoiceOver）实际走一遍你的网站。你会发现很多"看起来能用"的东西其实完全不可操作。我们测试时发现整个购物车流程在屏幕阅读器下是断的，因为价格更新是异步的但没有aria-live通知。

无障碍不是同情牌，是实实在在的用户体验。色弱用户占男性8%，键盘依赖用户比你想象的多得多。

标签： Web无障碍 WCAG 可访问性 设计规范