如何使用 JavaScript 确定屏幕阅读器会读取什么内容？

Question

我有一个已经可以使用 iOS 和 Android 设备访问的 Web 应用程序，但我正在尝试在没有屏幕阅读器的设备上进行相同的操作。 我有一个应用程序外壳形式的解决方案，我可以在其中启动我的 Web 应用程序； shell 可以像 Talk Back 一样导航/操作元素，没有问题......实际上，我已经使用替代屏幕操作设备为行动不便的人实现了可访问性。

我还需要支持屏幕阅读器，我不知道是否有办法（在 JavaScript/Typescript 中）检索给定按钮应该读取的内容。 例如，如果显示一个标题为“下一步”的按钮，我想检索文本“下一步，按钮”或类似的内容。

有没有基于标准的方法来做到这一点？ 或者，是否有其他人已成功使用第三方库来解决类似问题？ 还是我注定要自己写？

澄清一下：我可以访问 JAWS 和 NVDA 并且已经在它们两个上验证了我的解决方案。

TL;DR：我正在寻找一种让 JavaScript 查询元素并检索将要讲述的内容的方法，不是为了我自己的启迪，而是为了我可以将正在讲述的信息传递给我自己创建的另一个工具.

Answer 1

我认为最好的方法是实际安装/启用屏幕阅读器（例如，macOS 内置了一个），然后闭上眼睛自己听。

Answer 2

TL; DR：没办法

基本上，您无法获得特定屏幕阅读器朗读的字符串，您也无法确定屏幕阅读器是否已启动。
更重要的是，不同的屏幕阅读器以不同的方式传达信息，甚至此外，用户可以调整他/她的屏幕阅读器，因此可以说，下面的例子中，下一个按钮，按钮旁边或旁边（或播放声音，而不是说“按钮”）。 因此，您似乎没有真正的机会获得所需的东西。

Answer 3

您正在寻找的是可访问的名称计算。 跳转到第 4.3.1 节“术语”，您将逐步找到算法。

真是够口的。 我还没有找到一个好的开源实现。 即使您正确地遵循它，您也会发现已建立的屏幕阅读器软件并不总是如此。

您也可以等到 Accessibility API（或AOM 项目）获得广泛支持，然后利用它，但谁知道什么时候会发生。

但是，如果您完全控制语音输出，为什么不与视障用户合作优化体验，而不是针对软件会提出什么？

Answer 4

也许您可以使用Puppeteer 的可访问性 API来计算给定节点的可访问性树是什么样的。

Accessibility 类提供了检查 Chromium 的可访问性树的方法。 辅助技术（例如屏幕阅读器或开关）使用可访问性树。

我不确定您是否可以准确计算出每个屏幕阅读器的输出，但这可能值得一试。