无障碍测试工具

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您的旅程每个阶段提供云产品。立即开始使用 价值 $200 的免费积分!

有一种观点认为,无障碍不是一个清单,这意味着如果您真的想要使网站无障碍,您不能仅仅勾选清单上的某些内容并将其称为完美。清单可能不完美,更糟糕的是,它将用户排除在外,因此人们这样说。

Karl Groves 曾对此提出过反对意见

我认为,一个包含清单式评估的完善文档流程,更有助于确保所有用户的需求得到满足,而不仅仅是一些用户。

我提到这一点是因为您可能认为,自动无障碍测试工具是另一种形式的清单。它们内置了规则,并且会根据这组规则测试您的网站。

我对这些东西还比较陌生,所以不是专家,但似乎有很多选择!让我们看看其中的一些。

aXe

用于对基于 HTML 的用户界面进行自动测试的无障碍引擎。让 aXe 解决您的无障碍缺陷!

aXe 可以查看 HTML 文档并查找潜在的无障碍问题,然后将它们报告给您。例如,有一些浏览器扩展程序(Firefox / Chrome)可以为您提供生成所查看页面上的无障碍错误报告的功能。

本质上,它是一个脚本,因此可以以多种方式使用。例如,您可以 在 Pen 中加载该脚本 并测试该 Pen 的无障碍性。

有一个 CLI,因此您可以将其集成到构建流程、测试环境或部署流中,等等。

看起来好像 intern-a11y 可以帮助编写 aXe 脚本以获得额外功能。

Pa11y

Pa11y 是您的自动无障碍测试伙伴。它从命令行运行 HTML CodeSniffer 以进行编程无障碍报告。

Pa11y 是另一个类似的工具。它是一个可以测试 URL 的无障碍问题的脚本。您可以从命令行使用文件路径或 URL(pa11y http://example.com)并获取报告。

还可以从 Node 环境中使用它并根据需要进行配置。实际上,它有意设计为仅在编程中使用,因为它是有书签/可视版本 HTML_CodeSniffer 的编程版本。

还有一个名为 Koa11y 的原生应用程序版本,如果这样更易于使用。

Seren Davies 最近写了 关于他们在特定情况下选择 Pa11y 而不是 aXe 的文章。

我们首先调查了 aXe CLI,但很快就意识到它不符合我们的要求。它无法检查需要访客登录的页面,因此虽然我们可以测试我们的产品页面,但无法测试任何客户帐户页面。相反,我们转向了 Pa11y。它的 beforeScript 步骤意味着我们可以登录网站并测试订单历史记录等页面。

Google 无障碍开发者工具

Google 也加入了游戏,推出了 无障碍开发者工具

其主要组件是无障碍审计:一组审计规则,用于检查常见的无障碍问题,以及用于在 HTML 页面中运行这些规则的 API。

与其他工具类似,它被设计为以不同的方式使用,例如作为 Grunt 任务、从命令行或浏览器使用。

Addy Osmani 有 a11y,由 Chrome 无障碍工具提供支持,它似乎提供了更好的 API 和更友好的报告。

但现在看来,Google 网站审计的大部分工作都集中在 Lighthouse 上,其中包括无障碍测试。例如,“按钮具有无障碍名称” 测试,但该测试实际上是 aXe 在幕后运行的。

我不清楚 Lighthouse 是否运行了完整的最新 aXe 审计,以及无障碍开发者工具是否已弃用以支持它,或者其他什么。

自动无障碍测试工具 (AATT)

PayPal 也加入了游戏,推出了 AATT,它是已提及工具的组合和扩展。

基于浏览器的无障碍测试工具和插件需要手动测试每个页面,一次一个。能够爬取网站的工具只能扫描不需要登录凭据的页面以及不在防火墙后面的页面。现在,您可以使用 AATT 将无障碍测试集成到现有的自动化测试套件中,而无需开发、测试和使用单独的无障碍测试套件。

AATT 包括 HTML CodeSniffer、aXe 和 Chrome 开发者工具,以及 Express 和 PhantomJS,它们在 Node 上运行。

它启动了一个带有 API 的服务器,您可以使用该服务器来测试其他服务器上的页面。

accessibilityjs

GitHub 最近发布了 accessibilityjs,这是它们自己用于无障碍测试的工具。它们在客户端使用它,当它发现错误时,它会应用一个巨大的红色边框并应用一个单击处理程序,这样您就可以单击它来告诉您问题是什么。

它们将范围缩小到以下常见错误

  • ImageWithoutAltAttributeError
  • ElementWithoutLabelError
  • LinkWithoutLabelOrRoleError
  • LabelMissingControlError
  • InputMissingLabelError
  • ButtonWithoutLabelError
  • ARIAAttributeMissingError

Tenon.io

Tenen.io 可能是所有工具中最容易上手的,因为主页最上面有一个验证器,您可以将 HTML 复制粘贴到其中或将其拖放到其中以进行验证。

Tenon.io 可以识别任何环境中的 508 和 WCAG 2.0 问题,甚至可以在开发人员的笔记本电脑上识别。因为在生产环境中发现错误可不是什么好事。

它提供 30 天/500 次 API 调用免费试用,之后是付费产品。

Tenon.io 集成 在许多地方。Karl 亲自告诉我

我们有一个 CLI。我们有 Grunt 和 Gulp 插件、Node 模块以及 Chrome、Firefox、IE 和 Opera 的插件。PHP 类、Ruby Gems、CMS 集成,例如 WordPress、Drupal 等。

值得一提

我并不是有意地想要突出显示或隐藏任何特定的无障碍测试工具。所有这些东西对我来说都是新事物。只是看起来这些是主要的玩家。但网上搜索发现更多内容!

  • Tanaguru:“自动化无障碍 (a11y) 测试工具,重点在于可靠性和自动化”
  • The A11y Machine“是一个自动化的无障碍测试工具,可以爬取和测试任何 Web 应用程序的页面,以生成详细的报告。”
  • tota11y:“一个无障碍 (a11y) 可视化工具包”