Manual Accessibility Testing

Contents

1. Intro & Setup

2. Keyboard Testing

   1. Identify Issues by Hitting Tab
   2. Fix Focus and Operability Issues for Keyboard Interactivity
   3. Toggle the Menu and add Escape Key Handling with JavaScript
   4. Fix Additional Keyboard Interactivity Issues

3. Testing with Tools & Browser Extensions

   1. Identify Color Contrast Issues with Color Contrast Analyzer & Chrome DevTools
   2. Identify Common Issues with Axe Accessibility Linter
   3. Scan a Page for Issues with Lighthouse & Axe Developer Tools
   4. Check Heading Structure with Web Developer Toolbar
   5. Visualize Tab Stops, Headings, and Landmark Regions with Accessibility Insights
   6. Challenge: Fixing Issues Found with Lighthouse & Axe DevTools
   7. Challenge: Fixing Structural Issues with Headings and Landmarks
   8. Update a Form to be Semantic (Tools Can’t Catch Everything)

4. Magnification and Zoom Testing

   1. Testing Zoom in the Browser
   2. Testing Responsiveness with DevTools
   3. Challenge: Fix Zoom Issues with CSS

5. Screen Reader Testing

   1. An Overview of Screen Reader Software
   2. Using VoiceOver to Read & Audit a Page
   3. Challenge: Improving VoiceOver Announcements
   4. Using NVDA to Read a Page