Hidden assistive css
CSS Helpers for hiding and "visually hiding" content.
|Web resource key:||
|AMD Module key:||N/A|
Simply apply the hidden or assistive class to the element. No
other code is required. Works well with jQuery
hiddenremoves the element - it is not available to any user (it applies
assistivehides 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.
- 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 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.
If this is an unfamiliar technique, some further reading may be useful:
- When and how to hide content: WebAIM: CSS in Action: Invisible Content Just for Screen Reader Users
- Why the clipping solution: Hiding Content for Accessibility - snook.ca
- Regarding the usability of hiding content: Better for Accessibility - Derek Featherstone