用斧头自动可访问性检查-js教程-PHP中文网

Automated Accessibility Checking with aXe

aXe: 自动化辅助功能测试，让网站更易访问

您上次设计网站时，花了多少时间和精力来确保残障人士也能访问？许多人可能回答是“没有”。然而，大量互联网用户由于难以辨别颜色、阅读文本、使用鼠标或浏览复杂的网站结构而难以访问网站。

由于检查和实施辅助功能解决方案需要付出努力，因此辅助功能问题常常被忽视。开发人员不仅必须熟悉底层标准，还必须不断检查是否满足这些标准。我们能否通过自动执行标准检查来简化辅助功能网站的开发？

本文将向您展示如何使用 aXe 库和一些相关的工具来自动检查和报告网站和应用程序中潜在的辅助功能问题。通过降低此类活动所需的工作量并自动化一些手动工作，我们可以为所有使用我们创建的内容的用户带来更好的结果。

aXe 简介

aXe 是一个自动化辅助功能测试库，旨在将辅助功能测试引入主流 Web 开发。axe-core 库是开源的，设计用于与不同的测试框架、工具和环境一起使用。例如，它可以在功能测试、浏览器插件或应用程序的开发版本中运行。它目前支持大约 55 条规则，用于检查网站的各个辅助功能方面。

为了快速演示该库的工作原理，让我们创建一个简单的组件并对其进行测试。我们不会创建一个完整的页面，而只是一个标题。

图片：CodePen 示例截图

在创建标题时，我们做了一些出色的设计决策：

我们将背景设置为浅灰色，链接设置为深灰色，因为这种颜色既优雅又时尚；
我们为搜索按钮使用了一个很酷的放大镜图标；
我们将搜索输入的 tab 索引设置为 1，以便用户打开页面时可以按 Tab 键并立即键入搜索查询。

不错，对吧？让我们看看从辅助功能的角度来看它是什么样的。我们可以从 CDN 添加 aXe 并将所有错误记录到浏览器控制台，方法如下：

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

登录后复制

如果您运行该示例并打开控制台，您将看到一个包含六个违规对象的数组，列出了我们遇到的问题。每个对象都描述了我们违反的规则、应责备的 HTML 元素的引用以及有关如何解决问题的帮助信息。

以下是一个违规对象示例，以 JSON 格式显示：

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

登录后复制

如果您只选择违规的描述，以下是它的内容：

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="用斧头自动可访问性检查" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

登录后复制

事实证明，我们的设计决策并不那么出色：

我们选择的两种灰色阴影对比度不够，视力障碍者可能难以阅读
搜索按钮的放大镜图标没有为使用屏幕阅读器的人提供任何关于按钮用途的指示
搜索输入的 tab 索引打破了使用屏幕阅读器或键盘的人的常规导航流程，并使他们更难以访问菜单链接。

它还指出了我们没有想到的其他一些事情。总共执行大约 55 次不同的检查，包括来自不同标准指南和最佳实践的规则。

要查看错误列表，我们必须将脚本注入页面本身。虽然完全可行，但这并不方便。如果我们可以对任何页面执行这些检查而无需自己注入任何内容，那就更好了。最好使用众所周知的测试运行器。我们可以使用 Selenium WebDriver 和 Mocha 来做到这一点。

使用 Selenium WebDriver 运行 aXe

要使用 Selenium 运行 aXe，我们将使用 axe-webdriverjs 库。它提供了一个可以在 WebDriver 之上使用的 aXe API。

要设置它，让我们创建一个单独的项目并使用 npm init 命令初始化一个 npm 项目。您可以随意为它要求的所有内容保留默认值。要运行 Selenium，您需要安装 selenium-webdriver。我们将在 PhantomJS 中执行测试，因此我们也需要安装它。Selenium 需要 Node 版本 6.9 或更高版本，因此请确保您已安装它。

要安装软件包，请运行：

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

登录后复制

现在，我们需要安装 axe-core 和 axe-webdriverjs：

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

登录后复制

现在基础设施已设置好，让我们创建一个针对 sitepoint.com 运行测试的脚本（没什么个人恩怨，伙计们）。在项目文件夹中创建一个 axe.js 文件并添加以下内容：

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="用斧头自动可访问性检查" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

登录后复制

要执行此测试，我们可以运行 node axe.js。我们无法从控制台运行它，因为我们已在本地项目中安装了 PhantomJS。我们必须将其作为 npm 脚本运行。为此，请打开 package.json 文件并更改默认测试脚本条目：

npm install phantomjs-prebuilt selenium-webdriver --save-dev

登录后复制

现在尝试运行 npm test。几秒钟后，您应该会看到 aXe 发现的违规行为列表。如果您没有看到任何违规行为，则可能意味着 SitePoint 在阅读本文后已修复了它们。

这比我们的初始方法更方便，因为我们不需要修改我们正在测试的页面，并且我们可以使用 CLI 方便地运行它们。但是，这样做的缺点是我们仍然需要执行单独的脚本才能运行测试。如果我们可以将其与我们的其余测试一起运行，那就更好了。让我们看看如何使用 Mocha 来实现这一点。

使用 Mocha 运行 aXe

Mocha 是最流行的测试运行器之一，因此它似乎是尝试使用 aXe 的一个不错的选择。但是，您应该能够以类似的方式将 aXe 集成到您最喜欢的测试框架中。让我们进一步构建我们的 Selenium 示例项目。

我们显然需要 Mocha 本身和一个断言库。Chai 怎么样？使用以下命令安装所有内容：

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

登录后复制

现在，我们需要将我们编写的 Selenium 代码包装在 Mocha 测试用例中。使用以下代码创建一个 test/axe.spec.js 文件：

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

登录后复制

测试将通过检查 results.violations 数组的长度是否等于 0 来执行非常基本的断言。要运行测试，请将测试脚本更改为调用 Mocha：

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="用斧头自动可访问性检查" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

登录后复制

此练习的下一个逻辑步骤是在测试失败时生成更详细的错误报告。之后，将其与您最喜欢的 CI 环境集成以正确显示页面的结果也很有用。我将把这两件事留给读者作为练习，并继续介绍一些有用的附加 aXe 配置选项。

(后续内容，关于高级配置、总结和常见问题的部分，可以根据之前的输出进行类似的改写，保持内容一致性，并调整语句和段落结构，使之更流畅自然。)

以上是用斧头自动可访问性检查的详细内容。更多信息请关注PHP中文网其他相关文章！