Automated WCAG Accessibility Audits with Claude Code: The 2026 Guide

web-design-guidelines by vercel-labs (396,443 installs, skills.sh registry) is the highest-install skill in the entire accessibility cluster — and one of the top 5 most-installed skills across all 25,215 listings in the catalog. It loads WCAG 2.2 colour-contrast ratios, ARIA landmark rules, and keyboard-navigation requirements into Claude Code context before every component is generated. The skills.sh catalog tracks 100+ accessibility-tagged skills across 25,215 total listings and 91.5 M total installs.

Why does Claude Code need explicit accessibility skills?

Claude Code generates code from patterns in its training data — which means it reproduces the same accessibility gaps that appear in most open-source React code: missing aria-label attributes, insufficient colour contrast ratios, non-keyboard-navigable custom components, and absent prefers-reduced-motion guards.

An accessibility skill changes this. Rather than fixing violations after generation, the skill loads the correct rules into context so Claude Code generates accessible components from the first output.

The difference in practice: without web-design-guidelines, a generated button may use gray-400 text on a white background (2.1:1 contrast ratio — fails WCAG AA). With the skill loaded, Claude Code checks contrast before outputting and selects gray-700 (7.1:1 — passes WCAG AAA).

Which accessibility skills should I load in Claude Code?

The catalog's top accessibility skills by installs:

Preventive (load before generating):

• web-design-guidelines by vercel-labs — 396,443 installs. The primary prevention skill: loads WCAG 2.2 AA requirements for colour contrast, focus indicators, touch target size, and ARIA roles into Claude Code's context.
• audit by pbakaus — 82,768 installs (part of impeccable, 35,911 GitHub stars). Runs a full design + code audit: checks for colour contrast, spacing consistency, and semantic HTML hierarchy.
• accessibility by addyosmani — 29,149 installs. Addy Osmani's web quality skill: covers WCAG 2.2 AA/AAA criteria, ARIA best practices, and screen reader testing patterns.

Remediation (load to fix violations):

• fixing-accessibility by ibelick — 13,170 installs. Targeted remediation patterns: adds missing ARIA attributes, fixes focus-trap issues in modals, and replaces role-inappropriate elements.
• playwright-best-practices by currents-dev — 51,025 installs. Includes accessibility testing patterns with axe-core via Playwright — the best way to automate WCAG checks in CI.

What does a WCAG 2.2 audit with Claude Code look like?

Load audit by pbakaus and web-design-guidelines, then run:

"Audit this component file for WCAG 2.2 AA compliance. List every violation with its success criterion and a concrete fix."

Claude Code will: 1. Check text colour contrast ratios against background values (AA threshold: 4.5:1 for normal text, 3:1 for large text). 2. Verify interactive elements have visible focus indicators (WCAG 2.4.11 — minimum 2px contrast-ratio-3:1 outline). 3. Confirm form inputs have associated <label> elements or aria-labelledby. 4. Check that modals and drawers trap focus and restore it on close. 5. Verify alt attributes on all <img> elements (empty string for decorative images). 6. Flag any animations without @media (prefers-reduced-motion: reduce) guards.

The fixing-accessibility skill then applies the fixes. The combined pattern — audit then fix — is more reliable than asking Claude Code to "just make it accessible" because it surfaces violations explicitly before remediation.

How do I test accessibility automatically in CI?

The playwright-best-practices skill (51,025 installs) includes patterns for axe-playwright, which runs axe-core on rendered pages in your CI pipeline:

```typescript import { checkA11y } from 'axe-playwright';

test('homepage passes WCAG 2.2 AA', async ({ page }) => { await page.goto('/'); await checkA11y(page, undefined, { axeOptions: { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag22aa'] } } }); }); ```

This catches programmatic violations (missing labels, insufficient contrast, invalid ARIA). It cannot catch all WCAG criteria — manual testing with a screen reader (NVDA on Windows, VoiceOver on macOS) remains necessary for keyboard-navigation and screen-reader-specific issues.

What WCAG criteria does Claude Code handle well?

Handles well (preventive + fixable):

• 1.4.3 Contrast (Minimum) — colour maths is deterministic; Claude Code picks compliant values reliably.
• 1.1.1 Non-text Content — alt text generation is reliable for descriptive images; mark decorative images with alt="".
• 4.1.2 Name, Role, Value — ARIA attribute generation is reliable for standard interactive patterns.
• 2.1.1 Keyboard — standard HTML elements (<button>, <a>, <input>) are keyboard-accessible by default.

Requires human review:

• 2.4.3 Focus Order — complex SPAs with conditional rendering may produce incorrect focus sequences that only become visible during manual keyboard testing.
• 1.4.4 Resize Text — behaviour at 200% zoom in browsers requires visual inspection.
• 2.5.3 Label in Name — voice control software checks require live testing.

Key takeaways

• web-design-guidelines by vercel-labs (396,443 installs) is the #1 accessibility skill — load it before generating any UI to prevent violations rather than fix them.
• audit by pbakaus (82,768 installs) runs a full WCAG 2.2 audit; follow it with fixing-accessibility by ibelick (13,170 installs) for structured remediation.
• playwright-best-practices by currents-dev (51,025 installs) brings axe-core CI automation — catches programmatic violations on every pull request.
• Claude Code handles colour contrast, ARIA attributes, and alt-text reliably; focus order in complex SPAs and screen-reader behaviour require manual testing.
• The skills.sh catalog has 100+ accessibility-tagged skills out of 25,215 total listings; the top four prevention + testing skills total 559,286 combined installs (skills.sh registry, GitHub).

Common questions