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

javascript html accessibility screen-readers wai-aria
finnsson picture finnsson · Apr 27, 2012 · Viewed 21.1k times · Source

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

Steve Faulkner picture Steve Faulkner · Apr 27, 2012

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.

Related questions

Is there an equivalent to the "alt" attribute for div elements?

Screenreaders will read whatever string is set to the "alt" attribute. The use of this attribute is specifically for image tags. If I have a div like so: <div id=myCoolDiv tabindex="0"> 2 <div> Is there a …

Read More
How to get a screen reader to stop reading and read different content

I've written a site that uses jQuery to display a modal popup. It essentially covers the entire viewable area of the screen with an overlay, then shows a DIV that contains the actual popup on top of the overlay. One …

Read More
Is it possible to use javascript to detect if a screen reader is running on a users machine?

I want to detect whether a screen reader is running on a user's machine to avoid sound clashing with audio tag in html. If so, please provide details on how this could be done.

Read More