# Accessibility

- Semantics first: buttons are `<button>`, links are `<a href>`, lists are lists, tables have headers.
- Focus: visible ring on every focusable element (`focus-visible:ring-2 ring-ring`), logical order, no traps except in modals.
- Overlays: Escape closes, focus moves in on open and returns to the trigger on close, background is inert.
- Names: icon-only buttons get `aria-label`; inputs have a `<label>`; groups of radios/checkboxes have a legend.
- Announce results: toasts and inline status use `role="status"` or `aria-live="polite"`.
- Contrast: 4.5:1 for text, 3:1 for UI and focus indicators, in both themes.
- Don't rely on color alone for status; pair it with text or an icon.
- Targets at least 24×24 px (44×44 on touch-first screens).