Web Accessibility Guide
WCAG principles, common issues, testing tools, and checklist.
WCAG Principles (POUR)
Perceivable
Information presentable in ways users can perceive
Examples: Alt text, captions, contrast
Operable
Interface components operable by all users
Examples: Keyboard nav, no time limits
Understandable
Information and UI understandable
Examples: Clear language, consistent nav
Robust
Content compatible with various tools
Examples: Valid HTML, ARIA labels
Common Accessibility Issues
Missing alt text
Screen readers can't describe images
Fix: Add descriptive alt="..." for meaningful images
Low contrast
Text hard to read for visually impaired
Fix: WCAG AA: 4.5:1 for normal text, 3:1 for large
Keyboard trap
Users can't navigate away
Fix: All interactive elements keyboard accessible
No captions
Deaf users can't access video
Fix: Add captions, transcripts for audio/video
Missing form labels
Screen readers can't identify inputs
Fix: Add <label> for each input
Time limits
Users can't complete tasks
Fix: Allow extending or disabling limits
Testing Tools
axe DevTools: Browser extension for automated testing
WAVE: Web accessibility evaluation tool
Lighthouse: Chrome DevTools accessibility audit
NVDA: Free screen reader for testing
VoiceOver: Mac/iOS screen reader
Pa11y: CLI accessibility testing
Accessibility Checklist
Alt text for images
Keyboard navigation works
Color contrast sufficient
Form labels present
Headings structured (H1-H6)
Links have clear purpose
Videos have captions
No keyboard traps
Focus visible on all elements
Skip to content link
Why Accessibility Matters
15% of world population has disabilities. Legal requirement in many jurisdictions (ADA, Section 508). SEO benefit (structured content, alt text). Better UX for all users. Inclusive design = ethical + practical. Accessibility not extra feature - should be default. Test with real users, not just tools. Fix issues early, not retroactive.