What would be the appropriate WAI-ARIA treatment for hidden elements

Question

What would be the appropriate WAI ARIA treatment for hidden elements (hidden by CSS), such as loader images / 'please wait' text etc. Would like to avoid these being read out by screen readers when initially hidden.

Answer 1

Use CSS display:none or visibility:hidden; both of these are widely supported by all major screenreaders. Note that if you're already using these - then you're done! There's no need to use aria-hidden in addition to these.

Be wary of other ways of hiding things: using large negative offsets/margins or zero heights/widths may work in one or two browser/screenreader combinations, but not all. So, for example, if you hide an element by animating its height to 0, be sure to set display:none or visibility:false at the end of the animation.

Here's some sources with this info:

• Yahoo Accessibility Library
• WebAIM - Accessibility In Mind: CSS in Action: Invisible Content Just for Screen Reader Users