WCAG - 如何让屏幕阅读器自动阅读所有页面？

Question

我需要在我的应用程序中有一个屏幕，它的所有内容都将使用屏幕阅读器自动读取。

我试图添加role="dialog" aria-live="assertive" aria-atomic="true"但它没有成功。

我也尝试使用role="alert" aria-live="assertive" aria-atomic="true"它确实读取了它，但使用 'alert' 作为前缀。

我怎样才能不使用前缀和附加信息来实现它？

Answer 1

我相信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 位）。

Answer 2

如果这真的像一个对话框——这意味着它主要由可操作的内容（UI 控件，如按钮）组成，那么默认情况下不会公布不可操作的内容。 如果你能解决这个问题，在用的东西role="dialog" ，你有aria-labelledby指着它的标题， aria-describedby指着元素的所有IDS（空格分开）内要读出当它打开时。

标记可能如下所示：

<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，以便您可以为其设置焦点，这应该将屏幕阅读器切换到浏览模式。