How to label a loading animation for WAI-ARIA?

Question

I'm working on fixing some accessibility issues on a web page. I have this div that acts as a dialog, and inside at one point a div containing a loading animation and a text "Working..." is displayed.

I am unsure as to how to label these two items in order to correctly notify the blind user that there is a progress animation and that it's working and he should wait.

<div id="loading" style="display: none;">
        <div class="mgBot15"><span class="txt16" role="alert">Working...</span></div>
        <img src="loading.png" role="progressbar" aria-busy="true"/>
    </div>

I tried adding the role and aria-busy properties to the img (also to the parent div, at first).

When this div appears (by changing the display style property), it correctly reads "Working..." but I hear no indication that it's busy and that the user should wait, am I missing something?

I've looked all over for examples for loading animations, to no avail so far.

Note: I'm using NVDA as a screenreader to test.

Thanks

Answer 1

The best solution I could come up with was using role alert, and aria-busy="true".

<div id="loading" style="display: none;">
    <div class="mgBot15"><span class="txt16" role="alert" aria-busy="true">Working...</span></div>
    <img src="loading.png" alt="loading" />
</div>

Answer 2

I believe the most sensible approach would to use the combo aria-busy="true" aria-live="polite"

The reason for that is because some pages might have a lot of separate loaders (let's say one for each component, not a single loader for the whole page) and it you use aria-live="assertive" or role="alert" it will be very intrusive and each of the loaders will get called out.

Answer 3

The correct role to use here is progressbar as the original question used. Other roles like alert may work, but they are less specific, meaning assistive technology may present the information in a less ideal manner.

There are a few issue with the original question's example, though:

• If you wish to have the text be announced in the same as an alert is, aria-live="assertive" should be used rather than the alert role. That aria-live value is what causes the screenreader to announce the text when it does for an alert.
• The text to be announced should be set on the element with the progressbar role using the aria-valuetext attribute. It should not be set solely on a separate adjacent element. If it needs to also be included in another element for presentational reasons, that element should have aria-hidden="true".
• Per the spec, aria-valuemin and aria-valuemax are to be specified even when the progress is indeterminate (like a spinning loading indicator). These could be set to 0 and 100 respectively as simple placeholders implying a percentage.

When the loading is complete, the aria-valuenow could be set to whatever was used for aria-valuemax, and aria-busy can be set to false.

This leads to one potential alternative to the original question:

<div id="loading" role="progressbar" aria-valuetext="Working…" aria-busy="true"
    aria-live="assertive" aria-valuemin="0" aria-valuemax="100">
    <div class="mgBot15" aria-hidden="true"><span class="txt16">Working...</span></div>
    <img src="loading.png" alt="" />
</div>

Answer 4

After a day of fiddling with a similar issue, I was able to finally get this working with a lot of reading and experimenting. I'm using NVDA for a screen reader.

<div class="loader" show.bind="isLoading" role="alert" aria-label="Loading"></div>

The following attributes were key: role and aria-label. Above example makes NVDA announce "Loading alert" once isLoading becomes true. Important to note is that NVDA pronounces the aria-label value, followed by "alert". Using roles "log" or "status" did not end up in any announcement.

Answer 5

There's a good article I came across that explains what needs to be done for this scenario Loading spinner accessibility

The spinner should be included inside the container. Its visibility can be toggled in relation to the aria-busy attribute. They should always be opposites, i.e, if currently loading, section[aria-busy="true"], .tn-spinner[aria-hidden="false"], once the content is loaded, toggle to false and true respectively.

Answer 6

Bootstrap used role="status" like this :

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

and in MDN it said :

The status role is a type of live region and a container whose content is advisory information for the user that is not important enough to justify an alert, and is often presented as a status bar. When the role is added to an element, the browser will send out an accessible status event to assistive technology products which can then notify the user about it.