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 | |-----------|-------------|----------| | 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](/skills/frontend-architecture/) - Component design
• [Testing](/skills/testing/) - Test automation
• [Code Quality](/skills/code-quality/) - ESLint a11y plugin