用途:该技能面向无障碍工程师,指导使用 axe-core 结合 Playwright 编写、审查和调试无障碍测试,以 WCAG 2.1 AA 为基线,将无障碍检查前移到开发早期。
主要能力:支持整页扫描、组件级扫描(如导航、表单、模态框)、动态内容加载后扫描;可按规则标签(wcag2a、wcag2aa、wcag21a、wcag21aa、best-practice)筛选,按影响级别过滤 critical 与 serious 违规,使用 exclude 排除第三方或旧组件,用 disableRules 关闭特定规则;提供自定义报告工具格式化违规详情;覆盖键盘导航、焦点管理、颜色对比、表单标签与错误播报等测试方向。
使用方式:先安装依赖 npm install --save-dev @axe-core/playwright axe-core playwright @playwright/test,在 config/axe-config.ts 中配置默认与严格选项,通过 AxeBuilder({ page }).withTags([...]).analyze() 执行扫描,并可用 .include(selector) 限定组件范围。测试文件按 tests/accessibility/pages、components、utils、config 组织。
适用场景:前端 E2E 测试套件、CI/CD 无障碍门禁、组件库审计、表单与模态框等交互组件验证。
限制:自动化工具仅能发现约 30%–40% 的无障碍问题,仍需结合键盘、屏幕阅读器(NVDA、VoiceOver、TalkBack)、200% 缩放等人工测试;不依赖自动化工具作为唯一手段。