axe DevTools Pro

我将尝试向您展示一些我认为关于axe™ DevTools有用且重要的内容，并尽可能少用文字。

axe DevTools 包含一个浏览器扩展程序，您无需任何专业知识即可使用。

您可以像安装任何其他扩展程序一样，从扩展程序目录中安装它。

它是一个选项卡，与您其他的 DevTools 位于同一位置。

它可能位于最右边。我喜欢点击并将其拖到“元素”选项卡旁边。

现在我可以扫描我的页面并找到 57% 的可访问性问题，以及修复它们的帮助。

这是一个在 CodePen 上缺少 title 属性的 <iframe>。

扩展程序本身的信息对于解决问题非常有帮助，但我也可以点击进入Deque 大学，获取关于该问题、受影响人群以及如何解决该问题的非常清晰、详细的信息。对于我上面发现的问题

屏幕阅读器用户可以选择调出页面上所有框架的标题列表。添加描述性、唯一的标题允许用户快速找到他们需要的框架。如果没有标题，浏览框架可能会很快变得困难和令人困惑。

axe DevTools Pro 解锁了 Intelligent Guided™ 测试，这意味着我们可以修复所有可访问性问题的 83%。

许多可访问性问题是代码的静态扫描无法捕获的。例如，您的网站是否有模态框？如果有，则测试它需要一些分步测试。哪些按钮打开它（因为焦点需要返回到那里）？模态框打开后能否找到？它是否捕获焦点？它是否可以关闭？这些都是重要的、难以独自记住并且无法静态测试的问题。但您很幸运，Intelligent Guided 测试（您可以通过升级到 axe DevTools Pro获得）使问题易于发现，因为它会引导您完成每个步骤。

“在推送之前确保您的代码 axe 清洁。” 是一种我赞同的公司文化。

您不会在代码中提交语法错误。您不会提交格式错误的代码。也不要提交可访问性错误。打开 axe DevTools，在推送新的提交之前确保您的代码 axe 清洁。

朋友不会让朋友发布无法访问的代码。