WCAG Audit Patterns
FreeStreamline your accessibility audits with actionable insights.
Free · Opens the source repo
What WCAG Audit Patterns does
The WCAG Audit Patterns skill provides a comprehensive framework for auditing web content against the WCAG 2.2 guidelines. It is designed for developers and designers who need to ensure that their websites are accessible to all users, including those with disabilities. The skill offers a structured approach to identifying WCAG violations, providing both automated testing strategies and manual verification techniques to ensure compliance.
This skill emphasizes the importance of understanding the WCAG conformance levels (A, AA, AAA) and the POUR principles (Perceivable, Operable, Understandable, Robust). By following these guidelines, users can systematically evaluate their web content and address critical accessibility issues. The documentation includes common violations categorized by their impact, allowing users to prioritize fixes based on severity and user experience.
Additionally, the skill outlines best practices for implementing accessibility from the design phase, such as using semantic HTML and testing with real users. It also provides a detailed reference in the accompanying references/details.md file, offering worked examples and specific remediation strategies for common accessibility challenges. This makes it a valuable resource for teams looking to build accessible components and meet legal compliance requirements.
Overall, WCAG Audit Patterns is an essential tool for anyone involved in web development or design who aims to create inclusive digital experiences. It not only helps in fixing existing accessibility violations but also fosters a proactive approach to accessibility in future projects.
When to use it
Use this skill when conducting accessibility audits, fixing WCAG violations, or implementing accessible design patterns in web projects.
When not to use it
This skill may not be suitable for projects that do not require adherence to accessibility standards or for teams not focused on inclusive design.
What you can build with it
Conducting Accessibility Audits
Use this skill to systematically audit your website for compliance with WCAG 2.2, identifying and addressing violations.
Implementing Accessible Design Patterns
Leverage the skill to guide the implementation of accessible components in your web applications, ensuring a better user experience for all.
Preparing for Legal Compliance
Utilize this skill to prepare your web content for potential accessibility lawsuits by ensuring it meets necessary legal standards.
How to install WCAG Audit Patterns
View source1. Install with the skills CLI
npx skills add wshobson/agents/wcag-audit-patterns --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by wshobsonWCAG 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
Frequently asked questions about WCAG Audit Patterns
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.