用途
该技能用于在组件库、页面流程或 CI 流水线中引入可重复的无障碍(accessibility)检查。自动化无障碍测试可在代码到达用户之前捕获 30-50% 的 WCAG 违规,从而降低法律风险并改善所有人的可用性。
主要能力
- 使用 jest-axe 进行组件级无障碍测试。
- 集成 @axe-core/playwright 或 cypress-axe 进行端到端(E2E)无障碍测试。
- 在 CI/CD 中运行无障碍测试,以尽早捕获回归。
- 针对具体 WCAG 规则(如 color-contrast)进行单独测试。
使用方式
该技能提供四种使用模式:
- 检查(Check):使用 axe-core、jest-axe 或类似工具审查测试套件的无障碍测试覆盖情况。
- 修复(Fix):添加自动化无障碍测试,以检测组件和页面中的 WCAG 违规。
- 解释(Explain):说明如何实现自动化无障碍测试以及它能检测哪些问题。
- 代码审查(Code Review):检查组件测试、E2E 套件和 CI 工作流中的自动化无障碍覆盖情况。标记未经过基于 axe 检查就发布的关键页面或共享组件,并指出仍需人工键盘或屏幕阅读器验证的问题。
完整的实现细节、代码示例和针对特定框架的指导,请参见 references/rule.md。
规则页面:https://frontendchecklist.io/rules/testing/accessibility-testing