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 the container with aria-live from display:none to block




Example 2a: Test aria-live by turning the container from display:none to block where aria-live is on the parent element.




Example 2b: Test aria-live by turning the container with aria-live from display:none to block




Example 3: Test aria-live by turning a child of the container with aria-live from display:none to block





Example 4: Test aria-live by turning a child of the container with aria-live=assertive from display:none to block





Example 5: Test aria-live by turning a child of the container with aria-live=assertive from display:none to block




Example 6: Test ARIA Live on multiple search results InnerHTML



Example 7: Multiple search results




Code Used Example 1

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

Javascript

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

Code Used Example 2 and 2a

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

Javascript

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

 

Code Used for Example 3

<div aria-live="polite" ><p style="display:none" id="demo3">Hello world</p></div>
<span class="indent"><button onclick="myfun3()">Turn on display:block</button></span>

Javascript

function myfun3() {
document.getElementById('demo3').style.display = 'block'; }

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 put aria-live on the element that changes from from display:none with display:block. Put it on the parent or 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