Validating Accessibility

Agent Workflow (MANDATORY)

Before ANY accessibility validation, use TeamCreate to spawn 3 agents:

1. fuse-ai-pilot:explore-codebase - Find components to audit
2. fuse-ai-pilot:research-expert - Verify latest WCAG 2.2 requirements
3. Check existing ARIA patterns in codebase

After fixes, run fuse-ai-pilot:sniper for validation.

---

Overview

Feature	Description
WCAG 2.2 AA	Minimum compliance level
Color Contrast	4.5:1 text, 3:1 UI
Keyboard	Full navigation support
ARIA	Screen reader support

---

Critical Rules

1. 4.5:1 contrast - Normal text minimum
2. 3:1 contrast - Large text and UI components
3. Focus visible - All interactive elements
4. Reduced motion - Respect user preference
5. Labels required - All form inputs

---

Quick Checklist

[ ] Color contrast: 4.5:1 (text), 3:1 (UI)
[ ] Keyboard: All elements focusable
[ ] Focus: Visible indicators (ring-2)
[ ] ARIA: Correct attributes
[ ] Motion: prefers-reduced-motion
[ ] Semantic: Proper heading hierarchy
[ ] Labels: All inputs labeled
[ ] Alt text: All images

---

Reference Guide

Concepts

Topic	Reference	When to Consult
Nielsen Heuristics	ux-nielsen.md	10 usability heuristics
Laws of UX	ux-laws.md	Cognitive psychology
WCAG 2.2	ux-wcag.md	Accessibility standards
UX Patterns	ux-patterns.md	Common UX patterns
Buttons	buttons-guide.md	Touch targets, focus
Forms	forms-guide.md	Labels, validation

---

Quick Reference

Color Contrast

Normal text (<18px):     4.5:1 minimum
Large text (≥18px):      3:1 minimum
UI components:           3:1 minimum

Focus Indicator

className="focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"

Reduced Motion

import { useReducedMotion } from "framer-motion";

const shouldReduce = useReducedMotion();
<motion.div animate={shouldReduce ? {} : { y: 0 }} />

ARIA Patterns

// Icon button
<button aria-label="Close">
  <X className="h-4 w-4" />
</button>

// Form with description
<input aria-describedby="hint" />
<p id="hint">Must be 8+ characters</p>

→ See ux-principles.md for complete patterns

---

Best Practices

DO

• Test with keyboard only
• Use semantic HTML first
• Add aria-label to icon buttons
• Respect reduced motion
• Test with screen reader

DON'T

• Skip focus indicators
• Use color alone for meaning
• Forget alt text on images
• Remove outline without replacement
• Ignore heading hierarchy