wcag-audit-patterns
wshobson/agents
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
What is wcag-audit-patterns?
This skill provides a comprehensive guide to auditing web content against WCAG 2.2 guidelines and implementing fixes. Use it when conducting accessibility audits, fixing violations, implementing accessible components, or meeting regulatory requirements like ADA and Section 508.
- Identify WCAG violations across conformance levels (A, AA, AAA)
- Audit against POUR principles (Perceivable, Operable, Understandable, Robust)
- Categorize issues by severity (Critical, Serious, Moderate)
- Provide remediation strategies for common violations
- Guide accessible component implementation
- Support VPAT compliance and accessibility lawsuits
How to install wcag-audit-patterns
npx skills add https://github.com/wshobson/agents --skill wcag-audit-patternsHow to use wcag-audit-patterns
- 1.Review the WCAG 2.2 conformance levels (A, AA, AAA) to determine your target
- 2.Understand the POUR principles as your audit framework
- 3.Identify violations using the severity categories (Critical, Serious, Moderate)
- 4.Consult detailed pattern documentation in references/details.md for specific fixes
- 5.Apply best practices: start early, test with real users, combine automated and manual testing
- 6.Document accessible patterns for your component library
Use cases
- Conducting full-site accessibility audits before launch
- Fixing critical blockers like missing alt text and keyboard access issues
- Implementing accessible design patterns in component libraries
- Preparing documentation for ADA/Section 508 compliance
- Addressing color contrast and form labeling violations
- Web developers and engineers
- Accessibility auditors and specialists
- Product managers preparing for compliance
- QA teams testing accessibility
- Design teams implementing accessible patterns
wcag-audit-patterns FAQ
Level A is minimum accessibility (legal baseline), Level AA is standard conformance (required by most regulations), and Level AAA is enhanced accessibility for specialized needs. Most organizations target AA compliance.
No. Automated testing detects only 30-50% of issues. Manual testing with real users, especially disabled users, is essential to catch the remaining violations.
ARIA should be a last resort. Use semantic HTML first, as it reduces the need for ARIA and is more reliable with assistive technologies.
Critical blockers include missing alt text for functional images, no keyboard access to interactive elements, missing form labels, and auto-playing media without controls.
Conduct regular WCAG 2.2 audits, fix violations by severity, test with assistive technologies, document your accessibility efforts, and consider VPAT compliance documentation.
Full instructions (SKILL.md)
Source of truth, from wshobson/agents.
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 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
Related skills
More from wshobson/agents and the wider catalog.
tailwind-design-system
Build production-ready design systems with Tailwind CSS v4, design tokens, and component libraries.
typescript-advanced-types
Master TypeScript's advanced type system: generics, conditional types, mapped types, and utility types for type-safe applications.
nodejs-backend-patterns
Build production-ready Node.js backends with Express/Fastify, middleware patterns, auth, and database integration.
python-performance-optimization
Profile and optimize Python code using cProfile, memory profilers, and performance best practices.
brand-landingpage
Brand-first landing page designer with guided interviews and Stitch-powered iteration.
python-testing-patterns
Implement comprehensive testing strategies with pytest, fixtures, mocking, and test-driven development.