Accessibility

The kit is designed to meet WCAG AA standards across all 55 routes and both color themes.

Keyboard Navigation

• All interactive elements are keyboard-accessible
• Focus visible rings on all focusable elements (focus-visible:ring-2)
• Tab order follows visual layout
• Escape closes modals, dialogs, and sheets
• Arrow keys navigate within components (tabs, menus)

Screen Reader Support

• Semantic HTML: <main>, <nav>, <header>, <footer>, <section>
• One <h1> per page with no heading level skips
• aria-label on icon-only buttons
• aria-live regions for dynamic content updates
• aria-invalid and aria-describedby on form validation
• aria-sort on sortable table headers
• role attributes on custom interactive elements

Color Contrast

• All text meets WCAG AA minimum contrast (4.5:1 for normal text, 3:1 for large text)
• Status indicators use color + text + icon (never color alone)
• Both light and dark themes tested for contrast compliance

Touch Targets

• All interactive elements have 44x44px minimum touch area
• Small visual elements (dots, chips) have expanded touch targets
• Mobile-optimized spacing between interactive elements

Reduced Motion

• prefers-reduced-motion media query disables animations
• Chart transitions respect motion preferences
• Page entrance animations are suppressed

Form Accessibility

• Every form field has a visible <Label>
• Required fields marked with red asterisk (*)
• Validation errors appear inline below the field
• Error messages linked via aria-describedby
• Invalid fields styled with border-destructive

Skip Link

Every page includes a skip-to-content link for keyboard users to bypass navigation.

Focus Management

• Dialogs trap focus and return it to the trigger on close
• Route changes move focus to the main content area
• Sheet/sidebar close returns focus to the trigger element

Status Indicators

All status indicators combine three signals:

1. Color -- semantic token (success/warning/destructive/info)
2. Text -- explicit status label
3. Icon -- visual icon reinforcement

Example: A "Completed" badge shows a green background + "Completed" text + CheckCircle icon.