Screen Readers Class

Comprehensive guide to Tailwind CSS utilities for screen reader accessibility, including sr-only and not-sr-only classes.

Screen Reader Utilities Overview

sr-only

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

Hides content visually but keeps it accessible to screen readers

not-sr-only

position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;

Undoes sr-only, making content visible again

Common Patterns

1. Skip Navigation Links

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

2. Hidden Form Labels

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

<button type="submit">
  <svg>...</svg>
  <span class="sr-only">Search</span>
</button>

3. Icon Descriptions

Task completedSuccess status
Warning messageWarning status
<button>
  <svg>...</svg>
  <span class="sr-only">Add new item</span>
  Add
</button>

<div class="flex items-center space-x-2">
  <svg class="text-green-500">...</svg>
  <span>Task completed</span>
  <span class="sr-only">Success status</span>
</div>

4. Responsive Screen Reader Content

Mobile Navigation

Resize your browser to see different content on mobile vs desktop!

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <span class="sr-only lg:not-sr-only">
        Contact (Desktop only)
      </span>
    </li>
    <li>
      <span class="not-sr-only lg:sr-only">
        Menu (Mobile only)
      </span>
    </li>
  </ul>
</nav>

Best Practices

✅ Do:

  • Use sr-only for skip links and navigation aids
  • Provide screen reader context for icons and visual elements
  • Add descriptive text for form controls when labels aren't visible
  • Use not-sr-only with state variants (focus:, hover:, etc.)
  • Test with actual screen readers (NVDA, JAWS, VoiceOver)

❌ Don't:

  • Hide important content that all users need
  • Use sr-only as a replacement for proper semantic HTML
  • Overuse - only hide truly redundant visual information
  • Forget to test keyboard navigation with hidden elements

🔧 Testing Tips:

  • Use browser developer tools to inspect accessibility tree
  • Navigate your site using only the keyboard
  • Test with screen reader software
  • Validate HTML for proper semantic structure
  • Check color contrast ratios for visible text