Hidden content

On this page:


Overview

Content may need to be hidden for a variety of reasons. Sometimes additional information needs to be provided for screen reader users who may be unable to see visual context (where things are located on screen), but the extra content should not be visible on screen. Perhaps there is content that is hidden from everyone until a button is toggled.

Expectation

In most cases, content that is not visible on the screen should also be hidden from keyboard and screen reader users, and content that is hidden from keyboard and screen reader users should not be visible onscreen. Hidden content should not include focusable elements. For example, if a link is not visible, it must not receive focus.

The five recommended methods and example use cases for hiding content are:

  • HTML5 hidden attribute: Mobile navigation that appears after a button is toggled
  • CSS property display: none: Mobile navigation that appears after a button is toggled
  • CSS property visibility: hidden: Toolbar where space must be reserved but inactive element not reachable
  • Class "visually-hidden": Text alternatives for screen readers
  • Aria-hidden attribute: Add to page in background when opening modal dialog

Affected audiences

Different audiences are affected, depending on the method used to hide content. Some methods hide content from screen readers and other assistive technology but leave it visible on the screen. Others make the content invisible but leave it accessible for assistive technology. Still others hide content from everyone.

What to check for

Verify that the method used matches the reason for hiding the content. Make sure that the content is hidden from the correct audience.

Depending on the method used, content may be hidden from everyone or from only a certain portion of website visitors. If it is hidden from everyone, it will not be visible onscreen plus screen readers and other assistive technology will not be able to access the content.

Decision tree

Choosing the appropriate method depends on the reason for hiding the content.

  1. Should the content be hidden from everyone?
    • If space on the page must be reserved (for layout or other reasons), use CSS property visibility: hidden.
    • If space does not need to be reserved, use either inline CSS display: none or HTML attribute hidden.
  2. Is the content intended for screen readers but should not be visible on screen?
    • Consider creating a "visually-hidden" class with CSS properties to render the content invisible.
  3. Should the content be hidden from screen readers but still visible (for example, the webpage behind a popup)?
    • Use the aria-hidden attribute.

Tab order

A visually-hidden CSS class is like an invisibility cloak: whatever is under the cloak can't be seen but is still there. And it can be run into. Content hidden this way is not visible on the page but will still be announced by screen readers. If focusable elements like links are hidden using this method, people navigating with keyboards will land on the links but not be able to see what the links are.

Content that is hidden using aria-hidden will be visible but will not be announced by screen readers. If focusable elements are hidden using this method, screen reader users will still land on them but will not hear what the element is.

If either of these methods is used, focusable elements should be removed from tab order. To remove an item from tab order, set the tabindex to "-1".

The following example represents a link that is hidden from screen readers using aria-hidden, and removed from tab order with tabindex="-1":

  <a href='#' aria-hidden="true" tabindex="-1">Link text</a>

Those attributes may then be changed programmatically when the link should no longer be hidden from screen readers and once again become part of the tab order:

  <a href='#' tabindex="0">Link text</a>
Note:
Using aria-hidden="false" is not recommended. Instead, you should remove the aria-hidden attribute.

Accessibility tree

HTML hidden, aria-hidden, and CSS properties display: none and visibility: hidden remove the elements from the accessibility tree. Removing content from the accessibility tree hides it from screen readers and other assistive technology.

Document Object Model (DOM)

Hiding content can also affect the Document Object Model (DOM). The DOM is the tree-like structure of all the elements on a web page. When using the CSS property visibility: hidden, the space on the page where the content would usually be is reserved. This means that empty space will appear, which can be useful for the placement of other content on the page. HTML hidden and CSS property display: none completely remove the content, including the space, from the page. This may change where other items on the page appear.

Child elements

Many methods of hiding content also apply to child elements (that is, elements contained inside of another element). For example, a <div> element may contain many other elements nested inside it:

<div>
<h2>Example heading</h2>
<p>This paragraph and the heading are nested inside the div element. The paragraph and heading are children of the div.</p>
</div>

Evaluate hidden content

  1. Identify the reason for hiding the content, including who should and should not have access to the content.
  2. Use the table below to determine if a correct method has been used.

Methods for hiding content

Method Who can access? Who is it hidden from? DOM impact Accessibility tree impact Applies to child elements? Use case
HTML hidden No one Everyone Elements not rendered
Removed from accessibility tree
Yes
Completely hide content until user action, such as mobile navigation that appears after toggling a Menu button
display: none No one Everyone Elements not rendered
Removed from accessibility tree
Yes
Completely hide content until user action, such as mobile navigation that appears after toggling a Menu button
visibility: hidden No one Everyone Dimensions reserved
Removed from accessibility tree
Focusable children are not reachable
Toolbar where space must be reserved, but inactive element not reachable
"visually-hidden" class
Keyboard users and screen reader users
Visual users Content rendered None Yes
Text alternatives; must not include focusable elements
aria-hidden="true" Visual users Screen readers None
Removed from accessibility tree
Yes
Add to page in background when opening dialog, but need to remove links, buttons, and other interactive items from tab order; focusable items still receive focus but are not announced
Note:
Be careful that you don't use aria-hidden on any focusable elements (links, buttons, and other interactive items) unless you take those elements out of the tab order. Failing to do so can create a ghost item that can be landed upon with focus, but nothing will be announced to assistive technology.

Create a visually hidden class

There are many ways to create a visually hidden class. The HTML5 Boilerplate project version 6.1.0 set of properties is a good place to start.

Edge case

A sixth method of hiding content, CSS property opacity: 0 is generally not recommended, except in a very limited edge case, such as an animation changing opacity from 0 to 1. With opacity 0, focusable children such as links would still receive focus but are not visible.

This is document arwj in the Knowledge Base.
Last modified on 2019-08-27 13:03:37.

Contact us

For help or to comment, email the UITS Support Center.