无障碍WCAG检查清单

工具说明

无障碍不是小众需求：视力障碍者、色盲用户、只能用键盘操作的用户、在强光下看手机的人，都会因为可访问性问题而无法使用你的网站。WCAG 把要求归纳成四条原则，本清单把它们拆成 24 项可以直接照着改的检查点。

四条原则分别在管什么

• 可感知：信息必须能被感知。图片要有替代文字，视频要有字幕，颜色不能是唯一的区分手段，结构要能被屏幕阅读器读出层级。
• 可操作：所有功能必须能用键盘完成，焦点位置要可见，不能有闪烁到让人不适的动画，要有跳过导航的快捷入口。
• 可理解：语言要声明清楚，错误提示要指明哪里错了、怎么改，操作要符合预期不能突然跳转或自动提交。
• 健壮：用标准语义标签而不是一堆 div 拼装，ARIA 属性要用对，表单控件必须有关联的标签，这样各类辅助技术都能正确解析。

最常见的五个问题

1. 图片缺 alt：装饰性图片应写空 alt，有意义图片必须描述内容，而不是写「图片」两个字。
2. 用颜色单独传达信息：比如只用红字标错误而不加图标或文字说明，色盲用户无法识别。
3. 点击区域太小：手机上小于 44 像素的按钮很难点中，触控目标应当留足间距。
4. 焦点被清除：为了美观把 outline 设成 none，键盘用户就完全找不到自己在哪。
5. 表单缺标签：只用 placeholder 当提示，一旦开始输入提示就消失，屏幕阅读器也读不出字段含义。

怎么用这份清单

建议把清单当验收表：改版时逐项过一遍，未勾选的项记入待办并标注负责人。提醒：自动化检查工具只能发现大约三分之一的问题，键盘实操与屏幕阅读器测试不可省略。对比度具体数值请用站内的颜色对比度检查工具核算。

你可能还想问

必须全部做到才算合规吗？

不一定。WCAG 分 A、AA、AAA 三个等级，A 是基础要求、AA 是多数法规与采购标准的门槛、AAA 属于增强。本清单把常用的关键项混在一起列，勾选比例用于自查参考，不等同于官方等级评定。如果是为了满足合规要求，建议按照目标等级对应的具体条款逐条核对。

自动检测工具能替代人工检查吗？

不能。自动工具擅长发现缺 alt、对比度不足、标签结构缺失这类有明确判定条件的问题，大约能覆盖三分之一。而「图片替代文字是否准确描述了内容」「键盘操作顺序是否符合直觉」「错误提示是否真的让人看懂」这些都需要人来判断。合理的组合是自动工具做初筛，人工做关键路径的键盘与读屏测试。

我们的网站是给内部用的，也需要无障碍吗？

建议做，但优先级可以按实际用户调整。内部系统同样会有使用辅助技术的同事，而且很多企业采购与合规流程会要求无障碍达标。如果资源有限，优先保证键盘可操作与表单标签正确这两项——它们对所有人都有帮助，改造成本也最低。

改了之后怎么验证效果？

三个层次：① 只用键盘走一遍主要流程，看能否完成且焦点始终可见；② 用系统自带的屏幕阅读器（Windows 的讲述人、macOS 的 VoiceOver）听一遍首页与表单页；③ 把浏览器缩放到 200% 检查是否出现内容重叠或需要横向滚动。三层都通过，基本问题就不大了。

相关工具

相关内容