sr-only

The sr-only utility hides content visually while keeping it accessible to screen readers and other assistive technologies.

Class Information

CSS Class

sr-only

CSS Properties

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

Live Examples

Skip Navigation Link

Skip to main content

Try pressing Tab to see the skip link appear!

This is the main content area.

<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-blue-600 text-white px-4 py-2 rounded">
  Skip to main content
</a>

Hidden Form Labels

<label for="search" class="sr-only">Search</label>
<input type="text" id="search" placeholder="Search..." />

Icon Descriptions

<button class="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg">
  <svg class="w-5 h-5">...</svg>
  <span class="sr-only">Add new item</span>
  Add
</button>

Usage Guidelines

✅ Good Use Cases:

  • Skip navigation links for keyboard users
  • Form labels when visual labels aren't needed
  • Additional context for icons or buttons
  • Status messages for screen readers
  • Descriptive text for complex UI elements

❌ Avoid:

  • Hiding important content that all users need
  • Using for decorative elements (use aria-hidden instead)
  • Overusing - only hide what's truly redundant visually