Accessibility Checklist

This is the accessibility checklist I use while building UI.

It’s meant to be quick to apply and easy to repeat as the system grows.

Keyboard navigation

• All interactive elements are reachable via Tab
• Focus order is logical (matches the visual layout)
• No keyboard traps (especially in menus/dialogs)
• Escape closes dismissible UI (menus, popovers, dialogs)
• Arrow key navigation works where expected (menus, lists, tabs)

Focus states

• Focus is always visible (no “invisible focus”)
• :focus-visible is used instead of :focus when possible
• Focus rings are not clipped by overflow: hidden
• Focus states meet contrast expectations in both themes
• Hover styles don’t replace focus styles (both should exist)

Reduced motion

• UI still works with prefers-reduced-motion: reduce
• Motion is not required to understand state changes
• Animations are subtle and short by default
• No infinite motion unless it’s essential (and even then, keep it calm)

Contrast checks

• Text contrast meets WCAG AA (especially muted text)
• Buttons and links remain readable in both themes
• Focus rings are visible on all surfaces
• Disabled states are still readable (not just “washed out”)
• Color is not the only way state is communicated

Labels + accessible names

• Inputs have visible labels (or correct aria-label)
• Icon-only buttons include aria-label="..."
• Form errors are specific and actionable
• Helper text is connected to inputs when needed

Notes

Accessibility isn’t a “final pass”.

The best systems bake it into component defaults so every new piece of UI starts from a good baseline.