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

Question

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

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

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

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

Answer 1

相信document role 是在您的情况下使用的正确角色。来自 MDN :

Generally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: The document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.

您应该包括 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 位)。