使用 axe Pro 自动化(并指导!)无障碍审计

❥ 赞助商

重要的是要知道,有一些工具可以自动执行网站的无障碍测试。它们是帮助确保您的网站对所有人可用至关重要的部分,这既是一个崇高的目标,也是对业务的好事。自动化测试无法捕捉到所有潜在的无障碍问题,但它们确实提供了很大的帮助,而且在我看来,它们有助于建立一种关注无障碍的文化。您越认真对待这些测试并实际解决问题,您在整体无障碍方面做得越好的可能性就越大。

有一款测试工具脱颖而出,axe(甚至 Google 的 Lighthouse 也使用它),现在它随着 axe Pro 的推出变得更加出色。

axe 扩展仍然是强大的工具,您只需点击一下即可在 DevTools 中获得可靠的无障碍报告

axe in Chrome DevTools

但还有更多!

指导性问答无障碍演练

不要掩盖要点,这可能是 axe Pro 最好的新功能。该工具非常友好,它让几乎任何人都可以使用无障碍测试功能

“Axe Pro 基本上让每个开发人员都能够充当内部无障碍专家,”Deque Systems 首席执行官 Preety Kumar 说。

运行测试,它只会用简单的英语问你一些问题。

Screenshot of axe asking me if the page title is correct on this page
任何人都可以回答来自这种指导性游览的问题。它非常有助于引导你思考网站的这些重要方面。

例如,以下是如何通过演练来帮助我思考标题和标题级别

Step 1: start test
Step 2: Identify headers that shouldn't be.
Step 3: Identify elements that should be headers but aren't.

首先,你识别问题,然后你可以保存信息以便根据需要进行修复

您的测试可以保存为在线报告

在 DevTools 中工作很不错,是深入研究网站无障碍问题的最佳位置。但是 DevTools 会话是短暂的!只有一个开发人员在一个时间点在一个计算机上工作。借助新的 axe Pro 网页仪表板,您可以将测试保存到在线。这在很多方面都很实用

  • 您可以保存到目前为止的测试,然后回来继续进行。
  • 您可以清除测试并重新执行,以跟踪您的进展。
  • 您可以在仪表板上拥有多个测试,以帮助您测试多个页面和项目。
  • 您的团队有一个家,可以管理所有这些测试。

您可以导出数据

如果您希望将结果从 axe 中取出并保存到其他地方,现在可以将数据导出为 JSON 或 CSV。您可能希望随着时间的推移跟踪结果以可视化改进,或将信息移植到其他工具。数据是您的。

export dialog box for axe test results

我立即发现了有用的提示。

我想我认为自己关心无障碍,并在工作中尽可能地做到无障碍,但是如果你像我一样,你会发现随着时间的推移,错误会逐渐进入你的代码库。就像我们可能会使用自动化工具来监控我们的性能指标一样,我们应该定期测试无障碍,尤其是在 axe Pro 等自动化工具提供帮助的情况下。

仅仅在使用 axe Pro 几小时后,我已经……

  • 发现很多图片缺少或不正确的 alt 文本。
  • 发现了一些使用标题标签但实际上不应该使用的元素。
  • 修复了一些元素上的颜色对比度,这些元素刚刚低于 AA,通过轻微调整使其符合要求。

第二个发现让我感到非常满意,因为指导性游览帮助我找到了它们。这正是完全自动化的工具无法帮助找到的东西,它需要你查看并做出判断。

我非常乐观地认为,这将帮助许多人发现他们以前无法发现的无障碍问题。

限时免费

这是一个重大事件

开发人员通常可以通过 axe 识别出大约一半的严重无障碍障碍。

您不妨试一试!