Web Accessibility is crucial to make the internet more inclusive. Beyond just complying with local laws, it broadens your reach, opens up your service or product to many more people and benefits all of us. Learn how to start implementing Web Accessibility and to how to keep it going.

1. Web Accessibility
Deep Dive
Josefine Schaefer 2023

2. Josefine Schaefer 2023
Guten Tag
@JsfnSchfr
󰴛

3. Josefine Schaefer 2023
Outline
󰢦 What is Web Accessibility?
🤗 Why should you care?
🔧 What can you do?
🎬 How to get started?
♻ How to keep going…

4. What is Web
Accessibility?
Josefine Schaefer 2023

5. WHAT IS WEB ACCESSIBILITY
WCAG
Web Content Accessibility Guidelines
➡ Internationally shared standard for web
accessibility
Different levels of Accessibility
A AA AAA
󰑔 Americans with
Disabilities Act (ADA)
Josefine Schaefer 2023

6. POUR Principles
🔍 Perceivable
WHAT IS WEB ACCESSIBILITY
Josefine Schaefer
🕹 Operable
🗯 Understandable
⚔ Robust
2023

7. Why should
you care?
Josefine Schaefer 2023

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

9. Josefine Schaefer
WHY SHOULD YOU CARE
2023

10. Diverse User Personas
cardsforhumanity.frog.co
Josefine Schaefer 2023

11. Let’s dive in
󰝡
Josefine Schaefer 2023

12. Outline
🔴 Color Contrast
🎹 Keyboard Accessibility
󰔞 Semantic HTML
Josefine Schaefer 2023

13. Color
Contrast
Josefine Schaefer 2023

14. CONTRAST
RATIO
14 . 6 : 1
CONTRAST
RATIO
1 . 4 : 1
CONTRAST
RATIO
21 : 1
Josefine Schaefer
COLOR CONTRAST
CONTRAST
RATIO
6 . 3 : 1
WCAG AA requires 4.5 : 1 contrast ratio
2023

15. Josefine Schaefer
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
2023

16. Let’s try it 󰚔
Josefine Schaefer 2023

17. COLOR CONTRAST
You can’t trust color.
Josefine Schaefer 2023

18. What can
you do?
Josefine Schaefer 2023

19. Josefine Schaefer
COLOR CONTRAST
https://venngage.com/to
ols/accessible-color-pale
tte-generator
2023

20. Josefine Schaefer
COLOR CONTRAST
https://toolness.github.io/
accessible-color-matrix/
2023

21. Josefine Schaefer
COLOR CONTRAST
Don’t use color as your only
indicator of change.
2023

22. Josefine Schaefer
COLOR CONTRAST
2023

23. Josefine Schaefer
LIGHT & DARK MODE
2023

24. Josefine Schaefer
LIGHT & DARK MODE
prefers-color-scheme
2023

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

26. Keyboard
Accessibility
Josefine Schaefer 2023

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

28. Let’s try it 󰚔
Josefine Schaefer 2023

29. What can
you do?
Josefine Schaefer 2023

30. Josefine Schaefer
SKIP LINK
2023

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
SEMANTIC HTML
2023

32. Semantic
HTML
Josefine Schaefer 2023

33. ● Alternative text
● Discernable labels for links & buttons
● Use elements for their given purpose
● Suitable input type
● Headline hierarchies
Josefine Schaefer
SEMANTIC HTML
2023

34. ● Convey structural
information
● Assign and label all
perceivable content
areas
Josefine Schaefer
LANDMARKS
2023

35. ● Hierarchical headline
structure
● Aria-landmarks
Josefine Schaefer
KEYBOARD ACCESSIBILITY
2023

36. Josefine Schaefer
HTML HELL
https://www.htm
hell.dev/
2023

37. Let’s try it 󰚗
Josefine Schaefer 2023

38. What can
you do?
Josefine Schaefer 2023

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

40. This was
a lot …
Josefine Schaefer 2023

41. … but of course, there is always more…
● Test for (different) screen
readers
Josefine Schaefer
WHAT ELSE CAN YOU DO?
2023

42. Josefine Schaefer
SCREEN READERS
Narrator Jaws NVDA Orca
VoiceOver
2023

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

44. How to
get started?
Josefine Schaefer 2023

45. How to get started
● Integrate accessibility from the start
● Accessibility audit
○ Requirements & resources
● Identify “quick” wins
Josefine Schaefer
APPROACHING ACCESSIBILITY
2023

46. Automation is your friend
● Accessibility linters & GitHub Actions
● Educate your team
● Remove barriers
● Hire specialists, if you can
Josefine Schaefer
AUTOMATED TESTING
2023

47. Questions?
Josefine Schaefer 2023

48. Thank you so much!
https://linktr.ee/josefinesch
Josefine Schaefer
CONTACT
@JsfnSchfr
@j-schaefer
@Josefine Schfr
🔗
Beautiful illustrations by
@nicolaidiekmann ✍
2023