Accessibility Patterns

Basic: Adding alt text, semantic HTML
Advanced: Screen reader testing, focus management, motion control

// Basic accessible component
export function AccessibleButton({ onClick, children }: Props) {
  return (
    <button
      onClick={onClick}
      type="button"
      aria-label="Descriptive label"
    >
      {children}
    </button>
  );
}

// With keyboard support
export function AccessibleDialog({ isOpen, onClose, children }: Props) {
  const dialogRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (isOpen) {
      // Trap focus
      const firstFocusable = dialogRef.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
      (firstFocusable as HTMLElement)?.focus();
    }
  }, [isOpen]);

  return (
    <div
      ref={dialogRef}
      role="dialog"
      aria-modal="true"
      aria-labelledby="dialog-title"
    >
      <h2 id="dialog-title">Dialog Title</h2>
      {children}
      <button onClick={onClose}>Close</button>
    </div>
  );
}

# Automated testing
npm install -D axe-core @axe-core/react

# Screen readers
- NVDA (Windows) - Free
- JAWS (Windows) - Commercial
- VoiceOver (Mac/iOS) - Built-in
- TalkBack (Android) - Built-in

# Browser extensions
- axe DevTools
- WAVE
- Accessibility Insights

export function SkipLinks() {
  return (
    <a href="#main-content" className="skip-link">
      Skip to main content
    </a>
  );
}

// CSS
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* Clear focus indicators */
*:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Context-specific focus */
button:focus-visible {
  outline-color: #0066cc;
}

input:focus-visible {
  outline-color: #00aa00;
}

// ❌ BAD: Div soup
<div onClick={handleClick}>Click me</div>

// ✅ GOOD: Semantic button
<button onClick={handleClick}>Click me</button>

// ❌ BAD: No landmarks
<div id="nav">...</div>
<div id="content">...</div>

// ✅ GOOD: Semantic landmarks
<nav>...</nav>
<main>...</main>
<aside>...</aside>