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.
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
Audit Checklist
Perceivable (Principle 1)
## 1.1 Text Alternatives
### 1.1.1 Non-text Content (Level A)
- [ ] All images have alt text
- [ ] Decorative images have alt=""
- [ ] Complex images have long descriptions
- [ ] Icons with meaning have accessible names
- [ ] CAPTCHAs have alternatives
Check:
```html
<!-- Good -->
<img src="chart.png" alt="Sales increased 25% from Q1 to Q2" />
<img src="decorative-line.png" alt="" />
<!-- Bad -->
<img src="chart.png" />
<img src="decorative-line.png" alt="decorative line" />
```
### Understandable (Principle 3)
```markdown
## 3.1 Readable
### 3.1.1 Language of Page (Level A)
- [ ] HTML lang attribute set
- [ ] Language correct for content
```html
<html lang="en">
3.1.2 Language of Parts (Level AA)
Language changes marked
<p>The French word <span lang="fr">bonjour</span> means hello.</p>
3.2 Predictable
3.2.1 On Focus (Level A)
No context change on focus alone
No unexpected popups on focus
3.2.2 On Input (Level A)
No automatic form submission
User warned before context change
3.2.3 Consistent Navigation (Level AA)
Navigation consistent across pages
Repeated components same order
3.2.4 Consistent Identification (Level AA)
Same functionality = same label
Icons used consistently
3.3 Input Assistance
3.3.1 Error Identification (Level A)
Errors clearly identified
Error message describes problem
Error linked to field
<input aria-describedby="email-error" aria-invalid="true" />
<span id="email-error" role="alert">Please enter valid email</span>
3.3.2 Labels or Instructions (Level A)
All inputs have visible labels
Required fields indicated
Format hints provided
3.3.3 Error Suggestion (Level AA)
Errors include correction suggestion
Suggestions are specific
3.3.4 Error Prevention (Level AA)
Legal/financial forms reversible
Data checked before submission
User can review before submit
### Robust (Principle 4)
```markdown
## 4.1 Compatible
### 4.1.1 Parsing (Level A) - Obsolete in WCAG 2.2
- [ ] Valid HTML (good practice)
- [ ] No duplicate IDs
- [ ] Complete start/end tags
### 4.1.2 Name, Role, Value (Level A)
- [ ] Custom widgets have accessible names
- [ ] ARIA roles correct
- [ ] State changes announced
```html
<!-- Accessible custom checkbox -->
<div role="checkbox"
aria-checked="false"
tabindex="0"
aria-labelledby="label">
</div>
<span id="label">Accept terms</span>
4.1.3 Status Messages (Level AA)
Status updates announced
Live regions used correctly
<div role="status" aria-live="polite">3 items added to cart</div>
<div role="alert" aria-live="assertive">Error: Form submission failed</div>