工具

axe-core

另见: axe

Deque 开发的开源自动化无障碍测试引擎,被浏览器扩展(axe DevTools、Accessibility Insights)、CI 脚本及 Lighthouse 所采用。可检测约 30–40% 的 WCAG 问题。

axe-core 是由 Deque Systems 开发的开源自动化无障碍测试引擎。它驱动着一个庞大的工具生态——浏览器扩展(axe DevTools、Accessibility Insights)、CI 脚本(axe-cli、jest-axe、cypress-axe、playwright-axe),以及最广为人知的 Lighthouse 无障碍审计模块。

过去十年,axe-core 是全球部署量最大的自动化无障碍检测工具。当今大多数在生产环境中运行的无障碍相关 CI 流水线,其底层都在运行 axe-core——即便团队往往并未意识到这一点。

axe-core 的优势

axe-core 的规则集在设计上采取保守策略:只有当一条规则的误报率接近于零时,才会被纳入。这使 axe-core 可以作为可靠的 CI 门控——一旦标记出违规,该违规就是真实存在的,团队可以直接处理,无需担心因频繁误报而疲于奔命。

axe-core 能可靠检测的规则包括:

  • 表单控件缺失或为空的标签。
  • 缺少 alt 属性(以及明显无效的 alt,如文件名)。
  • 颜色对比度不足(文字及 UI 组件)。
  • 无效的 ARIA——不存在的角色、缺少必要属性、不允许的子结构。
  • 重复 ID 导致 ARIA 引用失效。
  • <html> 缺少 language 属性。
  • 按钮没有可访问名称。
  • 表单字段缺少程序化标签。
  • 空链接(<a href>...</a> 无文本或替代文本)。
  • 标题级别跳跃及在特定配置下缺少 <h1>

这些规则涵盖了相当比例的低悬挂无障碍问题。在 CI 中运行 axe-core,可在代码审查阶段而非审计阶段就捕获这些问题。

能力上限

axe-core 的作者对其上限有明确说明:自动化工具最多能检测到 30–40% 的 WCAG 问题。其余问题需要人工判断和辅助技术测试。

具体而言,axe-core 无法检测:

  • 替代文本内容错误——它能告诉用户 alt 缺失,但无法判断 alt="hamburger icon" 对于一个打开菜单的按钮而言是错误的。
  • 误导性链接文本——“点击此处”链接在规范上是正确的,但对屏幕阅读器用户毫无用处。
  • 焦点顺序错误——Tab 顺序与视觉顺序不一致是 2.4.3 的违规,任何静态检测工具都无法发现。
  • 不正确的标题结构——axe-core 能检测缺失的 h1 和级别跳跃,但无法判断一个页面将本应是 h1 的内容标记为了 h2。
  • 仅对特定用户群体不可用的内容——符合 WCAG 但对低视力用户、认知障碍用户等群体不可用的情况。

axe-core 零违规是无障碍性的必要条件,而非充分条件。其余工作——焦点顺序、内容质量、屏幕阅读器行为、真实用户测试——才是占用大部分实际时间的部分。

如何在实际工作中使用 axe-core

以下三种部署模式配合使用效果最佳:

  1. 在编辑器中。 axe DevTools 和 Accessibility Insights 可在浏览器标签页中对渲染后的 DOM 按需运行。在开发阶段使用。
  2. 在 CI 中。 axe-cli、jest-axe、cypress-axe 或 playwright-axe 会在发现新违规时让构建失败。用于防止退化。
  3. 在审计时。 外部审计人员将 axe-core 作为起点,在此基础上叠加手动测试。用于验证自动化基线。

这种组合能将自动化可检测的问题保持在零的同时,让真正的无障碍方案处理其余部分。