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

Question

When you dynamically add an element to an aria-live region, Chrome will read out all the items in that region which is great.

But when you remove an element, Chrome does not re-read out the list. This is an issue when you're using the region for errors and such, as when the user has fixed an error, the list is not re-read out.

Example here: 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

The correct method should be to use the aria-relevant attribute, however the browser support is very poor, and as such it is not reliable.

I don't normally advocate for doing hacky things to make a browser behave a certain way, but if you really need to make the live region report removals, here's what I would suggest:

1. Set the aria-atomic attribute on your live region to true . This means that the screen reader will read the entire contents of the live region each time content is added (but not removed).
2. When you delete an element from the live region, add another invisible element, wait a few hundred milliseconds, and then delete that element.
3. The live region should announce all of the contents (minus the deletion) when the remove button is pressed.

Example fiddle here: https://jsfiddle.net/mug6vonf/3/

Answer 2

You should also use 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.

The default value doesn't include removals , which you probably need.