Validating Accessibility
Agent Workflow (MANDATORY)
Before ANY accessibility validation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Find components to audit
- fuse-ai-pilot:research-expert - Verify latest WCAG 2.2 requirements
- 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
- 4.5:1 contrast - Normal text minimum
- 3:1 contrast - Large text and UI components
- Focus visible - All interactive elements
- Reduced motion - Respect user preference
- 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 imagesReference 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 minimumFocus 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