Designing Accessible UI Components

## Accessibility Matters Accessibility (a11y) is not optional — it is a requirement for building inclusive web applications. ## Key Principles 1. **Semantic HTML** — Use the right elements: `<button>`, `<nav>`, `<main>`, `<article>`. 2. **ARIA Labels** — Add `aria-label` or `aria-labelledby` to interactive elements that lack visible text. 3. **Keyboard Navigation** — Every interactive element must be reachable and operable via keyboard. 4. **Color Contrast** — Maintain a minimum 4.5:1 contrast ratio for normal text. 5. **Focus Management** — Visible focus indicators on all focusable elements. ## Component Libraries Radix UI provides unstyled, accessible primitives. Pair with Tailwind CSS for a fully custom look without sacrificing accessibility. ## Testing Use `axe-core` via `@axe-core/playwright` for automated accessibility audits in your E2E tests.