ACCESSIBILITY

// All interactive elements need focus states
<button className="focus:ring-4 focus:ring-blue-500 focus:outline-none">
  Accessible
</button>

// Custom elements need tabindex and key handlers
<div
  role="button"
  tabIndex={0}
  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleClick()}
>
  Custom Button
</div>

// Buttons without text
<button aria-label="Close dialog"><X /></button>

// Expandable elements
<button aria-expanded={isOpen} aria-controls="menu">Menu</button>

// Live regions for dynamic content
<div role="status" aria-live="polite">{statusMessage}</div>
<div role="alert" aria-live="assertive">{errorMessage}</div>

// Form errors
<input aria-invalid={hasError} aria-describedby="error-msg" />
{hasError && <p id="error-msg" role="alert">Error text</p>}

// Use semantic elements, not divs
<header><nav>...</nav></header>
<main><article><h1>...</h1></article></main>
<footer>...</footer>

// Heading hierarchy (never skip levels)
<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>

// Hidden but announced
<span className="sr-only">Additional context</span>

// Skip link
<a href="#main" className="sr-only focus:not-sr-only">
  Skip to main content
</a>