html - Accessibility when data is loaded

Question

I am working on accessibility issue. I have a spinny/loader which appears on screen when data is getting loaded.

<spinny aria-live="polite" role="alert" aria-label="Loading Page">

So when the spinny appears on screen, screen readers give me alert that spinny is loaded. Now I want that when the spinny goes away from screen i want the screen reader to provide message such as data loaded or something like that.

I have tried aria-relevant, aria-atomic etc but nothing seems to have worked.

Answer 1

First off, your code sample is specifying conflicting information. Using role="alert" gives you an implicit aria-live="assertive" but you are also specifying aria-live="polite". I would recommend removing role="alert". Having aria-live="polite" is sufficient.

However, if you remove the role from <spinny> (which I'm guessing is a custom html tag?), then your aria-label may not be honored because aria-label'ed things often need a role in addition to the label in order for the label to be read by a screen reader. See "Practical Support: aria-label, aria-labelledby and aria-describedby"

But, I think you might be using aria-label incorrectly anyway. Your live region should look something like:

<div aria-live="polite" class="sr-only" id="myspinny"></div>

(See What is sr-only in Bootstrap 3? for the "sr-only" class. It will visually "hide" the <div> so that any text you put inside it will not be visible to the sighted user but will still be available to screen reader users.)

When data is loading, you should inject text (via javascript) into "myspinny" so that it looks like:

<div aria-live="polite" class="sr-only" id="myspinny">Loading Page</div>

Since the <div> is a live region, the text ("Loading Page") will be announced.

When the data is finished loading and you want to remove the spinner, inject new text into "myspinny" so that it looks like:

<div aria-live="polite" class="sr-only" id="myspinny">Data Loaded</div>

and the screen reader will say "Data Loaded".