Skip to content
UXClaim
Accessibility

WCAG Accessibility Skill

Claude Code skill for WCAG 2.1/2.2 audits, WAI-ARIA patterns, screen reader testing, and accessible component builds.

View source More in Accessibility

What It Does

This Claude Code skill provides comprehensive accessibility expertise for auditing websites and apps against WCAG 2.0, 2.1, and 2.2 standards. It helps you build accessible components (forms, modals, tabs, data tables), implement WAI-ARIA patterns correctly, test with real assistive technologies (NVDA, JAWS, VoiceOver), and set up automated testing in CI/CD pipelines.

How It Works

The skill comes with 15 searchable CSV databases covering WCAG criteria, ARIA patterns, keyboard shortcuts, semantic HTML, typography rules, testing tools, and more. Use Python search utilities to query any database—output as JSON or CSV, export results. A Python MCP server also exposes all databases directly to Claude. Pre-built templates for audit reports, GitHub Actions pipelines, VPATs, and test scripts accelerate common accessibility workflows.

Use Cases

  • Audit existing websites and native apps systematically against accessibility standards
  • Design accessible components with tested ARIA patterns and keyboard navigation
  • Test with screen readers using step-by-step prompts for NVDA, JAWS, VoiceOver, TalkBack
  • Integrate automated checks into CI/CD (axe-core, pa11y, Playwright, Lighthouse)
  • Document findings in audit reports, VPATs, and accessibility statements
  • Evaluate color contrast, focus management, touch targets, and mobile accessibility

Who Benefits

Design leaders, UX/product designers, content strategists, and accessibility advocates who need structured guidance to embed accessibility into design and development workflows. Non-developers can leverage pre-built templates and prompts without writing code.

Frequently asked questions

How do I install the WCAG accessibility skill?
Use Claude Code CLI: `npx claude-code-templates@latest --skill accessibility/wcag-accessibility`. Or clone the repo to `~/.claude/skills/wcag-accessibility`. Claude Code auto-discovers skills—no restart required.
What WCAG versions does this skill cover?
WCAG 2.0, 2.1, and 2.2 (including newest criteria 2.4.11–2.4.13, 2.5.7–2.5.8, 3.2.6, 3.3.7–3.3.9) at Level A/AA. Also includes draft WCAG 3.0 Bronze criteria with APCA and plain language guidance.
Can I search the accessibility databases?
Yes. Run `python scripts/search.py wcag --level AA` to find WCAG criteria, or `python scripts/search.py aria --component modal` for ARIA patterns. Supports keyword filters, JSON/CSV output, and export to file. Also cross-database search across all 15 databases.
What component patterns are included?
25+ patterns: modal dialogs, date pickers, autocompletes, tabs, accordions, data tables, toast notifications, carousels, combo boxes. Each includes ARIA roles/states, keyboard interaction (Arrow keys, Tab, Enter), focus management, and tested HTML/CSS/JS examples.
How do I test with screen readers?
Use the `test-with-screen-reader.md` prompt for step-by-step test scripts. Covers NVDA (Windows), JAWS, VoiceOver (Mac/iOS), TalkBack (Android), and Narrator. Database includes 300+ keyboard shortcuts by screen reader and task.
Does it integrate with CI/CD pipelines?
Yes. Pre-built GitHub Actions template runs axe-core, pa11y-ci, Playwright, and Lighthouse accessibility checks. Also includes `.pa11yci.json` and `.lighthouserc.json` configs ready to customize and commit.
What's included for design handoff?
A handoff checklist by phase (Research → Design → Dev → QA → Release) and owner. Also prompts to review Figma handoffs, audit design tokens, check color palettes for contrast and color-blindness safety, and generate plain-language design specs.
Can this help with VPATs and accessibility statements?
Yes. Official VPAT 2.5 template for WCAG A/AA/AAA and Section 508 is included. Prompts help translate audit findings into VPAT Accessibility Conformance Report language for legal and procurement teams.

Glossary

WCAG
Web Content Accessibility Guidelines—W3C standards (2.0, 2.1, 2.2) defining how to make web and mobile content accessible to people with disabilities. Levels A, AA, and AAA indicate increasing strictness.
WAI-ARIA
Accessible Rich Internet Applications specification. Provides roles, states, and properties to communicate UI meaning and state to assistive technologies (screen readers, voice control) when semantic HTML is insufficient.
Assistive Technology
Tools people with disabilities use to access digital content: screen readers (NVDA, JAWS, VoiceOver), magnifiers, voice control, switch access, eye trackers. Testing with real AT is essential.
Focus Management
Ensuring keyboard users can predictably navigate and interact with UI elements in logical order, with visible focus indicators and proper tab order. Critical for keyboard and voice control users.
Semantic HTML
Using HTML elements for their intended purpose (e.g., `<button>` for actions, `<nav>` for navigation, `<h1>` for headings). Provides accessible meaning to assistive technologies without ARIA.

More in Accessibility

All →
Accessibility

A&T Claude Skills

Reusable Claude Code skills for accessibility audits, WCAG compliance checking, and web development workflows

automateandtweak
Accessibility

a11y-skills

Claude Skills for accessibility auditing, code review, and WCAG 2.2 compliance across web, mobile, and documents.

joedevon
Accessibility

Prism Inspector

Complete UX/UI design critique and WCAG 2.2 AA accessibility audit in one tool. Review screenshots, Figma URLs, live sites, or HTML files.