accessibility

What this skill does

# Accessibility

## WCAG 2.1 Guidelines and Compliance Levels

### WCAG Principles (POUR)
- **Perceivable**: Information and UI components must be presentable in ways users can perceive
- **Operable**: UI components and navigation must be operable
- **Understandable**: Information and operation of UI must be understandable
- **Robust**: Content must be robust enough to be interpreted by assistive technologies

### Compliance Levels
- **Level A**: Minimum level of accessibility
- **Level AA**: Standard level, required by many laws and regulations
- **Level AAA**: Highest level, rarely required but ideal

### WCAG 2.1 Success Criteria
- **1.1 Text Alternatives**: Provide text alternatives for non-text content
- **1.2 Time-Based Media**: Provide alternatives for time-based media
- **1.3 Adaptable**: Create content that can be presented in different ways
- **1.4 Distinguishable**: Make it easier to see and hear content
- **2.1 Keyboard Accessible**: Make all functionality available from a keyboard
- **2.2 Enough Time**: Provide users enough time to read and use content
- **2.3 Seizures and Physical Reactions**: Do not design content that causes seizures
- **2.4 Navigable**: Provide ways to help users navigate and find content
- **2.5 Input Modalities**: Make it easier to use inputs other than keyboard
- **3.1 Readable**: Make text content readable and understandable
- **3.2 Predictable**: Make Web pages appear and operate in predictable ways
- **3.3 Input Assistance**: Help users avoid and correct mistakes
- **4.1 Compatible**: Maximize compatibility with current and future user agents

## Screen Reader Compatibility

### Screen Reader Basics
- **Popular Screen Readers**: NVDA (Windows), JAWS (Windows), VoiceOver (Mac/iOS), TalkBack (Android)
- **Testing**: Test with multiple screen readers for comprehensive coverage
- **Semantic HTML**: Use proper HTML elements for screen reader compatibility
- **ARIA Attributes**: Use ARIA when HTML alone is insufficient
- **Focus Management**: Ensure logical focus order for keyboard and screen reader users

### Screen Reader Best Practices
- **Skip Links**: Provide skip links to jump to main content
- **Landmarks**: Use ARIA landmarks for page structure
- **Headings**: Use proper heading hierarchy (h1-h6)
- **Lists**: Use proper list elements for lists of items
- **Forms**: Use proper form labels and error messages
- **Images**: Provide meaningful alt text for images
- **Links**: Use descriptive link text, not "click here"
- **Buttons**: Use button elements for actions, link elements for navigation

### ARIA Landmarks
- **banner**: Header or navigation area
- **nav**: Navigation area
- **main**: Main content area
- **article**: Self-contained content
- **section**: Thematic grouping of content
- **aside**: Content tangentially related to main content
- **footer**: Footer area
- **search**: Search functionality
- **complementary**: Supporting content

## Keyboard Navigation

### Keyboard Navigation Fundamentals
- **Tab Order**: Logical tab order following visual layout
- **Focus Indicators**: Visible focus indicators on all interactive elements
- **Skip Links**: Allow users to skip navigation and jump to main content
- **Keyboard Shortcuts**: Provide keyboard shortcuts for common actions
- **Focus Management**: Manage focus appropriately for dynamic content

### Keyboard Navigation Best Practices
- **All Interactive Elements**: Make all buttons, links, and form elements keyboard accessible
- **Visible Focus**: Ensure focus is clearly visible
- **Logical Order**: Follow logical reading order
- **No Keyboard Traps**: Ensure users can navigate in and out of all areas
- **Escape Key**: Provide escape key to close modals and menus
- **Enter/Space**: Use Enter or Space to activate buttons and links
- **Arrow Keys**: Use arrow keys for navigation within components

