html - How to label a loading animation for WAI-ARIA? -


i'm working on fixing accessibility issues on web page. have div acts dialog, , inside @ 1 point div containing loading animation , text "working..." displayed.

i unsure how label these 2 items in order correctly notify blind user there progress animation , it's working , 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 role , aria-busy properties img (also parent div, @ first).

when div appears (by changing display style property), correctly reads "working..." hear no indication it's busy , user should wait, missing something?

i've looked on examples loading animations, no avail far.

note: i'm using nvda screenreader test.

thanks

the best solution come using role alert, , 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" /> </div> 

Comments