Issue: I have an accessibility issue that I am struggling with. I have an angular web application. A page loading spinner/indicator is shown when content is loading. And when the page content has loaded the spinner is hidden. This "div" is never removed from DOM.
Content of the loading div are not read (by NVDAor jaws) when the loading div is shown.
<div class='loading' aria-live='polite' aria-label='Do not refresh the page' tabindex="-1">Do not refresh the page</div>
I wouldn't like to change the structure of the application but work around using 'aria tags' to resolve this, just wondering if I will have to do anything more to make aria-live work?
Updated (27/July/2016)
Further clarification: I am not removing the content from DOM but using css to show/hide content (display: none to display: block and vice versa)
aria-live
triggers screen readers when an element with aria-live
(or text within an element with aria-live
) is added or removed from the DOM. In contrast, when you unhide a hidden element, neither elements nor text are added or removed from the DOM, so the element's aria-live
property doesn’t come into play.
To get screen readers to announce “Do not refresh the page”, either of these options should do the trick:
<div class='loading' aria-live='polite'>
element and its text content from scratch and then add that element to the DOM.<div class='loading' aria-live='polite'>
element and then populate its text content.A few other tidbits:
aria-label='Do not refresh the page'
attribute.role
attribute on the div that has aria-live
. If you’re not sure which role to use, go with role="status"
—that’s a pretty safe bet.