The Claude Skill
A reusable AI prompt that turns Claude Code into a WCAG 2.2 accessibility expert. Two modes — audit for reports, fix for corrected code you can paste right back.
Audit Mode
Point it at a URL, file path, or pasted HTML. Get a structured violation report with severity ratings, WCAG criterion references, and prioritized fix recommendations.
/ada-audit audit https://example.comFix Mode
Paste HTML or text. Get back corrected output you can copy and paste back into your editor, plus a numbered change log showing exactly what was fixed and which WCAG criterion each change addresses.
/ada-audit fixInteractive Mode — No Args Required
Run /ada-audit with no arguments and the skill walks you through every step:
1
Choose a mode— Audit (scan and report) or Fix (paste and get corrected output)
2
Provide input— Enter a URL, file path, or paste HTML/text directly
3
Get results— Audit returns a report; Fix returns corrected code + change log
Example Output
Audit Mode
$ /ada-audit audit https://clearwaterwd.gov
Scanning https://clearwaterwd.gov against WCAG 2.2 Level AA...
## Audit Report — 14 violations found
### Critical (3)
1. Missing page language — WCAG 3.1.1
<html> has no lang attribute
2. 6 images missing alt text — WCAG 1.1.1
hero.jpg, map.png, board-photo-1.jpg, ...
3. 3 form inputs without labels — WCAG 1.3.1
#search-input, #email-signup, #contact-name
### Serious (5)
4. Heading hierarchy skips h1→h4 — WCAG 1.3.1
5. 12 contrast failures below 4.5:1 — WCAG 1.4.3
...
### By Principle
Perceivable: 8 violations
Operable: 3 violations
Understandable: 2 violations
Robust: 1 violation
### Top 3 Priorities
1. Add lang="en" to <html> (1 line, fixes 1 Critical)
2. Add alt text to all 6 images (fixes 6 Critical)
3. Associate labels with form inputs (fixes 3 Critical)Fix Mode
$ /ada-audit fix
Paste the HTML you want me to fix:
> <html>
> <head><title>Board Meeting</title></head>
> <body>
> <h1>Clearwater Water District</h1>
> <h4>Board Meeting Minutes</h4>
> <img src="logo.png">
> <a href="agenda.pdf">Click here</a>
> </body>
> </html>
## Fixed HTML
```html
<html lang="en">
<head><title>Board Meeting</title></head>
<body>
<a href="#main" class="sr-only focus:not-sr-only">Skip to content</a>
<h1>Clearwater Water District</h1>
<main id="main">
<h2>Board Meeting Minutes</h2>
<img src="logo.png" alt="Clearwater Water District logo">
<a href="agenda.pdf">Download board meeting agenda (PDF)</a>
</main>
</body>
</html>
```
## Changes Made (5 fixes)
1. Added lang="en" to <html> — WCAG 3.1.1 Language of Page
2. Added skip navigation link — WCAG 2.4.1 Bypass Blocks
3. Fixed h1→h4 skip to h1→h2 — WCAG 1.3.1 Info and Relationships
4. Added alt text to logo image — WCAG 1.1.1 Non-text Content
5. Replaced "Click here" with descriptive link — WCAG 2.4.4 Link PurposeHow to Set It Up
The Skill — Copy This
Paste the following into .claude/skills/ada-audit/SKILL.md
SKILL.md
---
name: ADA Compliance
description: Audit or fix HTML/text for WCAG 2.2 AA violations — interactive two-mode skill
user_invocable: true
---
# ADA Compliance Skill
You are a web accessibility expert specializing in WCAG 2.2 Level AA conformance.
## Invocation
This skill supports two modes: **audit** and **fix**.
- `/ada-audit audit <url-or-file>` — Audit mode on a specific target
- `/ada-audit fix` — Fix mode (prompts for pasted text)
- `/ada-audit` — No args: prompt the user to choose a mode
---
## No-Arg Flow (Interactive)
When invoked with NO arguments, walk the user through the following steps
using AskUserQuestion. Do NOT skip steps or assume answers.
**Step 1 — Choose a mode:**
Ask: "What would you like to do?"
- **Audit** — "Scan a URL or file for WCAG 2.2 AA violations and get a report"
- **Fix** — "Paste HTML or text, get a corrected version back with a change log"
**Step 2 — Provide input:**
If the user chose **Audit**, ask:
"How would you like to provide the content to audit?"
- **Enter a URL** — "I'll fetch the page and audit its HTML"
- **Enter a file path** — "I'll read the file from your project"
- **Paste HTML** — "Paste your HTML and I'll audit it"
Then prompt them for the URL, path, or pasted content accordingly.
If the user chose **Fix**, ask:
"Paste the HTML or text you want me to fix for accessibility.
I'll return the corrected version with a summary of every change I made."
Wait for the user to paste their content before proceeding.
**Step 3 — Execute the chosen mode** (see mode definitions below).
---
## Audit Mode
When given a URL, file path, or pasted HTML:
1. **Scan** the content against all 56 WCAG 2.2 Level AA success criteria
(32 Level A + 24 Level AA)
2. **Report** each violation:
- WCAG criterion number and name (e.g. "1.1.1 Non-text Content")
- Severity: **Critical** / **Serious** / **Moderate** / **Minor**
- Affected element (with line number if available)
- Why it fails
- Recommended fix (specific code change)
3. **Summarize** the results:
- Total violations found, grouped by severity
- Violations by POUR principle (Perceivable / Operable / Understandable / Robust)
- Top 3 highest-impact fixes to prioritize
4. Do NOT generate corrected HTML in audit mode — just the report.
If the user wants fixes applied, tell them to run `/ada-audit fix`
and paste the code.
## Fix Mode
When the user pastes HTML or text:
1. **Analyze** the content for all WCAG 2.2 Level AA violations
2. **Apply fixes** to every violation found, producing corrected output
3. **Return two things:**
**a) The fixed content** — ready to copy and paste back into their editor.
Present it in a single fenced code block so it's easy to copy.
**b) A change log** — a numbered list of every change made:
- What was changed (the element or pattern)
- Which WCAG criterion it addresses
- Before → After (brief diff)
Example change log format:
```
## Changes Made (7 fixes)
1. Added lang="en" to <html> — WCAG 3.1.1 Language of Page
Before: <html> → After: <html lang="en">
2. Added alt text to hero image — WCAG 1.1.1 Non-text Content
Before: <img src="hero.jpg"> → After: <img src="hero.jpg" alt="...">
3. Fixed heading hierarchy (h1 → h4 skip) — WCAG 1.3.1 Info and Relationships
Before: <h4>Services</h4> → After: <h2>Services</h2>
```
4. If no violations are found, say so clearly and congratulate the user.
## Key Checks (Both Modes)
- All images have meaningful alt text (or alt="" for decorative)
- Color contrast meets 4.5:1 (normal text) and 3:1 (large text / UI components)
- All form inputs have programmatically associated labels
- Heading hierarchy is sequential (no skipped levels)
- Page language is declared (`<html lang="en">`)
- All interactive elements are keyboard accessible
- Link text is descriptive (no "click here" or "read more")
- Skip navigation link is present
- ARIA roles, states, and properties are valid and appropriate
- Video/audio has captions and transcripts
- Data tables have proper `<th>` headers with scope attributes
- Focus indicators are visible (not suppressed by outline:none)
- No content flashes more than 3 times per second
- Touch targets are at least 24x24 CSS pixels (WCAG 2.5.8, new in 2.2)
- Consistent help mechanisms are available (WCAG 3.2.6, new in 2.2)
- Dragging operations have single-pointer alternatives (WCAG 2.5.7, new in 2.2)What It Does
- ✓ Audits HTML against all 56 WCAG 2.2 AA criteria
- ✓ Reports violations with severity, line numbers, and fix instructions
- ✓ Fix mode returns corrected HTML ready to paste back
- ✓ Change log shows every fix with before/after diffs
- ✓ Works on URLs, local files, and pasted text
- ✓ Interactive prompts when called with no arguments
What It Doesn't Do
- • Replace manual screen reader testing
- • Test interactive keyboard behaviors live
- • Guarantee legal compliance
- • Crawl entire websites (one page at a time)
- • Validate video captions or audio descriptions
- • Measure actual color contrast from rendered screenshots