在 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 。