wcag-audit-patterns

SKILL.md

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