有一种观点认为,无障碍不是一个清单,这意味着如果您真的想要使网站无障碍,您不能仅仅勾选清单上的某些内容并将其称为完美。清单可能不完美,更糟糕的是,它将用户排除在外,因此人们这样说。
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) 可视化工具包”
我的工作使用 Siteimprove 服务来扫描我们网站的某些部分。他们还发布了一个 Chrome 插件,该插件使用了与他们的付费服务类似的大部分技术。我特别喜欢它能够按 WCAG 级别(A、AA、AAA)对发现的错误进行分类,以及引用正在检查的规范部分以及它是否检测到实际错误或需要手动检查的内容。(例如,“此
<img>
没有 alt 属性”与“alt 属性是否充分描述了图像?”)它们还同时链接到规范以及 WCAG 的页面,这些页面涉及符合规范的建议技术。另一个投票支持Siteimprove Chrome 扩展!我们过去一直使用 Wave,但 Siteimprove 的 Chrome 扩展功能强大,而且对任何想要使用它的人都是免费的。它还拥有现代的设计和感觉,让人耳目一新。
我可以提一下 WAVE 扩展吗?https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
非常适合各种 a11y 测试,包括正确的标题级别嵌套/顺序。
我再投一票给 WAVE 插件!
我还喜欢 Colorblinding 和 NoCoffee,它们可以模拟不同级别和类型的视觉。Chromevox 非常适合练习通过键盘导航和屏幕阅读器体验网络 - 我确实觉得我应该花更多时间尝试用这种方式导航,以便更好地了解只能够以这种方式导航的感觉,它的最大挑战是什么,哪些网站遗漏了哪些内容等等。
为了保持事情的客观性,我喜欢来自 gov.uk 的这些列表,它们展示了不同的一组可访问性特征。它是一个很好的提醒,每个人的需求各不相同,对一个人来说可访问的,对另一个人来说可能不可访问。https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/
没错!可访问性不是一个清单。但是,这些工具允许您捕获低垂的果实(错字、意外情况等等)。话虽如此,你在文章开头引用的那个人(Karl)表达了他关于如何 *不* 进行自动化测试的强烈观点,并写了 Tenon:https://tenon.io/
可访问性不等于可用性。
一个网站可能完全“可访问”,但实际上很难使用。
当谈到可访问性时,我们大多数人想到的是我们的盲人朋友,但不要忘记其他人。
使用放大镜浏览网页的人通常不喜欢深度缩进,因为它会导致额外的滚动(/搜索)。
有视力但不用鼠标的用户,他们不会“听到”aria 角色。对他们来说,它仍然有意义吗?(aria 角色 tablist 会造成混乱)
色盲,比你想象的要多的人有色盲。你使用颜色来呈现状态吗?(也许也改变图标以使其更清晰)
如果他们用手机访问你的网站,它还能正常工作吗?
有时即使是微小的改变也能使他们的生活变得更好。(即使他们没有抱怨)
例如,这些工具测试您的图像是否具有 ALT 属性,但 alt=”ytfytf” 也将被标记为正确。
在列表中添加导航项很好,但是如果它只包含两个项,你就会得到“包含两个项的列表第一项第二项”。这种开销值得吗,还是会让人厌烦?
添加 aria 角色也是如此。添加它们会给你加分,但实际上,你应该只在没有其他方法使用通用 html 时添加它们。
这些工具可能适合测试明显的缺陷,但它不能替代使用你产品的用户进行测试。
问问他们,收集所有这些(可能)不同的偏好,并尝试将其合并成一个好结果 :)
感谢发布这些内容,自动化工具似乎是最具成本效益的方法来确保一定程度的可访问性……实际上,我无法想到任何不涉及至少在某种程度上使用列表或一组指南的方法。
感谢你的介绍!对于 aXe,你可以使用 axe-webdriverjs 集成(以及其他功能)来编写额外的功能。这使得脚本登录和使用 iframe 的测试页面变得更加容易。aXe 的 Chrome 和 Firefox 扩展也可以在 iframe 内部进行测试。
我们还正在开发一个预发布的 axe-core 版本,它可以测试 Shadow DOM:https://www.deque.com/blog/test-leading-edge-accessibility-axe-coconut-axe-core-3-0/
这里有一份很好的工具清单,另一个支持上面提到的 WAVE 插件的投票。作为一个为使用第三方可访问性公司(如银行)的各种公司进行大量工作的人,值得注意的是,WCAG 指南中的很多内容也取决于测试者的个人偏好。
我记不清有多少次我的公司工作被提交给这些第三方,结果却得到了建议。实施更改后,更改必须返回进行重新测试(通常由不同的人进行),然后他们建议我们做我们最初做的事情(而不了解这是我们最初做的事情)。由于某些指南完全可以进行个人解释,因此这通常是一个永无止境的循环。坦率地说,这通常是一场彻头彻尾的噩梦。
对我来说,了解这种名为可访问性的技术可能性非常重要,这样我才能开展与我们很快将要使用的网站相关的活动。因此,我请求您继续实施,以促进我们组织的发展。