GDE FORUM | Accessibility Testing with Chrome DevTools

Accessibility Testing with Chrome DevTools

1. Josefine Schaefer
Accessibility Engineer

with Chrome DevTools
Accessibility
Testing

2. Hi, I’m
Josefine
✌


CPACC
Accessibility Engineer
GDE Web Technologies
WTM & GirlCode Ambassador

3. Building
accessible
Environments
Image source: Reddit / unknown user.

4. Web Accessibility…
… means that websites, tools and technologies are designed and implemented so
that people with disabilities can use them and participate equally on the
web.

5. Web Accessibility…
… means that websites, tools and technologies are designed and implemented so
that people with disabilities can use them and participate equally on the
web.

It is all about providing context and creating inclusive experiences.

6. Web Accessibility…
… means that websites, tools and technologies are designed and implemented so
that people with disabilities can use them and participate equally on the
web.

It is all about providing context and creating inclusive experiences.

It’s all our responsibility.

7. Web Accessibility…
●WCAG (Web Content Accessibility Guidelines) 2.2
●Different levels: A, AA & AAA
●POUR Principles:
○Percevable
○Operable
○Understandable
○Robust

8. While
Technology can
reduce
barriers…
Photos by
DequeUniversity

9. … it can also
create new
ones…

10. 97%
of the Internet are not accessible.
Source: xxxxx
GDE Forum Berlin 2024

11. Many good
reasons for Web
Accessibility
Photo by Sigmund on Unsplash

12. “Access to information and
communications
technologies, including the
Web, is defined as a basic
human right”
— UN CRPD

13. 15%
of the global population experience
some form of disability.
Source: xxxxx
GDE Forum Berlin 2024

14. Source: xxxxx
GDE Forum Berlin 2024

15. Web Accessibility
benefits all of us.

16. Upcoming
Legislations
Warner Bros.

17. European
Accessibility
Act
Photo by Olga Nayda | Unsplash

18. EAA
The European Accessibility Act (Directive 2019/882) is a landmark EU law which
requires some everyday products and services to be accessible for persons
with disabilities.

19. EAA
The European Accessibility Act (Directive 2019/882) is a landmark EU law which
requires some everyday products and services to be accessible for persons
with disabilities.
This covers computers & operating systems, smartphones & other
communication devices, but also e-commerce, banking services and all services or
websites related to transportation.

20. EAA
The European Accessibility Act (Directive 2019/882) is a landmark EU law which
requires some everyday products and services to be accessible for persons
with disabilities.
This covers computers & operating systems, smartphones & other
communication devices, but also e-commerce, banking services and all services or
websites related to transportation.
The directive’s implementation and penalties are specific to each
country, albeit similar.

21. June 28th,
2025

22. Testing with
Chrome DevTools

23. Lighthouse
Accessibility
Audit

24. Lighthouse
Accessibility
Audit

25. Lighthouse
Accessibility
Audit

26. Source: xxxxx
GDE Forum Berlin 2024
Just beware…
Manuel Matuzović, Building the most inaccessible site possible with a perfect Lighthouse score

27. Accessibility
Pane

28. Inspect ARIA
Attributes

29. View Source
Order

30. Accessibility
Tree

31. Accessibility
Tree

32. Accessibility
Tree

33. Color Contrast

34. CSS Overview

35. CSS Overview

36. CSS Overview

37. Emulate Vision
Deficiencies

38. Emulate Vision
Deficiencies

39. Emulate Vision
Deficiencies

40. Blurred Vision

41. Reduced Contrast

42. Protanopia

43. Achromatopsia

44. Reduced
Motion

45. More Accessibility Testing
●Focus Outlines & Tab Order (not visible? Use document.activeElement)
○No focus trap

46. More Accessibility Testing
●Focus Outlines & Tab Order (not visible? Use document.activeElement)
○No focus trap
●Test with Screen Readers (e.g. ChromeVox, VoiceOver, …)

47. More Accessibility Testing
●Focus Outlines & Tab Order (not visible? Use document.activeElement)
○No focus trap
●Test with Screen Readers (e.g. ChromeVox, VoiceOver, …)
●Inspect semantic HTML & Landmarks

48. More Accessibility Testing
●Focus Outlines & Tab Order (not visible? Use document.activeElement)
○No focus trap
●Test with Screen Readers (e.g. ChromeVox, VoiceOver, …)
●Inspect semantic HTML & Landmarks
●Careful use of ARIA

49. Resources
linktr.ee/josefinesch

50. Thank you!