tomevault-io 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
- [ ] 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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.