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