Debugging accessibility with Chrome DevTools
summary
Chrome DevTools adds a Full page accessibility tree and shows how a built-in Lighthouse accessibility audit flags problems (example score 82). Demo uses ChromeVox to confirm a bug: images lack alt text and ARIA toggle controls report no names because an associated label span is hidden with aria-hidden="true". Editing the DOM to remove the attribute immediately exposes the label, fixes the computed accessible name, and the screen reader then reads the control correctly.
AI-written summary · about
chapters (4)
related talks
43mHow to use Chrome DevTools to improve accessibility of your webpage
47mHow to use Chrome DevTools to improve accessibility of your webpage
32mUnleashing the Power of Developer Tools for Web Accessibility Testing
31mDecoding web accessibility through testing
12mHarnessing the Accessibility Tree
35mAccessibility (when you don't have time to read the manual)
43mBeyond the DOM: what’s in the accessibility tree for you?
56mAccessibility Testing 101