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.
These are the slides I use in my talk "Web Accessibility Deep Dive". Feel free to reach out if you have any questions or would like to discuss web accessibility.
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
Enterprise Solutions in
Norway require WCAG A +
AA, except 1.2.3, 1.2.4 &
1.2.5
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 😮
29. ● 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?
30. TailwindCSS
● Pre-flight mode
● Consistent styles across browsers
● ‘sr-only’ & ‘not-sr-only’
● Some built-in support for aria-* attributes
Josefine Schaefer
2023
COLOR CONTRAST
32. ● POUR Principles: Operable
● Interactive elements have to be reachable via keyboard
● Tab order
● Visible focus
Josefine Schaefer 17 03
2023
KEYBOARD ACCESSIBILITY
45. ● 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
49. ● Make alt-text a requirement
● Double check your <div>’s
● Validate HTML
● Stick to meaningful headline
hierarchies
Josefine Schaefer 17 03
2023
SEMANTIC HTML
53. … 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
55. How to get started
● Integrate accessibility from the start
● Accessibility audit
○ Requirements & resources
● Identify “quick” wins
Josefine Schaefer
2023
APPROACHING ACCESSIBILITY
56. Automation is your friend
● Accessibility linters & pipelines
● Educate your team
● Remove barriers
● Hire specialists, if you can
Josefine Schaefer
2023
AUTOMATED TESTING
