You want to go beyond roughly meeting guidelines but actually create products that cater a large audience and their needs? To not only fulfil 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. Web Accessibility
Deep Dive
Josefine Schaefer
2023

2. Josefine Schaefer
󰟲 GirlCode Ambassador
Google Developer Expert
Developer Relations Engineer
Accessibility Advocate
Josefine Schaefer
2023

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

4. What is Web
Accessibility?
Josefine Schaefer
2023

5. WHAT IS WEB ACCESSIBILITY
A11Y
ACCESSIBILITY
Josefine Schaefer
2023

6. WHAT IS WEB ACCESSIBILITY
Josefine Schaefer
2023
WCAG
Web Content Accessibility Guidelines
➡ Internationally shared standard for web
accessibility
Different levels of Accessibility
A AA AAA
➡ Israel’s IS 5568 requires
WCAG AA for public entities

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

8. Why should
you care?
Josefine Schaefer
2023

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

10. Josefine Schaefer
2023
WHY SHOULD YOU CARE

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. Total Color
Blindness

15. Red-Green Color
Blindness

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

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

18. Let’s try it 󰚔
Josefine Schaefer
2023

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

20. What can
you do?
Josefine Schaefer
2023

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

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

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

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

25. Josefine Schaefer
2023
COLOR CONTRAST

27. Josefine Schaefer
2023
COLOR CONTRAST

28. Josefine Schaefer
2023
LIGHT & DARK MODE

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

30. ● Don’t forget about hover & focus styles
○ Non-text elements require 3:1 contrast ratio
Josefine Schaefer
2023
COLOR CONTRAST
● Think about your audience:
○ What about neurodivergent folks?

31. Keyboard
Accessibility
Josefine Schaefer
2023

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

33. Let’s try it 󰚔
Josefine Schaefer
2023

34. What can
you do?
Josefine Schaefer
2023

35. Josefine Schaefer 17 03
2023
SKIPLINK

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

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

38. Semantic
HTML
Josefine Schaefer 17 03
2023

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

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

41. Let’s try it 󰚗
Josefine Schaefer
2023

42. What can
you do?
Josefine Schaefer
2023

43. ● Make alt-text a requirement
● Double check your <div>’s
● Validate HTML
● Stick to meaningful headline
hierarchies
Josefine Schaefer 17 03
2023
SEMANTIC HTML

44. This was
a lot …
Josefine Schaefer
2023

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

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

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

48. How to
get started?
Josefine Schaefer
2023

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

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

51. Questions?
Josefine Schaefer
2023

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