An Introduction to Web Accessibility (A11y)

Imagine your mouse and keyboard were suddenly disabled. How would you navigate the internet? Web accessibility ensures everyone, including people with disabilities, can seamlessly use websites and apps. It’s not just a necessity but a responsibility.
By embracing web accessibility, we create a more inclusive digital world, breaking down barriers and opening opportunities for all. Join the movement to make the web accessible to everyone. Let’s design for inclusivity and ensure no one is left behind.
My colleague Sophie Rauhut from Inspired Consulting and I will guide you through this important topic. Adhere to the Web Content Accessibility Guidelines (WCAG) and make a difference today!

Transcript

1. Web Accessibility (A11y) Ariadne Engelbrecht /// Sophie Rauhut
2. 2 Different types of disability Why is Web Accessibility important? WCAG and legal requirements Agenda
3. 3 Principles and best practices How do I check A11y? Discussion in design and code
4. 4 Why is Web Accessibility important?
5. 5 Importance of Web Accessibility Imagine your mouse and keyboard were suddenly disabled. How would you navigate the internet?
6. 6 It means that websites and apps should be designed to be accessible to all people, including people with disabilities What does Web Accessibility mean?
7. 7 • Persistent Accessibility Gaps • Inclusion and justice Why is it important?
8. 8 Some Numbers • WHO: about 16% of the world's population, have some form of disability (2023)*¹ • WebAIM: 80% of people with disabilities use some form of assistive technology to access the web (2017)*² • 70% of websites have barriers for people with visual impairments (2017)*²
9. 9 »One of the reasons for many barriers is that those who implement are often not affected by a disability themselves«. Unknown author
10. 10 Different Types of Disability
11. 11 Different types of disability
12. 12 • Cataracts • Color Blindness • Myopia • Quadriplegia • Carpal Tunnel Syndrome • Rheumatoid Arthritis • Deafness • Tinnitus • Environmental challenges • Stuttering • Laryngeal Cancer • Anxiety Different Types of Disabilities SEE TOUCH SPEAK HEAR
13. 13 WCAG and legal requirements
14. 14 WCAG = Web Content Accessibility Guidelines WCAG and legal requirements
15. 15 A Minimum level of accessibility AA AAA Higher level of accessibility than Level A Standard that most organizations aim to meet Highest level of accessibility Addressing users with the most severe disabilities WCAG Levels
16. 16 WCAG Success Criteria Checkout the success criteria for your next project on on W3C.org
17. 17 Principles and Best Practices in Design
18. 18 • Text should have a contrast ratio of at least 4.5:1 for normal text • Large text (18pt or 14pt bold): contrast ratio of 3:1 • Exception: components that are pure decoration, brand and logo name Contrast (AA level) Check contrast with Accessible-colors.com or Colorable.jxnblk.com
19. 19 Inspired Days Inspired Days Contrast (AA level) Fails AA Required contrast ratio: 4.5 Your contrast ratio: 9.92 Passes AA Required contrast ratio: 4.5 Your contrast ratio: 4.5
20. 20 • Line height at least 1.5 times the font size • Paragraph Spacing at least 2 times the font size Text Spacing (AA Level)
21. 21 • Letter spacing at least 0.12 times the font size • Word spacing to at least 0.16 times the font size Text Spacing (AA Level)
22. 22 Link (AA Level) Do Don’t
23. 23 • Headings provide a hierarchical structure • Headings help screen readers understand the structure of the content. • Allows users to navigate the page more efficiently Headings
24. 24 • Labels are used in forms as descriptive text • Provides context for what information should be entered or selected • Each input should have a label Labels
25. 29 Principles and Best Practices in Code
26. 30 HTML: The Accessibility Tree
27. 32 • Use semantic HTML • Prioritize keyboard navigation • Provide alternative text for images … or don't? • Use ARIA very carefully/sparingly • Keep hierarchical order in mind • Keep colour contrast in mind What’s most important
28. 33 Check out the bad and the good code on our inspired Github 🙂
29. 34 How do I check A11y?
30. How to check A11y? 35 How to check A11y? • W3C Web Validator • VSCode W3C Web Validator Addon • Google Lighthouse • Many different other (free) apps and websites
31. 36 We are all affected!
32. 37 Speakers Ari joined Inspired in 2022 and currently works as a Software Engineer. She loves the software industry – whether it's theory, coding or volunteering in a congress. Ariadne Engelbrecht Sophie works as a UX designer at Inspired Consulting. She supports and accompanies clients in the conception and realization of digital products. Sophie Rauhut
33. 38 • Different types of disabilities • Accessibility tree • Image: line height • Image: Inclusive design Images Numbers • *¹ WHO: Fact Sheet Disability (2023) • *² WebAim: Screenreader Survey (2017) Ressources