当铬元素被移除时，Aria live区域不会读取更新

Question

当您动态地将元素添加到aria活动区域时，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相关的：

值：

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

• additions是将节点插入到活动区域中；应被视为相关
• CCD_ 5是节点的删除；应被视为相关
• CCD_ 6是对现有节点的文本内容的改变；应被视为相关
• all相当于添加-删除文本

aria-relevant="additions text"是活动区域的默认值。

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