Accessibility Audit Skill

Audit UI accessibility against WCAG 2.1/2.2 guidelines.

When to Use

• Reviewing UI components for accessibility compliance
• Auditing pages for WCAG conformance
• Identifying keyboard navigation issues
• Checking color contrast
• Pre-launch accessibility verification

Core Workflow

Phase 1: Visual Accessibility Analysis

Perform a comprehensive accessibility audit:

1. COLOR CONTRAST
   - Check text/background contrast ratios
   - WCAG AA: 4.5:1 normal text, 3:1 large text
   - Identify failing elements

2. VISUAL HIERARCHY
   - Heading structure (logical H1-H6)
   - Visual grouping of related elements
   - Touch targets (44x44px minimum)

3. CONTENT ACCESSIBILITY
   - Images needing alt text
   - Icons without text labels
   - Color-only information

4. INTERACTIVE ELEMENTS
   - Buttons/links with unclear purpose
   - Form fields without labels
   - Missing error states

5. MOTION
   - Auto-playing content
   - Potential vestibular triggers

Provide WCAG criterion references for each issue.

Phase 2: Component Checklist

For each interactive component:

## Component: [Name]

### Keyboard Navigation

- [ ] Focusable with Tab
- [ ] Visible focus indicator
- [ ] Operable with Enter/Space
- [ ] Escape closes modals
- [ ] Arrow keys for menus

### Screen Reader

- [ ] Meaningful accessible name
- [ ] Role announced correctly
- [ ] State changes announced
- [ ] Errors associated with inputs

### Visual

- [ ] 4.5:1 contrast ratio (text)
- [ ] 3:1 contrast ratio (UI)
- [ ] 44x44px touch targets
- [ ] No color-only information

### Motion

- [ ] Respects prefers-reduced-motion
- [ ] No auto-play >5 seconds

WCAG Quick Reference

Level A (Minimum)

Criterion	Description	Fix
1.1.1	Non-text Content	Add alt text
1.3.1	Info and Relationships	Use semantic HTML
2.1.1	Keyboard	All via keyboard
2.4.1	Bypass Blocks	Skip links
4.1.2	Name, Role, Value	ARIA labels

Level AA (Recommended)

Criterion	Description	Fix
1.4.3	Contrast	4.5:1 text, 3:1 UI
1.4.4	Resize Text	Support 200% zoom
2.4.6	Headings	Descriptive headings
2.4.7	Focus Visible	Clear focus indicators

Common Fixes

Accessible Button

// Bad
<div onClick={handleClick}>Click me</div>

// Good
<button type="button" onClick={handleClick}>
  Click me
</button>

Accessible Icon Button

// Bad
<button><Icon /></button>

// Good
<button aria-label="Close dialog">
  <Icon aria-hidden="true" />
</button>

Form with Error

<label htmlFor="email">Email</label>
<input
  id="email"
  aria-describedby="email-error"
  aria-invalid={hasError}
/>
{hasError && (
  <span id="email-error" role="alert">
    Please enter a valid email
  </span>
)}

Report Template

# Accessibility Audit Report

**Date:** [Date]
**Page:** [Name]
**WCAG Level:** AA

## Summary

- Critical Issues: X
- Major Issues: X
- Minor Issues: X

## Issues

### [Issue Title]

- **Severity:** Critical/Major/Minor
- **WCAG:** [X.X.X]
- **Element:** [selector]
- **Issue:** [Description]
- **Fix:** [Recommendation]

Storage

Save audit reports to .opencode/memory/design/accessibility/

Related Skills

Need	Skill
Design quality	frontend-aesthetics
UI research	ui-ux-research