Go to overview: WAI-ARIA techniques with code examples

Using the aria-hidden state to hide content from screen readers

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)

Twitter: @wcagtest

Last update: 19 April 2013

Example


Some link that toggles the visibility of a button

Link hidden with aria-hidden


some text

some more text

dummy target


Note (16 April 2013): I have changed the original example to follow the WAI-ARIA documentation which tells us that the aria-hidden state must match the visibility of content (apart from exceptions described by Roger Johansson). That is now achieved by setting aria-hidden and letting a CSS rule take care of hiding and showing the visible content (see below).

[aria-hidden=true] {display:none; visibility:hidden;}

What threw me off course first is that the value (true or false) of aria-hidden is a string, not boolean (while the HTML5 hidden attribute is a boolean – Thanks to @jnurthen for helping out!

Compare also Steve Faulkner's HTML5 Accessibility Chops: hidden and aria-hidden). The hidden attribute is not meant for dynamically showing and hiding content; the HTML5 spec in its coverage of hidden states that "the hidden attribute must not be used to hide content that could legitimately be shown in another presentation."

As screen readers usually do not render content hidden with display:none and visibility: hidden testing support of aria-hidden will probably be a bit difficult.