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

Question

我一直在做一些研究，但在寻找测试我的 Aria 标签和我使用的其他 Aria 标签的好方法时遇到问题。测试这个的最佳实践是什么。目前使用 Material UI 为 Angular 执行此操作，该 UI 已经具有一些良好的 ARIA 支持。

我尝试使用 JAWS 9 的试用版，但有时我无法判断是我的代码不好还是屏幕阅读器没有我希望的那么好。

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

Answer 1

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

NVDA是一款非常适合测试的屏幕阅读器。它不会尝试猜测你的代码在做什么，如果你的 html 写得不好，它的阅读效果也会很差。而且它是免费的（尽管感谢捐赠）。

JAWS 和 NVDA 均适用于 PC。

在 Mac 上，您可以使用内置的VoiceOver屏幕阅读器。没有什么可安装的。刚打Cmd+F5。

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

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

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

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

Answer 2

Chrome 开发者工具内置了辅助功能检查：

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

Answer 3

如果您正在寻找的话，Chromevox是一个很好的模拟屏幕阅读器插件。如果您有兴趣了解您的网站在遵循可访问性指南方面的表现如何，您可以转到 Chrome 开发工具中的审核并运行报告。（Ctrl+Shift+I --> 审核 --> 仅选择可访问性并点击运行审核）