Everything clickable must be operable with Tab, Enter, Space and arrows.

The guidance#

Semantic elements (button, a, input) give you keyboard support free. For custom widgets, add tabindex="0", role and key handlers — then test by unplugging your mouse.

In markup#

html
<button class="rounded-lg border px-4 py-2 hover:bg-slate-50">Real buttons are keyboard-ready</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