Axe 是用于网站和其他基于 HTML 的用户界面的可访问性测试引擎。它快速、安全、轻量,并且旨在与任何现有测试环境无缝集成,因此您可以在常规功能测试的同时自动化可访问性测试。
注册 axe 新闻,了解有关 axe 功能、未来版本和活动的最新信息。
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 无法确定时,axe-core 会将元素返回为“不完整”,需要手动审核。
为了在开发周期的早期捕获错误,我们建议使用 axe-linter vscode 扩展。为了进一步提高测试覆盖率,我们建议使用 axex Extension 中的智能引导测试。
首先下载安装包:
npm install axe-core --save-dev
现在,将 javascript 文件包含在您的装置或测试系统中的每个 iframe 中:
< script src =" node_modules/axe-core/axe.min.js " > script >
现在,在测试中的每个新 UI 可见或公开的点插入调用:
axe
. run ( )
. then ( results => {
if ( results . violations . length ) {
throw new Error ( 'Accessibility issues found' ) ;
}
} )
. catch ( err => {
console . error ( 'Something bad happened:' , err . message ) ;
} ) ;
只有让开发人员能够承担可访问性测试和可访问编码实践的责任,网络才能成为一个可访问、包容的空间。
自动化可访问性测试可以节省大量时间,不需要特殊的专业知识,并且允许团队将专家资源集中在真正需要的可访问性问题上。不幸的是,大多数辅助工具旨在在已达到开发过程结束的网站和应用程序上运行,并且通常不会给出清晰或一致的结果,从而在您认为产品已准备好交付时导致沮丧和延迟。
Axe 的构建是为了反映 Web 开发的实际工作方式。它适用于开发团队可能使用的所有现代浏览器、工具和测试环境。使用 axe,可访问性测试可以作为单元测试、集成测试、浏览器测试以及团队日常执行的任何其他功能测试的一部分来执行。在早期开发过程中构建可访问性测试可以节省时间、资源和各种挫折。
axe-core API 完全支持以下浏览器:
支持意味着我们将修复错误并尝试定期测试每个浏览器。目前只有 Chrome 和 Firefox 对每个拉取请求进行了测试。
对 JSDOM 的支持有限。我们将尝试使所有规则与 JSDOM 兼容,但如果不可能,我们建议关闭这些规则。目前已知color-contrast
规则不适用于 JSDOM。
我们只能支持本地支持或正确填充功能的环境。我们不支持已弃用的 v0 Shadow DOM 实现。
axe-core API 包包括:
axe.js
- 应包含在被测网站 (API) 中的 JavaScript 文件axe.min.js
- 上述文件的缩小版本Axe 可以使用您的本地语言构建。为此,必须将本地化文件添加到./locales
目录中。该文件必须按以下方式命名:
。要使用此语言环境构建 axe,请使用--lang
标志运行 axe,而不是默认语言环境,如下所示:
grunt build --lang=nl
或等价:
npm run build -- --lang=nl
这将为 axe 创建一个新的版本,名为axe.
和axe.
。如果您想构建所有本地化版本,只需传入--all-lang
即可。如果要构建多个本地化版本(但不是全部),可以将逗号分隔的语言列表传递给--lang
标志,例如--lang=nl,ja
。
要为 axe 创建新的翻译,请首先运行grunt translate --lang=
。这将在./locales
目录中创建一个 json 文件,其中包含默认的英文文本供您翻译。或者,您可以复制./locales/_template.json
。我们欢迎对 axe-core 进行任何本地化。有关如何贡献的详细信息,请参阅下面的贡献部分。消息语法的详细信息请参见检查消息模板。
要更新现有翻译文件,请重新运行grunt translate --lang=
。这将添加用英语使用的新消息并删除未用英语使用的消息。
此外,可以通过将locale
对象传递给axe.configure()
在运行时应用区域设置。区域设置对象必须与./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' : {
// Note: doT (https://github.com/olado/dot) templates are supported here.
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 个月内的次要版本系列提供。
DEQUE、DEQUELABS、AXE® 和 AXE-CORE® 是 Deque Systems, Inc. 的商标。Deque 商标的使用必须符合 Deque 的商标政策。
请参阅 axe-core ARIA 支持,了解 axe 支持的 ARIA 角色和属性的完整列表。
阅读建议 Axe-core 规则指南
阅读有关架构的文档
阅读有关贡献的文档
使用 axe-core 的项目列表
感谢 Marat Dulin 的 css-selector-parser 实现,它包含在 Shadow DOM 支持中。再次感谢 Slick Parser 实现者的贡献,我们在影子 DOM 支持代码中使用了他们的一些算法。感谢 Lea Verou 和 Chris Lilley 提供的 colorjs.io 库,我们使用该库在颜色格式之间进行转换。
Axe-core 根据 Mozilla 公共许可证 2.0 版分发。它捆绑了几个依赖项,这些依赖项按照自己的条款分发。 (请参阅 LICENSE-3RD-PARTY.txt)