Tailwind Screen Reader Only Cheatsheet

Master sr-only and not-sr-only for accessible web development.
Click code blocks to copy. Interactive examples included.

Quick Navigation

Utilities Icon Buttons Skip Links Form Labels Best Practices FAQ

Screen Reader Utilities

Tailwind provides two utilities for controlling screen reader visibility. Click to copy the class name.

Accessible Icon Buttons

Icon-only buttons need text labels for screen readers. Use sr-only to add invisible labels.

Close Button

SR reads: "Close menu"

<button>
  <svg><!-- X icon --></svg>
  <span class="sr-only">Close menu</span>
</button>

Search Button

SR reads: "Search"

<button>
  <svg><!-- Search icon --></svg>
  <span class="sr-only">Search</span>
</button>

Hamburger Menu

SR reads: "Open navigation menu"

<button>
  <svg><!-- Menu icon --></svg>
  <span class="sr-only">Open navigation menu</span>
</button>

Settings Button

SR reads: "Settings"

<button>
  <svg><!-- Settings icon --></svg>
  <span class="sr-only">Settings</span>
</button>

Skip Links

Skip links allow keyboard users to bypass navigation and jump directly to main content. They are hidden until focused with sr-only and revealed with focus:not-sr-only.

Try it: Click in the demo area below and press Tab to see the skip link appear.

Demo area - Tab here to see skip link

<!-- Skip link - visible on focus -->
<a href="#main-content"
   class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4
          focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-content
          focus:rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2">
  Skip to main content
</a>

<!-- Main content target -->
<main id="main-content" tabindex="-1">
  <!-- Page content -->
</main>

Form Labels with sr-only

When your design uses placeholder text or icons instead of visible labels, add a sr-only label for accessibility.

Visual result:

Screen reader announces: "Search products, search, edit text"

<!-- Search input with visual icon and sr-only label -->
<div class="relative">
  <label for="search" class="sr-only">Search products</label>
  <input
    type="search"
    id="search"
    placeholder="Search..."
    class="pl-10 pr-4 py-2 border rounded-lg"
  />
  <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400">
    <!-- Search icon -->
  </svg>
</div>

Social Media Links

Social icons are meaningless to screen readers without labels. Add descriptive text with sr-only.

Visual result:

<nav aria-label="Social media links">
  <ul class="flex gap-4">
    <li>
      <a href="https://twitter.com/..." class="hover:text-primary">
        <svg><!-- Twitter icon --></svg>
        <span class="sr-only">Follow us on Twitter</span>
      </a>
    </li>
    <li>
      <a href="https://github.com/..." class="hover:text-primary">
        <svg><!-- GitHub icon --></svg>
        <span class="sr-only">View our GitHub</span>
      </a>
    </li>
    <li>
      <a href="https://linkedin.com/..." class="hover:text-primary">
        <svg><!-- LinkedIn icon --></svg>
        <span class="sr-only">Connect on LinkedIn</span>
      </a>
    </li>
  </ul>
</nav>

Accessible Breadcrumbs

Use sr-only to provide context for visual separators like "/" or ">".

Visual result:

Screen reader: "Home is followed by Products is followed by T-Shirts, current page"

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-2">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <span class="sr-only">is followed by</span>
      <span aria-hidden="true">/</span>
    </li>
    <li>
      <a href="/products">Products</a>
    </li>
    <li>
      <span class="sr-only">is followed by</span>
      <span aria-hidden="true">/</span>
    </li>
    <li>
      <span aria-current="page">T-Shirts</span>
    </li>
  </ol>
</nav>

sr-only vs Other Hiding Methods

Method	Visually Hidden	Screen Reader	Use Case
`sr-only`	Yes	Accessible	Icon labels, skip links, form labels
`hidden`	Yes	Hidden	Toggle visibility, remove from layout
`invisible`	Yes	Hidden	Preserve layout space while hidden
`opacity-0`	Yes	Accessible	Animations, transitions
`aria-hidden="true"`	No	Hidden	Decorative icons, duplicate content

Accessibility Best Practices

Do

Add sr-only text to icon-only buttons
Use sr-only for form labels when visually hidden
Provide context for visual separators
Use focus:not-sr-only for skip links
Write descriptive, meaningful sr-only text
Test with actual screen readers

Don't

Use sr-only to hide important content
Add redundant sr-only text that repeats visible content
Use sr-only when display:none is appropriate
Forget to test keyboard navigation
Use vague labels like "click here"
Hide content from everyone using sr-only

Frequently Asked Questions

What does sr-only do in Tailwind CSS?

The sr-only class visually hides an element while keeping it accessible to screen readers. It uses CSS properties like position: absolute, width: 1px, height: 1px, and clip to make the element invisible on screen but still readable by assistive technologies.

When should I use sr-only vs display:none?

Use sr-only when you want screen readers to read the content (like icon button labels or skip links). Use display:none or the hidden class when you want to completely hide content from everyone, including screen reader users.

What is the not-sr-only class used for?

The not-sr-only class reverses sr-only, making an element visible again. It's commonly used with focus states (focus:not-sr-only) for skip links that should appear when keyboard users tab to them but remain hidden otherwise.

How do I create an accessible icon button with Tailwind?

Wrap your icon in a button element and add a span with sr-only class containing descriptive text. Example: <button><svg>...</svg><span class="sr-only">Close menu</span></button>

Should I use sr-only for decorative images?

No. For decorative images, use aria-hidden="true" to hide them from screen readers entirely, or use an empty alt="" attribute for img tags. sr-only is for content you want screen readers to announce.

How do I test sr-only content?

Use screen reader software like VoiceOver (Mac), NVDA (Windows), or browser extensions like ChromeVox. You can also use the accessibility inspector in browser DevTools to check the accessibility tree.

Inspect Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element including accessibility utilities. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →