jsschools
Accessibility with Tailwind

Focus, Motion, Contrast, Screen Readers

Accessibility with Tailwind

Utilities can help or hurt accessibility. Use focus-visible rings, screen-reader helpers, and motion-reduce correctly.

4 min read Level 2/5 #tailwind#accessibility#a11y
What you'll learn
  • Use focus-visible rings instead of bare outline-none
  • Use sr-only, not-sr-only, and motion-reduce
  • Maintain AA contrast and support forced-colors

Utilities make accessibility easy to do right and just as easy to break. The biggest mistake is removing focus styles without a visible replacement.

Never Strip Focus Blindly

outline-hidden (or removing the outline) without a replacement makes keyboard navigation impossible. Always provide a focus-visible ring:

<button class="rounded-md bg-blue-600 px-4 py-2 text-white
  focus-visible:outline-2 focus-visible:outline-offset-2
  focus-visible:outline-blue-600">
  Save
</button>

focus-visible only shows the ring for keyboard users, so mouse clicks stay clean.

Screen Reader Helpers

sr-only visually hides content while keeping it available to assistive tech — perfect for skip links and icon-button labels. not-sr-only reverses it at a breakpoint.

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

<button>
  <svg aria-hidden="true">...</svg>
  <span class="sr-only">Close dialog</span>
</button>

Respect Reduced Motion

The motion-reduce: variant honors the user’s prefers-reduced-motion setting:

<div class="animate-spin motion-reduce:animate-none
  transition motion-reduce:transition-none">
  ...
</div>

Contrast and Forced Colors

Tailwind will not check color contrast for you — verify text meets WCAG AA (4.5:1 for body text). Use the forced-colors: variant to adapt to Windows High Contrast mode when the automatic mapping is not enough.

Performance & Bundle Size →