WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Is aria-hidden supposed to only hide content for screen readers/assistive technology, or is it supposed to hide content altogether?

for

From: Jason Megginson
Date: Dec 27, 2012 8:00AM

It is unfortunate that there is no clear consensus or documentation on
this property because in my opinion it is a powerful property that should
be used to hide information from screen readers while retaining
information visually. There is no need for aria-hidden to hide content
that is visually hidden from sighted users; leave that to CSS visibility
and/or display properites.

I too will add another use case in favor of implementing aria-hidden to
"hide" content from screen readers even though the content is active in
the DOM:

Aria-hidden is useful for providing gracefully degrading solutions to
ensure content can work with and without ARIA supported user agents.

Consider the following simplified example:
<a href="#someURL" aria-haspopup="true" onblur="hidePopUp()"
onfocus="showPopUp()">Information
<span style="position:absolute; left:-400px" aria-hidden="true">
Contains Pop-up </span>
</div>

The concept is that when ARIA and aria-hidden is supported, it will ignore
the off-screen positioned text to avoid double speaking by screen readers.
However, if user (a combination of) agents do not support ARIA, it will
read the off-screen text.

Finally, HTML5 has a global attribute hidden="hidden" which is not
supported by IE (at this time) and it hides content from everyone. So
arIa-hidden should be used (and in my opinion formally proposed) to hide
on-screen content from screen readers. Aria-hidden is the closest thing
web developers have to the .silent and .forceSimple (accessibility)
properties of Flash and Flex and as Bryan noted earlier, it can
tremendously add enhanced usability when modal dialog windows are used.

Jason Megginson
SSB BART Group
703-637-8964 (o)
703-244-7755 (c)