Accessibility Utilities

Screen readers, focus and contrast

sr-only hides content visually while keeping it available to screen readers (for icon-only buttons), and not-sr-only reveals it, as in "skip to content" links that appear on focus. Visible focus styles (focus-visible:outline-* or ring-*) are essential for keyboard users. Choose colour pairs with enough contrast, keep touch targets large, use aria-* and data-* variants to style state that is also exposed to assistive technology, and test with a keyboard and a screen reader.

A skip link and an icon-only button

Accessible patterns.

<a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50
                        focus:rounded focus:bg-white focus:px-4 focus:py-2 focus:shadow">
  Skip to content
</a>

<button class="rounded-md p-2 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-cyan-600">
  <svg class="size-5" aria-hidden="true">...</svg>
  <span class="sr-only">Close dialog</span>
</button>

Utilities do not replace semantics

Correct HTML elements and ARIA attributes come first; Tailwind only styles them.

Quick check: What does sr-only do?

• Removes content from the DOM
• Hides content visually but keeps it readable by screen readers
• Shows content only on small screens
• Makes text red