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
Post a Comment