HTML 可访问性:使屏幕阅读器在显示隐藏文本时读出隐藏文本

Question

根据 w3 文档，我们可以使用 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"尽管这似乎也不会触发屏幕阅读器公告。

关于如何大声朗读跨度内容的任何建议？

Answer 1

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

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

但是，不起作用的事情是在 DOM 中显示或添加元素后添加 aria-live 属性。这样做，该元素永远不会成为咏叹调实时区域，也不会读出以后的内容更改。

为此，几乎所有的SR +浏览器组合都一致。

Answer 2

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

我知道 JAWS 和 IE11 在使用 aria-live 时经常不能很好地协同工作。