Accessibility Audit
Workflow
- Detect framework from
package.json(React, Vue, Svelte) - Run static analysis — grep JSX/TSX/HTML files for violations (see wcag-checklist.md):
- Missing alt on <img> - Missing aria-label on icon-only buttons and inputs without <label> - Non-semantic interactive elements (<div onClick>, <span onClick>) - Missing htmlFor / for on <label> - Heading hierarchy skips (h1 → h3) - Missing landmark roles (<main>, <nav>, <header>)
- If dev server is running, optionally run axe-core CLI:
npx @axe-core/cli@4 http://localhost:3000 - Report findings grouped by severity
Output format
Group by WCAG criterion:
- Critical (WCAG A) — blocks assistive technology users
- Serious (WCAG AA) — significantly impacts usability
- Suggestions — best practice improvements
Use file:line references. Include the fix for each finding.
Rules
- Report
file:line+ violation + WCAG criterion + suggested fix - Never auto-fix — always show what to change and why
- Prioritize keyboard navigation and screen reader issues
Error Handling
- If
@axe-core/clifails (no running dev server) → fall back to static analysis only; note axe scan was skipped - If no JSX/HTML files found → report project structure is incompatible and stop
- If framework is undetected → scan all
.html,.jsx,.tsx,.vuefiles