Chrome tools and AI technologies to test Accessibility
@GlafiraZhur for the GDG Faro
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
How to AI accessibility?
🤔
🤔
🤔
🤔
🤔
🤔
🤔
🤔
For a11y, AI is mostly presented on the user's side.
Accessibility on Chrome
Accessibility extentions on Chrome
Repeat
✅
Find yourself in 95% of inaccessible websites
✅
Don't check the recomendations
✅
✅
Ask AI for recomendations 😅
How to AI a11y development?
Repeat RECHECK
✅
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!