As developers, designers or UX specialists it’s our responsibility to ensure inclusive experience on the products and services we create. But how can we relate to user experiences that may differ so much from our own? How can we test our code to make it as accessible as possible for a large audience? Let’s explore together how we can create accessible experiences, robust components and in the long run benefit ALL our users. This interactive talk will guide you through your accessibility journey, show tools and techniques to get started with accessibility testing, and provide you with actionable steps to get started.

1. Inclusive Web Developement for Everyone
Bridging the
Empathy Gap

2. Moin✌️
⚓️Hamburg
🏅WTM, GDE & GirlCode Ambassador
🐈‍⬛Cat Mom
🤸🏻Aerialist & Dance Teacher
👩🏻‍💻Accessibility Engineer at Storyblok
@JsfnSchfr | 2024
Josefine Schaefer

3. Human Nature of
Assumption

4. Unconscious

5. Unconscious
Bias

6. Unconscious
Assumption

7. Unconscious
Exclusion

8. Unconscious
Ableism

9. Impact
on Technology

10. The Empathy Gap
Who Writes our Code?

11. Around 20% Women (Statista, 2022)
Who Writes our Code?

12. Around 20% Women (Statista, 2022)
43% of Professional Developers are 25-34 years old (Stack Overflow, 2022)
Who Writes our Code?

13. Around 20% Women (Statista, 2022)
43% of Professional Developers are 25-34 years old (Stack Overflow, 2022)
68.8% of the State of JS respondents are white
Who Writes our Code?

14. around 20% Women (Statista, 2022)
43% of Professional Developers are 25-34 years old (Stackoverflow, 2022)
68.8% of the State of JS respondents are white
Majority is able bodied / did not report any (temporary) disability
Who Writes our Code?

15. Who Writes our Code?

16. The Empathy Gap
Consequences
0.0% 20.0% 40.0% 60.0% 80.0% 100.0%
Low Contrast Text
Missing Alt Text
Empty Links
Missing form Input Labels
Empty Buttons
Missing Doc Lang
Most Common WCAG 2
failures on Home Pages.
— WebAIM One Million

17. 0.0% 20.0% 40.0% 60.0% 80.0% 100.0%
Low Contrast Text
Missing Alt Text
Empty Links
Missing form Input Labels
Empty Buttons
Missing Doc Lang
The Empathy Gap
Consequences
Most Common WCAG 2
failures on Home Pages.
— WebAIM One Million
18.6%

18. Missing Doc Lang

19. 0.0% 20.0% 40.0% 60.0% 80.0% 100.0%
Low Contrast Text
Missing Alt Text
Empty Links
Missing form Input Labels
Empty Buttons
Missing Doc Lang
The Empathy Gap
Consequences
Most Common WCAG 2
failures on Home Pages.
— WebAIM One Million
27.5%

20. Empty Buttons
Usually happens if an image is
wrapped in button, but didn’t
get alternative text.

21. 0.0% 20.0% 40.0% 60.0% 80.0% 100.0%
Low Contrast Text
Missing Alt Text
Empty Links
Missing Form Input Labels
Empty Buttons
Missing Doc Lang
The Empathy Gap
Consequences
Most Common WCAG 2
failures on Home Pages.
— WebAIM One Million
45.9%

22. Missing Form Labels

23. 0.0% 20.0% 40.0% 60.0% 80.0% 100.0%
Low Contrast Text
Missing Alt Text
Empty Links
Missing form Input Labels
Empty Buttons
Missing Doc Lang
The Empathy Gap
Consequences
Most Common WCAG 2
failures on Home Pages.
— WebAIM One Million
50.1%

24. Empty Links

25. 0.0% 20.0% 40.0% 60.0% 80.0% 100.0%
Low Contrast Text
Missing Alt Text
Empty Links
Missing form Input Labels
Empty Buttons
Missing Doc Lang
The Empathy Gap
Consequences
Most Common WCAG 2
failures on Home Pages.
— WebAIM One Million
58.2%

26. Missing Alternative
Text

27. Missing Alternative
Text

28. 0.0% 20.0% 40.0% 60.0% 80.0% 100.0%
Low Contrast Text
Missing Alt Text
Empty Links
Missing form Input Labels
Empty Buttons
Missing Doc Lang
The Empathy Gap
Consequences
Most Common WCAG 2
failures on Home Pages.
— WebAIM One Million
83.6%

29. Low Color Contrast
Simulation

30. Just 3% of the
Internet are
Accessible.

31. The True Cost of not
Implementing Web
Accessibility

32. Consequences

