Tailwind CSS - Screen Readers

Tailwind CSS - Screen Reader Utilities

Accessibility (a11y) is not an afterthought—it’s a requirement for building inclusive web experiences. Tailwind provides screen reader utilities to visually hide content while keeping it accessible to screen reader users, a common technique for improving a11y.

Core Screen Reader Utilities

These two utilities are the foundation of accessibility enhancements in Tailwind.

Class	CSS Properties
sr-only	position: absolute;\nwidth: 1px;\nheight: 1px;\npadding: 0;\nmargin: -1px;\noverflow: hidden;\nclip: rect(0, 0, 0, 0);\nwhite-space: nowrap;\nborder-width: 0;
not-sr-only	position: static;\nwidth: auto;\nheight: auto;\npadding: 0;\nmargin: 0;\noverflow: visible;\nclip: auto;\nwhite-space: normal;

How They Work

• sr-only: Hides an element from the viewport, but not from screen readers. It’s the modern equivalent of older text-indent: -9999px hacks, but more robust.
• not-sr-only: Reverts the sr-only styles, making an element visually appear again. This is powerful when combined with state modifiers like focus:.

Practical Use Cases for A11y

Instead of just hiding elements, let’s look at how sr-only is used in real-world scenarios to make UIs more accessible.

Use Case 1: Labeling Icon Buttons

Icon-only buttons are visually clean but inaccessible without a label. Use sr-only to provide a descriptive text label for screen reader users.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 flex justify-center">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full">
    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
    </svg>
    <span class="sr-only">Add new item</span>
  </button>
</body>
</html>

Use Case 2: Accessible “Skip to Content” Links

A “skip link” allows keyboard and screen reader users to bypass navigation and jump directly to the main content. It should be visually hidden until it receives focus.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <a href="#main-content"
     class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 z-50 bg-white dark:bg-black text-black dark:text-white p-3 rounded-lg shadow-md">
    Skip to main content
  </a>
  <header class="p-4 bg-gray-200">
    <!-- Your site navigation here -->
    <nav>...</nav>
  </header>
  <main id="main-content" class="p-8">
    <h1 class="text-2xl font-bold">Main Content</h1>
    <p>This is where the primary content of the page begins.</p>
  </main>
</body>
</html>

Why This Matters

Using sr-only and not-sr-only correctly is a simple but impactful way to improve your site’s usability for everyone, including people who rely on assistive technologies. It ensures that context and functionality are preserved even when visual cues are absent.