aria-live被其他標簽打斷了，如何停止這種行為？

Question

我目前有這個aria-live = assertive的div：

<div id="accesibility__ready" aria-live="assertive" aria-atomic="true"></div>

當前在我的js文件中，我有一種方法來設置頁面中的所有內容，均使用tabindex（第一個標題），然后使用<p> 。 此方法完成后，我想通過aria live通知用戶，現在他可以使用tab導航：

  var ariaAlert = document.getElementById('accesibility__ready');
  ariaAlert.setAttribute('aria-label','Content updated tab navigation ready'); 

我注意到有時會讀取aria-live，但隨后它會被所有其他標簽（不是aria-live）打斷，屏幕閱讀器決定以某種方式讀取。

我正在使用Chrome和ChromeVox擴展程序。

那么，如何防止aria-live被其他標簽干擾？

Answer 1

聽起來好像不正確使用aria-live 。 如果該元素的內容/子元素將更改，則應在該元素上使用aria-live 。 這包括在元素本身上添加/刪除/更改文本（例如textContent ），或添加/刪除嵌套在元素下的DOM元素。 有關詳細信息，請參閱aria-live的W3規范 。

aira-live 不用於指示元素的屬性何時更改。 也就是說，在<div>上使用aria-live然后更改該div的aria-label 不會被宣布。

aria-atomic控制更改發生時讀取的內容。 應該只讀取更改的特定內容（ aria-atomic="false" -默認值），還是應該讀取整個元素（ aria-atomic="true" ）。

例如，

<div aria-live="polite">
  this message will self destruct in 
  <span id="counter">X</span> 
  seconds
</div>

沒有指定aria-atomic （因此使用默認值false ），如果將counter更新為“ 5”，則僅將計數器的值宣布為“ 5”。 但是，如果在<div>上使用aria-atomic="true"

<div aria-live="polite" aria-atomic="true">
  this message will self destruct in 
  <span id="counter">X</span> 
  seconds
</div>

那么當您將counter更改為“ 5”時，您會聽到“此消息將在5秒鍾內自毀”。

作為一些旁注。 除非您有一條非常重要的消息需要中斷正在讀取的其他內容，否則您應該始終嘗試使用aria-live="polite" 。 很少有情況需要使用aria-live="assertive" 。 使用assertive可能還會清除其他待讀取的消息。

https://www.w3.org/TR/wai-aria/#aria-live

“用戶代理或輔助技術可以選擇在發生肯定性更改時清除排隊的更改”

最后，問題的整個前提聽起來像是您有一個使所有標題和段落都可以標簽的選項（tabindex =“ 0”）。 我不知道該選項的目的，您這樣做可能有正當的理由，但是如果目的是“幫助”屏幕閱讀器用戶導航到頁面上的所有元素，那么您將在做屏幕讀者用戶受到損害 。 屏幕閱讀器用戶已經在屏幕閱讀器本身中內置了強大的導航機制。 例如，在PC上，JAWS或NVDA用戶可以使用“ H”快捷導航鍵導航到所有標題。 或者他們可以顯示一個顯示所有標題的對話框。 他們可以使用類似的快捷鍵導航至其他各種元素（“ B”移至下一個按鈕，“ T”移至下一個表，“ R”或“ D”移至下一個地標，“ L”移至下一個地標）。移至下一個列表，依此類推）。 iOS上的VoiceOver具有旋轉器，該旋轉器允許對標題，按鈕，表格等進行類似類型的導航。因此，只要您的頁面使用語義正確的html（例如<h2>作為標題，而不僅僅是使字體變大的樣式）和粗體），那么您應該沒有任何功能使所有功能都可以聚焦。