Visually Hidden Text (sr-only)
Visually hidden text is content that screen readers can access but that stays invisible on screen. It gives controls without a visible label the context sighted people read from the layout, such as the name of an icon button.
What the eye sees
What the screen reader announces
“Search, button”
In practice
Typical uses: icon buttons get a name (“Search”, “Menu”, “Basket, 3 items”). Links that only make sense in context get their reference (“Read more” plus hidden “about the Accessibility Act”). Add headings that exist only for structure, and status messages such as “3 results found”.
The technique is a CSS class, usually called .sr-only or .visually-hidden: the element is shrunk to one pixel, clipped and taken out of the text flow. It stays in the document and therefore in the accessibility tree. display: none, visibility: hidden and the hidden attribute remove it for screen readers too. WCAG technique C7 provides the proven rule block; the entry on visually-hidden explains which class names are in circulation.
Three limits. First: whatever sighted people need as well belongs visibly on the page: error messages, required-field hints, instructions. When in doubt, show it; the question is never the technique but who needs the information. Second: hidden text extends a visible label, it does not replace it. If the button says “Send”, the announced name has to start with “Send”, or voice control fails (WCAG 2.5.3 Label in Name). Third: focusable elements are never hidden permanently, because an invisible link catches keyboard focus with no focus indicator in sight. That is why skip links appear on focus.
One misuse remains: text hidden only for search engines violates Google’s spam policies. The rule there draws a clear line between accessibility and manipulation.
Testing takes five minutes. Start a screen reader (VoiceOver on a Mac with Cmd+F5, NVDA on Windows for free), tab through the controls and listen whether every button has a name. Then quit the screen reader and tab through again: if something invisible receives focus, the class is in the wrong place.
The technique is a CSS class, usually called .sr-only or .visually-hidden: the element is shrunk to one pixel, clipped and taken out of the text flow. It stays in the document and therefore in the accessibility tree. display: none, visibility: hidden and the hidden attribute remove it for screen readers too. WCAG technique C7 provides the proven rule block; the entry on visually-hidden explains which class names are in circulation.
Three limits. First: whatever sighted people need as well belongs visibly on the page: error messages, required-field hints, instructions. When in doubt, show it; the question is never the technique but who needs the information. Second: hidden text extends a visible label, it does not replace it. If the button says “Send”, the announced name has to start with “Send”, or voice control fails (WCAG 2.5.3 Label in Name). Third: focusable elements are never hidden permanently, because an invisible link catches keyboard focus with no focus indicator in sight. That is why skip links appear on focus.
One misuse remains: text hidden only for search engines violates Google’s spam policies. The rule there draws a clear line between accessibility and manipulation.
Testing takes five minutes. Start a screen reader (VoiceOver on a Mac with Cmd+F5, NVDA on Windows for free), tab through the controls and listen whether every button has a name. Then quit the screen reader and tab through again: if something invisible receives focus, the class is in the wrong place.
Matching service
Sources
- W3C/WAI: Forms Tutorial – Labeling Controls, Abschnitt 'Note on hiding elements' (opens in a new tab)
- W3C/WAI: WCAG-Technik C7 – Using CSS to hide a portion of the link text (opens in a new tab)
- W3C/WAI: Understanding Success Criterion 2.5.3 Label in Name (opens in a new tab)
- Google Search Central: Spam-Richtlinien, Abschnitt 'Hidden text and links' (opens in a new tab)