wcag-audit-patterns
🎯SkillHelps you check a website for accessibility problems, so people with disabilities can use it. It covers automatic and hands-on checks and how to fix common issues.
Installation
npx skills add wshobson/agents --skill wcag-audit-patternsRun it in a terminal; it asks which AI coding tools to install it for (Claude Code, Codex, Cursor and more).
Uses skills.sh · Node.js 22.20+
After installing
Ask for related work and the agent uses it on its own, or call it yourself.
/wcag-audit-patternsInstall by hand
Copy the whole skill folder from GitHub to the place below. Copying only SKILL.md can leave out files the skill uses.
Open the skill folder →- This project
.claude/skills/wcag-audit-patterns/ - All projects
~/.claude/skills/wcag-audit-patterns/
These paths are for Claude Code. For other tools, the command above puts it in the right place.
What this skill does
Overview
WCAG is the main international guideline for making websites usable by people with disabilities. This skill guides an audit against WCAG 2.2, which means a careful check of a site against those rules. It also explains how to fix what you find.
Key Features
- Understand the three levels of compliance: A, AA and AAA.
- See common problems sorted by how serious they are.
- Find issues like missing image descriptions, weak color contrast or no keyboard access.
- Follow clear do's and don'ts, like using standard HTML before special accessibility tags.
- Prepare for legal rules such as ADA and Section 508, which are US accessibility laws.
Who is this for?
It is useful for web developers and designers who want sites everyone can use. It also helps teams that must meet legal accessibility requirements.
Summarized by AI from this skill's SKILL.md. Suggest a better one
SKILL.md
View on GitHub →Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
WCAG Audit Patterns
Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies.
When to Use This Skill
- Conducting accessibility audits
- Fixing WCAG violations
- Implementing accessible components
- Preparing for accessibility lawsuits
- Meeting ADA/Section 508 requirements
- Achieving VPAT compliance
Core Concepts
1. WCAG Conformance Levels
| Level | Description | Required For |
|---|---|---|
| A | Minimum accessibility | Legal baseline |
| AA | Standard conformance | Most regulations |
| AAA | Enhanced accessibility | Specialized needs |
2. POUR Principles
Perceivable: Can users perceive the content?
Operable: Can users operate the interface?
Understandable: Can users understand the content?
Robust: Does it work with assistive tech?
3. Common Violations by Impact
Critical (Blockers):
├── Missing alt text for functional images
├── No keyboard access to interactive elements
├── Missing form labels
└── Auto-playing media without controls
Serious:
├── Insufficient color contrast
├── Missing skip links
├── Inaccessible custom widgets
└── Missing page titles
Moderate:
├── Missing language attribute
├── Unclear link text
├── Missing landmarks
└── Improper heading hierarchy
Detailed patterns and worked examples
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Best Practices
Do's
- Start early - Accessibility from design phase
- Test with real users - Disabled users provide best feedback
- Automate what you can - 30-50% issues detectable
- Use semantic HTML - Reduces ARIA needs
- Document patterns - Build accessible component library
Don'ts
- Don't rely only on automated testing - Manual testing required
- Don't use ARIA as first solution - Native HTML first
- Don't hide focus outlines - Keyboard users need them
- Don't disable zoom - Users need to resize
- Don't use color alone - Multiple indicators needed
More from this repository10
Helps you build a consistent look for your app with Tailwind CSS v4. It sets up shared colors, sizes, dark mode and reusable components so every screen matches.
A guide to TypeScript's advanced type features, which describe the shape of your data so mistakes are caught before the code runs. It covers reusable types, types that change based on rules, and built-in helper types, with short examples.
Guidance for building reliable server-side apps with Node.js, using Express or Fastify. It covers login, error handling, databases, API design and a list of proven best practices.
Intelligent automation and multi-agent orchestration for Claude Code
Claude Code plugin for AI-powered framework migration workflows, coordinating specialized agents to plan and execute transitions between technology stacks as part of the wshobson/agents marketplace.
A Claude Code plugin for payment system integration covering Stripe, PayPal, and billing platforms with checkout flows, subscription management, and webhook handling in the wshobson/agents ecosystem.
A Claude Code plugin bundling core development tools and agents for everyday tasks like debugging and code generation, part of the wshobson/agents marketplace with 73 focused plugins.
Claude Code plugin for observability and monitoring including logging, metrics, distributed tracing, and alerting, part of the wshobson/agents marketplace with 73 focused plugins.
A Claude Code plugin providing specialized AI agents for deployment strategy planning and execution, covering blue-green deployments, canary releases, rolling updates, and zero-downtime patterns.
Claude Code plugin for JVM language development including Java, Kotlin, and Scala with specialized agents for idiomatic patterns, build tools, and runtime optimization in the wshobson/agents marketplace.