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，以便您可以為其設置焦點，這應該將屏幕閱讀器切換到瀏覽模式。