Visually Hidden Text (sr-only) – Accessible Content for Screen Readers
Visually hidden text refers to content that is invisible to sighted users but available to screen readers. It’s used to provide additional context, instructions, or semantic labeling for users relying on assistive technologies.
The most common implementation uses the CSS class sr-only (short for “screen reader only”).
Common Use Cases
- Extra context for buttons or links (e.g., “Read more about product XY”)
- Hidden labels for form fields
- Descriptions for icons or SVGs
- Screen reader-only hints or alerts
Example: Button with Hidden Label
<button>
<span class="sr-only">Start search</span>
<svg ... aria-hidden="true" />
</button>Example: CSS for .sr-only Class
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}This technique complies with WCAG guidelines, especially 1.3.1 Info and Relationships and 4.1.2 Name, Role, Value.
Best Practices
- Use sr-only only for content needed by assistive tech, not for hiding visual clutter
- Ensure the hidden text adds meaningful context and fits into the page’s semantic structure
- Don’t rely on icons alone – combine them with aria-label or visually hidden text
You can find out more about our services in the area of digital accessibility here.
