HTML accessiblity：让屏幕阅读器在显示时发布隐藏文本

Question

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

这是我的HTML和＆amp;的简化。 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和网络浏览器？

我知道JAWS和IE11在使用咏叹调时往往不能很好地合作。