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

Values:

A space-delimited list of one or more of the following values:

additions are insertion of nodes into the live region; should be considered relevant.

removals are deletion of nodes; should be considered relevant.

text are changes to the textual content of existing nodes; should be considered relevant.

all is equivalent to additions removals text.

aria-relevant="additions text" is the default value on a live region.

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

Answer 2

正确的方法应该使用aria-relevant属性，但是浏览器支持很差，作为这样不靠谱。

我通常不提倡做一些骇人听闻的事情来让浏览器以某种方式运行，但如果你真的需要删除实时区域报告，我的建议如下：

将您所在地区的 aria-atomic 属性设置为 true。这意味着每次添加（但不删除）内容时，屏幕 reader 将读取实时区域的全部内容。
当您从活动区域中删除一个元素时，添加另一个不可见元素，等待几百毫秒，然后删除该元素。
当按下删除按钮时，实时区域应该宣布所有内容（减去删除）。

示例 fiddle 此处：https://jsfiddle.net/mug6vonf/3/

在 chrome 上删除元素时，Aria-live 区域不会读取更新

Aria-live region is not reading out updates when an element is removed on chrome

html

javascript

accessibility

wai-aria