Short answer: A visually hidden class, called sr-only or visually-hidden, keeps text in the page for screen readers while it doesn’t show on screen. Use it rarely, for something sighted users already get another way. To hide content from everyone, use display: none instead.
When to hide text from the screen only
WebAIM’s rule is that content should be the same for sighted and screen reader users in the vast majority of cases. Verbose cues read only by screen readers usually do more harm than good.
The exceptions are cases where the meaning is clear on screen but not in the code. A magnifying glass that stands for a search field’s label is the A11Y Project’s example; Tailwind’s is a settings icon with the word Settings hidden next to it. For an icon button, aria-label is the other way to name it, as our aria-label guide shows.
Which technique hides text and which removes it
| Technique | Screen readers | Use it for |
|---|---|---|
| display: none or visibility: hidden | Don’t read it | Content hidden from everyone |
| The hidden attribute | Don’t read it | The same as display: none |
| Width or height of 0 pixels | Most skip it | Nothing: WebAIM advises against it |
| Positioned off screen (sr-only) | Read it | Text only screen readers need |
| The clip pattern (visually-hidden) | Read it | The same, and right-to-left text too |
From WebAIM and The A11Y Project, read November 5, 2026.
WebAIM’s sr-only class moves the text off screen and shrinks it to one pixel with the overflow hidden. The A11Y Project’s clip pattern clips it to a one-pixel box instead of moving it off screen, which also works for languages written from right to left.
Frameworks already include these classes. Bootstrap calls its class visually-hidden, and Tailwind calls it sr-only, with not-sr-only to show the text again.
Links and buttons must show up on focus
A link or a button hidden this way can still get keyboard focus. WebAIM and the A11Y Project both say it has to become visible when it does; otherwise a sighted keyboard user loses track of the focus.
Skip links are the classic case: hidden until the first Tab, then shown at the top of the page. Bootstrap has a visually-hidden-focusable class for exactly that, and building one is covered in our skip to main content guide.
Hidden text inside a link
The W3C’s technique C7 hides part of a link’s text to complete its purpose. A link that shows Full Story can carry the story’s title as hidden text, so a screen reader announces which story it opens.
The W3C ties the technique to WCAG’s link purpose criteria: the link makes sense even out of its context. Our screen reader guide shows how people move through a page.
How to add visually hidden text
- Check first that sighted users get the same information on screen.
- Use your framework’s class, or define one with the clip pattern.
- Keep the hidden text short and specific.
- Never use display: none, visibility: hidden or the hidden attribute for it.
- Make any hidden link or button visible when it gets focus.
- For a link, put the hidden words inside it, next to the visible ones.
- Test with a screen reader or the accessibility tree that the text is read.
What we hide on our own pages
On November 5, 2026, we checked six of our pages: the home, contact and a guide in each language. The texts that follow are for screen readers only, each hidden with the clip pattern in a box of one pixel.
Two skip links lead to the main content and to the footer. The first Tab shows “Skip to main content” at the top left of the page, and the second Tab shows “Skip to footer” in the same spot.
The text “Opens in a new tab” describes the links that open a new tab. On the guide, the audio player’s play button carries its name, “Play the audio version”, next to its icon. And the compact cookie notice keeps its title, “Your privacy choices”, for screen readers only.
Before you publish
- Hidden text repeats something sighted users already get.
- Nothing meant for screen readers uses display: none.
- Hidden links and buttons appear when they get focus.
- The hidden text is short and specific.
- Links read well out of context with their hidden words.
- Right-to-left text, if the site has any, uses the clip pattern.
RememberVisually hidden is a small tool for a few cases. Most content should be the same for everyone, on screen and in a screen reader.
Our web design service keeps these classes for the few places that need them.
Quick answers about visually hidden text
What does sr-only mean?
Screen reader only. It is the name of a CSS class that hides text on screen but leaves it in the page, so screen readers still read it. WebAIM notes that the class name itself doesn’t matter; Bootstrap calls its version visually-hidden.
Why not use display: none?
Because it hides the content from everyone. WebAIM explains that display: none and visibility: hidden remove it for screen readers too, and the hidden attribute works the same way. Use them for content nobody should get.
Can a link or a button be visually hidden?
Only if it shows up when it gets keyboard focus. Otherwise, the A11Y Project notes, a sighted keyboard user loses track of where the focus went. Skip links are the usual case, and Bootstrap has a visually-hidden-focusable class for it.
When should I add text only for screen readers?
Rarely. WebAIM says verbose cues read only by screen readers usually do more harm than good. Use it when something is clear on screen but not in the code, such as an icon that stands for a word.
Is the clip pattern better than moving text off screen?
Both work with screen readers. The A11Y Project points out that the clip pattern also works with right-to-left languages, which the off-screen positioning and negative text-indent techniques can get wrong.
Sources
Read on November 5, 2026. WebAIM: CSS in Action: Invisible Content Just for Screen Reader Users. The A11Y Project: How-to: Hide content. W3C Web Accessibility Initiative: C7: Using CSS to hide a portion of the link text. Bootstrap: Visually hidden. Tailwind CSS: display. Our case: our own pages, read in a browser on November 5, 2026.