SuperAPI AI 工具集

a11y-testing

测试与质量

查看项目

更新于 10-16 04:33

技能介绍

用途:该技能用于实施自动化无障碍(a11y)测试,借助 axe-core、Playwright 与 jest-axe 检查 WCAG 2.2 合规性。官方说明指出,自动化手段可捕获约 30-50% 的问题。适用于在单元测试中验证组件无障碍、用端到端测试检查页面级无障碍、验证键盘导航,以及搭建 CI/CD 无障碍门禁和发布前合规审计。

主要能力:在组件层用 jest-axe 与 React Testing Library 断言无违规;在页面层用 @axe-core/playwright 的 AxeBuilder 扫描整页或指定区域(如 role=dialog 的模态框);可按 wcag2a、wcag2aa、wcag22aa 标签过滤检查范围;可配置在 GitHub Actions 中运行,发现违规时阻断 PR。

必要用法:jest-axe 需在 setup 中通过 expect.extend(toHaveNoViolations) 注册匹配器,再对 render 出的 container 调用 axe 并断言。Playwright 侧通过 new AxeBuilder({ page }).withTags([...]).analyze() 获取结果,再断言 results.violations 为空。CI 中可执行 npm ci、npm run test:a11y、npx playwright install --with-deps chromium,并运行 npx playwright test e2e/accessibility。测模态框等交互状态时,先触发点击并等待选择器出现,再用 include 限定扫描范围。

参考决策:测试运行器选用 jest-axe + Playwright 以覆盖单元与端到端;WCAG 等级取 AA;CI 门禁在出现违规时阻断;浏览器矩阵为 Chromium 与 Firefox;仅排除第三方组件;标签含 wcag2a、wcag2aa、wcag22aa;需覆盖模态、错误、加载等全部交互状态。

限制与禁止做法:不要全局禁用规则(如关闭 color-contrast),不要过度排除(如排除 body),不要只测正常路径而漏掉错误、加载、禁用状态,也不应仅依赖人工审查或让测试存在却不阻断 PR。另需注意,自动化测试无法覆盖全部无障碍问题,人工审查仍属必要;浏览器兼容矩阵、具体阈值等未在资料中进一步展开的细节暂未提供。