How do you make the Loading icon accessible for screen-readers like JAWS?

Question

So the HTML code is this:

<div style="visibility: hidden; display: none; right: 0px;"> 
<img id="processing" src="PT_LOADING.gif" alt="Processing... please wait" title=""> </div>

Even though the ALT text is provided, upon changing the style to show the icon (visibility:visible), it is not read in the time gap when the loading icon appears.

role=alert is not a feasible solution since this is not an alert

Answer 1

You need to add the following attributes to your DIV attributes role="alertdialog" aria-busy="true" aria-live="assertive"

<div style="visibility: hidden; display: none; right: 0px;" role="alertdialog" aria-busy="true" aria-live="assertive"> 
<img id="processing" src="PT_LOADING.gif" alt="Processing... please wait" title="" />
</div>

Answer 2

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.