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 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