Hidden assistive css

Ask a question

Summary

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

AخA
 
<p class="hidden">I am an element no human should encounter under current conditions.</p>
<p class="assistive">I am an element that adds some extra information for people who can't see some kind of visual cue.</p>

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: