Bridging the Empathy Gap - Inclusive Web Development for everyone
0 likes70 views
The document emphasizes the significance of inclusivity and accessibility in web development, highlighting alarming statistics about gender and ethnicity representation in the tech industry. It outlines common accessibility failures according to WCAG guidelines, the consequences of neglecting accessibility, and offers a roadmap for improving web accessibility through actionable steps. The author advocates for integrating empathy into the development process to create a more inclusive web environment.
Bridging the Empathy Gap - Inclusive Web Development for everyone
- 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
- 4. Unconscious
- 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%
- 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%
- 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%
- 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
- 45. Developers Designers (UI / UX) QA Content Creators Web Accessibility
- 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