wcag-audit-patterns

Imported from zernie/vigiles (test/dogfood/wshobson-accessibility@cf6059d/skills/wcag-audit-patterns/SKILL.md). Install upstream with npx skills add zernie/vigiles --skill wcag-audit-patterns. Copyright stays with the author.

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

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