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

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>


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

function myfun2() {
document.getElementById('demo2').style.display = 'block';


  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.


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.


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


help -at- can-adapt.com
(replace -at- with you know what)