NVDA 未正確宣布 aria-live 區域

Question

我正在使 React 應用程序盡可能易於訪問。 但是，我注意到 NVDA 有一些奇怪的行為——我有兩個實時區域，我只是無法讓 NVDA 正確宣布。 在 Voiceover 上，一切都可以順利進行。

首先有一個通知組件，它已經像這樣生成了 HTML。 NVDA 不會公布通知，Voiceover 會：

<div aria-live="polite" aria-hidden="true/false">
  <article> <-- There might be many of these if there's multiple notifications, and there's none of these if there's no notifications
    <div>
      <div type="alert">
        <div>
          <div>The text here should be announced when shown</div>
        </div>
      </div>
    </div>
  </article>
</div>

如果我從第一個 div 中刪除 aria-hidden，NVDA 會讀取它，但它在 Voiceover 上變得不可靠。 在第一個 div 中，也有一個 PoseGroup 組件，只是沒有顯示在生成的 HTML 上。

編輯：我設法通過使用 aria-live="polite" 將整個內容包裝到另一個 div 中來實現這一點。 一個有點hacky的解決方案，但你知道...如果有人有更好的解決方案，我正在聽。

然后是一個實時聊天，它有這樣的 HTML：

<div>
  <ul aria-live="polite"> <-- There are multiple of these depending on number of elements, but always at least one
    <li aria-hidden="true/false"> <--- There are many of these, some hidden from screen reader depending on the component, these are messages, timestamps etc, some of them should be read
      <div>
        <span>
          <div>
            <p aria-hidden="true">Visible message text</p>
            <p aria-hidden="false">Hidden visibility, but contains additional information to screen reader and should be read always</p>
         </div>
        </span>
      </div>
    </li>
  </ul>
</div>

在這里，我使用了多個 aria-live 容器，當前一個容器上有足夠的消息時會生成這些容器，這是由於 Voiceover 在元素太多時停止讀取，並且此解決方案適用於它。 還應該注意的是，有一個 PoseGroup 組件包裝了 li 元素，它沒有顯示在生成的 HTML 上。 li 元素應該只讀取消息，沒有時間戳等，這就是它們隱藏 aria 的原因。 無論我嘗試什么，NVDA 都不會讀取其中的任何內容。 Voiceover 與這種代碼完美配合。 我試圖將 ul 和 li 轉換為 div，但沒有成功。

然后是一個表單輸入組件，它有一個錯誤 label 作為活動區域，如下所示：

<label>
  <span>Some text</span>
  <input/>
  <div aria-live="polite">
    <span>This span is conditionally shown if there's an error.</span>
  </div>
</label>

然而，這個組件在 Voiceover 和 NVDA 上都像這樣完美地工作，我只是無法理解為什么其他兩個沒有。 當然，它們更復雜，但它不應該也適用於 NVDA，因為 Voiceover 沒有任何困難嗎？

我仍然認為自己是一個可訪問的菜鳥，並且已經把頭撞到牆上好幾天了。

Answer 1

實時區域是一種得到很好支持且成熟的可訪問性工具，但它們並不是最直觀的東西。 您可能會錯誤地使用它們。

實時區域僅在內容更改時才會公布。 如果在頁面加載時活動區域中存在內容，除非內容發生變化，否則不會公布。

我不確定您是否使用aria-hidden作為切換來顯示/隱藏實時區域中的內容，但如果是這樣，那可能是您的問題的根源。 你的第三個例子沒有使用這種技術，它似乎是一種工作。