WCAG 2.2 Compliance Checks
Full coverage of all AA and AAA criteria — including the two new WCAG 2.2 additions: Target Size Minimum (2.5.8) and Focus Appearance (2.4.11). Each criterion includes grep patterns and fix examples.
WCAG 2.2 AA/AAA
WCAG 2.2 accessibility,
inside Claude Code
Audit any frontend codebase for accessibility issues. Get ARIA guidance, color contrast checks, screen reader compatibility, and automated fix suggestions — all from your CLI.
claude plugin add https://github.com/petro-nazarenko/wcag-auditor
claude "audit my React app for WCAG AA compliance"
What it does
Five specialized capability areas covering every aspect of frontend accessibility.
ARIA Roles Audit
Validates landmark roles, widget roles, required properties, and common anti-patterns. Catches broken ARIA before it ships: missing keyboard handlers, aria-hidden on focusable elements, duplicate landmarks.
Color Contrast Detection
Calculates WCAG contrast ratios, flags failing Tailwind classes, audits CSS custom properties. Includes a JS luminance formula, common failing combos, and ready-to-use replacement colors.
Screen Reader Compatibility
ARIA live regions, focus management patterns, skip links, table semantics, form labeling, and React-specific implementations (react-aria, focus traps, useRef patterns).
Automated Fix Suggestions
12 fix patterns with before/after code: missing alt text, onclick-on-div, icon buttons, modal focus traps, tab panels, infinite scroll, toast notifications, and more.
Common Violations Quick Reference
The issues this plugin catches most often in production codebases.
| Issue | WCAG | Severity | Fix |
|---|---|---|---|
<img> without alt |
1.1.1 | Critical | Add descriptive alt or alt="" for decorative |
<div onClick> without keyboard |
2.1.1 | Critical | Convert to <button> or add role + onKeyDown |
| Modal without focus trap | 2.1.2 | Critical | Implement focus trap + Escape key handler |
| Input without label | 1.3.1 | High | Add <label htmlFor> or aria-label |
| Icon button without accessible name | 4.1.2 | High | Add aria-label="Action name" |
| Text contrast below 4.5:1 | 1.4.3 | High | Darken color (e.g. gray-400 → gray-600) |
outline: none without replacement |
2.4.7 | High | Add :focus-visible outline |
| Toast without aria-live | 4.1.3 | High | Add role="status" + aria-live="polite" |
| Missing lang attribute | 3.1.1 | High | Add lang="en" to <html> |
| Target < 24×24px | 2.5.8 | Medium | Set min-width/height: 24px |
Installation
Up and running in two commands.
-
Install the plugin
Add wcag-auditor to your Claude Code installation.
claude plugin add https://github.com/petro-nazarenko/wcag-auditor -
Open your frontend project
Navigate to any React, Vue, Angular, or HTML project directory.
cd your-frontend-project -
Run an accessibility audit
Ask Claude to audit your codebase — the skill activates automatically.
claude "audit this project for WCAG 2.2 AA compliance"
Plugin Details
Metadata and project information.