javascript - How to notify screen readers using WAI-ARIA that a div is now visible

Question

How do you notify screen readers using WAI-ARIA that a div is now visible?

If we got the html

<div id="foo">Present main content</div>
<div id="bar" style="display: none;">Hidden content</div>

and then we

$('#foo').hide();
$('#bar').show();

how do we notify screen readers that they should notify the user about the now visible div (or possibly automatically focus on the now visible div)?

Answer 1

You do not need generally to tell screen readers that content is now visible. Use of aria-hidden makes no difference in practice, so I would suggest not using it. If you want the text content of the hidden div to be announced by a screen reader you may use role=alert or aria-live=polite (for example). You would use this for updated content that you want a screen reader to hear without having to move to the content location to discover it. For example a pop up message that does not receive focus, but contains text information that is relevant to a user after an action such as pressing a button.

update: I discussed with one of the people who developed ARIA 1.0, he suggested using HTML5 hidden instead of aria-hidden as a semantic indication that content is hidden. use it in conjunction with CSS display:none for older browsers. Browsers that support HTML5 hidden implement it using display:none in the user agent style sheet.