测试网站无障碍性不能只靠某一个工具。完整的 WCAG 审计通常应包含自动测试、手动测试、键盘测试、屏幕阅读器测试和真实用户测试。即使最好的自动工具也只能发现 30%–50% 的问题。
下面整理了从目标定级到最终检查的完整流程，同时给出每步建议使用的工具和关键检查点。
1. 确定 WCAG 级别
多数组织以 WCAG 2.1 AA 为目标，部分政府网站要求 WCAG 2.2 AA。
2. 自动测试
• Lighthouse（Chrome DevTools）：快速扫描缺失 alt 文本、低对比度、ARIA 问题等
• axe DevTools（浏览器扩展）：检查 WCAG 违规、ARIA、表单可访问性等
• WAVE：直接在网页上高亮缺失标签、空按钮、地标问题
• ESLint 规则（eslint-plugin-jsx-a11y）：在 React 项目中阻止代码合并
3. 键盘测试
只用键盘（Tab、Enter、Space、箭头、Esc）操作网站，确保所有按钮可获焦、链接可到达、弹窗可关闭。
4. 屏幕阅读器测试
使用 NVDA（Windows 免费）、JAWS、VoiceOver（macOS/iOS）、TalkBack（Android）验证按钮朗读、表单理解、阅读顺序。
5. 语义 HTML
优先用原生 \<button\> 代替 \<div onClick\>，屏幕阅读器依赖语义标签。
6. 色彩对比度
普通文本至少 4.5:1，大文本 3:1。使用 Chrome DevTools、axe、WAVE 检测。
7. 图片 alt 文本
重要图片提供描述，装饰性图片用空 alt（alt=""）。
8. 表单
每个输入必须有 label、错误提示、键盘支持和必填指示。
9. 标题层级
保持合理层级（H1→H2→H3），跳级会误导屏幕阅读器。
10. ARIA 使用
仅在 HTML 不够时使用，优先用原生元素。
11. 缩放测试
放大浏览器到 200%–400%，检查文字重叠、内容截断、横向滚动。
12. 响应式无障碍
移动端触控目标 ≥44×44px，字体大小合适，间距合理。
13. 焦点管理
打开弹窗时焦点移入并循环，关闭后回到触发按钮。
14. 动态内容测试
内容更新时需管理焦点，使用 ARIA live regions 通知屏幕阅读器。
15. 真实用户流程
不只测页面，还要测试登录、注册、结账、搜索、导航、错误处理等完整路径。
无障碍不是最后的 QA 任务，而应融入开发生命周期：编码阶段用语义 HTML + eslint，测试阶段跑 Lighthouse/axe/WAVE，发布前做屏幕阅读器和键盘测试，生产环境在 CI/CD 中加入 axe-core 或 Playwright 可访问性测试。
#开发者 #工具 #WCAG #A11y #前端 #无障碍 #Lighthouse #axeDevTools #ESLint #NVDA #VoiceOver
@DevToolboxHub