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 |
|---|---|---|
| Perceivable | Info must be presentable to users | Alt text, captions, contrast |
| Operable | UI must be operable by everyone | Keyboard access, timing |
| Understandable | Info and UI must be understandable | Clear labels, error handling |
| Robust | 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 - Component design
- •Testing - Test automation
- •Code Quality - ESLint a11y plugin