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

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

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

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

是一个很好的模拟屏幕阅读器的插件，如果你正在寻找的话。如果您有兴趣了解您的网站是否符合可访问性指导原则，您可以访问chrome开发工具中的审计并运行报告。（Ctrl+Shift+I-->审核-->仅选择辅助功能和点击运行审核）

已经存在很长一段时间了，所以如果事情不像您预期的那样运行，很抱歉，这可能是您的代码有问题。然而，JAWS并不适合测试，因为JAWS的目的是让视力受损的用户在他们的计算机上完成任务。JAWS在阅读网站时会使用一些启发式方法，如果你的html不好，JAWS会尝试理解你的意思，以便最终用户能够完成他们的任务

是一个很好的测试屏幕阅读器。它不会试图猜测你的代码在做什么，如果你的html写得不好，它的阅读能力就会很差。而且它是免费的（尽管捐款很感激）

JAWS和NVDA都适用于PC

在Mac电脑上，您可以使用内置屏幕阅读器。没有要安装的内容。只需按Cmd+F5

打开屏幕阅读器，使用tab键浏览您的站点，并聆听交互元素是如何发布的。您可以打开NVDA的语音查看器工具（ins+n>tools>speech viewer），您可以看到正在讲话的内容。画外音有一个“闭路字幕”类型的查看器，这样你就可以看到正在宣布的内容。屏幕阅读器将读取您的aria标签

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

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

---

请参阅Chrome devtools的内置可访问性检查：

按F12键（或只打开Chrome开发工具）

选择“元素”选项卡

单击要检查的标记

下面有一个部分，您可以看到标签、类等的所有样式，它被称为“样式” 在这里，您也可以在选项卡之间进行选择，因此选择“可访问性”

现在您可以看到为标记设置了哪些aria属性。 （在这张图片中，你可以看到我在字体上添加了一个aria隐藏属性，这样屏幕阅读器就不会试图读取图标）

---

警告您的同事，一旦开始使用屏幕阅读器进行测试，您将变得非常易怒！完全错误。使用屏幕阅读器是非常自由的。我相信jaws比nvda有更好的功能，这就是我正在使用的。这快把我逼疯了。问题是关于测试一个网站，我必须假设它处于开发阶段。屏幕阅读器当然会持续阅读所有内容，包括切换到其他选项卡/IDE/电子邮件时。这就是我指的。一个复杂的网站需要很多天才能在屏幕阅读器中正常运行，你必须不断地听一遍又一遍的东西，把所有的东西都读出来。当然，如果你是视力受损的人，如果网站设计得很好，使用这样的工具是可以解放的，但在开发过程中，我不明白解放这个词是如何做到的可能适用！问题是我的“解放”评论和你的“易怒”评论都是主观的。当然，这可能会激怒你，但笼统地说这会激怒所有人是错误的。我使用NVDA、JAWS和画外音。在许多不同的应用程序（浏览器、电子邮件、IDE）中听东西，让你感受到用听觉而不是眼睛在电脑中导航的感觉。默认情况下，NVDA开启了鼠标跟踪功能，我同意这可能有些过分。这是我关掉的第一件事。也许这会对你有所帮助。