Learn how to incorporate accessibility into your development process and leave the Web better than you found it. This workshop will teach you how to evaluate webpages for accessibility using a variety of modern tools and repeatable processes.
There's no getting around it: many parts of accessibility testing need to be done manually. Developers are in a unique position to make an impact on accessibility with each and every commit. By making manual accessibility testing a core part of your development process, you can prevent technical debt and ship code that works for more people.
From keyboard testing to browser DevTools and web extensions, manual accessibility testing is more powerful than ever before. In this workshop, you'll learn recommended testing steps and accessibility requirements used by the pros so they become second nature.
- 9:00-9:15 Workshop intro & logistics
- Requirements: a browser, a text editor, NVDA if on Windows
Topic 1: Keyboard Testing
- 9:15-9:30 Keyboard Testing Demonstration & Challenge Introduction
- Topics: hidden vs. visible CSS, inert backgrounds, focus trapping, focus management
- 9:30-9:45 Student work time
- 9:45-10:00 Keyboard Testing Solution
Topic 2: DevTools Testing
- 10:00-10:15 DevTools Demonstration & Challenge Intro
- Topics: semantics problems on lists, icon buttons, forms, and landmarks.
- 10:15-10:30 Student work time
- 10:30-10:45 DevTools Solution
Topic 3: Accessibility Browser Extensions
- 10:45-11:00 Browser Extension Demonstration & Challenge Intro
- Topics: image alt text, incorrect ARIA attributes, heading levels
- 11:00-11:15 Student Work Time
- 11:15-11:30 Browser Extension Solution
Topic 4: Magnification/Zoom Testing
- 11:30-11:45 Magnification/Zoom Demonstration & Challenge Intro
- Topics: responsive layout CSS, adjustments to form validation
- 11:45-12:00 Student Work Time
Lunch Break - 12:00-12:30
- 12:30-12:45 Magnification Solution
Topic 5: Screen Reader Testing
- 12:45-1:00 Screen Reader Testing: Demonstration & Challenge
- Topics: headings and landmarks, accessible names
- 1:00-1:15 Student Work Time
- 1:15-1:30 Screen Reader Testing Solution
Next Steps / Q&A
- 1:30-2:00 Next steps, Q&A