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:

<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)
})

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)
})

• javascript
• html
• accessibility
• wai-aria

• 1 Are you talking about Chrome Vox? You didn't specify the actual screen reader causing issues. – GrahamTheDev Commented Nov 6, 2019 at 17:47
• Sorry, I'm referring to MacOS built in VoiceOver. – mildrenben Commented Nov 7, 2019 at 10:44
• Ahh, I don't have access to anything Apple at the moment but I know from experience VoiceOver doesn't always play well with Chrome. I think that use case is entirely small as most VoiceOver users tend to stick with Safari or Firefox (at least that's what our user feedback tends to say) because of the issues. Unless someone says otherwise I would think it is a bug as your code looks fine, wish I had something handy I could test it on for you. – GrahamTheDev Commented Nov 7, 2019 at 16:05

2 Answers 2

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/mug6vonf/3/

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.