axe-core

Axe 是一个用于网站和其他基于 HTML 的用户界面的无障碍测试引擎。它快速、安全、轻量，并且专为无缝集成到任何现有测试环境而设计，因此您可以将无障碍测试与常规功能测试一起自动化。

无障碍规则

Axe-core 包含不同类型的规则，涵盖 WCAG 2.0、2.1、2.2 的 A、AA 和 AAA 级别，以及一些最佳实践，帮助您识别常见的无障碍实践，如确保每个页面都有一个 h1 标题，并帮助您避免 ARIA 中的"陷阱"，比如您使用的 ARIA 属性会被忽略的情况。完整的规则列表，按 WCAG 级别和最佳实践分组，可以在 doc/rule-descriptions.md 中找到。

使用 axe-core，您可以平均自动发现 57% 的 WCAG 问题。此外，axe-core 会将无法确定的元素标记为"不完整"，需要手动审查。

为了在开发周期的早期发现 bug，我们建议使用 axe-linter vscode 扩展。为了进一步提高测试覆盖率，我们推荐使用 axe 扩展中的智能引导测试。

入门

首先下载软件包：

npm install axe-core --save-dev

然后在您的固定装置或测试系统的每个 iframe 中包含 JavaScript 文件：

<script src="node_modules/axe-core/axe.min.js"></script>

现在在测试中的每个新 UI 元素变得可见或暴露的点插入调用：

axe
  .run()
  .then(results => {
    if (results.violations.length) {
      throw new Error('发现无障碍问题');
    }
  })
  .catch(err => {
    console.error('发生错误:', err.message);
  });

理念

只有当开发人员有能力承担无障碍测试和无障碍编码实践的责任时，网络才能成为一个无障碍、包容的空间。

自动化无障碍测试可以节省大量时间，不需要特殊专业知识，并允许团队将专家资源集中在真正需要的无障碍问题上。不幸的是，大多数无障碍工具都是为了在开发过程结束时运行网站和应用程序而设计的，往往无法给出清晰或一致的结果，在您认为产品已准备好发布时造成挫折和延迟。

Axe 的构建反映了 Web 开发的实际工作方式。它可以与开发团队可能使用的所有现代浏览器、工具和测试环境配合使用。使用 axe，可以将无障碍测试作为单元测试、集成测试、浏览器测试和团队日常执行的任何其他功能测试的一部分。在早期开发过程中构建无障碍测试可以节省时间、资源和各种挫折。

关于 axe - 我们的宣言

Axe 是开源的。
它不会产生误报（除非有 bug）。
它设计用于在所有现代浏览器上工作，并与您今天使用的任何工具、框架、库和环境兼容。
它得到主要无障碍供应商 Deque Systems 的积极支持。
它与您现有的功能/验收自动化测试集成。
它根据评估上下文自动确定要运行的规则。
Axe 支持内存固定装置、静态固定装置、集成测试和无限深度的 iframe。
Axe 高度可配置。

支持的浏览器

axe-core API 完全支持以下浏览器：

Microsoft Edge v40 及以上版本
Google Chrome v42 及以上版本
Mozilla Firefox v38 及以上版本
Apple Safari v7 及以上版本
Internet Explorer v11（已弃用）

支持意味着我们将修复 bug 并尝试定期测试每个浏览器。目前只有 Chrome 和 Firefox 在每个 pull request 上进行测试。

JSDOM 的支持有限。我们将尝试使所有规则与 JSDOM 兼容，但在无法做到的情况下，我们建议关闭这些规则。目前已知 color-contrast 规则无法与 JSDOM 一起使用。

我们只能支持功能被原生支持或正确填充的环境。我们不支持已弃用的 v0 Shadow DOM 实现。

API 包的内容

axe-core API 包包含：

axe.js - 应包含在被测试网站中的 JavaScript 文件（API）
axe.min.js - 上述文件的压缩版本

本地化

Axe 可以使用您的本地语言构建。为此，必须将本地化文件添加到 ./locales 目录。该文件必须按以下方式命名：<langcode>.json。要使用此语言环境而不是默认语言环境构建 axe，请使用 --lang 标志运行 axe，如下所示：

grunt build --lang=nl

或等效地：

npm run build -- --lang=nl

这将为 axe 创建一个新的构建，称为 axe.<lang>.js 和 axe.<lang>.min.js。如果您想构建所有本地化版本，只需传入 --all-lang 即可。如果您想构建多个本地化版本（但不是全部），可以将逗号分隔的语言列表传递给 --lang 标志，如 --lang=nl,ja。

要为 axe 创建新的翻译，首先运行 grunt translate --lang=<langcode>。这将在 ./locales 目录中创建一个 json 文件，其中包含默认的英文文本供您翻译。或者，您可以复制 ./locales/_template.json。我们欢迎对 axe-core 的任何本地化。有关如何贡献的详细信息，请参阅下面的贡献部分。有关消息语法的详细信息，请参阅检查消息模板。

要更新现有的翻译文件，请重新运行 grunt translate --lang=<langcode>。这将添加英语中使用的新消息，并删除英语中未使用的消息。

此外，可以通过将 locale 对象传递给 axe.configure() 来在运行时应用语言环境。locale 对象必须与 ./locales 目录中现有语言环境的形状相同。例如：

axe.configure({
  locale: {
    lang: 'de',
    rules: {
      accesskeys: {
        help: 'Der Wert des accesskey-Attributes muss einzigartig sein.'
      }
      // ...
    },
    checks: {
      abstractrole: {
        fail: 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
      },
      'aria-errormessage': {
        // 注意：这里支持 doT (https://github.com/olado/dot) 模板。
        fail: 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
      }
      // ...
    }
  }
});

支持的语言环境

Axe-core 支持以下语言环境。请注意，由于语言环境由我们的社区贡献，因此不能保证在发布时包含所有需要的翻译。

巴斯克语
丹麦语
荷兰语
法语
德语
希伯来语
日语
韩语
挪威语（博克马尔）
波兰语
葡萄牙语（巴西）
西班牙语
希腊语
意大利语
简体中文
繁体中文

更新和安全

Axe-core 每 3 到 5 个月发布一个新的次要版本，通常会引入新的规则和功能。我们建议安排时间升级到这些版本。安全更新将提供给最长 18 个月 的次要版本线。

有关发布频率、长期支持和升级 axe-core 建议的详细信息，请参阅发布和支持。
有关不同版本可能引入的更改类型的详细信息，请参阅向后兼容性。

Deque 商标政策

DEQUE、DEQUELABS、AXE® 和 AXE-CORE® 是 Deque Systems, Inc. 的商标。使用 Deque 商标必须符合 Deque 的商标政策。

支持的 ARIA 角色和属性

有关 axe 支持的 ARIA 角色和属性的完整列表，请参阅 axe-core ARIA 支持。

贡献

阅读提议 Axe-core 规则指南

阅读架构文档

阅读贡献文档

使用 axe-core 的项目

使用 axe-core 的项目列表

致谢

感谢 Marat Dulin 提供的 css-selector-parser 实现，该实现包含在内以支持 shadow DOM。另外感谢 Slick Parser 的实现者们的贡献，我们在 shadow DOM 支持代码中使用了他们的一些算法。感谢 Lea Verou 和 Chris Lilley 提供的 colorjs.io 库，我们用它来转换不同的颜色格式。