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.

Answer 2

Tagging the content with role="alert" will cause it to fire an alert event which screen readers will respond to when it becomes visible:

<div id="content" role="alert">
...
</div>

$("#content").show();

This would alert the user when #content becomes visible.

aria-hidden should be used when there is something you want to hide from the screen reader, but show it to sighted users. Use with care however. See here for more: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/