HTML 可访问性：让屏幕阅读器在显示隐藏文本时宣布隐藏文本

Question

根据w3 documentation，我们可以使用aria-live 属性告诉屏幕阅读器在HTML 元素的文本内容发生更改时读取它。但是，在我的情况下，我不会更新任何文本，只是希望屏幕阅读器在 <span> 在某些条件下可见时宣布它的内容（即，通过使用 jQuery 的 .show() 函数）

这是我的 HTML 和 JS 的简化：

<div class="toggleable_element" hidden>
    <span aria-live="assertive">Text to be read out</span>
</div>
....
<script>
    $("#toggleable_element").show();
</script>

像这样使用 aria-live 不会触发屏幕阅读器阅读文本（在这种情况下我使用的是 JAWS）。

另一个建议是添加属性role="alert"，尽管这似乎也不会触发屏幕阅读器通知。

关于如何让 span 的内容被大声朗读有什么建议吗？

Answer 1

在最近的屏幕阅读器 + 浏览器组合上，您所做的应该正常工作。

我在 iOS 10 上尝试了 IE/Firefox/Chrome+Jaws/NVDA 以及 VO。当它的内容发生变化时会读出 aria-live 元素的内容，而且当它因为 CSS 的变化而变得可见时也会被读出显示或可见性属性。 当在 DOM 中添加这样的元素时，它也会被读出。 请注意，它仅适用于显示和可见性 CSS 属性。其他可能影响有效可见性的 CSS 属性不起作用，例如不透明度、变换、离屏定位等。后者通常会被屏幕阅读器完全忽略。

但是，不起作用的是在元素显示或添加到 DOM 之后添加 aria-live 属性。 这样做，该元素永远不会成为 aria-live 区域，并且不会读出以后的内容更改。

为此，几乎所有 SR+浏览器组合都同意。

Answer 2

您使用的是哪个版本的 JAWS 和网络浏览器？

我知道 JAWS 和 IE11 在使用 aria-live 时经常不能很好地配合使用。