Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
Why is this important?
- Screen Reader users might be able to navigate to content that is hidden from sight or might miss content that was put in place especially for them.
- Keyboard users might not see where their current focus is, if content is not hidden properly.
Decide in what way content should be hidden
Content that should be hidden from all users
Accordions and tabviews hide part of the content, depending on what is selected. In such cases, the content should be unavailable regardless of the assistive technology used.
The following techniques can be used to hide content from all:
- Use the HTML5
hiddenattribute (in supporting browsers).
visibility: hiddenin CSS.
Content that should only be hidden visually
Some content of the page, like skip links, can be hidden visually, as they are not particularly useful to mouse or pointing device users. It often makes sense to reveal hidden content if it receives focus.
opacity: 0in CSS.
Move element outside of the window by using absolute positioning and negative left value
visuallyhiddenclass that has found widespread adoption:
This class can also be used with the secondary class
focusableto show the focused element visually. To be focusable, the element needs to be a link (
aelement), a form element (including
button) or another element with the
Content that should only be hidden from assistive technology
In some rare situations, it can be useful to hide content from assistive technology only, for example if it is redundant or misleading. In some iconfonts for example, the icon is on the same position in the charset as ordinary letters. Assistive technologies would interpret the icons as those letters and read them out.
aria-hidden="true"on an element enclosing the content that should be hidden in the HTML document.
Related WCAG2.0 Resources