### Focus Management
- **Initial Focus**: Set initial focus when opening dialogs or modals
- **Focus Restoration**: Restore focus when closing dialogs or modals
- **Focus Trapping**: Trap focus within modals and dialogs
- **Auto-focus**: Use auto-focus sparingly and only when appropriate
- **Focus Visible**: Ensure focus is always visible

## Color Contrast and Visual Accessibility

### Color Contrast Requirements
- **Normal Text**: 4.5:1 contrast ratio (Level AA)
- **Large Text**: 3:1 contrast ratio (Level AA, 18pt+ or 14pt+ bold)
- **Graphical Objects**: 3:1 contrast ratio (Level AA)
- **Enhanced Contrast**: 7:1 for normal text, 4.5:1 for large text (Level AAA)

### Color Contrast Best Practices
- **Test Contrast**: Use contrast checking tools to verify compliance
- **Don't Rely on Color Alone**: Use patterns, shapes, or labels in addition to color
- **Color Blindness**: Consider color blind users when choosing palettes
- **Dark Mode**: Ensure contrast ratios work in both light and dark modes
- **Text Over Images**: Ensure text over images has sufficient contrast

### Visual Accessibility
- **Text Scaling**: Support text scaling up to 200% without breaking layout
- **Responsive Design**: Ensure content works at all viewport sizes
- **Touch Targets**: Minimum 44x44 pixels for touch targets
- **Spacing**: Provide adequate spacing between interactive elements
- **Motion**: Respect prefers-reduced-motion preference

## Semantic HTML

### Semantic HTML Elements
- **headings**: h1-h6 for document structure
- **nav**: Navigation sections
- **main**: Main content area
- **article**: Self-contained content
- **section**: Thematic sections
- **aside**: Tangentially related content
- **header**: Header or introductory content
- **footer**: Footer or concluding content
- **figure**: Self-contained content with caption
- **figcaption**: Caption for figure element

### Semantic HTML Best Practices
- **Use Proper Elements**: Choose the most semantic element for the content
- **Heading Hierarchy**: Use headings in proper hierarchical order
- **Lists**: Use ul, ol, and dl for lists
- **Forms**: Use proper form elements with labels
- **Tables**: Use proper table elements with headers
- **Links vs Buttons**: Use links for navigation, buttons for actions

### Forms Accessibility
- **Labels**: Associate labels with form inputs using for/id or aria-label
- **Required Fields**: Indicate required fields with aria-required
- **Error Messages**: Associate error messages with inputs using aria-describedby
- **Instructions**: Provide clear instructions for complex inputs
- **Validation**: Provide real-time validation feedback
- **Success Messages**: Confirm successful form submission

## ARIA Attributes

### ARIA Roles
- **role="button"**: Use when a non-button element functions as a button
- **role="link"**: Use when a non-link element functions as a link
- **role="dialog"**: Use for modal dialogs
- **role="alert"**: Use for important alerts
- **role="status"**: Use for status messages
- **role="progressbar"**: Use for progress indicators
- **role="tablist"**: Use for tab containers
- **role="tab"**: Use for individual tabs
- **role="tabpanel"**: Use for tab panels

### ARIA States and Properties
- **aria-label**: Provide accessible label for elements without visible text
- **aria-labelledby**: Reference another element as the label
- **aria-describedby**: Reference another element as description
- **aria-expanded**: Indicate expanded/collapsed state
- **aria-selected**: Indicate selected state
- **aria-checked**: Indicate checked state
- **aria-disabled**: Indicate disabled state
- **aria-hidden**: Hide elements from screen readers
- **aria-live**: Indicate live region for dynamic content
- **aria-atomic**: Indicate if entire region should be announced

### ARIA Best Practices
- **Use HTML First**: Use semantic HTML before adding ARIA
- **Don't Overuse**: Only use ARIA when HTML is insufficient
- **Test Thoroughly**: Test with screen readers to ensure ARIA works correctly
- **Keep Updated**: Keep ARIA attributes in sync with visual state
- **Document**: Document ARIA usage for maintain