如何在您的网站上测试Aria标签？

Question

我一直在做一些研究，但是在寻找一种很好的方法来测试我的Aria标签以及我使用的其他Aria标签时遇到了问题。对此进行测试的最佳实践是什么。当前，使用Material UI对Angular进行此操作，该UI已提供了一些良好的ARIA支持。

我尝试使用JAWS 9的试用版，但有时我不知道这是否是我的代码不好或者屏幕阅读器不如我期望的那样好。

感谢阅读，希望有人能指出我正确的方向。

Answer 1

Chromevox是一个不错的用于模拟屏幕阅读器的插件，如果您正在寻找它的话。如果您有兴趣了解您的网站是否符合可访问性指南的要求，可以前往chrome开发工具进行审核并生成报告。 （Ctrl + Shift + I->审核->仅选择可访问性并点击运行审核）

Answer 2

Chrome devtools 内置了可访问性检查：

1. 按 F12（或直接打开 Chrome 开发工具）
2. 选择标签“元素”
3. 点击您要检查的标签
4. 下面有一个部分，您可以在其中看到标签、类的所有样式……它被称为“样式” 在这里，您还可以在选项卡之间进行选择，因此请选择“可访问性”
5. 现在您可以看到为您的标签设置了哪些 aria 属性。 （在这张图片中你可以看到我在我的字体上放置了一个 aria-hidden 属性-awesome 这样屏幕阅读器就不会试图阅读图标）

Answer 3

JAWS已经存在很长时间了，所以如果事情没有按您期望的那样进行，抱歉，这可能是您的代码有问题。但是，JAWS不适用于测试，因为JAWS的目的是允许视障用户在计算机上完成工作。 JAWS在阅读网站时会使用一些启发式方法，如果您的html不好，JAWS将尝试弄清您的意思，以便最终用户可以完成他们的任务。

NVDA是用于测试的出色屏幕阅读器。它不会尝试猜测您的代码在做什么，并且如果您编写的html不好，那么它的阅读效果就会很差。而且它是免费的（尽管捐款表示感谢）。

JAWS和NVDA均适用于PC。

在Mac上，您可以使用内置的VoiceOver屏幕阅读器。无需安装。只需按 Cmd + F5 。

打开屏幕阅读器，并使用 tab 浏览您的网站，并聆听如何宣布互动元素。您可以打开NVDA的语音查看器工具（ins + n>工具>语音查看器），然后可以查看正在说的内容。 VoiceOver具有“隐藏式字幕”类型的查看器，因此您可以查看正在宣布的内容。屏幕阅读器将读取您的aria标签。

在运行NVDA时，您还可以使用快捷键来查看是否正确定义了其他元素。

• H-导航至下一个标题
• B-导航至下一个按钮
• T-导航至下一张表
• L-导航至下一个列表

请参见https://www.nvaccess.org/files/nvda/documentation/userGuide.html#SingleLetterNavigation