Chrome tools
to test Accessibility
@GlafiraZhur for LuxembourgJS
April 2024
Glafira Zhur
Twitter: @glafirazhur
Accessibility Project Manager
GDE for Web
Accessibility Club Minsk
Accessibility Unity
PC Member
Modal window demo
People With Disabilities
15% of population
1,211,238,211
Earth population
8,074,921,408
15%
Temporary disabilities and external conditions are NOT INCLUDED
Legislation
- USA: Section 508, ADA (now)
- EU: European Accessibility Act (2025)
- Canada: AODA (2021)
Statistics (US)
Screen Reader
Screen Reader reading order
But you can only access the elements which are in the
Accessibility Tree
Accessibility Tree
Enable the Accessibility Tree view
Accessibility Tree view
Name
(label)
Role
(semantics)
Value
(properties and states)
dialog
label
modality
Chrome DevTools Accessibility Tab
Modal a11y tree attributes
aria
1
2
3
4
5
6
What else can you test?
🤔
🤔
🤔
🤔
🤔
🤔
🤔
🤔
Google Lighthouse
Google Lighthouse Score
Google Lighthouse Errors and Suggestions
Color Contrast
Color Contrast throug the CSS Overview
Color Contrast APCA ratio algorithm
Vision Deficiencies Emulator
More reading 😅😌
WCAG (Web Content Accessibility Guidelines) - a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.
WCAG
How to Meet WCAG
Accessible Components, Design Systems, Guidelines
Glafira Zhur
Twitter: @glafirazhur
Thank you!
Learn accessibility!
Chrome tools to test a11y
By Glafira Zhur
