Polite ARIA live region for a game with high rate of messages

Question

I'm running a little game on the web. In order for it to be optimally screen reader accessible, incoming messages, which can be about in-game actions or user text chat, have to be read automatically as soon as they arrive.

Reading of messages has to be quick, but also reliable. Messages have to be read in order, and none must be prematurely interrupted or completely skipped. Otherwise, players may miss important events or information. Sometimes, messages arrive with a quite high frequency and/or in a burst. In any case, they have all to be read in order and without interruption.

It may happen that the user can't catch up because messages arrive too fast. In this case, he/she usually press the shut up key, often the Ctrl key. This has normally for effect to stop speaking immediately and drop all queued messages. The screen reader itself isn't supposed to determine without user intervention if a message can safely be dropped. Some screen readers give a second option to skip the current message and go directly to the next, for example Shift with NVDA. These shortcuts are well known by all screen reader users.

Unfortunately, all that is only theory, and in practice, I have trouble finding a way which works well everywhere.

The most problematic case is VoiceOver on the Mac, which seem to always whether interrupt the message currently being spoken as soon as a new one arrive (as if the region was assertive instead of polite, what isn't desired), or decide to skip messages randomly.

I have currently 7 demo pages where I experiment different ways of using polite ARIA live regions, and this has been tested by me and my tiny team with as most combinations of browsers, devices and screen readers as we can. Below you will find my findings so far.

Can you suggest something that works everywhere ? Can you, in particular, find a working solution for VoiceOver on Mac, which seems to be the most problematic ?

Of course if there is no universally working solution, it's always possible to make user agent detection, but it would be preferable to avoid it.

As a reminder, this is for a game, so requirements are high: messages must be read in order, without interruption (unless the user requires it), and without skips, even when messages arrive quickly in bursts. Since we don't want any interruption, assertive instead of polite isn't a solution.

Progress so far

Here are the different techniques tried so far:

1. Single zone, appending p
2. Single zone, appending span
3. Single zone, appending div
4. Single zone, using insertAdjacentHTML
5. Single zone, replace using innerHTML
6. New live region for each message
7. Roundrobin 10
8. Single zone with role=log

And here are the current results:

Combos/pages	1	2	3	4	5	6	7	8
Chrome + Jaws	OK	repeat	OK	repeat	skip	no read	disorder	OK
Firefox + Jaws	Ok	Ok	OK	Ok	OK	OK	OK	OK
Edge + Jaws	OK	repeat	OK	repeat	skip	no read	disorder	OK
Chrome + NVDA	OK	no read	OK	no read	no read	no read	disorder	OK
Firefox + NVDA	OK	no read	OK	no read	no read	no read	OK	OK
Edge + NVDA	OK	no read	OK	no read	no read	no read	OK	OK
Safari iOS	Ok	OK	OK	OK	OK	OK	OK	OK
Firefox iOS	Ok	OK	OK	OK	OK	OK	OK	OK
Chrome iOS	Ok	OK	OK	OK	OK	OK	OK	OK
Safari Mac	Interrupt	Interrupt	Interrupt	Interrupt	Interrupt	Skip	Skip	interrupt
Chrome Mac	Interrupt	Interrupt	Interrupt	Interrupt	Interrupt	Skip	Skip	interrupt
Firefox Mac	Interrupt	Interrupt	Interrupt	Interrupt	Interrupt	Skip	Skip	interrupt
Chrome Android	Ok	Repeat	Ok	Repeat	Skip	Ok	Ok	OK
Firefox Android	repeat	repeat	repeat	repeat	OK	no read	no read	repeat

All tests have been made with the most up to date versions of OS, browsers and screen readers at the time of this post, 4th of may 2022.

• OK means that everything is fine, i.e. messages are read in order, aren't interrupted, skipped over or uselessly repeated.
• no read means that nothing is read at all
• interrupt means that messages currently being read are interrupted when new messages arrive, all or most of the time, or at random
• skip means that messages are reandomly skipped over
• repeat means that several messages are repeated twice or more, or that the entire zone is read again from the beginning each time a new message arrive
• disorder means that messages aren't read in order / the order don't seem deterministic. This especially happens when the rate is quite high (less than 100ms)

Conclusions so far

The behavior of live regions works globally well (except on mac) for simple things: a serie of paragraphs or divs containing simple text. It's encouraging. However, as soon as the content become a little more complex, behaviors quickly start to be erratic. You need to be very careful about what you put in the live region, and how do you put it.

As a consequence of previous point, you have probably whether to simplify the output a lot, or separate ARIA live region zone from the content actualy displayed on screen. This is a little sad to maintain duplicates, but not grave either. Do you think it's a good option to separate ARIA live output and display in two distinct zones, if you can't simplify enough to have a stable behavior ?

You must be very carful when using multiple polite ARIA live regions, because in general they won't be read in a consistent order.

IN the opposite of many beliefs, and probably against the specification, ARIA live regions created on the fly aren't universally read if they contain text at the time of their addition to the DOM. This is especially the case with Chrome and Edge under windows with both Jaws and NVDA.

As I'm initially asking, VoiceOver does a poor job on Mac, and nothing works well ! Is that a bug of the Mac ? It's especially both sad and surprising that, in the opposite, Apple seem to make a perfect on iOS. If this is indeed a bug of VO Mac, is it relevant to send a report to Apple at [email protected] ? Or is there another mean ?

Thank you very much for all your answers or general ideas.