We can produce innovative and inclusive JavaScript-powered web apps! This course will teach you to remove barriers to access that might prevent people with disabilities from using a modern JavaScript web application. We’ll study accessibility in UI components, primarily with React and Gatsby.js, but with knowledge applicable to all JavaScript-heavy web stacks. Debug your sites for accessibility, manage keyboard focus, announce live updates to the page to screen readers, and use manual and automated testing to gain web accessibility superpowers!
Overview
Syllabus
- Introduction
- Course Overview
- Course Materials Setup
- Tool Considerations
- Steps for Debugging Accessibility
- Auditing Slack & GitHub
- Auditing Google Maps & NY Times
- Hidden vs Visible CSS Rules
- Accessibility Tree
- Currently Focused Element
- Accessibility Debugging: Practice Problems
- Accessibility Debugging Q&A
- Focus Management & tabindex
- Focus Events
- ARIA Overview
- Focus Management Patterns
- Visible Focus Styles
- CSS in JS
- Coding an Accessible Dropdown
- Focus Event Handling in the Dropdown
- Accessible Dropdown Exercise
- Routing & Skip Links
- Coding a Skip Link: Creating the Component
- Coding a Skip Link: Wiring it Up
- Skip Links Exercise
- Skip Links Solution
- Announcements with ARIA Live Regions
- Coding a Live Region Component
- Semantic HTML
- Unobtrusive Motion
- reduced-motion Exercise
- Progressive Enhancement Overview
- Coding a Progressive Enhancement Component
- Progressive Enhancement Exercise
- Progressive Enhancement Solution
- Accessibility Testing Overview
- Using a Testing Library
- Running Tests & Firing Events
- Focus State Assertions
- Unit Testing Exercise
- Accessibility Integration Testing
- Testing Goals & Prebuilt Rules
- Coding Integration Tests
- Continuous Integration & Manual Testing
- Wrapping Up
Taught by
Marcy Sutton
