back to CanAdapt home

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 with aria-live="polite"

  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 E capitaine N/A Neither example works Only First example works Only First example works

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 with display:none.