Supplemental 7: Web Accessibility (Slides)
Overview
This lesson explores web accessibility standards and implementation, covering why accessibility matters, how people with disabilities interact with technology, and practical techniques for building inclusive web applications.
Pre-work
Please review the following resources before lecture:
Recommended
Running the Demo
The a11y directory contains an interactive Next.js application demonstrating common accessibility patterns and anti-patterns.
Setup and Run
- Navigate to the demo directory:
- Install dependencies:
- Start the development server:
- Open http://localhost:3000 in your browser
Features
The demo includes 15 interactive examples comparing inaccessible (“Don’t”) and accessible (“Do”) implementations:
- Interactive Elements (Buttons)
- Images and Alt Text
- Form Labels
- Color Contrast
- Link Text
- Heading Hierarchy
- Focus Indicators
- ARIA Labels
- Form Error Handling
- Data Tables
- Required Fields
- Decorative Images
- Select Dropdowns
- Lists
- Loading States
Each example includes:
- Live interactive demonstrations
- Code samples
- Dark mode support
- Accessibility testing tips
Testing
The demo includes comprehensive accessibility testing. See TESTING.md for details.
Quick test commands:
cd supplemental7/a11y
# Run unit tests
npm test
# Run E2E accessibility tests
npm run test:e2e
# Run automated accessibility scan
npm run test:a11y
Test coverage includes:
- Automated WCAG 2.1 AA compliance checking
- Keyboard navigation testing
- Screen reader compatibility
- Color contrast validation
- Form accessibility
- Dark mode accessibility
Topics Covered
Why Accessibility Matters
- Legal compliance (ADA, Section 508, WCAG)
- Business case and market reach
- Ethical responsibility and social impact
- SEO benefits and improved user experience
Types of Impairments
- Visual: Blindness, low vision, color blindness, photosensitivity
- Auditory: Deafness, hard of hearing, auditory processing disorders
- Motor/Physical: Limited dexterity, mobility impairments, temporary injuries
- Cognitive: Learning disabilities, attention disorders, memory impairments
- Situational: Environmental factors affecting ability
Assistive Technologies
- Screen readers (JAWS, NVDA, VoiceOver, TalkBack)
- Alternative input devices (speech recognition, switches, eye-tracking)
- Screen magnification and Braille displays
- Keyboard navigation and captions
Web Accessibility Standards
WCAG POUR Principles
- Perceivable: Information presentable to all users
- Operable: Interface usable by all users
- Understandable: Clear information and operation
- Robust: Compatible with current and future technologies
Implementation Techniques
- Semantic HTML and proper heading hierarchy
- Alt text and text alternatives
- Keyboard accessibility and focus indicators
- Color contrast and color independence
- Form labels and error handling
- ARIA (Accessible Rich Internet Applications)
- Skip links and navigation structure
- Automated testing (axe DevTools, Lighthouse, WAVE, Pa11y)
- Manual testing methods (keyboard navigation, screen readers)
- User testing with people who have disabilities
- Lesson 23 - Intro to HTML, CSS, and JS
- Lesson 22 - Building Applications
Browser Extensions
Screen Readers
- NVDA - Free screen reader for Windows
- VoiceOver - Built into macOS/iOS (Cmd+F5 to activate)
- TalkBack - Built into Android
Additional Resources
Standards and Guidelines
Learning Resources
Videos and Courses
Articles and Blogs
Quick Reference: Common Accessibility Patterns
Semantic HTML
<!-- Bad -->
<div class="button" onclick="submit()">Submit</div>
<!-- Good -->
<button onclick="submit()">Submit</button>
Alt Text
<!-- Content image -->
<img src="cat.jpg" alt="Orange tabby cat sleeping on windowsill">
<!-- Decorative image -->
<img src="divider.png" alt="" role="presentation">
<!-- Proper label association -->
<label for="email">Email</label>
<input type="email" id="email" name="email">
Skip Links
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>...</nav>
<main id="main-content">...</main>
ARIA Landmarks
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<footer role="contentinfo">...</footer>
Key Takeaways
- Accessibility is not optional - It’s a legal requirement and ethical responsibility
- Start from the beginning - Build accessibility in, don’t bolt it on later
- Use semantic HTML first - It provides built-in accessibility
- Test with real users - Automated tools only catch ~30% of issues
- Keyboard navigation is essential - All functionality must work without a mouse
- Color contrast matters - Ensure text is readable for everyone
- ARIA enhances, doesn’t replace - Use HTML semantics first, ARIA when needed
- Accessible design benefits everyone - The “curb-cut effect” improves UX for all users