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

Inject wth innerHTML

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

Turn on display:block

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

Hello world

Turn on display:block

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

Turn on display:block

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

Turn on display:block

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

Turn on display:block

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

Turn on display:block

Example 6: Test ARIA Live on multiple search results InnerHTML

3 items in cart Change to 4

Example 7: Multiple search results

3 items in cart 3 items in cart 3 items in cart 3 items in cart Change to 4

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.