Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Testing ARIA-LIVE
with display:none and innerHTML

Below are two examples is show/hide content, triggerred with a button. The first has "Hello World" injected with innerHTML, and the second example changes display:none to display:block. We want to see if both will read to popular screen readers when the content shows up on the page visually after clicking the corresponding button.

Example 1: Test aria-live injected with innerHTML




Example 2 Test aria-live by turning display:none to block


Code Used Example 1

<div aria-live="polite"><p id="demo" ></p></div>
<button onclick="myfun()">click me</button>

 

Code Used Example 2

<div aria-live="polite" style="display:none" id="demo2"><p >Hello world</p> </div>
<button onclick="myfun2()">click me</button>

Javascript

<script>
function myfun() {
document.getElementById("demo").innerHTML = "Hello World!";
}

function myfun2() {
document.getElementById('demo2').style.display = 'block';
}
</script>

Results

  IE 11 FireFox 47 Chrome 51 Safari 9.1.2
NVDA 2016.2 Both examples work Only example 1 works Only example 1 works N/A
JAWS 17 Both examples work Both examples work Both examples work N/A
VoiceOver for El Capitan N/A Neither example works Only First example works Only First example works
VoiceOver on iOS 9.3.3 N/A N/A N/A Both examples work on Safari for iOS
Voice Assistant (Talkback) on Samsung Galaxy (Android) N/A N/A Both examples work on Chrome for Android N/A

NOTE: Changing the aria-live value to "assertive" did not change results.

Conclusion

Don't depend on aria-live to announce content that has been turned on from display:none with display:block. Try innerHTML instead.

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.





CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA