Accessibility Testing with axe-core 是一个面向 Web 开发与测试场景的无障碍测试技能，核心目标是通过 axe-core 与 Playwright 的集成，对网页进行WCAG 2.1 AA/AAA合规性的自动化检测。资料将其定位为在检查 WCAG 合规、发现 a11y 问题、确保键盘导航或测试屏幕阅读器时使用。
主要能力
该技能支持以下测试类型：
- 全页面扫描：使用 AxeBuilder 对整个页面进行分析，等待 networkidle 后执行。
- 特定元素扫描：通过
.include('nav')限定只检查导航等指定区域。 - 排除动态内容：通过
.exclude('.advertisement')或.exclude('#third-party-widget')排除广告或第三方组件。 - WCAG 合规级别测试：可分别测试 WCAG 2.1 Level A（tags: wcag2a, wcag21a）、Level AA（tags: wcag2a, wcag2aa, wcag21a, wcag21aa）和 Level AAA（tags: wcag2a, wcag2aa, wcag2aaa, wcag21a, wcag21aa, wcag21aaa）。
- 规则筛选：通过
withRules仅检查指定规则（如 color-contrast、image-alt、label、link-name），或通过disableRules禁用已知问题规则。 - 最佳实践规则：使用
withTags(['best-practice'])检查无障碍最佳实践。 - ARIA 测试：通过
withTags(['cat.aria'])验证 ARIA 属性有效性。
专项测试能力
- 键盘导航：验证 Tab 顺序、焦点可见性（outline 或 boxShadow 不为 none）、跳过链接功能。
- 颜色对比度：使用 color-contrast 规则检查是否符合 WCAG AA。
- 表单无障碍：验证输入框是否具备 label、aria-label 或 aria-labelledby。
- 图片无障碍：验证图片是否具有 alt 属性或标记为装饰性（role="presentation" 或 role="none"）。
使用方式
安装命令为 npm install -D @axe-core/playwright。基础用法是在 Playwright 测试文件中引入 AxeBuilder，调用 new AxeBuilder({ page }).analyze() 获取结果，并通过 expect(results.violations).toEqual([]) 断言无违规。资料还提供了详细违规报告的输出方式，可将结果保存为 JSON 或 HTML 文件。
CI 集成
提供 GitHub Actions 配置示例，通过 npx playwright test --grep @a11y 运行无障碍测试，并在失败时上传报告 artifact。
适用场景
适用于需要在开发流程中自动化检测网页无障碍问题的团队，尤其是需要满足 WCAG 合规要求的项目。
最佳实践与限制
资料建议尽早并频繁测试、从 WCAG 2.1 AA 开始、结合真实用户测试（自动化测试只能发现约 30% 的问题）、测试键盘导航、使用 NVDA（Windows）或 VoiceOver（Mac）进行屏幕阅读器测试，并按 critical > serious > moderate > minor 的优先级修复问题。参考文档包括 references/wcag-checklist.md 和 references/common-issues.md。