Hidden Content

Hidden content refers to any element rendered invisible by CSS, HTML, or ARIA. In accessibility, 'invisible' is not enough: you must know for whom. display: none hides an element from everyone, .visually-hidden hides it only from screens, and aria-hidden hides it only from assistive technologies.

A button with a trash icon, no text. A menu that opens on click. A link "Read more" repeated six times on the page. These situations require hiding content, but not in the same way.

#Three ways to hide, three different effects

The web has three levels of visibility. Confusing them is the most common pitfall.

Hidden from everyone. display: none, visibility: hidden, or the HTML hidden attribute remove the element from display and from the accessibility tree. Screen readers do not vocalize it. This is the right choice for a closed menu or a collapsed accordion panel.

Visually hidden, accessible to screen readers. The .visually-hidden class (also called .sr-only) uses a proven CSS pattern to shrink the element to an invisible pixel, while keeping it in the accessibility tree:

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

Typical usage: add explanatory text to an icon button, or enrich a "Read more" link with context that only screen readers perceive. For skip links, add :not(:focus):not(:active) to the selector so the link becomes visible again on keyboard focus.

Visible on screen, hidden from assistive technologies. The aria-hidden="true" attribute does the opposite: the element remains displayed but disappears from the accessibility tree. Useful for a decorative icon in a button that already has text.

#The trap that breaks keyboard navigation

Putting aria-hidden="true" on a focusable element creates a black hole. The keyboard user reaches the element, but their screen reader vocalizes nothing. MDN reminds us: never apply aria-hidden to an element that can receive focus.

The mirror error exists: hiding text with display: none when it was meant for screen readers. The text disappears for everyone. You wanted to add context, you removed it instead.

#In summary

Before hiding an element, one question: hidden from whom? Everyone → display: none. Eyes only → .visually-hidden. Assistive technologies only → aria-hidden="true".

Back to glossary
Share this article

Learn more

Assistive Technologies

Assistive technologies are the software and hardware that people with disabilities use to navigate the web: screen readers, magnifiers, voice commands, braille displays, switches. They depend entirely on the quality of the HTML code to function correctly.

Information Presentation

Information presentation refers to the way content is visually formatted on a web page: colors, fonts, spacing, positioning. In accessibility, the principle is strict: all formatting is done through CSS, never through misused HTML tags. Content must remain understandable when styles are disabled or modified by the user.

ARIA

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that describe interface components to assistive technologies. A custom button, a tabbed system, a dynamic notification: when semantic HTML is not enough, ARIA adds the missing information. But an ARIA attribute without the corresponding behavior does more harm than good.