# Accessibility Quick Reference

## WCAG POUR

| Principle | Focus |
|-----------|-------|
| **Perceivable** | Text alternatives, captions, color not sole indicator |
| **Operable** | Keyboard, time, no seizure triggers |
| **Understandable** | Readable, predictable, input help |
| **Robust** | Valid markup, assistive-tech compatible |

## Conformance Levels

| Level | Typical Use |
|-------|-------------|
| A | Minimum baseline |
| AA | Target for most sites; legal requirement in many places |
| AAA | Enhanced; not always feasible |

## Contrast (AA)

| Content | Ratio |
|---------|-------|
| Normal text | 4.5:1 |
| Large text (18pt+ or 14pt+ bold) | 3:1 |
| UI components | 3:1 |

## Semantic HTML

| Purpose | Element |
|---------|---------|
| Heading | `<h1>`–`<h6>` |
| Link | `<a href="">` |
| Button | `<button>` |
| Form | `<label>`, `<input>`, `<select>`, `<textarea>` |
| Landmarks | `<header>`, `<main>`, `<nav>`, `<footer>`, `<article>`, `<aside>` |

## ARIA Quick Guide

| Use | Example |
|-----|---------|
| Label | `aria-label="Close dialog"` |
| Description | `aria-describedby="error-1"` |
| State | `aria-expanded`, `aria-selected`, `aria-checked` |
| Live region | `aria-live="polite"` |

**Rule:** Prefer HTML; use ARIA when HTML isn't enough.

## Alt Text

| Image Type | Alt |
|------------|-----|
| Informative | Describe content/function |
| Decorative | `alt=""` |
| Complex | `alt` summary + long description |

## Keyboard

- Tab order follows visual order
- Focus visible (ring)
- No keyboard traps
- Enter/Space activate buttons and links

## Testing

| Tool | Purpose |
|------|---------|
| axe DevTools | In-browser WCAG audit |
| Lighthouse | Audit + performance |
| WAVE | Visual a11y feedback |
| Screen readers | NVDA, VoiceOver, TalkBack |