33. Consequences
Failing to comply
with Human Rights
01

34. Consequences
Law Suits & Legal
Consequences
Failing to comply
with Human Rights
01
02

35. Consequences
Law Suits & Legal
Consequences
Failing to comply
with Human Rights
Missed Business
Opportunities
01
02
03

36. One Billion

38. Consequences
Law Suits & Legal
Consequences
Failing to comply
with Human Rights
Missed Business
Opportunities
Lost Revenue
01
02
03
04

39. Consequences
Law Suits & Legal
Consequences
Failing to comply
with Human Rights
Missed Business
Opportunities
Lost Revenue
Questionable UX
01
02
03
04
05

40. Consequences
Law Suits & Legal
Consequences
Failing to comply
with Human Rights
Missed Business
Opportunities
Lost Revenue
Questionable UX
01
02
03
04
05
Reduced User
Engagement
06

41. Consequences
Law Suits & Legal
Consequences
Failing to comply
with Human Rights
Missed Business
Opportunities
Lost Revenue
Questionable UX
Inefficiency
01
02
03
04
05
07
Reduced User
Engagement
06

42. Consequences
Law Suits & Legal
Consequences
Failing to comply
with Human Rights
Missed Business
Opportunities
Lost Revenue
Questionable UX
Inefficiency
Underminig
Corporate Social
Responsibility
01
02
03
04
05
07
08
Reduced User
Engagement
06

43. Consequences
Law Suits & Legal
Consequences
Failing to comply
with Human Rights
Missed Business
Opportunities
Lost Revenue
Questionable UX
Inefficiency
Underminig
Corporate Social
Responsibility
Negative Brand
Image
01
02
03
04
05
07
08
09
Reduced User
Engagement
06

44. Integrating Empathy

45. Developers
Designers
(UI / UX)
QA
Content
Creators
Web Accessibility

46. Roadmap
Define clear
accessibility goals
01

47. Roadmap
WCAG 2.1.AA
Define clear
accessibility goals
01

48. Roadmap
Define clear
accessibility goals
01
Identify most common
User Journey
02

49. Roadmap
Test top 3 pages first
Define clear
accessibility goals
01
Identify most common
User Journey
02

50. Roadmap
Run an initial audit
03
Define clear
accessibility goals
01
Identify most common
User Journey
02

51. Roadmap
Identify Low Hanging
Fruit & Prioritise
04
What issues are low
effort but high reward?
Run an initial audit
03
Define clear
accessibility goals
01
Identify most common
User Journey
02

52. Roadmap
Define clear
accessibility goals
01
Identify most common
User Journey
02
Identify Low Hanging
Fruit & Prioritise
04
Emphasize high code
quality
05
Run an initial audit
03

53. Roadmap
Define clear
accessibility goals
01
Identify most common
User Journey
02
Identify Low Hanging
Fruit & Prioritise
04
Emphasize high code
quality
05
Semantic HTML will
resolve many issues
Run an initial audit
03

54. Roadmap
Define clear
accessibility goals
01
Identify most common
User Journey
02
Identify Low Hanging
Fruit & Prioritise
04
Emphasize high code
quality
05
Automate where you
can
06
Add linters, automated
tests & pipelines
Run an initial audit
03

55. Roadmap
Define clear
accessibility goals
01
Identify most common
User Journey
02
Identify Low Hanging
Fruit & Prioritise
04
Emphasize high code
quality
05
Automate where you
can
06
Run an initial audit
03
Diversify your User
Personas
07

56. Roadmap
Define clear
accessibility goals
01
Identify most common
User Journey
02
Identify Low Hanging
Fruit & Prioritise
04
Emphasize high code
quality
05
Automate where you
can
06
Diversify your User
Personas
07
Run an initial audit
03
Think beyond the
Binary

57. Roadmap
Define clear
accessibility goals
01
Identify most common
User Journey
02
Identify Low Hanging
Fruit & Prioritise
04
Emphasize high code
quality
05
Automate where you
can
06
Run an initial audit
03
Diversify your User
Personas
07
Invest in User Testing
08
Include ‘native’ users of
assistive tech in QA

58. Roadmap
Define clear
accessibility goals
01
Identify most common
User Journey
02
Identify Low Hanging
Fruit & Prioritise
04
Emphasize high code
quality
05
Automate where you
can
06
Run an initial audit
03
Diversify your User
Personas
07
Invest in User Testing
08
Lots of actionable
steps! 🚀

59. The Web needs a
little more Empathy
@JsfnSchfr
linktr.ee/josefinesch
Josefine Schaefer
Resources