HTML可访问性:让屏幕阅读器在显示隐藏文本时通知它

Question

根据w3 documentation，我们可以使用aria-live属性告诉屏幕阅读器在HTML元素发生更改时读取该元素的文本内容。然而，在我的例子中，我不会更新任何文本，只是希望屏幕阅读器在某些条件下(即，通过使用<span>的.show()函数)变为可见时通知jQuery的内容。

这是我的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+browser组合都是一致的。

Answer 2

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

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