Hide Content Properly

Hiding content is very useful for accessibility. We can hide things visually and only display it to screen reader users, we can hide content from screen reader users and only show it visually, or we can hide content from both. Drupal comes with some built-in CSS classes that can help make sure that the intentions are clear. We recommend against using { display:none; } as it is often misused. 

It is worth mentioning that the use of field labels and heading tags can also impact on how search engines see and rank your site. In other words there may be an overlap or trade-off to consider where accessibility meets SEO.

Quick summary table

If an element on the page:

• is an interactive element but needs to be made invisible, so it can be themed (e.g.: a link, checkbox, radio-button or form control with custom styles),
• is a heading or label for something whose purpose is visually-apparent (and therefore, the heading/label does not need to be shown to sighted users; e.g.: a section label or a form-element label), or,
• in general, shouldn't be visible to sighted users but should be visible to screen-reader users,

... then you should make it invisible (visually-hidden).

You can do this by:

• giving the element the visually-hidden class,
• in Drupal 8 or higher, configuring fields from the Manage display page for entity subtypes (for example, the Tags field on the Article content type) to set a field's label to "- Visually Hidden -",
• using CSS to position it outside the visible area of the page, or,
• using the CSS
  

  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
  

  on the element.

Example:

Hiding the title of the error, warning and status messages.

Reasoning:

In most themes, the status messages are displayed prominently in a colored box so that they are eye-catching for sighted users, but, to conform with WCAG 2.0 section 1.3.3, understanding and operating content should not rely solely on sensory characteristics of components such as shape, size, visual location, or orientation.

Without a title to indicate what the status messages are, they might be confusing to screen-reader users.

Most screen-readers can skip through the page using headings on the page. Giving the messages a header will make the messages easier to find.

Making content invisible, until someone navigates to it using the keyboard

If an element on the page:

• is a link to help users jump to the main content or main navigation,
• is an alternative to other elements which can only be used with a mouse, or,
• in general, shouldn't be visible to sighted users unless they are using a keyboard to navigate the page,

... then you should make it invisible, until someone navigates to it using the keyboard.

You can do this by:

• giving the element BOTH the visually-hidden and focusable classes, or,
• using the CSS
  

  css_selector_for_my_element {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
    word-wrap: normal;
  }
  css_selector_for_my_element:active,
  css_selector_for_my_element:focus {
    position: static !important;
    clip: auto;
    overflow: visible;
    height: auto;
    width: auto;
  }
  

  Where css_selector_for_my_element is the selector for the element you want to make invisible until someone navigates to it using the keyboard.

Example:

The "Skip to main content" link at the top of every page in Core themes.

Reasoning:

Keyboard-only and screen-reader users want a way to quickly jump to the main content of the page.

To conform to WCAG 2.0 section 2.4.1 standards, you must provide a way to skip blocks of content that are repeated on multiple pages.

Completely hide content for all users

If an element on the page:

• shouldn't be shown until a JavaScript event makes it visible,
• isn't relevant to sighted users or screen-reader users in the context,
• contains values that are read/written by JavaScript but should never be shown directly, or,
• in general, shouldn't be visible to sighted users or screen-reader users,

... then you should completely hide it for all users.

You can do this by:

• giving the element the hidden class (in Drupal 8 or higher),
• if it is a field in an entity subtype, set its Format to "- Hidden -" on the Manage display page for that entity subtype,
• if it is a field label in an entity subtype, set its label display to "- Hidden -" on the Manage display page for that entity subtype, or,
• using the CSS display: none; on the element.

Example:

Hiding the color module's preview area until JavaScript has run:

/* color.css (Drupal 7 and higher) */
#preview {
  display: none;
}

Reasoning:

The preview doesn't work if JavaScript is not running, so it is of no use to anyone.

Misuse

A common inappropriate use of "display:none" is to remove a form label or heading in order to change the visual appearance of a page. However, this will render the form element unusable to screen-reader users!

For example, if you remove a form label with "display: none," a screen-reader user might tell you, "I have a required text field to type into, but I have no idea what the field is for." In this situation, making the content invisible (visually-hidden) would be more appropriate.

Making content invisible to screen readers

If an element on the page:

• has an accessible alternative and would be confusing by itself, or,
• in general, should only be visible to sighted users,

... then you should make it invisible to screen readers.

You can do this by:

• giving the element the attribute aria-hidden="true"

Example:

A control to remove a search filter shows an "x" to sighted users only AND provides accessible, visually-hidden instructions for screen-reader users:

Currently filtering by: <a href="...">Module <span class="visually-hidden">Click to remove this filter.</span> <span aria-hidden="true">x</span></a>

Reasoning:

There is already accessible alternative text.

Hearing an "x" by itself, even after hearing the alternative text, would be confusing to screen-reader users.

Misuse

Making content invisible to screen readers means that people using them cannot perceive or interact with it. To conform to WCAG 2.0 section 1.1, you must provide accessible, alternative content, otherwise people using assistive technology will not be able to use it.

Further reading about invisible content

• WebAIM Recommendations
• display:none Problems for screen readers