accessibility-review

/accessibility-review

Audit a design or page for WCAG 2.1 AA accessibility compliance.

Usage

/accessibility-review $ARGUMENTS

Audit for accessibility: @$1

WCAG 2.1 AA Quick Reference

Perceivable

• 1.1.1 Non-text content has alt text
• 1.3.1 Info and structure conveyed semantically
• 1.4.3 Contrast ratio >= 4.5:1 (normal text), >= 3:1 (large text)
• 1.4.11 Non-text contrast >= 3:1 (UI components, graphics)

Operable

• 2.1.1 All functionality available via keyboard
• 2.4.3 Logical focus order
• 2.4.7 Visible focus indicator
• 2.5.5 Touch target >= 44x44 CSS pixels

Understandable

• 3.2.1 Predictable on focus (no unexpected changes)
• 3.3.1 Error identification (describe the error)
• 3.3.2 Labels or instructions for inputs

Robust

• 4.1.2 Name, role, value for all UI components

Common Issues

1. Insufficient color contrast
2. Missing form labels
3. No keyboard access to interactive elements
4. Missing alt text on meaningful images
5. Focus traps in modals
6. Missing ARIA landmarks
7. Auto-playing media without controls
8. Time limits without extension options

Testing Approach

1. Automated scan (catches ~30% of issues)
2. Keyboard-only navigation
3. Screen reader testing (VoiceOver, NVDA)
4. Color contrast verification
5. Zoom to 200% — does layout break?

Output

## Accessibility Audit: [Design/Page Name]
**Standard:** WCAG 2.1 AA | **Date:** [Date]

### Summary
**Issues found:** [X] | **Critical:** [X] | **Major:** [X] | **Minor:** [X]

### Findings

#### Perceivable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [1.4.3 Contrast] | 🔴 Critical | [Fix] |

#### Operable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [2.1.1 Keyboard] | 🟡 Major | [Fix] |

#### Understandable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [3.3.2 Labels] | 🟢 Minor | [Fix] |

#### Robust
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [4.1.2 Name, Role, Value] | 🟡 Major | [Fix] |

### Color Contrast Check
| Element | Foreground | Background | Ratio | Required | Pass? |
|---------|-----------|------------|-------|----------|-------|
| [Body text] | [color] | [color] | [X]:1 | 4.5:1 | ✅/❌ |

### Keyboard Navigation
| Element | Tab Order | Enter/Space | Escape | Arrow Keys |
|---------|-----------|-------------|--------|------------|
| [Element] | [Order] | [Behavior] | [Behavior] | [Behavior] |

### Screen Reader
| Element | Announced As | Issue |
|---------|-------------|-------|
| [Element] | [What SR says] | [Problem if any] |

### Priority Fixes
1. **[Critical fix]** — Affects [who] and blocks [what]
2. **[Major fix]** — Improves [what] for [who]
3. **[Minor fix]** — Nice to have

Local Tools

When working locally:

• Visual inspection: Use browser tools to screenshot and inspect the design
• File system: Read source code, stylesheets, and component files directly
• Console: Check browser console for errors via the preview server log
• Code analysis: Grep for token usage, component patterns, and style consistency

Tips

1. Start with contrast and keyboard — These catch the most common and impactful issues.
2. Test with real assistive technology — My audit is a great start, but manual testing with VoiceOver/NVDA catches things I can't.
3. Prioritize by impact — Fix issues that block users first, polish later.