How to interrupt a screen reader in JavaScript?

Question

I'm writing a nwjs game, and I want to add accessibility features to it.

I'm currently using the aria-live property to communicate with the screen reader. document.getElementById("game").setAttribute("aria-live", "assertive")

and I announce messages by doing document.getElementById("game").setAttribute("aria-label", "my text")

This works, but I need a way to interrupt it.

Both "assertive" and "polite" aria-live settings dont work.
I tried setting the label text to "" or ". !" but it doesn't work either.

Is there a way do do that? Or maybe there's a better way to communicate with the screen reader in a nwjs javascript application?

Answer 1

First, the live property isn't taken into account, and so won't work, if aria-live attribute is added after the element is created. In order to make it work, the attribute must be present at the time the element is added to the DOM.

It even doesn't work all the time either if the element is added to the DOM after page load (some screen readers + browsers + OS combinations don't support it). The safest / most compatible is to have the live element already present since page load.

Secondly, the text to be spoken must be added to the live element as content / sub-elements. Use appendChild, insertAdjacentHTML, etc.

A change in the label and/or description won't be read automatically, and it's the same whether it's a real <label>, aria-label or aria-labelledby. Only the content of the element will be read.

Note also that the content present inside the element at page load won't be read. At least, it doesn't work universally either. If you need to say something right at page load, the trick is to add the content a short time after the page is loaded, just a few hundreds of milliseconds later.

Finally, to answer to the actual question, no, you can't interrupt what the screen reader is currently saying. Clearing the content of the live region will work with a few SR+Browser+OS combinations, but it's quite a large minority. It doesn't work universally everywhere, so you shouldn't rely on it.

However, if you are making an application with Elektron or nw.js, you have the possibility to call a native library which will interact directly with the screen reader.
Advantages: there is a little less delay when sending a message to speak, and you have effectively control on when to interrupt speech or not.
Drawbacks: it isn't portable, and you may need to call as many different APIs as there are screen readers+OS combinations to support.

If you are interested, I'm the author of such a library for windows, it's called UniversalSpeech. It's callable from nw.js/Elektron.

Answer 2

You could also check out some of the existing ARIA roles that have some nice defaults. Like role="alert", role="log"..

And what QuentinC said, best to have the attribute in the DOM before adding/removing any content. Also aim to have the live region related attribute on the nearest parent container. Screen readers can struggle with deep DOM trees/updates.