Wcag Audit Patterns
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 ac...
Install
Quick install
npx skills add https://github.com/wshobson/agents/tree/main/plugins/accessibility-compliance/skills/wcag-audit-patternsnpx skills add wshobson/agents --skill wcag-audit-patterns --agent claude-codenpx skills add wshobson/agents --skill wcag-audit-patterns --agent cursornpx skills add wshobson/agents --skill wcag-audit-patterns --agent codexnpx skills add wshobson/agents --skill wcag-audit-patterns --agent opencodenpx skills add wshobson/agents --skill wcag-audit-patterns --agent github-copilotnpx skills add wshobson/agents --skill wcag-audit-patterns --agent windsurfMore install options
Shorthand — useful for multi-skill repos:
npx skills add wshobson/agents --skill wcag-audit-patternsManual — clone the repo and drop the folder into your agent's skills directory:
git clone https://github.com/wshobson/agents.gitcp -r agents/plugins/accessibility-compliance/skills/wcag-audit-patterns ~/.claude/skills/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
SKILL.md source
--- name: wcag-audit-patterns description: 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 ac... --- # 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
Related skills 6
Using Superpowers
Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions
Cookbook Audit
Audit an Anthropic Cookbook notebook based on a rubric. Use whenever a notebook review or audit is requested.
Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state ma...
Analyzing Financial Statements
This skill calculates key financial ratios and metrics from financial statement data for investment analysis
Applying Brand Guidelines
This skill applies consistent corporate branding and styling to all generated documents including colors, fonts, layouts, and messaging
Developer Growth Analysis
Analyzes your recent Claude Code chat history to identify coding patterns, development gaps, and areas for improvement, curates relevant learning resources from HackerNews, and automatically sends ...