Accessibility Auditor (WCAG 2.2)

Accessibility lawsuits and the EU Accessibility Act (in force since June 28, 2025) made a11y a legal requirement, not a nice-to-have. This skill audits your UI code for the barriers that exclude users with disabilities and fail WCAG 2.2 AA — before they reach users or regulators.

What it checks

Framework-aware checks for web (React, Vue, Angular, Svelte, plain HTML) and mobile (React Native, Flutter, native iOS/SwiftUI, native Android/Compose):

• Names & labels — icon-only buttons with no accessible name, unlabeled form inputs, images missing alt/labels (the most common blocker)
• Keyboard & focus — mouse-only custom widgets, keyboard traps, removed focus indicators (`outline: none`), bad tab order
• Color & contrast — text below 4.5:1 (computed when colors are readable), meaning conveyed by color alone
• Structure — heading order, landmarks, semantic HTML vs div soup
• Forms — placeholder-as-label, errors shown only in color or not associated with fields
• WCAG 2.2 additions — target size (24×24), focus not obscured, dragging alternatives, accessible authentication (paste-blocking on OTP, CAPTCHAs)
• Mobile specifics — accessibilityLabel/contentDescription/Semantics, touch targets, dynamic type, VoiceOver/TalkBack state and announcements, reduced motion

Legal scope, automatically

Detects your target markets and cites the right regime — EU Accessibility Act / EN 301 549, ADA, Section 508, AODA — while keeping the technical target at WCAG 2.2 AA (the strict common denominator). It even distinguishes which criteria are required today under EU's WCAG 2.1 reference vs the newer 2.2 additions.

How it works

1. Detects platform, framework, and legal scope.
2. Maps every UI surface with a11y obligations — images, controls, forms, structure, color, focus, motion, auth.
3. Audits against WCAG 2.2 AA with framework-idiomatic patterns.
4. Writes ACCESSIBILITY_AUDIT.md graded by user impact (Critical/High/Medium/Low) — each finding leads with who is blocked and from what, plus file:line, the exact WCAG criterion, and a concrete fix. Runtime-only checks go in a "Verify manually" section with steps.

Why buy it

• Severity by user impact — "screen-reader users can't checkout" beats an abstract rule number; you fix what actually matters first
• Concrete, framework-correct fixes — real JSX/SwiftUI/Compose snippets, not "add a label"
• Computes contrast — states the actual ratio (e.g. "#949494 on #fff = 2.9:1, fails") when colors are resolvable
• Honest about static limits — routes screen-reader/keyboard/zoom checks to "Verify manually" instead of faking pass/fail
• Complements axe/Lighthouse — catches the context they miss (is the alt text meaningful? is the focus order logical?)
• Agent-agnostic — Claude Code, Cursor, Codex CLI, Copilot, Gemini CLI

Who it's for

• Teams shipping to the EU (EAA), US (ADA/508), or Canada (AODA)
• Anyone who got a demand letter or is preparing a VPAT/ACR
• Web and mobile devs who want a11y caught in code review, not in production

Limitations

Static code audit, not a full conformance evaluation. Some criteria need manual testing with assistive technology (it tells you which). Doesn't run axe/Lighthouse, doesn't produce a binding VPAT/ACR, doesn't redesign your UI.