Every interactive element needs a visible keyboard focus indicator.

The guidance#

Use focus-visible: for buttons and links (mouse users rarely see it), focus: for inputs. The canonical ring: focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2. Never ship outline-none naked.

In markup#

html
<button class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded-lg px-4 py-2 border">Tab to me</button>

Checklist#

  • Tested with keyboard only
  • Screen-reader spot check
  • Contrast verified for new pairs
  • Reduced-motion behavior confirmed
  • Zoomed to 200% without loss

accessibility/index|Accessibility hub · utilities/interactivity/sr-only|sr-only