frontend-a11y-auditlisted

# Frontend Accessibility Audit Automated tools catch roughly a third of real accessibility barriers. They verify that attributes exist, not that the experience works, so this skill pairs a static scan with the manual checks that find the rest — and produces fixes, not just a list of violations. The European Accessibility Act deadline in June 2025 made this a procurement requirement in many markets rather than a nice-to-have, so frame findings in terms of legal exposure and user impact, not just score. ## Step 1 — Scan ```bash node scripts/a11y_scan.mjs <src-dir> ``` Catches the static tier: images without alt, form controls without labels, positive tabindex, click handlers on non-interactive elements, `aria-*` on elements that do not accept them, redundant roles, missing lang, heading skips, and generic link text. For a running app, add runtime checks — they catch computed contrast and focus order that source scanning cannot: ```bash npx @axe-core/cli http://localhost:3000 --tags wcag2a,wcag2aa,wcag22aa ``` In development, `@axe-core/react` logs violations to the console as you build, which is far cheaper than finding them in an audit. ## Step 2 — The manual checks that matter most These four find the barriers that automation structurally cannot: **Keyboard-only pass.** Unplug the mouse. Tab through the entire flow. Every interactive element must be reachable, operable with Enter/Space, and visibly focused. Focus must never enter a hidden element or leave the page