Accessibility Auditor v2

# Accessibility Auditor ADA lawsuits hit 4,000+ companies in 2023. The EAA deadline was June 2025. This skill audits your web app against WCAG 2.2 and gives you a VPAT/ACR report you can hand to procurement. ## What it does A complete accessibility audit covering: - **WCAG 2.2 AA + AAA** — 70+ specific checks across 4 principles (POUR) - **axe-core integration** — runs industry-standard engine - **Color contrast** — WCAG AA (4.5:1) and AAA (7:1) ratios - **Keyboard navigation** — tab order, focus traps, skip links - **Screen reader** — NVDA / JAWS / VoiceOver compatibility hints - **ARIA** — correct roles, properties, states; misuse detection - **Forms** — labels, error handling, required fields - **Media** — alt text, captions, audio descriptions - **Mobile** — touch target size (44x44px), pinch zoom, orientation - **Cognitive** — reading level, consistent navigation, error prevention Plus: **VPAT/ACR generation** — Voluntary Product Accessibility Template for enterprise procurement. ## When to use it - You're about to launch a website and need accessibility sign-off - Your legal team is asking about ADA / EAA compliance - A customer is requesting a VPAT - Your CI doesn't have accessibility tests yet - An accessibility audit firm quoted you $15k and you want a pre-audit - You're migrating to a new framework and want to set a11y baseline ## Why it's better than ad-hoc prompting Most "check accessibility" prompts give generic advice. This skill is different: - **Quantified** — every check has a pass/fail with severity - **70+ specific checks** — not "make sure alt text exists" - **WCAG 2.2 current** — the 9 new 2.2 criteria are covered - **VPAT/ACR output** — procurement-ready - **axe-core integration** — same engine Lighthouse uses ## Architecture ``` ┌─────────────────────────────────────────────────────────┐ │ Agent (Claude/Cursor) │ │ - Points at URL or HTML │ │ - Runs audit │ │ - Generates VPAT/ACR if needed │ └───────────────┬─────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ skills/accessibility-auditor/ │ │ scripts/ │ │ ├── audit_url.py # Live URL audit │ │ ├── audit_html.py # HTML file audit │ │ ├── audit_source.py # JSX/TSX/Vue source audit │ │ ├── run_axe.py # Run axe-core via headless │ │ ├── vpat_generator.py # VPAT/ACR report │ │ └── score.py # 0-100 score │ │ references/ │ │ ├── wcag-22-criteria.md │ │ ├── ada-eaa-explained.md │ │ ├── vpat-template.md │ │ └── fixes-library.md │ └─────────────────────────────────────────────────────────┘ ``` ## Quick start ```bash # 1. Install pip install beautifulsoup4 lxml requests # Optional: install axe-core CLI for headless run npm install -g @axe-core/cli # 2. Audit a live URL python scripts/audit_url.py https://example.com # 3. Audit HTML file python scripts/audit_html.py dist/index.html # 4. Audit source code python scripts/audit_source.py src/ --framework react # 5. Run axe-core python scripts/run_axe.py https://example.com # 6. Generate VPAT/ACR python scripts/vpat_generator.py --report audit-report.json --out VPAT-2026.docx ``` ## The 70+ checks (by WCAG principle) ### Perceivable (18 checks) - Images have alt text (1.1.1) - Decorative images have alt="" (1.1.1) - Complex images have long descriptions (1.1.1) - Captions for prerecorded video (1.2.2) - Audio descriptions for video (1.2.5) - Color is not the only means of conveying info (1.4.1) - Text contrast ratio ≥ 4.5:1 (1.4.3) - Large text contrast ≥ 3:1 (1.4.3) - UI components contrast ≥ 3:1 (1.4.11) - Text resizable to 200% (1.4.4) - Images of text avoided (1.4.5) - Reflow at 320px width (1.4.10) - Text spacing adjustable (1.4.12) - Content on hover/focus dismissible (1.4.13) - **WCAG 2.2**: Target Size ≥ 24x24 CSS px (2.5.8) - **WCAG 2.2**: Dragging alternatives (2.5.7) - **WCAG 2.2**: Consistent help (3.2.6) - **WCAG 2.2**: Redundant entry (3.3.7) ### Operable (16 checks) - All functionality keyboard accessible (2.1.1) - No keyboard traps (2.1.2) - Keyboard shortcuts remappable (2.1.4) - Focus visible (2.4.7) - Skip navigation link (2.4.1) - Page titled (2.4.2) - Focus order logical (2.4.3) - Link purpose clear (2.4.4) - Multiple ways to find pages (2.4.5) - Headings and labels descriptive (2.2.6) - Touch target size ≥ 44x44 (2.5.5 AAA) - **WCAG 2.2**: Focus appearance (2.4.11) - **WCAG 2.2**: Dragging movements (2.5.7) - **WCAG 2.2**: Target size enhanced (2.5.8) - **WCAG 2.2**: Visible focus indicator (2.4.11) - No motion-actuated functionality without alt (2.5.4) ### Understandable (16 checks) - Language attribute set (3.1.1) - Language of parts identified (3.1.2) - On focus, no context change (3.2.1) - On input, no unexpected change (3.2.2) - Consistent navigation (3.2.3) - Consistent identification (3.2.4) - Error identification (3.3.1) - Labels or instructions (3.3.2) - Error suggestion (3.3.3) - Error prevention (legal, financial, data) (3.3.4) - **WCAG 2.2**: Consistent help (3.2.6) - **WCAG 2.2**: Accessible authentication (3.3.8) - **WCAG 2.2**: Redundant entry (3.3.7) - Parsing (deprecated but still checked) (4.1.1) - Name, role, value (4.1.2) - Status messages (4.1.3) ### Robust (8 checks) - HTML valid (4.1.1) - Name, role, value correct (4.1.2) - Status messages announced (4.1.3) - ARIA roles valid - ARIA properties valid - ARIA states valid - No duplicate ARIA - Custom components have ARIA ## Sample output ``` ## Accessibility Audit — https://example.com **Score**: 78/100 (Fair — needs improvement) **WCAG 2.2 AA compliance**: 92% **Critical issues**: 3 **Serious issues**: 7 **Moderate issues**: 12 ### Critical (lawsuit risk) - ❌ Login form has no labels (3.3.2) — fails screen reader - ❌ Color contrast on "Submit" button: 2.8:1 (needs 4.5:1) (1.4.3) - ❌ Modal traps keyboard focus (2.1.2) — users stuck ### Serious - ⚠️ Images missing alt: 14 occurrences - ⚠️ Form errors not announced (4.1.3) - ⚠️ No skip-navigation link (2.4.1) ### Moderate - 💡 Heading hierarchy skips H3 (1.3.1) - 💡 Language attribute not set on (3.1.1) - 💡 Touch targets < 24x24 px: 6 instances (2.5.8) ``` ## Pricing Single-purchase, lifetime access. $11.00. Includes: - 6 Python audit scripts - 4 reference docs (WCAG 2.2, ADA/EAA, VPAT, fixes library) - axe-core integration - 70+ check library - VPAT/ACR report template - Future updates for the same major version ## Example usage > "Audit our marketing site at https://example.com for WCAG 2.2 AA. Generate a VPAT for our enterprise customer." The skill will: 1. Crawl the site 2. Run all 70+ checks 3. Run axe-core 4. Score 0-100 5. Generate `audit-report.json` 6. Render `VPAT-2026.md` for procurement ## Compatibility Works with any agent that supports the SKILL.md standard and can execute Python: Claude Code, OpenClaw, Codex CLI, Cursor, Gemini CLI, Cline, Windsurf, Aider. Source audit supports React/JSX, Vue, Angular, Svelte. Tested on Linux, macOS, Windows. ## Tags accessibility, a11y, wcag, ada, compliance, audit, frontend, ux