CSS Accessible Hiding

CSS Accessible Hiding

Accessible hiding means choosing a hiding technique based on who should still be able to access the content. CSS can completely remove content from presentation or visually hide content while keeping it available to assistive technologies.

There is no single CSS hiding method that is correct for every situation. The appropriate technique depends on whether the content should be unavailable to everyone, hidden only visually, or temporarily hidden until the user performs an action.

Choosing a Hiding Method

Before hiding content, determine whether the content should also be unavailable to assistive technologies.

If content should be hidden from everyone, CSS techniques such as display: none or visibility: hidden may be appropriate. If content should disappear visually but remain available to assistive technologies, a visually hidden technique is usually more appropriate.

The choice should be based on the purpose of the content rather than simply on which CSS technique makes it disappear visually.

Using display: none

Setting display to none removes an element from the page's visual layout.

.hidden {
  display: none;
}

Content hidden this way is also generally removed from the accessibility tree, so assistive technologies such as screen readers normally do not present it.

This is appropriate when the content should currently be unavailable to all users, such as a panel that is closed and should not be interacted with until it is opened.

.panel[hidden] {
  display: none;
}

When content becomes relevant again, its hidden state can be removed so it becomes available visually and to assistive technology.

Using visibility: hidden

The visibility property can hide an element while preserving the space it occupies in the page layout.

.hidden {
  visibility: hidden;
}

Unlike display: none, the element's layout box remains. However, content hidden with visibility: hidden is also generally not exposed to assistive technology.

This makes visibility: hidden unsuitable when the goal is to provide text specifically for screen reader users.

Visually Hidden Content

Sometimes content should not be displayed visually but should remain available to assistive technologies. A visually hidden utility class can accomplish this without using display: none or visibility: hidden.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

The element remains in the document while its visual box is reduced and clipped so it does not appear as normal visible content.

This technique is commonly used for short labels or additional context that is useful to assistive technology but would duplicate information already communicated visually.

Screen Reader Text

A visually hidden class is sometimes called a screen reader class because it can provide text that is visually hidden while remaining available to screen readers.

<a href="/downloads/report.pdf">
  Annual Report
  <span class="visually-hidden"> PDF document</span>
</a>

The additional text can provide useful context without adding repeated visual information to the page.

Visually hidden text should still be meaningful and concise. It should not be used to provide different or misleading information to screen reader users.

Focusable Hidden Content

Special care is required when visually hidden content can receive keyboard focus. A user should not tab to an interactive element that remains invisible when focused.

A common example is a skip link. The link can be visually hidden until it receives keyboard focus and then become visible.

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
}

This keeps the link from occupying normal visual space while allowing keyboard users to see and use it when it receives focus.

If an interactive element is intentionally available to keyboard users, its focused state should also be visible.

Why opacity Is Different

Setting opacity to 0 makes an element fully transparent, but it does not remove the element from the layout or automatically make it unavailable to interaction or assistive technology.

.transparent {
  opacity: 0;
}

An invisible link or button styled only with opacity: 0 can still be focusable and interactive. This can create confusing behavior because users may encounter controls they cannot see.

For this reason, opacity: 0 should not be treated as an equivalent replacement for display: none, visibility: hidden, or a visually hidden utility class.

Off-screen Positioning

Another hiding technique moves content outside the visible viewport.

.off-screen {
  position: absolute;
  left: -9999px;
}

This approach has historically been used for visually hidden content and is still useful in some situations, such as skip links that move back into view when focused.

For general visually hidden text, a dedicated visually hidden class that clips the element to a very small area is usually easier to control without placing content thousands of pixels away from its normal location.

Decorative Content

Decorative content does not always need a CSS hiding technique. For example, a decorative image can be given an empty alternative text value so assistive technology does not treat it as meaningful image content.

<img src="divider.png" alt="">

Similarly, decorative effects created entirely with CSS generally do not introduce additional textual content for assistive technologies.

.heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #0088cc;
}

Choose the appropriate HTML and CSS technique based on whether the content carries meaning, rather than hiding meaningful content merely because it is inconvenient visually.

Comparing Hiding Methods

These differences are why visually hiding an element and removing an element from accessibility are separate decisions.

Accessible Hiding Practices

CSS Accessible Hiding Example

The following example contains visible text, text hidden with display: none, and text hidden visually with a reusable .visually-hidden class.

.hidden {
  display: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Open the example in the editor and compare the techniques. The visually hidden text does not appear on the screen, but it remains in the document for assistive technologies. The content using display: none is removed from visual presentation and is generally not exposed to assistive technology.