Accessibility

Screen Readers

Utilities for improving accessibility with screen readers.

Quick reference

Basic usage

Screen-reader-only elements

Use sr-only to hide an element visually without hiding it from screen readers:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

Undoing screen-reader-only elements

Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use focus:not-sr-only to only apply the not-sr-only utility on focus.

<a href="#content" class="sr-only focus:not-sr-only">
  Skip to content
</a>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:not-sr-only to apply the not-sr-only utility at only medium screen sizes and above.

<div class="sr-only md:not-sr-only">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.