a11y-audit — Claude Code plugin: WCAG 2.2 accessibility audit
Scans and fixes WCAG 2.2 accessibility issues across React, Next.js, Vue, Angular, Svelte and plain HTML projects.
/plugin marketplace add alirezarezvani/claude-skills
/plugin install a11y-audit@claude-code-skillsWhat a11y-audit does
The plugin runs a static scanner over your source files and flags more than 20 violation types: images without alt text, unlabelled form fields, skipped heading levels, empty links, tabindex above zero, broken ARIA attributes. A second script computes the contrast ratio for a colour pair and checks it against AA and AAA thresholds. With --suggest it proposes a darker or lighter shade that passes.
Two Python scripts do the work: scripts/a11y_scanner.py and scripts/contrast_checker.py. Both use only the standard library, so there is no pip install step. Exit codes are built for CI: 0 means clean, 1 means blocking issues. Reference files cover WCAG 2.2 Level A and AA criteria, ARIA patterns, and fix recipes per framework.
The /a11y-audit slash command takes a directory path. No Python 3 on the machine means the scripts will not run, so check that first.
What it helps with
- find images missing alt text and empty links across a codebase
- compute text-to-background contrast and pick a passing colour
- catch skipped heading levels and a missing main landmark
- spot ARIA attributes that break keyboard navigation
- wire an accessibility check into CI with a clear exit code
Example prompts for the agent
- /a11y-audit ./src
- scan the components folder for accessibility violations and list blocking ones
- check the contrast of #1a1a2e on #ffffff and suggest an AA-compliant colour
How to install a11y-audit
Plugin marketplace
/plugin marketplace add alirezarezvani/claude-skills/plugin install a11y-audit@claude-code-skillsStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about a11y-audit
How do I install a11y-audit in Claude?
Add the marketplace first: /plugin marketplace add alirezarezvani/claude-skills. Then install the plugin: /plugin install a11y-audit@claude-code-skills.
What does a11y-audit do?
It scans HTML, JSX, TSX, Vue, Svelte and CSS for WCAG 2.2 violations and suggests framework-specific fixes. It also calculates colour contrast ratios.
Do I need to install anything else for it to work?
The scripts rely on the Python standard library, so no pip packages are needed. Python 3 still has to be present on the system.
Source text
a11y-audit · MIT
# 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
© Alireza Rezvani · MIT · alirezarezvani/claude-skills
