如何在JavaScript中中断屏幕阅读器？

Question

我正在编写一个nwjs游戏，并希望为其添加辅助功能。

目前，我正在使用`aria-live`属性与屏幕阅读器进行通信。 `document.getElementById("game").setAttribute("aria-live", "assertive")`

我通过以下方式宣布消息： `document.getElementById("game").setAttribute("aria-label", "my text")`

这样做是有效的，但我需要一种中断的方式。

无论是"assertive"还是"polite"的`aria-live`设置都不起作用。 我尝试将标签文本设置为空或". !"，但也不起作用。

有没有办法做到这一点？或者在nwjs的JavaScript应用程序中与屏幕阅读器进行通信的更好方法？

- krypek

---

无需通过JS来解决无障碍问题。打断屏幕阅读器并不能提高无障碍性，反而降低了它，因为这会给用户带来困惑。如果是关于游戏的话，首先要检查游戏是否能够通过屏幕阅读器进行无障碍访问。例如，飞行模拟器永远无法对盲人玩家进行无障碍访问。你永远无法以足够的速度向盲人传达驾驶飞机所需的必要细节。试图使飞行模拟器适用于这些屏幕阅读器将是徒劳无益的努力和资源浪费。 - undefined

我相信这个游戏可以做到。我有一个使用Web Speech API的实现，但我在考虑是否应该实现屏幕阅读器支持。实际上，中断是有帮助的，因为你可以中断长文本，比如描述，更快地滚动菜单等。 - undefined

有没有类似于 aria-alert 的属性可以打断？我模糊记得有这样的东西，当警报或通知出现时，它可以立即显示结果？不过，这已经过去很久了，aria 的文档仍然很糟糕。 - undefined

@tacoshy 一些无障碍专家指出你对于飞行模拟器不可访问的观点完全错误。请观看这个视频：https://www.youtube.com/watch?v=kpzdzxyqwA0&plid=PLVEo4bPIUOskja9pfpqceY8qDrykFdubf&index=6 - undefined

Answer 1

首先，如果在元素创建后添加aria-live属性，那么live属性将不起作用。 为了使其起作用，属性必须在元素添加到DOM时存在。

而且，如果元素在页面加载后添加到DOM（某些屏幕阅读器+浏览器+操作系统组合不支持），它也不总是起作用。 最安全/最兼容的方法是在页面加载时就有live元素已经存在。

其次，要将要朗读的文本添加到live元素中作为内容/子元素。使用appendChild、insertAdjacentHTML等方法。

标签和/或描述的更改不会自动朗读，无论是真正的<label>、aria-label还是aria-labelledby都是如此。 只有元素的内容会被朗读。

还要注意，页面加载时元素内部的内容不会被朗读。至少，它也不是普遍适用的。如果您需要在页面加载时说些什么，诀窍是在页面加载后的几百毫秒后添加内容。

最后，回答实际问题，不，你不能打断屏幕阅读器正在说的内容。清除实时区域的内容在一些屏幕阅读器+浏览器+操作系统的组合中有效，但这只是少数情况。

它并不普遍适用于所有地方，所以你不应该依赖它。

然而，如果你正在使用Elektron或nw.js开发应用程序，你有可能调用一个与屏幕阅读器直接交互的本地库。

优点：发送消息以进行朗读时延迟较小，并且你可以有效地控制何时打断朗读或不打断。

缺点：它不具备可移植性，你可能需要调用与屏幕阅读器+操作系统组合相对应的不同API。

如果你有兴趣，我是Windows平台上这样一个库的作者，它叫做UniversalSpeech。它可以从nw.js/Elektron中调用。

- QuentinC

Answer 2

你还可以查看一些现有的ARIA角色，它们有一些不错的默认设置。比如role="alert"，role="log"等。

而且，正如QuentinC所说，最好在添加/删除任何内容之前在DOM中设置属性。还要尽量将与活动区域相关的属性放在最近的父容器上。屏幕阅读器可能会在深层次的DOM树/更新中出现问题。

- thiessenp