Hidden content and web page accessibility

• Overview
• Expectation
• Affected audiences
• What to check for
• Decision tree
• Tab order
• Accessibility tree
• Document Object Model (DOM)
• Child elements
• Evaluate hidden content
• Methods for hiding content
• Create a visually hidden class
• Edge case

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 additional information should not be visible on screen. There might be 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. Other methods 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 page behind a pop-up menu)?
   • 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>

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

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.