Go to overview: WAI-ARIA techniques with code examples
aria-hidden state to hide content from screen readersDetlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)
Twitter: @wcagtest
Last update: 19 April 2013
Some link that toggles the visibility of a button
aria-hiddensome 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.