How to use Chrome DevTools to improve accessibility of your webpage
summary
Demonstrates concrete DevTools steps: use Emulate vision deficiencies (Rendering) to see color-blind or blurred views, open CSS Overview to list palette and contrast issues and copy suggested replacement colors, inspect the full page accessibility tree and Accessibility pane to find missing alt text, unlabeled inputs, non-focusable div-buttons and then add proper <label>, alt, role/focus or semantic elements, use the Animations panel plus emulate prefers-reduced-motion, run Lighthouse audits (only ~57% of issues auto-detected) and fix flagged items.
AI-written summary · about
chapters (29)
- 0:00Introduction
- 0:20About Dominika
- 1:40A goldfish
- 1:54Job of a goldfish
- 2:55Working from home
- 3:15Our goldfish
- 4:32Needs for humans
- 6:13Accessibility definition
- 6:46Accessibility hashtag
- 7:14Meet Mark
- 8:06Color blindness
- 8:24Grayscale
- 10:23DevTools console
- 11:15Emulate vision deficiencies
- 12:18NDC page
- 13:20Element Picker
- 16:40Contrast Issues
- 17:47Back to Presentation
- 19:12Not Necessary Notes
- 28:10Keyboard navigation
- 30:54Summary
- 32:45Reduce motion
- 34:26Make debugging easier
- 36:48Goldfish
- 38:01Lighthouse
- 42:06Can we really trust bots
- 43:18Manual tests
- 43:32Accessibility insights for web
- 44:35Conclusion
related talks
43mHow to use Chrome DevTools to improve accessibility of your webpage
43mWork Smarter, not Harder with Chrome DevTools
13mDebugging accessibility with Chrome DevTools
35mAccessibility (when you don't have time to read the manual)
31mDecoding web accessibility through testing
32mUnleashing the Power of Developer Tools for Web Accessibility Testing
13mDebugging accessibility with Chrome DevTools - American Sign Language
22mWeb Accessibility - a better user experience for everyone!