Design Atlas`display: none` and `visibility: hidden` also remove an element from the accessibility tree, so a screen reader never even knows it existed. But there's often text that's visually redundant yet essential for a screen reader — the label behind an icon-only button, extra context on a table's repeated header.
The `.sr-only` class (often called `.visually-hidden`) shrinks an element to 1px×1px and combines `overflow: hidden`, `clip-path`, and `position: absolute` so it vanishes visually without ever touching `display` or `visibility` — leaving it fully present in the accessibility tree. `opacity: 0` or `width: 0` alone aren't enough; they can still affect layout or drop out of the tree in some browsers.
The demo hides a search button's label three different ways and contrasts what's left for the eye versus what's left for the ear.
When to use
Use it for text a screen is fine without but an ear needs: icon button labels, skip links, extra form context. For content you're temporarily hiding and will show again — an accordion panel, a tab — use the hidden attribute or display: none instead; that content really should disappear entirely.