HTML 可访问性 : make a screen reader announce hidden text when it gets shown

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 属性不起作用，例如opacity、transform、off-screen positioning 等。屏幕阅读器通常完全忽略后者。

但是，在 DOM 中显示或添加元素后添加 aria-live 属性是行不通的。这样做，该元素永远不会成为 aria-live 区域，也不会读出以后的内容更改。

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