我需要在我的应用中有一个屏幕，它的所有内容都将使用屏幕阅读器自动读取。
我尝试添加role="dialog" aria-live="assertive" aria-atomic="true"，但没有成功。
我也尝试使用role="alert" aria-live="assertive" aria-atomic="true"，它确实读过它，但使用'alert'作为前缀。
如何在不使用前缀和附加信息的情况下实现它？
【问题讨论】：
标签： html web accessibility wcag wcag2.0
我相信document 角色是在您的情况下使用的正确角色。来自MDN：
通常用于复杂的复合小部件或应用程序中，文档角色可以通知辅助技术将上下文切换到阅读模式：文档角色告诉具有阅读或浏览模式的辅助技术使用文档模式来读取包含在其中的内容元素。
您应该在您希望立即阅读的元素上包含tabindex="0"，并使用JavaScript 将焦点设置到该元素。
更新
我在 Mac/Chrome 版本 79.0.3945.88 中测试了以下代码，并删除了 tabindex 属性以及所有 JavaScript。 VoiceOver 立即按自然顺序读取文档内容。
<div class="container" role="document">
<p>
Read this first.
</p>
<p>
Read this next.
</p>
</div>
我对 VoiceOver 实用程序进行了截屏，因为它正在阅读上述 HTML 以显示它在页面加载时工作（请原谅 gif 开头的 Giphy Capture 位）。
【讨论】：
JS 中添加焦点，它应该以自然顺序阅读它
如果这真的像一个对话框 - 这意味着它主要由可操作的内容（UI 控件，如按钮）组成，那么 不可操作 内容不会被宣布 默认情况下。如果在带有role="dialog" 的事物上，您有aria-labelledby 指向它的标题，并且aria-describedby 指向您想要在它读取时读取的内部元素的所有ID（空格分隔），则您可以解决此问题打开。
标记可能如下所示：
<div role="dialog" aria-labelledby="dialogheading" aria-describedby="foo bar">
<h2 id="dialogheading">Let's have a dialog</h2>
<p id="foo">lorem ipsum</p>
<p id="bar">rhubarb rhubarb</p>
<button>yadda</button>
<button>yoda</button>
</div>
如果真的有很多不可操作的内容，或者如果没有可操作的内容，角色对话是错误的。如果此“屏幕”的上下文处于表单/应用程序模式，请改用 role=document，并确保它有一个 tabindex 以便您可以为其提供焦点，这应该会将屏幕阅读器切换到浏览模式。
【讨论】：