--- name: accessibility-audit description: Systematic accessibility audits: contrast, keyboard navigation, focus management, ARIA, screen reader semantics, and reduced motion. --- # Accessibility Audit WCAG 2.2 AA as a release requirement — not an afterthought Make accessibility a release requirement, not a post-launch patch. Every interface must be usable by everyone — keyboard users, screen reader users, low-vision users, and motor-impaired users. ## The Non-Negotiable Rules ### Contrast - **Body text**: ≥ 4.5:1 against its background. No exceptions. - **Large text** (≥ 18px or bold ≥ 14px): ≥ 3:1. - **Placeholder text**: same 4.5:1 as body — not the muted-gray default. - **UI components** (buttons, inputs, icons): ≥ 3:1 against adjacent colors. - **Focus indicators**: ≥ 3:1 against both background and adjacent colors. The most common failure: muted gray body text on a tinted near-white. If contrast is even close, bump the body color toward the ink end of the ramp. ```css /* BAD: 3.8:1 — fails WCAG AA */ --text-muted: oklch(0.65 0.01 240); /* GOOD: 5.2:1 — passes WCAG AA */ --text-muted: oklch(0.5 0.01 240); ``` ### Keyboard Navigation Every interactive element must be reachable and operable via keyboard: - **Tab order** follows visual order. No `tabindex` > 0. - **Focus visible**: every focusable element has a visible focus ring. Never `outline: none` without replacement. - **Focus trap**: modals and dialogs trap focus. Escape closes. Focus returns to trigger on close. - **Skip links**: first focusable element on page is a "Skip to main content" link. - **No keyboard traps**: focus can always move forward (Tab) and backward (Shift+Tab). ```css /* Focus ring that works on any background */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } ``` ### Semantic HTML Use the right element for the job: | Use | Not | |-----|-----| | `