accessibility-design

Guide creation of accessible interfaces using React and Tailwind. Focus on inclusive design that works for everyone without sacrificing aesthetics.

## Color & Contrast

Ensure readable text with sufficient contrast:
- **Normal text**: 4.5:1 ratio minimum (`text-slate-700` on white passes)
- **Large text**: 3:1 ratio (18px+ or 14px+ bold)
- **UI elements**: 3:1 ratio for icons, borders, focus indicators

```tsx
// Good contrast pairings
<p className="text-slate-700">Body text on white</p>
<p className="text-slate-400">Muted text - use sparingly, larger sizes</p>
<p className="text-slate-900 font-semibold">Emphasized text</p>
```

## Keyboard Navigation

All interactive elements must be keyboard accessible:

```tsx
// Focus states with visible indicators
<button className="rounded-lg bg-primary px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2">
  Submit
</button>

// Skip link for keyboard users
<a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white focus:px-4 focus:py-2">
  Skip to main content
</a>
```

## Semantic HTML

Use correct elements for their purpose:

```tsx
// Navigation
<nav aria-label="Main navigation">
  <ul role="list">{/* links */}</ul>
</nav>

// Headings in order
<main>
  <h1>Page Title</h1>
  <section>
    <h2>Section</h2>
    <h3>Subsection</h3>
  </section>
</main>

// Buttons vs links
<button onClick={handleAction}>Do Something</button>  // Actions
<a href="/page">Go Somewhere</a>                       // Navigation
```

## ARIA Patterns

Add context for screen readers:

```tsx
// Icon-only buttons
<button aria-label="Close dialog">
  <XIcon className="h-5 w-5" aria-hidden="true" />
</button>

// Loading states
<button disabled aria-busy="true">
  <Spinner aria-hidden="true" />
  <span>Saving...</span>
</button>

// Form errors
<input aria-invalid="true" aria-describedby="email-error" />
<p id="email-error" className="text-red-600">Invalid email<