920dc12a74
Built from scratch (replaces reverted PR #375 contribution). Skill package: - SKILL.md: 1132 lines, 3-phase workflow (scan → fix → verify), per-framework fix patterns (React, Next.js, Vue, Angular, Svelte, HTML), CI/CD integration guide, 20+ issue type coverage - scripts/a11y_scanner.py: static scanner detecting 20+ violation types across HTML/JSX/TSX/Vue/Svelte/CSS — severity-ranked, CI-friendly exit codes - scripts/contrast_checker.py: WCAG contrast calculator with AA/AAA checks, --suggest mode, --batch CSS scanning, named color support - references/wcag-quick-ref.md: WCAG 2.2 Level A/AA criteria table - references/aria-patterns.md: ARIA roles, live regions, keyboard interaction - references/framework-a11y-patterns.md: React, Vue, Angular, Svelte fix patterns - assets/sample-component.tsx: sample file with intentional violations - expected_outputs/: scan report, contrast output, JSON output samples - /a11y-audit slash command, settings.json, plugin.json, README.md Validation: 97.6/100 (EXCELLENT), quality 73.9/100 (B-), scripts 2/2 PASS Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
47 lines
1.5 KiB
Markdown
47 lines
1.5 KiB
Markdown
# A11y Audit — WCAG 2.2 Accessibility Audit & Fix
|
|
|
|
Audit and fix WCAG 2.2 accessibility issues in any frontend project. Covers React, Next.js, Vue, Angular, Svelte, and plain HTML.
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
# Scan a project
|
|
/a11y-audit ./src
|
|
|
|
# Or use the scripts directly
|
|
python3 scripts/a11y_scanner.py ./src
|
|
python3 scripts/contrast_checker.py "#1a1a2e" "#ffffff"
|
|
```
|
|
|
|
## Scripts
|
|
|
|
| Script | Purpose |
|
|
|--------|---------|
|
|
| `a11y_scanner.py` | Scan HTML/JSX/TSX/Vue/Svelte/CSS for 20+ a11y violations |
|
|
| `contrast_checker.py` | WCAG contrast ratio calculator with AA/AAA checks and `--suggest` mode |
|
|
|
|
Both are stdlib-only — no pip install needed. CI-friendly exit codes (0 = pass, 1 = blocking issues).
|
|
|
|
## What It Covers
|
|
|
|
- **Images**: missing alt, empty alt on informative images
|
|
- **Forms**: missing labels, orphan labels, missing fieldset/legend
|
|
- **Headings**: skipped levels, missing h1, multiple h1s
|
|
- **Landmarks**: missing main/nav/skip link
|
|
- **Keyboard**: tabindex > 0, click without keyboard handler
|
|
- **ARIA**: invalid attributes, aria-hidden on focusable, missing aria-live
|
|
- **Color**: contrast ratios below AA thresholds
|
|
- **Links**: empty links, "click here" text
|
|
- **Tables**: missing headers, missing caption
|
|
- **Media**: missing captions, autoplay without controls
|
|
|
|
## References
|
|
|
|
- `references/wcag-quick-ref.md` — WCAG 2.2 Level A/AA criteria table
|
|
- `references/aria-patterns.md` — ARIA roles, live regions, keyboard patterns
|
|
- `references/framework-a11y-patterns.md` — React, Vue, Angular, Svelte fix patterns
|
|
|
|
## License
|
|
|
|
MIT
|