在 chrome 上刪除元素時，Aria-live 區域不會讀取更新

Question

當您將元素動態添加到 aria-live 區域時，Chrome 會讀出該區域中的所有項目，這很棒。

但是當您刪除一個元素時，Chrome 不會重新讀出該列表。 當您將區域用於錯誤時，這是一個問題，例如當用戶修復錯誤時，列表不會重新讀出。

此處示例： https://codepen.io/mildrenben/pen/WNNzVzN?editors=1010

<div aria-live='assertive'>

</div>

<button id='add'>add</button>
<button id='remove'>remove</button>

const addBtn = document.querySelector('#add')
const removeBtn = document.querySelector('#remove')
const ariaLive = document.querySelector('div')


let tick = 0

addBtn.addEventListener('click', () => {
  let newElem = document.createElement('span')
  newElem.textContent = tick
  tick++
  console.log(ariaLive, newElem)
  ariaLive.appendChild(newElem)
})

removeBtn.addEventListener('click', () => {
  ariaLive.removeChild(ariaLive.lastChild)
})

Answer 1

正確的方法應該是使用aria-relevant屬性，但是瀏覽器支持很差，不可靠。

我通常不提倡做一些駭人聽聞的事情來讓瀏覽器以某種方式運行，但如果你真的需要讓實時區域報告刪除，我會建議以下內容：

1. 將活動區域上的aria-atomic屬性設置為true 。 這意味着屏幕閱讀器將在每次添加（但不刪除）內容時讀取活動區域的全部內容。
2. 當您從活動區域中刪除一個元素時，添加另一個不可見元素，等待幾百毫秒，然后刪除該元素。
3. 按下刪除按鈕時，活動區域應宣布所有內容（減去刪除）。

此處的小提琴示例： https://jsfiddle.net/mug6vonf/3/

Answer 2

您還應該使用aria-relevant ：

價值觀：

以下一個或多個值的空格分隔列表：

• additions是將節點插入活動區域； 應該被認為是相關的。
• removals是刪除節點； 應該被認為是相關的。
• text是對現有節點的文本內容的更改； 應該被認為是相關的。
• all相當於添加刪除文本。

aria-relevant="additions text"是活動區域的默認值。

默認值不包括您可能需要的removals 。