` instead of `

`, `

`) 8. Missing video captions 9. Invisible focus styles 10. Touch targets <24x24px (WCAG 2.2 new) **Automated tools catch only 30-40%.** Manual audit required. ## Automated Testing ```bash # Lighthouse CLI npx lighthouse --output=json --only-categories=accessibility # axe-core npx @axe-core/cli --tags wcag2a,wcag2aa,wcag22aa ``` Playwright integration: ```javascript import AxeBuilder from '@axe-core/playwright'; const results = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag22aa']).analyze(); expect(results.violations).toEqual([]); ``` ## CSS Media Queries ### prefers-reduced-motion ```css @media (prefers-reduced-motion: reduce) { .animated { animation: fade-in 0.2s ease; transition: opacity 0.2s ease; } .parallax { transform: none !important; } .scroll-animation { animation: none; } } ``` Replace motion (slide, scale) with non-motion (fade, opacity). Keep transitions <200ms. ### prefers-color-scheme / prefers-contrast / forced-colors Always support dark mode, high contrast, and Windows forced colors. ## WCAG 2.2 New Criteria - **2.5.8:** Touch targets min 24x24 CSS px - **2.4.11/12:** Focus not obscured by sticky elements - **3.3.7:** No redundant entry (don't re-ask info) - **3.3.8:** No cognitive tests for auth (allow password managers) - **2.5.7:** Dragging has non-drag alternative ## Semantic HTML Reference ```html

...

``` ## Manual Checklist - [ ] Keyboard-only: Tab through entire page, verify focus order - [ ] Skip link visible on focus - [ ] All interactive elements: visible focus indicator - [ ] Heading hierarchy: one h1, no skipped levels - [ ] All images: meaningful alt OR aria-hidden="true" (decorative) - [ ] Color contrast: 4.5:1 normal, 3:1 large (18px+ bold or 24px+) - [ ] Forms: visible labels, errors linked with aria-describedby - [ ] ARIA landmarks: header, nav, main, footer - [ ] Touch targets: 24x24px minimum - [ ] Animations: respect prefers-reduced-motion - [ ] Dark mode: all elements visible and contrasted - [ ] Video: captions present, controls accessible - [ ] `lang` attribute on `` - [ ] Link text descriptive (not "click here") - [ ] Errors announced to screen readers (aria-live)