You want to go beyond roughly meeting guidelines but actually create products that cater a large audience and their needs? To not only fulfill requirements but actually create mindful content & empathic code? Anybody working in tech has the responsibility to provide an inclusive, accessible experience. Let's dive into web accessibility best practices, testing & auditing strategies, and well-guarded WCAG secrets to take your project to the next level.

1. Beyond
compliance
Josefine Schaefer | @JsfnSchfr 2024
Testing for a more Accessible Web

2. Guten Tag ✌
@JsfnSchfr
󰴛
Josefine Schaefer | @JsfnSchfr 2024

3. Outline
󰢦 What is Web Accessibility?
🤗 Why should you care?
🔧 What can you do?
🎬 How to get started?
♻ How to keep going…
⬇ Link to Slides
@Josefine Schaefer | @JsfnSchfr 2024

4. What is Web
Accessibility?
Josefine Schaefer | @JsfnSchfr 2024

5. WHAT IS WEB ACCESSIBILITY
WCAG
Web Content Accessibility Guidelines
➡ Internationally shared standard for web
accessibility
Different levels of Accessibility
A AA AAA
Josefine Schaefer | @JsfnSchfr 2024

6. POUR Principles
🔍 Perceivable
WHAT IS WEB ACCESSIBILITY
Josefine Schaefer | @JsfnSchfr
🕹 Operable
🗯 Understandable
⚔ Robust
2024

7. Why should
you care?
Josefine Schaefer | @JsfnSchfr 2024

8. 👥 Accessibility = Human Right
Josefine Schaefer | @JsfnSchfr
WHY SHOULD YOU CARE
👯 Wider Audience
🤝 Accessibility benefits all of us
📝 (New) Laws for Accessibility Compliance
📈 Accessible Code = “Good” Code
ONE BILLION 😮
2024

9. Josefine Schaefer | @JsfnSchfr
WHY SHOULD YOU CARE
2024

10. Diverse User Personas
cardsforhumanity.frog.co
Josefine Schaefer | @JsfnSchfr 2024

11. Let’s dive in
󰝡
Josefine Schaefer | @JsfnSchfr 2024

12. WebAIM One Million
Josefine Schaefer | @JsfnSchfr 2024

13. Color
Contrast
Josefine Schaefer | @JsfnSchfr 2024

14. CONTRAST
RATIO
14 . 6 : 1
CONTRAST
RATIO
1 . 4 : 1
CONTRAST
RATIO
21 : 1
Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
CONTRAST
RATIO
6 . 3 : 1
WCAG AA requires 4.5 : 1 contrast ratio
2024

15. Josefine Schaefer | @JsfnSchfr
Larger &
Bold
Text
Requires
less
Contrast
Ratio
Large-scale text (>18pt) and
bold text (>14pt) require 3:1
contrast ratio
WCAG 2.1, SC 1.4.3.
3 : 1 3 : 1
2024

16. Let’s try it 󰚔
Josefine Schaefer | @JsfnSchfr 2024

17. COLOR CONTRAST
You can’t trust color.
Josefine Schaefer | @JsfnSchfr 2024

18. What can
you do?
Josefine Schaefer | @JsfnSchfr 2024

19. Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
https://venngage.com/to
ols/accessible-color-pale
tte-generator
2024

20. Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
https://toolness.github.io/
accessible-color-matrix/
2024

21. Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
Don’t use color as your only
indicator of change.
2024

22. Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
2024

23. Josefine Schaefer | @JsfnSchfr
LIGHT & DARK MODE
2024

24. Josefine Schaefer | @JsfnSchfr
LIGHT & DARK MODE
prefers-color-scheme
2024

25. ● Don’t forget about hover & focus styles
○ Non-text elements (i.e. interface controls) require 3:1 contrast
ratio
Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
● Diverse user needs:
○ What about neurodivergent folks?
2024

26. Keyboard
Accessibility
Josefine Schaefer | @JsfnSchfr 2024

27. ● POUR Principles: Operable
● Interactive elements have to be reachable via keyboard
● Tab order
● Visible focus
Josefine Schaefer | @JsfnSchfr
KEYBOARD ACCESSIBILITY
2024

28. Let’s try it 󰚔
Josefine Schaefer | @JsfnSchfr 2024

29. What can
you do?
Josefine Schaefer | @JsfnSchfr 2024

30. Josefine Schaefer | @JsfnSchfr
SKIP LINK
2024

31. ● Add a Skip Link
● Visualize Tab Order
○ Don’t mess with the tabindex
● Ensure Visible Focus
○ Avoid outline:0 or outline:none
● Use Semantic HTML
Josefine Schaefer | @JsfnSchfr
SEMANTIC HTML
2024

32. Semantic
HTML
Josefine Schaefer | @JsfnSchfr 2024

33. ● Alternative text
Josefine Schaefer | @JsfnSchfr
SEMANTIC HTML
● Discernable labels for links & buttons
● Use elements for their given purpose
● Suitable input type & input labels
● Headline hierarchies
● Adding document language
2024

34. Let’s try it 󰚗
Josefine Schaefer | @JsfnSchfr 2024

35. What can
you do?
Josefine Schaefer | @JsfnSchfr 2024

36. ● Make alt-text a requirement
○ Set alt=”” for decorative images
● Double check your <div>’s
● Validate HTML
● Stick to meaningful headline hierarchies
Josefine Schaefer | @JsfnSchfr
SEMANTIC HTML
2024

37. This was
a lot …
Josefine Schaefer | @JsfnSchfr 2024

38. … but of course, there is always more…
● Test for (different) screen
readers
Josefine Schaefer | @JsfnSchfr
WHAT ELSE CAN YOU DO?
2024

39. Josefine Schaefer | @JsfnSchfr
SCREEN READERS
Narrator Jaws NVDA Orca
VoiceOver
2024

40. … but of course, there is always more…
● Test for different screen readers
Josefine Schaefer | @JsfnSchfr
WHAT ELSE CAN YOU DO?
● Test on mobile
● Accessible Fonts
● Audio and Video Transcripts
● Language Accessibility
2024

41. How to
get started?
Josefine Schaefer | @JsfnSchfr 2024

42. How to get started
● Integrate accessibility from the start
● Accessibility audit
○ Requirements & resources
● Identify “quick” wins
○ Most common user journeys?
Josefine Schaefer | @JsfnSchfr
APPROACHING ACCESSIBILITY
2024

43. Automation is your friend
● Accessibility linters & GitHub Actions
● Educate your team
● Remove barriers
● Hire specialists, if you can
Josefine Schaefer | @JsfnSchfr
AUTOMATED TESTING
2024

44. Questions?
Josefine Schaefer | @JsfnSchfr UtahJS | 2023

45. Dankeschön! 🤗
Thank you so much!
https://linktr.ee/josefinesch
Josefine Schaefer | @JsfnSchfr
CONTACT
@JsfnSchfr
@j-schaefer
@Josefine Schfr
🔗
UtahJS | 2023