探索无障碍 CLI 工具

纳税日快乐（至少如果你是美国人的话）！

我上一篇博文是关于我的可访问性测试流程的。不过，这周我想研究一下自动化测试。我初步了解了工作时的工作内容以及我确保手动测试的内容。我还写了所有我手动测试的内容。

如今，持续集成对于大型团队至关重要。但令你惊讶的是，我还没有为我的项目配置可访问性的 CLI 工具。我大部分时间都是主要的前端，而且我总是出于习惯手动测试，所以感觉这从来没必要。

是时候自我反省了。我绝对应该把这些集成到我的项目测试中。我曾经是唯一的前端开发人员，并视其为理所当然。现在我所在的团队，我是无障碍专家，但团队里还有其他前端开发人员。我审核了很多拉取请求，但如果持续集成能够捕获新的错误，事情就会容易得多。这不就是持续集成的意义吗？捕捉我们遗漏的东西？让我们的生活更轻松？

注意！这将是一篇“跟我一起学习”的帖子。

我将介绍我熟悉的两个 CLI 工具：pa11y 和 aXe-cli。如果您有任何想了解的工具，欢迎随时在 Twitter 上与我联系。

Pa11y

Pa11y是我几年前使用的第一个可访问性测试工具。第一次尝试的时候，它是一个 gulp 包。说实话，我当时没有进行任何配置，因为当时我觉得这个工具的限制太多了。

我对此很陌生，所以我将在这篇博文中介绍如何安装它，看看我是否喜欢它。

npm install pa11y --save

现在我要创建一个 npm 脚本来运行 pa11y。在我的package.json文件中：

"scripts": {
  "test-a11y": "pa11y ./index.html"
}

然后我打开命令行输入，npm run test-a11y结果报错。我遇到了一个 SyntaxError，我记得两年前就遇到过，我刚好记得是 Node 版本问题。

$ npm run test-a11y

> egghead-focus-event@1.0.0 test-a11y /Users/lkopacz/Sites/egghead-focus-event
> pa11y ./index.html

