强制屏幕阅读器中断

Question

我在一家开发基于 WebGL 的学习内容的公司工作，我们希望为我们的程序添加更多辅助功能。为此，我一直在尝试找到一种使屏幕阅读器能够工作的方法，但我遇到了一个它可能会落后的问题（例如，如果快速连续地将鼠标悬停在多个交互式事物上）。

我整理了这个演示来说明问题： https://jsfiddle.net/dzqek8os/

当您将鼠标悬停在输出左侧的彩色方块上时，它会更新带有

aria-live="assertive"

标记的 div 和颜色名称，并且当您单击其中一个方块时也会输出。然而，当您在方块上快速擦过鼠标时，即使 div 立即更新，屏幕阅读器（在我的例子中使用 NVDA 进行测试）也不会因更新而中断自身。不过，当您单击其中一个方块时，它确实会自行中断。

右边是我试图复制的行为。如果您将鼠标悬停在单词上（另一个 div 中的简单 p 标签），当您将鼠标悬停在新元素上时，屏幕阅读器会自行中断。

我尝试过的其他事情：

• 追加一个新的 div 作为断言 div 的子元素
• 与上面相同，但在追加新子级之前清除父级 div
• 有 5 个独立的 div（全部带有

  aria-live="assertive"

  ）并循环，每次悬停都会更新一个 div

有没有办法用JS复制右边的行为？

Answer 1

您没有可靠的方法来告诉屏幕阅读器立即说出给定的消息，从而打断当前所说的内容。

基本上，礼貌意味着将消息排入队列，并在之前的所有消息都说完之后才说出它。

断言意味着尽快说出消息，但在规范中没有明确说明，如果“尽快”意味着立即中断，仍然完成当前消息，仍然播放几秒钟的整个音频缓冲区，或者还有什么。

由于其实现和/或实现者的观点，所有屏幕阅读器对“尽快”的解释都略有不同，并且无论如何立即中断可能并不总是可取的。

通常，语音在用户交互（即按键、鼠标单击等）时立即中断，因为立即向用户提供结果非常重要。否则用户可能会认为应用程序滞后。 在这种情况下，立即中断是可取的，只是逻辑，很好理解，这就是为什么它会按您的预期工作，包括将鼠标移动到段落上时。 但是，当没有用户交互时，消息通常不应该如此突然地中断。

您的根本问题是，从浏览器和屏幕阅读器的角度来看，呈现 3D 场景的画布是单个元素。它不知道其中有不同的子元素。 虽然当您移动到新元素时立即宣布是正常的，但如果您留在同一元素内则中断是不正常的。

是否可以将 3D 场景分割成不同的不同 HTML 元素？或者是否有 API 或其他东西可以让浏览器和屏幕阅读器现在您的画布显示不同的子元素？例如，我知道，对于 SVG，您可以定义单独的可聚焦部分。 这将是您应该尝试的解决方案。 执行类似的操作并另外使场景中的每个不同元素可聚焦对于仅使用键盘的用户也非常有益，否则他们可能无法使用您的应用程序。