This repository contains a project-level Claude Code skill for auditing, implementing, and reviewing front-end accessibility using W3C WAI standards and guidelines.
The skill is installed in:
.claude/skills/w3c-wai-frontend-accessibility/SKILL.md
It defaults to WCAG 2.2 Level AA alignment and includes support material for WAI-ARIA component patterns, mobile accessibility, cognitive accessibility, ATAG-aware authoring flows, media alternatives, and accessibility testing.
Note: The W3C initiative is WAI — Web Accessibility Initiative. This repo name/request used “WAL”, but the skill itself targets W3C WAI guidance.
Use it in Claude Code when you want to:
Example prompts:
Use the W3C WAI frontend accessibility skill to audit this app and create a remediation plan.
Use /w3c-wai-frontend-accessibility to fix keyboard and screen reader issues in the checkout flow.
Review these changed React components against WCAG 2.2 AA and WAI-ARIA patterns.
.claude/skills/w3c-wai-frontend-accessibility/
├── SKILL.md
├── references/
│ ├── aria-component-patterns.md
│ ├── framework-guidance.md
│ ├── frontend-implementation-recipes.md
│ ├── testing-guide.md
│ ├── wcag-2.2-aa-frontend-checklist.md
│ └── w3c-wai-standards-map.md
├── scripts/
│ └── frontend-a11y-static-audit.mjs
└── templates/
├── accessibility-implementation-report.md
├── accessibility-pr-checklist.md
└── accessibility-remediation-plan.md
The skill includes a dependency-free Node.js static audit helper for common front-end accessibility smells.
Run it from this repository:
node .claude/skills/w3c-wai-frontend-accessibility/scripts/frontend-a11y-static-audit.mjs .
Run it against another front-end project:
node /path/to/WAL-skill/.claude/skills/w3c-wai-frontend-accessibility/scripts/frontend-a11y-static-audit.mjs /path/to/app
Useful options:
node frontend-a11y-static-audit.mjs . --format markdown
node frontend-a11y-static-audit.mjs . --format json
node frontend-a11y-static-audit.mjs . --fail-on high
node frontend-a11y-static-audit.mjs . --max-files 5000
The script checks for issues such as missing image alt text, unlabeled controls, clickable non-interactive elements, positive tabindex, missing document language, disabled zoom, incomplete ARIA references, missing media captions, and focus-outline removal.
Static results are leads, not proof. Always follow up with keyboard, screen-reader, contrast, reflow, reduced-motion, mobile/touch, and content-quality checks.
To use this skill across projects, copy the skill folder into your personal Claude Code skills directory:
mkdir -p ~/.claude/skills
cp -R .claude/skills/w3c-wai-frontend-accessibility ~/.claude/skills/
Then restart Claude Code so it discovers the skill.
Primary WAI standards overview:
Key references used by the skill:
This skill helps implement and evaluate accessibility, but it does not certify legal compliance. WCAG conformance claims require complete evaluation of the delivered product, including manual assistive-technology testing and content review.