Manual
Accessibility Testing
@GlafiraZhur for FrontSpot Baltic
September 2022
Glafira Zhur
Twitter: @glafirazhur
Accessibility Lead
GDE for Web
#WTMAmbassador
Accessibility Club Minsk
Accessibility Unity Courses (RU)
Accessibility Community
Earth population 7 974 500 420
15% of population 1 196 175 063
(one billion one hundred and ninety-six million)
People With Disabilities
15%
Temporary disabilities and external conditions are
NOT INCLUDED
Legislation
- USA: Section 508, ADA (now)
- EU: European Accessibility Act (2025)
- Canada: AODA (2021)
- Russian Federation: updated standarts
Why manually?
Are we not programmers?!
Why Manually?
- No time to implement an auto testing on the project
- No competencies in the team
- You need a fast evaluation
- You're an auditor or an outsuorce company
- You can't find all the issues automatically (only ~30-40%)
What to check
Page Structure
Screen Reader: Headings Structure
Headings Structure Errors
Styles Are Fixed On An <H> Tag
Landmarks
Wrong Usage Of The Landmarks
Keyboard
Accessibility
Focus State Visibility
Focus State Visibility
Firefox: Keyboard Accessibility Check
Firefox: Focus Order
Labels
Axe DevTools: Empty Labels
Axe DevTools: Labels Are Wrong Or Not Recognized
Labels: Extra Text
Tunnel Vision Emulator: Labels Position
Screen Zoom: Labels Position
Color And Contrast
Chrome Color Palette: Color Contrast Ratio
Axe DevTools: Color Contrast Issues
Chrome Color Palette: Contrast Was Not Calculated
Browser DevTools: Achromatopsia Emulator
Browser DevTools: Blurred Vision Emulator
OS Settings: High Contrast Mode
OS Settings: High Contrast Mode
Color Blindness
Can I Use: Color Definition Case
Zoom, Resize
Browser Zoom
Screen Zoom
Please do not rely
on the automatic check only!
The Conclusion:
Check Lists
OS Accessibility Tools
Glafira Zhur
Twitter: @glafirazhur
THANK YOU!
Learn accessibility!