用途:对 Web 应用进行 WCAG 2.1/2.2 无障碍合规审计,覆盖可感知、可操作、可理解、健壮四个原则,适用于 WCAG 合规检查或屏幕阅读器兼容性测试。
前置条件:安装无障碍测试库(axe-core、@axe-core/playwright、Pa11y 或 Lighthouse CI);具备浏览器自动化工具(Playwright 或 Puppeteer);应用可在测试 URL 访问;已确定目标 WCAG 等级(A、AA 或 AAA,AA 为标准);具备颜色对比度分析工具。
主要能力:
- 自动扫描:按 WCAG 2.1 AA 或 2.2 AA 配置 axe-core 规则,覆盖 ARIA 属性、颜色对比度、表单标签、标题结构;用 @axe-core/playwright 在页面加载后扫描;用 Pa11y 做 HTML 层校验;用 Lighthouse 出具评分与详情;对每个主要交互状态(弹窗打开、下拉展开、错误状态)单独扫描。
- 键盘导航验证:Tab 顺序是否合理、焦点指示是否可见、Esc 是否关闭弹窗与下拉、跳转内容链接是否可用、弹窗内焦点是否被正确限制。
- ARIA 验证:role 是否匹配元素用途、无可见文本元素是否有 aria-label 或 aria-labelledby、aria-live 区域是否播报动态内容、aria-expanded/aria-selected/aria-checked 状态是否正确切换。
- 颜色与视觉:文字对比度是否达 AA(普通文本 4.5:1,大文本 3:1)、信息是否不仅靠颜色传达、用色盲模拟滤镜测试。
- 表单无障碍:每个输入是否有匹配 for/id 的 label、错误信息是否通过 aria-describedby 与 aria-invalid 播报、必填字段是否标注 aria-required="true"。
- 输出:违规/通过/未完成检查结果、按成功标准的合规矩阵、含代码修复的整改清单、键盘导航结果、Lighthouse 无障碍评分与改进建议。
使用方式:以 Playwright + axe-core 在测试中断言 violations 为空;Pa11y 可用 CI 配置(defaults.standard 设为 WCAG2AA,urls 列出待测页面)。相关资源:WCAG 2.2 指南 https://www.w3.org/TR/WCAG22/ 、axe-core https://github.com/dequelabs/axe-core 、Pa11y https://pa11y.org/ 、WAI-ARIA 实践 https://www.w3.org/WAI/ARIA/apg/ 、Lighthouse 无障碍 https://developer.chrome.com/docs/lighthouse/accessibility/ 、WebAIM 对比度检查 https://webaim.org/resources/contrastchecker/ 。
限制与错误处理:自动化工具仅能发现约 30%–40% 的问题,需结合键盘与屏幕阅读器人工测试;动态主题色需在各主题下分别扫描;隐藏内容可能误报,可用 axe.configure 限定 :visible;同一元素上冲突的 ARIA 角色应按 WAI-ARIA 实践移除冗余角色;动态内容后焦点顺序错误可用 tabindex 修正或调整 DOM 顺序。具体平台、价格与安装命令资料未提供。