CSS Helpers for hiding and "visually hiding" content.
Status
API status:
general
Included in AUI core?
Yes. You do not need to explicitly require the web resource key.
Web resource key:
com.atlassian.auiplugin:ajs
AMD Module key:
N/A
Experimental API:
3.2
General API:
4
Code
Simply apply the hidden or assistive class to the element. No
other code is required. Works well with jQuery toggleClass().
hidden removes the element - it is not available to any user (it applies display:
none;)
assistive hides the element from visual display, but leaves it in the document; meaning it is still
available to screen readers (it applies the same clip:rect hiding solution as
HTML5 Boilerplate.
CSS
Implementation tips
Don't
Don't use .hidden on critical content if there is no way to reveal it using a keyboard
Don't mix .hidden with jQuery show()/hide(), instead:
toggle the hidden class to show/hide the element
OR, use jQuery hide() to hide the element in the first place; then you can safely use jQuery show() to
reveal it
Don't use assistive if the content is not useful to anyone - eg. unpopulated templates, closed dialogs, etc
Don't use assistive for SEO bombing. Not cool.
Do
Do use .hidden when the content should not be available to any user.
Do use .assistive when the content should still be available to keyboard and screen reader users, but cannot be
revealed on demand using the keyboard.
Do use .assistive (judiciously!) to provide context to screen readers, for example where sighted users are given
visual cues but without the visual cues the structure and purpose of a page would not be apparent.
Recommended reading
If this is an unfamiliar technique, some further reading may be useful: