How to use the WCAG Audit Patterns agent skill

What the skill makes the agent do

Once the skill is loaded, the agent knows how to review web content against WCAG 2.2. It explains the three conformance levels (A, AA and AAA), groups common problems by impact, and suggests concrete fixes. The skill's core guidance uses the four POUR principles: Perceivable, Operable, Understandable and Robust.

For deeper questions, the skill points to a reference file, references/details.md, which contains detailed patterns and worked examples. The agent reads it when the summary guidance is not enough.

• Conformance levels: A (minimum), AA (standard conformance), AAA (enhanced).
• Critical problems include missing alt text for functional images, no keyboard access to interactive elements, missing form labels and auto-playing media without controls.
• Serious problems include insufficient colour contrast, missing skip links, inaccessible custom widgets and missing page titles.
• Moderate problems include a missing language attribute, unclear link text, missing landmarks and improper heading hierarchy.

Install the skill from the ZIP

Download the ZIP file from this page and unzip it. The skill folder contains two files: SKILL.md and references/details.md. Place the unzipped folder in one of these locations:

• Personal skills for all your projects: ~/.claude/skills/
• Project-only skills: the .claude/skills/ folder inside your project
• Or upload the skill in the Claude apps under Settings → Capabilities → Skills

Trigger the skill with natural requests

You do not need a special command. The skill's description tells the agent when to use it, so ask in ordinary words. The skill is meant for auditing websites, fixing WCAG violations, and implementing accessible design patterns. Name the page, component or problem so the agent has something concrete to check.

• "Audit this login form against WCAG 2.2 and list the problems by severity."
• "Fix the WCAG violations in this navigation component."
• "Does this colour scheme meet WCAG 2.2 AA contrast guidance?"
• "Give me an accessibility checklist for our checkout flow before the internal review."

Examples of what the agent returns

For an image, the reference file shows the difference between good and bad alt text. A chart should describe its message, such as the sales increase, while a purely decorative line should use an empty alt attribute. The agent can apply the same reasoning to your own markup.

Expect a list of issues grouped by severity, each with a suggested fix. Treat that list as a starting point for your own testing rather than a final verdict.

What the skill needs and how it behaves

The skill lists no required tools. It does not run scripts and does not use the network, so it works by reading the content you give it and the files in the skill folder. Because it is only guidance, the agent cannot test a live site in a browser through this skill alone; paste the markup or describe the component instead.

The skill is a guide, not a lawyer or certified auditor. It does not guarantee ADA or Section 508 compliance, and its own guidance says manual testing is required because automated tools catch only part of the problems.

• No scripts are run and no network access is used.
• Licence: MIT.
• Do not treat the output as legal sign-off or certification.

Tips for better audits

Give the agent the actual HTML, CSS or a description of the interaction. The more specific the input, the more specific the findings. Ask for the checklist from references/details.md when you want a structured pass through the principles.

Always follow up with manual checks: keyboard-only navigation, screen reader testing and zoom testing, and ideally testing with disabled users.

• Start with the Critical group, then Serious, then Moderate.
• Prefer native HTML over ARIA where possible, as the skill advises.
• Never hide focus outlines, disable zoom, or rely on colour alone.