6

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)

akhouri
  • 3,065
  • 3
  • 25
  • 29
  • My Angular chops are low, but do you have a URL to share? Not wanting to change the structure means I am less likely to be able to help. – aardrian Jul 22 '16 at 13:51
  • @aardrian what i meant by not wanting to change the structure is to ask for a suggestion for a solution that could point me to correct use of aria-live perhaps, if I am not doing is right above. But if you have any other ideas I will be thankful if that resolves my issue. – akhouri Jul 24 '16 at 02:47
  • 1
    Can you clarify your issue? Are you saying that the loading divs content ("Do not refresh the page") is not read aloud by the screen reader? Aria-live is meant to read out it's elements contents only if either it's content CHANGES or the display changes (going from display: none to display: block, for example). – Josh Jul 25 '16 at 19:28
  • @Josh I have updated the question (27/July/2016) to provide more details. – akhouri Jul 27 '16 at 01:31

2 Answers2

14

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:

  • You can create the <div class='loading' aria-live='polite'> element and its text content from scratch and then add that element to the DOM.
  • Or you can start with an empty <div class='loading' aria-live='polite'> element and then populate its text content.

A few other tidbits:

  • As long as the text inside the element is what you want to be read aloud, you can omit the element’s aria-label='Do not refresh the page' attribute.
  • For icing on the cake, it can’t hurt to include a 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.
  • When or if the page is at a state where you no longer need to display "Do not refresh the page”, be sure to reverse the steps above. (That is, if you went with the first option and you added the whole element to the DOM, remove that entire element from the DOM. Or if you went with the second option and you populated the element’s text content, clear out the element’s text content.)
Ashley Bischoff
  • 336
  • 3
  • 6
  • Thanks @ashley for clearing aira-live for me. I think my issue was basically I was expecting aria-live to work on show/hide, which certainly is not working. I also had to add aria-relevant (additions, removals, all) along with aria-live to make it for my use case. – akhouri Jul 28 '16 at 07:23
1

There are several issues with dynamically added or shown/hidden live-region.

Firstly a quote from MDN - ARIA live regions:

Simply including an aria-live attribute or a specialized live region role (such as role="alert") in the initial markup as it's loaded will have no effect.
Dynamically adding an element with an aria-live attribute or specialized role to the document also won't result in any announcement by assistive technologies (as, at that point, the browser/assistive technologies are not aware of the live region yet, so cannot monitor it for changes).
Always make sure that the live region is present in the document first, and only then dynamically add/change any content.

From my personal experience, even if a live regoin exists in the DOM on page load if you use show/hide then NVDA also has a bug which requires a small delay before a text update in a live region after it was shown initially. Apparently because the region didn't exist when the first text was added, so this isn't an "update". Regarding the timeout, you'd need to set it to something greater than the browser's refresh tick. I use 100ms. Disclaimer: I am strongly against such workarounds to make up for the issues with screen readers or browsers but it might be useful for someone in some cases.

Hrvoje Golcic
  • 3,446
  • 1
  • 29
  • 33