/a11y-audit¶
Scan a frontend project for WCAG 2.2 accessibility issues, show fixes, and optionally check color contrast.
Usage¶
/a11y-audit # Scan current project
/a11y-audit ./src # Scan specific directory
/a11y-audit ./src --fix # Scan and auto-fix what's possible
What It Does¶
Step 1: Scan¶
Run the a11y scanner on the target directory:
Parse the JSON output. Group findings by severity (critical → serious → moderate → minor).
Display a summary:
A11y Audit: ./src
Critical: 3 | Serious: 7 | Moderate: 12 | Minor: 5
Files scanned: 42 | Files with issues: 15
Step 2: Fix¶
For each finding (starting with critical):
- Read the affected file
- Show the violation with context (before)
- Apply the fix from
references/framework-a11y-patterns.md - Show the result (after)
Auto-fixable issues (apply without asking):
- Missing alt="" on decorative images
- Missing lang attribute on <html>
- tabindex values > 0 → set to 0
- Missing type="button" on non-submit buttons
- Outline removal without replacement → add :focus-visible styles
Issues requiring user input (show fix, ask to apply): - Missing alt text (need description from user) - Missing form labels (need label text) - Heading restructuring (may affect layout) - ARIA role changes (may affect functionality)
Step 3: Contrast Check¶
If CSS files are present, run the contrast checker:
For each failing color pair, suggest accessible alternatives.
Step 4: Report¶
Generate a markdown report at a11y-report.md:
- Executive summary (pass/fail, issue counts)
- Per-file findings with before/after diffs
- Remaining manual review items
- WCAG criteria coverage
Skill Reference¶
engineering-team/a11y-audit/SKILL.mdengineering-team/a11y-audit/scripts/a11y_scanner.pyengineering-team/a11y-audit/scripts/contrast_checker.pyengineering-team/a11y-audit/references/wcag-quick-ref.mdengineering-team/a11y-audit/references/aria-patterns.mdengineering-team/a11y-audit/references/framework-a11y-patterns.md