Accessible Components Checklist

Start with the right element#

Native elements come with keyboard support, focus and screen reader semantics for free. Reach for ARIA only when no element fits.

Keyboard and focus#

• Every interactive element is reachable with Tab and activates with Enter or Space.
• Focus is always visible: prefer focus-visible rings over removing outlines.
• Dialogs trap focus while open and return it to the trigger when closed.
• Escape closes popovers, menus and dialogs.
• Tab order follows the visual order; avoid positive tabindex values.

1<button className="rounded-lg px-3 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">2  Save changes3</button>

Give everything an accessible name#

Icon-only buttons are the most common gap. A visible tooltip is not an accessible name — add aria-label or visually hidden text.

1<button type="button" aria-label="Copy code">2  <CopyIcon aria-hidden="true" />3</button>45<label htmlFor="email">Email</label>6<input id="email" type="email" autoComplete="email" />

Color and contrast#

Never use color alone to convey meaning: pair a red border with an error message and an icon.

Respect reduced motion#

1@media (prefers-reduced-motion: reduce) {2  *,3  *::before,4  *::after {5    animation-duration: 0.01ms !important;6    transition-duration: 0.01ms !important;7    scroll-behavior: auto !important;8  }9}

In Tailwind, prefix animations with motion-safe: so they only run for people who have not asked to reduce motion.