NVDA的行為

Question

我正在嘗試在網頁中添加實時區域支持，以使NVDA可用於該頁面。 但是，我看到具有aria-live屬性的行為與預期的完全不同。

1. 我嘗試添加一個隱藏的活動區域，然后將所有消息（每個消息包含在<p>標記中）轉儲到該區域中，以供屏幕閱讀器讀取。 它工作正常，但是唯一的問題是NVDA屏幕閱讀器永遠不會讀取插入實時區域div中的第一條消息。 后續消息被完美讀取。 當要宣告第一條消息時，將動態創建該活動區域div。

2. aria-live="assertive"並不會真正中斷當前流程以宣布消息。

3. 我在網頁中使用淘汰賽。 當基於剔除條件顯示標記為活動區域的HTML div時，屏幕閱讀器無法檢測到它。 例如：

    <!-- ko if: $data --> <div aria-live="polite" data-bind="text: $data"> </div> <!-- ko --> 

   最初加載頁面時，$ data為空。 因此沒有live-div區域。 但是，當獲取數據時，將插入div。 但是，NVDA不會讀取添加的div中的內容。 這是預期的行為嗎？ 是否有解決此問題的解決方法？

Answer 1

快速解答，時間緊迫。

您必須在頁面渲染時將活動區域顯示在頁面上。 這將啟動瀏覽器以監視其更新。 在事實之后添加元素只會啟動瀏覽器，但不會觸發它。

我分叉了您的筆，並使它在第一個按鈕中起作用（通過瀏覽器將“ XYZ”發音為“ zeyes”）。 這是在調試模式下，因此根本沒有CodePen代碼（也沒有幀）來頂起它：

http://s.codepen.io/aardrian/debug/wgWqVm

非調試模式，因此您可以看到以下代碼：

http://codepen.io/aardrian/pen/wgWqVm

您的代碼將aria-live放在包裝在Knockout ko if:語句中的元素上，因此在加載時不會呈現給頁面：

<p>Last name: 
  <!-- ko if: lastName -->
    <strong aria-live="polite" data-bind="text: lastName"></strong>
  <!-- /ko -->
</p>

我對它進行了調整，以便將ko if:的活動區域放置在ko if:周圍ko if:檢查，現在按下按鈕時會宣布：

<p>Last name: 
  <div aria-live="polite">
    <!-- ko if: lastName -->
      <strong data-bind="text: lastName"></strong>
    <!-- /ko -->
  </div>
</p>

是的，我在<p>放置了<div> ，但這僅用於演示目的。

在NVDA 2016.4 / Firefox 50.1.1中進行了測試，它可以按照我的預期工作。 我根本沒有碰第二個。