您不知道的 5 个令人惊叹的 Chrome 辅助功能工具！

我想我们都意识到，作为开发人员，我们有责任让网络更容易访问。

无障碍是指我们设计和编码的网站能够方便残障人士使用。

就我而言，我从来不知道该如何开始？
我总是听到人们喊：“让你的网站无障碍访问。”

好的，但是怎么做呢？

这 5 个 Chrome 开发工具将帮助我们实现这一点。

打开 Chrome 开发工具

我们对以下所有五项均使用 Chrome 开发工具，可以使用以下快捷方式找到它们。

MacCmd + Shift + C或 Windows Ctrl + Shift + C：。

1. 无障碍检查器

第一个也许是最明显的是可访问性检查器。

这将主要向我们展示某些 DOM 元素的 ARIA 属性。

要访问此菜单，我们需要打开 Chrome 开发者工具并右键单击某个元素。它位于“检查”选项卡下，但可以隐藏在“附加选项”下。

如果您想了解有关创建良好 aria 标签的更多信息，请查看有关 ARIA 的这篇文章。

2. 视觉模拟器

您知道我们可以模拟视力缺陷吗？

您希望使用此功能来确保视力障碍人士能够正确查看您的网站。
这可能是因为某些视力障碍人士。

打开 Chrome 开发者工具。
然后点击“更多工具”，并选择“渲染”。

向下滚动到渲染选项卡的底部并找到“模拟视觉缺陷”。

我们可以过滤以下内容：

• 视力模糊（看不清楚的人）
• 红色盲（色盲，看不到红色/绿色的色调）
• 绿色盲（色盲、绿盲）
• 三色盲（色盲，蓝色、黄色）
• 全色盲（完全色盲）

看起来如下：

请注意下图显示的是视觉模糊的图像！

3.灯塔

显然，我们有 Lighthouse，它现在内置了整个可访问性选项卡。

打开 Chrome 开发者工具，点击 Lighthouse 标签页。
然后我们可以勾选辅助功能复选框。

然后我们得到了这样的报告。

它会检查以下内容：

• Aria 定义
• 角色属性
• 对比度
• HTML 上的 Lang 属性
• 表单上的 Tabindex
• Alt 元素
• 还有更多！

4.对比度

说到可访问性，对比度至关重要。我们在视力缺陷产品中也看到了这一点。

Chrome 有一种快速显示特定元素对比度的方法。

要打开对比度，我们需要打开 Chrome 开发者工具。
然后检查一个文本元素并找到一个颜色框。
点击这个小颜色框，然后选择指针元素。

您可能认为没问题，但这意味着什么？

• 第一个值是你当前的对比度
• 第二个值是最小对比度（AA）
• 最后一个是增强对比度（AAA）

您可以改变颜色并查看是否可以增强对比度。

5. 检查元素工具提示

另一个结合了上述许多功能的出色工具提示实际上是检查器工具提示。

我们可以通过打开开发工具并选择指针图标来使用检查器工具提示。

然后，我们可以将鼠标悬停在一个元素上，快速看一下对比度的作用，以及它是否可以通过键盘聚焦。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。