Debugging accessibility with Chrome DevTools - American Sign Language
summary
Run a Lighthouse accessibility audit (score 82 on the demo) to find missing alt text and ARIA-toggle controls without names, then open the full page accessibility tree in Chrome DevTools to compare computed accessibility nodes with the DOM. Discover a label hidden by aria-hidden="true", edit the DOM to remove/change it, and verify with Chromebox that the checkbox control now exposes the name "Duchess" to screen readers.
AI-written summary · about
chapters (10)
- 0:00Accessibility debugging intro
- 2:04Lighthouse accessibility audit
- 4:31Screen reader manual testing
- 5:56Understanding the accessibility tree
- 7:01Full page accessibility tree
- 7:42Debugging ARIA toggle bug
- 9:27Fixing ARIA hidden issue
- 10:50Verifying the fix with Chromebox
- 11:55ARIA hidden best practices
- 12:16Summary and resources
related talks
43mHow to use Chrome DevTools to improve accessibility of your webpage
47mHow to use Chrome DevTools to improve accessibility of your webpage
31mDecoding web accessibility through testing
32mUnleashing the Power of Developer Tools for Web Accessibility Testing
41mWhat If We Talked About Web Accessibility?
35mAccessibility (when you don't have time to read the manual)
12mHarnessing the Accessibility Tree
56mAccessibility Testing 101