Skip to content.

How-to

Hide content

By: Dave Rupert. Published: .

Table of Contents

Developers commonly use display: none to hide content on the page. Unfortunately, this common action can be problematic for people who use screen readers, especially if the hidden content was meant to be for them to discover...

There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead.

The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers. Unlike CSS positioning and negative text-indent techniques, the "clip pattern" also works with RTL (Right-to-Left) languages for localization. See the article Hiding Content for Accessibility for more information on this visually-hidden pattern. Also read Beware smushed off-screen accessible text for information on the added line in the code snippet.

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

If the .visually-hidden class is applied to natively focusable elements (such as a, button, input, etc) they must become visible when they receive keyboard focus. Otherwise, a sighted keyboard user would have to try and figure out where their visible focus indicator had gone to.

With modern browsers and IE9 and up, the visually hidden selector can be written like so:

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

This will ensure that if an interactive element receives focus, the styles of the .visually-hidden class will be undone and the focusable content will be exposed.

Many popular CSS frameworks provide a .visually-hidden or .sr-only class, where sr stands for "screen readers".

Alternatives to display: none

The aria-hidden="true" attribute produces the opposite effect of the .visually-hidden class. It hides content from assistive technology, but not visually. This can be helpful in cases where there are visual cues that screen readers do not need to announce, such as decorative icons that accompany text labels.

There may be instances where content hidden by aria-hidden may also need to be visually hidden as well. Rather than toggling another class on the element, the aria-hidden attribute could be used as the selecor:

.my-component[aria-hidden="true"] {
  display: none;
}

Another way to hide content both visually and from assistive technology is the HTML5 hidden attribute. To support older browsers like IE9, and to increase the specificity of the hidden attribute, you can add the following snippet to your CSS:

[hidden] {
  display: none !important;
}

This post was last updated on by Michael Fairchild.

Further reading