# Accessibility Reference
Comprehensive guide for implementing accessible interfaces following WCAG 2.1 AA standards.
## Core Principles (POUR)
### Perceivable
Information and UI components must be presentable to users in ways they can perceive.
### Operable
UI components and navigation must be operable by all users.
### Understandable
Information and the operation of UI must be understandable.
### Robust
Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.
## Semantic HTML
### Use Appropriate Elements
**Good:**
```tsx
// ❌ Skips h2 and h3
```
## Keyboard Navigation
### Focus Management
```tsx
// Ensure all interactive elements are keyboard accessible
// Custom interactive elements need tabindex
```
### Tab Order
```tsx
// Use tabIndex to control focus order
// Use tabIndex={-1} to remove from tab order but allow programmatic focus
Error details...
```
### Skip Links
```tsx
// Allow keyboard users to skip to main content
Skip to main content
{/* Main content */}
```
## ARIA Attributes
### Common ARIA Roles
```tsx
// Navigation landmark
// Banner (header)
{/* Header content */}
// Main content
{/* Main content */}
// Complementary (sidebar)
// Content info (footer)
// Search
```
### ARIA Labels
```tsx
// aria-label for elements without visible text
// aria-labelledby to reference another element
Confirm Action
Are you sure you want to continue?
// aria-describedby for additional description
Password must be at least 8 characters
```
### ARIA States
```tsx
// aria-expanded for expandable elements
{/* Dropdown content */}
// aria-pressed for toggle buttons
// aria-selected for selectable items
Tab 1
// aria-checked for checkboxes/radio buttons
setIsChecked(!isChecked)}
>
Custom Checkbox
```
### ARIA Live Regions
```tsx
// Announce changes to screen readers
{statusMessage}
// For urgent announcements
{errorMessage}
// For form validation
{hasError && (
Please enter a valid email address
)}
```
## Color Contrast
### Minimum Contrast Ratios (WCAG AA)
- **Normal text:** 4.5:1
- **Large text (18pt+ or 14pt+ bold):** 3:1
- **UI components and graphics:** 3:1
### Good Contrast Examples
```tsx
// High contrast text
Great contrast (21:1)
Good contrast (8:1)
// Button with good contrast
```
### Poor Contrast Examples (Avoid)
```tsx
// ❌ Insufficient contrast
Poor contrast (2.8:1) - fails WCAG AA
// ❌ Don't rely on color alone
// ✅ Better: Use icons + color
```
### Tools for Checking Contrast
- Chrome DevTools: Inspect element → Accessibility tab
- Online: WebAIM Contrast Checker
- Figma: Stark plugin
## Alternative Text
### Images
```tsx
// Informative images
// Decorative images
// Functional images (buttons)
// Complex images
Detailed description of the system architecture showing
three main components: frontend, API layer, and database.
The frontend communicates with the API via REST...
```
### Icons
```tsx
import { MagnifyingGlass, Bell, User } from '@phosphor-icons/react';
// Decorative icons (with adjacent text)
// Functional icons (no adjacent text)
// Icons with state
```
## Forms
### Labels and Instructions
```tsx
// Always associate labels with inputs
// Group related inputs
```
### Error Handling
```tsx
// Skip link
Skip to main content
```
## Focus Indicators
### Visible Focus States
```tsx
// Default focus with ring
// Custom focus style
Link Text
// Focus within containers