40

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

3
  • Do you have a URL for testing? As it stands, the screen reader is announcing the text you provide but it sounds like you want it to say more than that.
    – aardrian
    Commented Aug 1, 2016 at 20:49
  • I wanted it to announce that it was working, to indicate the user that he should wait, aria-busy on the alert item seems to have done the trick. Commented Aug 2, 2016 at 18:15
  • Follow-up question: once the loading operation is complete, how do you announce that the new data?
    – Benjin
    Commented Aug 22, 2019 at 23:58

6 Answers 6

33

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>
1
  • 7
    This is a common misconception of the aria-busy attribute. aria-busy hides the element from screen reader updates, and is intended to prevent the screen reader from reading updates to a particular element tree until successive modifications on that tree are complete. It is, quite unintuitively, definitively the wrong attribute to use on a loading animation -- because it will completely hide that animation from a screen reader user. See: developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/… Commented Dec 6, 2023 at 17:41
20

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.

11

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>
2
  • 2
    How would you handle the min and max values when the loader is displaying as a result of a network request? If you use it like above then it will always say "0%" and if you take them out all together it will say something like "working undetermined"
    – L-R
    Commented Jan 20, 2020 at 9:05
  • If you know the actual progress, you should set and update aria-valuenow to the appropriate amount as it downloads. If you don't know the actual progress, taking min and max out may be the best bet to avoid the real-world behavior you're describing, though that's technically contrary to the spec. Having it speak "working undetermined" in the case of unknown progress would be accurate. (Note I cannot reproduce what you're describing since I don't know what software you're testing with.) Commented Jan 22, 2020 at 17:29
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.

1
  • 2
    When a loader is used to wait for the main content, I don't think this is the correct role. On the same page in MDN it states that: Live regions are meant to inform users of dynamic updates that have occurred in other areas of the current web page, but which do not necessitate interrupting the user's current activity with a change in context. Commented Jun 9, 2022 at 6:18
5

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.

2
  • 2
    What is show.bind & "isLoading"? Is this Angular or similar framework? The question is tagged 'html'.
    – targumon
    Commented Jan 2, 2023 at 15:00
  • show.bind is a binding attribute used in Aurelia framework, similar to *ngIf directive in Angular. isLoading is a boolean variable in the view-model. Commented Jan 3, 2023 at 17:25
3

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.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.