Accessibility

Built into the site regardless of a11y mode.

Baseline Features

• Skip-to-content link -- first focusable element, visible on focus
• WAI-ARIA Tabs -- Base UI provides built-in keyboard navigation for theme mode and CVD type tabs
• Screen reader announcements -- aria-live="polite" region announces theme generation and clipboard copy events via AnnounceContext
• Focus management -- focus moves to <main> on route transitions (skips on initial load)
• Reduced motion -- prefers-reduced-motion media query disables all CSS transitions; useReducedMotion hook available for JS logic
• Semantic HTML -- <table> with <caption>, <fieldset>/<legend> for forms, <nav>, <section>, <article>, <ol>/<ul> for lists
• Interactive swatches -- rendered as <button> elements with descriptive aria-label (e.g. "primary: #6366f1. Click to copy.")
• Tooltips -- all icon buttons in the navbar show visible labels on hover/focus via shadcn Tooltip
• Toggle state -- aria-pressed on all mode toggle buttons

A11y Mode Enhancements

When the a11y toggle is activated, these additional overrides apply on top of the baseline:

• True black/white foreground colors for maximum contrast
• 112.5% root font-size (18px base)
• 3px solid focus rings with 4px offset
• All links underlined (not identified by color alone)
• All CSS and JS animations disabled

Key Files

• apps/web/src/components/layout/SkipLink.tsx
• apps/web/src/components/layout/RootLayout.tsx -- focus management
• apps/web/src/context/AnnounceContext.tsx -- live region provider
• apps/web/src/hooks/useReducedMotion.ts
• apps/web/src/index.css -- .a11y CSS overrides