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)?

Solution 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.

Solution 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/

Solution 3

Use aria-hidden

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related aria-disabled.

If an element is only visible after some user action, authors MUST set the aria-hidden attribute to true. When the element is presented, authors MUST set the aria-hidden attribute to false or remove the attribute, indicating that the element is visible. Some assistive technologies access WAI-ARIA information directly through the DOM and not through platform accessibility supported by the browser. Authors MUST set aria-hidden="true" on content that is not displayed, regardless of the mechanism used to hide it. This allows assistive technologies or user agents to properly skip hidden elements in the document.

so your code could become

$('#foo').hide().attr('aria-hidden', 'true');
$('#bar').show().attr('aria-hidden', 'false');

Solution 4

I created a sample showing how you could using role="alert" to notify screen reader users when they are approaching the character limit of a textarea element, if you are trying to understand how to use the alert role, it may help:

There's more to it, but here's the small part of the code which produces the alert:

if (characterCount > myAlertTheshold) {
       var newAlert = document.createElement("div"); /* using the native js because it's faster */
       newAlert.setAttribute("role", "alert");
       newAlert.setAttribute("id", "alert");
       newAlert.setAttribute("class","sr-only");
       var msg = document.createTextNode('You have ' + charactersRemaining +' characters of ' + myMaxLength + ' left');
       newAlert.appendChild(msg);
       document.body.appendChild(newAlert);
     }

http://codepen.io/chris-hore/pen/emXovR

View more solutions

Comments

[Fabrizio Calderan]

Since I'm interested too, how could I use role=alert when something is shown? I would just create that attribute on the fly? (and as aside note: compliment for html5accessibility.com/tests/form-labels.html since I've read it I always use those techniques)

[Steve Faulkner]

you can add on the fly or have it already on the hidden content, the change from display:none to display:block or the addition of content to the element with role=alert will cause an accessibility event to fire and the content to be announced. an example: [link] dl.dropbox.com/u/377471/tests/ajax.html

[BrendanMcK]

Does this actually work? While this might be what the ARIA spec says, my understanding is that the aria-hidden properties are currently ignored by screenreaders; they look at the visible/display CSS properties instead; in which case .hide()/.show() is sufficient, and also setting the aria-hidden property does nothing additional. In any case, the real issue here is less about informing a screenreader that new content is visible (they already know that from DOM), so much as it is about letting the screenreader know that the newly visible content is important enough to be read out immediately.

[Steve Faulkner]

testing and advice on use of HTML5 hidden and aria-hidden

[Karl]

The example link to dropbox Steve provided does not seem to work with Voice Over in OSX Mountain Lion. The new content is not read out automatically.

[Volker E.]

It should be noted, that Internet Explorer started support of hidden not earlier than IE11.