not-sr-only

The not-sr-only utility undoes the sr-only class, making hidden content visible again.

Class Information

CSS Class

not-sr-only

CSS Properties

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

Live Examples

Responsive Visibility

Navigation Menu

The "Contact Us" link is hidden on mobile but visible on desktop (md and up). 

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
      <span class="sr-only md:not-sr-only">
        Contact Us
      </span>
    </li>
  </ul>
</nav>

Focus States

Focus on the button to see the instruction appear!

<button class="bg-green-600 text-white px-6 py-3 rounded-lg focus:outline-none focus:ring-2">
  <span class="sr-only focus:not-sr-only focus:absolute focus:-top-8 focus:left-0 focus:bg-gray-800 focus:text-white focus:px-2 focus:py-1 focus:rounded">
    Press Enter to submit
  </span>
  Submit Form
</button>

Hover States

Feature Card

Hover to see more details

This is additional information that appears on hover!

Another Card

Hover for details

More information revealed on hover!

Third Card

Hover to explore

Hidden content now visible! 

<div class="group relative bg-purple-600 hover:bg-purple-700 p-4 rounded-lg">
  <h4>Feature Card</h4>
  <p>Hover to see more details</p>
  <div class="sr-only group-hover:not-sr-only absolute inset-0 bg-purple-800/90 p-4 rounded-lg">
    <p>This is additional information that appears on hover!</p>
  </div>
</div>

Usage Guidelines

✅ Common Use Cases:

  • Responsive design - show content on larger screens
  • Interactive states - reveal content on hover/focus
  • Progressive disclosure - show details when needed
  • Accessibility improvements - make hidden content visible in certain contexts

💡 Pro Tips:

  • Combine with responsive prefixes: md:not-sr-only
  • Use with state variants: hover:not-sr-only, focus:not-sr-only
  • Great for progressive enhancement patterns
  • Always test with screen readers to ensure proper behavior