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.
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
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 😮
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?
32. ● POUR Principles: Operable
● Interactive elements have to be reachable via keyboard
● Tab order
● Visible focus
Josefine Schaefer 17 03
2023
KEYBOARD ACCESSIBILITY
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
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
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
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