accessibility-review

/accessibility-review

> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).

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

• Insufficient color contrast
• Missing form labels
• No keyboard access to interactive elements
• Missing alt text on meaningful images
• Focus traps in modals
• Missing ARIA landmarks
• Auto-playing media without controls
• Time limits without extension options

Testing Approach

• Automated scan (catches ~30% of issues)
• Keyboard-only navigation
• Screen reader testing (VoiceOver, NVDA)
• Color contrast verification
• 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

If Connectors Available

If ~~design tool is connected:

• Inspect color values, font sizes, and touch targets directly from Figma
• Check component ARIA roles and keyboard behavior in the design spec

If ~~project tracker is connected:

• Create tickets for each accessibility finding with severity and WCAG criterion
• Link findings to existing accessibility remediation epics

Tips

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