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>
2.2 KiB
2.2 KiB
A11y Audit Report — sample-component.tsx
Scanned: 1 file | Issues: 9 | Status: FAIL
Critical (3)
1. Missing alt text on image
- File: sample-component.tsx:7
- Code:
<img src={user.avatar} /> - WCAG: 1.1.1 Non-text Content (Level A)
- Fix: Add descriptive alt text:
<img src={user.avatar} alt={${user.name}'s avatar} />
2. Click handler without keyboard support
- File: sample-component.tsx:5
- Code:
<div className="card" onClick={() => onEdit(user.id)}> - WCAG: 2.1.1 Keyboard (Level A)
- Fix: Use
<button>or addrole="button",tabIndex={0}, andonKeyDown
3. Click handler without keyboard support
- File: sample-component.tsx:11
- Code:
<div onClick={() => onDelete(user.id)} ...> - WCAG: 2.1.1 Keyboard (Level A)
- Fix: Replace
<div>with<button>
Serious (4)
4. Missing form label
- File: sample-component.tsx:15
- Code:
<input placeholder="Add note" /> - WCAG: 3.3.2 Labels or Instructions (Level A)
- Fix: Add
<label>oraria-label="Add note"
5. Empty link
- File: sample-component.tsx:14
- Code:
<a href="#">Edit</a> - WCAG: 2.4.4 Link Purpose (Level A)
- Fix: Use a real href or replace with
<button>
6. tabindex greater than 0
- File: sample-component.tsx:24
- Code:
tabIndex={5} - WCAG: 2.4.3 Focus Order (Level A)
- Fix: Use
tabIndex={0}— positive values disrupt natural tab order
7. Missing table headers
- File: sample-component.tsx:30
- Code:
<td><b>Name</b></td>(using td+b instead of th) - WCAG: 1.3.1 Info and Relationships (Level A)
- Fix: Use
<th scope="col">Name</th>
Moderate (2)
8. Missing form label
- File: sample-component.tsx:22
- Code:
<input type="text" placeholder="Search..." /> - WCAG: 3.3.2 Labels or Instructions (Level A)
- Fix: Add
aria-label="Search"or visible label
9. Color as sole indicator
- File: sample-component.tsx:38
- Code:
style={{ color: row.active ? 'green' : 'red' }} - WCAG: 1.4.1 Use of Color (Level A)
- Fix: Add text or icon alongside color:
{row.active ? '✓ Active' : '✗ Inactive'}