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>