Single Page Applications (SPA's) can load content incrementally, or partially reload parts of the same page. For accessibility purposes the loading state must be conveyed to assistive technology.
This example demonstrates role="progressbar", role="status" and role="status" + JavaScript. The JavaScript uses the method innerHTML to alter the text content within the DIV container. The behaviour we're wanting to recreate is the assistive technology repeating a single word such as "loading" or "busy" until the content has finished loading.
Uses an ascending tone (in some browser and AT combinations) to convey audibly the progress. MDN Web Docs and aria authoring guide provides an example which does not appear to be consistently supported in assistive technology.
Provides audible feedback once only if the output text doesn't change. Where the loading state must be conveyed repeatedly using the same word until loaded this approach is ineffective.
Provides audible feedback and toggles the text in the container from empty to "loading" on a 1 second interval to trigger the assistive technology to repeatedly announce loading.
Screen reader only CSS is applied to visually hide the span containing the "loading" text. The data-toggle attribute is used to keep track of when to hide or show the text.
<span role="status" data-toggle="true" class="sr-hidden">Loading</span>The screen reader will repeatedly announce "loading"
| JAWS v2021 | NVDA v2020 | VoiceOver | Talkback | Narrator Win 10 | |
|---|---|---|---|---|---|
| Edge v100 | ✔️ | ✔️ | ⚪ | ⚪ | ✔️ |
| Chrome v100 | ✔️ | ✔️ | ⚪ | ⚪ | ✔️ |
| FireFox v99 | ✔️ | ✔️ | ⚪ | ⚪ | ❌ |
| iPad Air 2 v15.3.1 | ⚪ | ⚪ | ✔️ | ⚪ | ⚪ |
| iPad mini 2 v12.5.5 | ⚪ | ⚪ | ✔️ | ⚪ | ⚪ |
| iPhone 7 v15.3.1 | ⚪ | ⚪ | ✔️ | ⚪ | ⚪ |
| Galaxy* Tab A7 Android v11 | ⚪ | ⚪ | ⚪ | ✔️ | ⚪ |
| MacOS** Monterey v12.2.1 | ⚪ | ⚪ | ✔️ | ⚪ | ⚪ |
note. Incompatibility with FireFox will occur if FireFox is running first when JAWS begins. JAWS must be running first before starting FireFox.
I spoke with the JAWS developer. When Firefox launches, it detects whether JAWS is running and changes its window structure. Seeing as alerts work fine no matter what launches first, JAWS will probably eventually develop a workaround but the key thing here is that real users would have launched JAWS first, so this is not as big of a bug as it might seem. https://bugzilla.mozilla.org/show_bug.cgi?id=1453673#ct-17