Hiding visible content from screen readers with aria-hidden
Sometimes you need to hide parts of a web page, either permanently or temporarily. A common use case is content that becomes visible only after the user has interacted with a control on the page, for instance by clicking a button that reveals more content or activating a tab in a tab system.
Hiding content from all users, including screen reader users, is easy—just use display:none. Add visibility:hidden if you want to be extra sure that it is hidden, since Screen readers sometimes ignore display:none. However in some cases you want to hide something from sighted users without hiding it from screen reader users. In those cases you can use the off-screen and clip techniques. But what if you want screen readers to ignore content that is visible?
This isn’t a very common use case, at least not in my experience, but it does happen. One example is the accessible, keyboard friendly custom select menu I wrote about a few months ago. It involves duplicating the text content of the selected option to let you style it as you wish. Since the actual select element is still available to screen readers, they will read the text twice, possibly causing some confusion. Another use case could be non-empty elements that are used purely for visual decoration—having screen readers announce their content could clutter the page.
aria-hidden to the rescue. From WAI-ARIA 1.0:
Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
The spec then goes on to recommend that you also visibly hide any content with aria-hidden="true" by using visibility:hidden. But then there is this:
Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content.
And that exactly describes the use cases I mentioned.
Using the aria-hidden attribute is just a matter of adding it to the element you want to hide:
<span aria-hidden="true">Here be redundant or extraneous content</span>
There is a problem though (isn’t there always…). I made a very simple test page, and found that browser and screen reader support is still a bit lacking. Of the screen readers I have at my disposal, only VoiceOver and ChromeVox ignore content hidden with aria-hidden. JAWS does support it though (when used with Firefox), as is shown by the much more detailed testing done by John Foliot in HTML5 Accessibility: aria-hidden and role=”presentation” and by Steve Faulkner in HTML5 Accessibility Chops: hidden and aria-hidden. (Both John and Steve go into more detail about related attributes, so I encourage you to read both articles.)
Still, some support is better that no support. For those rather rare occasions when you want to hide visible content from screen reader users in order to give them a better experience, aria-hidden may be an option.