Accessibility

Guidelines for building accessible, inclusive interfaces.

Focus States

All interactive elements must have visible focus indicators.

tsx

// Default focus ring (from Tailwind/shadcn)
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2

// Custom focus for dark backgrounds
focus-visible:ring-2 focus-visible:ring-white/20

Keyboard Navigation

TabMove focus to next element

Shift + TabMove focus to previous element

Enter / SpaceActivate buttons and links

EscapeClose modals and dropdowns

ARIA Patterns

tsx

// Icon-only buttons MUST have aria-label
<Button size="icon" aria-label="Close dialog">
  <X className="h-4 w-4" />
</Button>

// Loading states
<Button disabled aria-busy="true">
  <Loader2 className="animate-spin" aria-hidden="true" />
  Loading
</Button>

// Status indicators need labels
<span 
  className="w-2 h-2 rounded-full bg-emerald-500" 
  role="status"
  aria-label="Active"
/>

// Form inputs need labels
<label htmlFor="email" className="text-xs">Email</label>
<Input id="email" type="email" aria-describedby="email-hint" />
<p id="email-hint" className="text-[10px]">We won't share your email</p>

Color Contrast

WCAG LevelRatioUsage

AA Normal4.5:1Body text (14px regular)

AA Large3:1Large text (18px+ or 14px bold)

AAA Normal7:1Enhanced accessibility

Common Mistakes

Do Not

Use color alone to convey information
Disable zoom on mobile
Remove focus outlines without replacements
Use tabindex greater than 0

Add icons or text alongside color
Support 200% zoom
Provide visible focus-visible rings
Use logical tab order (DOM order)