# WCAG 2.1 Guidelines

Key WCAG 2.1 AA success criteria for web components.

## Perceivable

### 1.1 Text Alternatives
- All images need `alt` text
- Decorative images: `alt=""`
- Complex images: link to long description

### 1.3 Adaptable
- Use semantic HTML
- Reading order matches visual order
- Don't rely on sensory characteristics alone

### 1.4 Distinguishable

| Requirement | Threshold |
|-------------|-----------|
| Color contrast (normal text) | 4.5:1 |
| Color contrast (large text 18px+) | 3:1 |
| Color contrast (UI components) | 3:1 |
| Focus indicator | 3:1 against adjacent |
| Don't use color alone | Add icons/text |

## Operable

### 2.1 Keyboard Accessible
- All functionality via keyboard
- No keyboard traps
- Shortcuts can be disabled

### 2.4 Navigable
- Skip links for main content
- Descriptive page titles
- Focus order matches visual order
- Link purpose clear from text

### 2.5 Input Modalities
- Touch targets 44x44px minimum
- Motion-based input has alternatives

## Understandable

### 3.1 Readable
- Page language set (`lang="en"`)
- Unusual words explained

### 3.2 Predictable
- Consistent navigation
- Consistent identification
- No context change on focus

### 3.3 Input Assistance
- Error messages clear
- Labels for all inputs
- Error prevention for important actions

## Robust

### 4.1 Compatible
- Valid HTML
- Unique IDs
- Custom controls have name, role, value
