accessibility

# Accessibility Skills ## Overview Web accessibility (a11y) ensures websites are usable by everyone, including people with disabilities. Accessible design benefits all users and is often required by law. ## WCAG Principles (POUR) | Principle | Description | Examples | |-----------|-------------|----------| | **P**erceivable | Info must be presentable to users | Alt text, captions, contrast | | **O**perable | UI must be operable by everyone | Keyboard access, timing | | **U**nderstandable | Info and UI must be understandable | Clear labels, error handling | | **R**obust | Content must work with assistive tech | Valid HTML, ARIA | ## WCAG Conformance Levels | Level | Description | Target Audience | |-------|-------------|-----------------| | **A** | Minimum accessibility | Basic requirements | | **AA** | Recommended standard | Most organizations (legal requirement) | | **AAA** | Enhanced accessibility | Specialized applications | ## Key Statistics - 15% of world population has a disability - 1 in 4 adults in the US has a disability - 8% of men have color blindness - By 2030, 1.4 billion people will be over 60 ## Categories ### Fundamentals Core accessibility concepts: - **WCAG Overview** - Understanding the guidelines - **Accessibility Principles** - POUR principles in detail - **Disability Types** - Understanding user needs ### HTML Semantic structure: - **Semantic HTML** - Using proper elements - **Landmarks** - Page regions for navigation - **Headings** - Document structure - **Forms** - Accessible form design ### ARIA Accessible Rich Internet Applications: - **ARIA Basics** - When and how to use ARIA - **ARIA Roles** - Element roles - **ARIA States** - Dynamic state attributes - **Live Regions** - Announcing dynamic content ### Keyboard Keyboard accessibility: - **Keyboard Navigation** - Tab order and shortcuts - **Focus Management** - Focus indicators and trapping - **Skip Links** - Bypassing repeated content ### Visual Visual accessibility: - **Color Contrast** - Contrast ratios and tools - **Text Sizing** - Responsive typography - **Motion Reduction** - Respecting user preferences ### Media Multimedia accessibility: - **Images & Alt Text** - Descriptive alternatives - **Video Captions** - Synchronized text - **Audio Transcripts** - Text alternatives ### Testing Accessibility testing: - **Manual Testing** - Keyboard and visual testing - **Automated Testing** - axe, Lighthouse, Pa11y - **Screen Reader Testing** - NVDA, VoiceOver, JAWS ### Components Accessible patterns: - **Accessible Buttons** - Button best practices - **Accessible Forms** - Form patterns - **Accessible Modals** - Dialog accessibility - **Accessible Tables** - Data table patterns ## Quick Reference ### Minimum Requirements (WCAG 2.1 AA) | Requirement | Guideline | Check | |-------------|-----------|-------| | Color contrast (normal text) | 4.5:1 | Tools | | Color contrast (large text) | 3:1 | Tools | | Focus visible | 2.4.7 | Manual | | Keyboard accessible | 2.1.1 | Manual | | Alt text for images | 1.1.1 | Automated | | Form labels | 1.3.1 | Automated | | Error identification | 3.3.1 | Manual | | Page titled | 2.4.2 | Automated | ### Testing Checklist ```markdown - [ ] Can navigate with keyboard only - [ ] Focus indicator is visible - [ ] Color contrast meets requirements - [ ] Images have alt text - [ ] Forms have labels - [ ] Headings are hierarchical - [ ] Links are descriptive - [ ] Errors are announced - [ ] Works with screen reader ``` ## Legal Requirements | Region | Law | Standard | |--------|-----|----------| | USA | ADA, Section 508 | WCAG 2.1 AA | | EU | European Accessibility Act | WCAG 2.1 AA | | UK | Equality Act | WCAG 2.1 AA | | Canada | AODA | WCAG 2.0 AA | ## Tools | Tool | Purpose | Type | |------|---------|------| | axe DevTools | Browser testing | Extension | | WAVE | Visual inspection | Extension | | Lighthouse | Audit | Browser | | Pa11y | CI integration | CLI | | NVDA | Screen reader | Application | | VoiceOver | Screen reader | macOS/iOS | ## Related Skills - [Frontend Architecture](/skills/frontend-architecture/) - Component design - [Testing](/skills/testing/) - Test automation - [Code Quality](/skills/code-quality/) - ESLint a11y plugin