CODEWITHSUNDEEP
wai-ariavoiceovertalkbacknvdaaccessible
Caleb
Caleb

Reputation: 17

Accessibility: Spinner Status Messages Guidelines

Scenario

Using a screen reader such as NVDA, VoiceOver, or TalkBack, after all dropdown selections are made, show loading spinner overlay while data is retrieved from the server.

Question

First I want to mention that this is a high level question and am looking for advice or resources to help make the best educated decision. Based on my understanding, it is important to let Screen Reader users (SR) know that this loading is occurring and to also mention when it is finished. WCAG 4.1.3 Status Messages. Is it acceptable to have a generic message such as "Content Loading" and "Content Finished Loading" or should it be as specific as possible?

Upvotes: 0

Views: 862

Answers (1)

slugolicious
slugolicious

Reputation: 17475

You don't have to be specific on the type of data that's loading unless it makes sense to do so. If I'm on a restaurant site and type in a zipcode, it could say "loading restaurant locations nearby" but could just as easily say "loading". The user just typed in a zipcode and clicked on "search" (or something similar) so it seems kind of obvious that restaurant locations are being loaded and you don't necessarily have to say that.

It's always nice from a UX perspective to have detailed messages but you need to balance that with being too wordy for screen reader users.

If you announce that something is loaded you definitely want to let the user know when it's done.

However, if you don't have any visual indication that something is loading then you don't necessarily have to announce something is loading for the screen reader user. A sighted user might notice the busy indicator on the browser tab, so they know the page is loading, but you don't have to announce that. (Ideally, the fact that a page is loading should be announced by the browser itself.)

You didn't ask for specifics but take a look at aria-live (and possibly aria-atomic and aria-relevant) for announcing text changes and look at aria-busy.

Upvotes: 1

Related Questions