/Users/lkopacz/Sites/egghead-focus-event/node_modules/pa11y/bin/pa11y.js:92
async function runProgram() {
      ^^^^^^^^

当我检查我使用的 Node 版本时，我发现不知何故，我已经从 Node v.8 切换到了 Node v.6。尴尬的是，我当时没注意到这个问题，因为我用的 Node 版本比较旧。

nvm use v8.9.1

现在脚本似乎可以正常运行了！我运行它时出现了一个可访问性错误。

$ npm run test-a11y
> egghead-focus-event@1.0.0 test-a11y /Users/lkopacz/Sites/egghead-focus-event
> pa11y ./index.html


Welcome to Pa11y

 > Running Pa11y on URL file:///Users/lkopacz/Sites/egghead-focus-event/index.html

Results for URL: file:///Users/lkopacz/Sites/egghead-focus-event/index.html

 • Error: The html element should have a lang or xml:lang attribute which describes the language of the document.
   ├── WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2
   ├── html
   └── <html class="no-js"><!--<![endif]--><head> <met...</html>

1 Errors

哎呀，真尴尬。不过，这正是它存在的原因。我要修复它，看看会发生什么。

<html class="no-js" lang="en">
  <!-- MOAR HTML-->
</html>

现在让我们再次运行该测试并看看会发生什么。

$ npm run test-a11y

> egghead-focus-event@1.0.0 test-a11y /Users/lkopacz/Sites/egghead-focus-event
> pa11y ./index.html


Welcome to Pa11y

 > Running Pa11y on URL file:///Users/lkopacz/Sites/egghead-focus-event/index.html

No issues found!

嗯，设置起来很容易！到目前为止，我很喜欢 pa11y。我很想多尝试一下，并了解一下他们的其他工具，比如 pa11y 仪表盘。不过，CLI 似乎对这篇博文的重点最有帮助。

aXe-cli

Deque Systems 是一家领先的无障碍公司，它开发了aXe-cli工具。我之前很少使用 Deque 的工具，这很令人震惊，因为它们是这个领域的领导者。我将像上面安装 pa11y 一样安装该模块。这次，我将根据我的表单标签课程代码进行测试。这节课存在无障碍错误，因为我已经在视频中修复了它们。我知道存在表单标签错误。

npm install axe-cli --save

然后我将创建与 pa11y 任务相同的 npm 脚本。

"scripts": {
  "test-a11y": "axe ./index.html"
}

当我运行该命令时，我收到的内容如下：

$ npm run test-a11y

> egghead-30-second@1.0.0 test-a11y /Users/lkopacz/Sites/egghead-form-labels
> axe ./index.html

Running axe-core 3.2.2 in chrome-headless

Testing http://./index.html ... please wait, this may take a minute.
axe-webdriverjs deprecated Error must be handled as the first argument of axe.analyze. See: #83 node_modules/axe-cli/lib/axe-test-urls.js:85:8

  Violation of "document-title" with 1 occurrences!
    Ensures each HTML document contains a non-empty <title> element. Correct invalid elements at:
     - html
    For details, see: https://dequeuniversity.com/rules/axe/3.2/document-title

  Violation of "html-has-lang" with 1 occurrences!
    Ensures every HTML document has a lang attribute. Correct invalid elements at:
     - html
    For details, see: https://dequeuniversity.com/rules/axe/3.2/html-has-lang

  Violation of "landmark-one-main" with 1 occurrences!
    Ensures the document has only one main landmark and each iframe in the page has at most one main landmark. Correct invalid elements at:
     - html
    For details, see: https://dequeuniversity.com/rules/axe/3.2/landmark-one-main

  Violation of "page-has-heading-one" with 1 occurrences!
    Ensure that the page, or at least one of its frames contains a level-one heading. Correct invalid elements at:
     - html
    For details, see: https://dequeuniversity.com/rules/axe/3.2/page-has-heading-one

4 Accessibility issues detected.

Please note that only 20% to 50% of all accessibility issues can automatically be detected.
Manual testing is always required. For more information see:
https://dequeuniversity.com/curriculum/courses/testingmethods

好的。乍一看，我非常喜欢一些东西。主要是因为最后的免责声明。

请注意，只有 20% 到 50% 的可访问性问题可以自动检测到。始终需要手动测试。

比较两者

我喜欢这两个工具。我们先来了解一下它们的优缺点！

pa11y

优点：

设置起来非常简单。
它们会告诉你 HTML 中有问题的代码在哪里

缺点：

我之所以知道如何调试最初的错误，是因为我记得几年前就遇到过。它的文档里确实有，但我没找到。Deque 的要求在 README.md 上要高得多。
错误信息不是很详细。有时这对新手来说比较棘手

aXe-cli

优点：

正如我上面提到的，我很喜欢这个免责声明：你应该手动测试以发现其他问题。请参阅我上一篇关于可访问性测试流程的文章。我还有一个我手动测试的清单。
我还喜欢它为您提供一些失败规则的链接。

缺点：

我更喜欢 pa11y 的地方在于它能准确地告诉你有问题的元素在哪里。请注意，我并不是说这不可能。我只测试了我能测试到的最基本的命令。

结论

好吧，我接触自动化无障碍测试比较晚，但我已经转变了。如果你注意到的话，即使作为专家，我也忘记了一些事情。我们并非完美。如果你与刚接触无障碍测试的团队合作，它是一款强大的工具。它可以确保其他团队成员不会引入新的问题或错误。我认为这两个工具都非常可靠，开箱即用。我打算仔细阅读它们的文档，看看如何进一步配置它们！

目前，我计划在我的项目中实现 pa11y。我更喜欢开箱即用的，因为我可以向团队解释错误发生的原因。我想进一步探索 aXe-cli，因为我觉得它的详细程度更清晰。我相信，如果配置更多，aXe 就能更好地按照我的喜好运行。

您有什么无障碍测试技巧吗？请在 Twitter 上告诉我。如果您有兴趣了解我的更多内容，请订阅我的新闻通讯（您可以随时取消订阅）。

鏂囩珷鏉ユ簮锛�https://dev.to/lkopacz/exploring-accessibility-cli-tools-3kcb