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

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

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