加载页面时可访问性 aria-live 不起作用

【问题标题】：accessibility aria-live not working when loading a page加载页面时可访问性 aria-live 不起作用
【发布时间】：2018-02-24 00:46:14
【问题描述】：

我试图让我的屏幕阅读器在我的页面加载一条消息时阅读该消息。下面是我使用的代码。当我将鼠标悬停在文本上时，我可以阅读该消息。但是，由于某种原因，我无法让屏幕阅读器在页面加载时阅读我的消息。如果有什么我需要做的，请提出建议。

<div class="bannerError">
    <div class="bannerError_image"></div>
    <span class="bannerError_text" aria-live="assertive">Please enter your name
    </span>
</div>

【问题讨论】：

标签： javascript accessibility

【解决方案1】：

页面加载时，活动区域容器必须存在于 HTML 中，但它最初不应包含任何内容。

只有在页面加载后才会监控活动区域的内容以进行更新。向活动区域添加内容通常是通过 JavaScript 完成的。

您可能想查看 WCAG 页面以了解 aria-live 的使用情况： W3C - Using ARIA role=alert or Live Regions to Identify Errors

另外，Terril Thompson 有一个很好的 live region testing page，它说明了 aria-live 可以实现的一些不同方式。

【讨论】：