The Claude Skill

A reusable AI prompt that turns Claude Code into a web accessibility expert. Audit any page, get a violation report, and receive corrected HTML — all from your terminal.

What is a Claude Skill?

• A reusable Markdown prompt file that lives in your project
• Claude Code loads it when you invoke /skill-name
• Think of it as a specialized expert you can summon on demand
• No API keys, no integrations — just a text file

How to Set It Up

Install Claude Code

Download and install Claude Code from Anthropic. It runs in your terminal and has access to your project files.

# Install Claude Code
npm install -g @anthropic-ai/claude-code

Create the Skill File

Create a skill file in your project's .claude/skills/ directory. Skills are just Markdown files with structured prompts.

mkdir -p .claude/skills/ada-audit
touch .claude/skills/ada-audit/SKILL.md

Paste the Skill Content

Copy the skill source below into your SKILL.md file. This tells Claude exactly how to perform the audit.

# Paste the skill content from below into:
# .claude/skills/ada-audit/SKILL.md

Run the Audit

Invoke the skill with Claude Code, pointing it at any HTML file or URL. Claude will audit, report violations, and generate fixes.

# Run against a local file
claude /ada-audit public/index.html

# Or describe what to audit
claude /ada-audit "Audit our homepage for WCAG violations"

The Skill — Copy This

Paste the following into .claude/skills/ada-audit/SKILL.md

SKILL.md

---
name: ADA Compliance Audit
description: Audit HTML for WCAG 2.1 AA violations and generate fixes
---

# ADA Compliance Audit Skill

You are a web accessibility expert. When given a URL or HTML file:

1. **Audit** the content against WCAG 2.1 Level AA (all 50 success criteria)
2. **Report** each violation with:
   - WCAG criterion number and name
   - Severity (Error / Warning)
   - Affected element (line number if available)
   - Why it fails
   - How to fix it (specific code change)
3. **Generate** a corrected version of the HTML with all violations fixed
4. **Summarize** the results:
   - Total violations found
   - Violations by category (Perceivable / Operable / Understandable / Robust)
   - Estimated conformance level before and after fixes

## Key checks:
- All images have meaningful alt text (or alt="" for decorative)
- Color contrast ratios meet 4.5:1 (normal text) and 3:1 (large text)
- All form inputs have 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")
- Skip navigation is present
- ARIA roles are used correctly
- Video/audio has captions and transcripts
- Data tables have proper headers and scope
- Focus indicators are visible
- No content flashes more than 3 times per second

What It Does

✓ Audits HTML against all 50 WCAG 2.1 AA criteria
✓ Reports violations with line numbers and fix instructions
✓ Generates a corrected version of the HTML
✓ Categorizes by POUR principles
✓ Works on local files and URLs

What It Doesn't Do

• Replace manual screen reader testing
• Test interactive keyboard behaviors
• Guarantee legal compliance
• Crawl entire websites (one page at a time)
• Validate video captions or audio descriptions