UtahJS - Web Accessibility Deep Dive.pdf
•
0 gefällt mir•58 views
Web Accessibility is crucial to make the internet more inclusive. Beyond just complying with local laws, it broadens your reach, opens up your service or product to many more people and benefits all of us. Learn how to start implementing Web Accessibility and to how to keep it going.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie UtahJS - Web Accessibility Deep Dive.pdf
Ähnlich wie UtahJS - Web Accessibility Deep Dive.pdf (18)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
UtahJS - Web Accessibility Deep Dive.pdf
- 1. Web Accessibility Deep Dive Josefine Schaefer 2023
- 2. Josefine Schaefer 2023 Guten Tag @JsfnSchfr
- 3. Josefine Schaefer 2023 Outline What is Web Accessibility? 🤗 Why should you care? 🔧 What can you do? 🎬 How to get started? ♻ How to keep going…
- 4. What is Web Accessibility? Josefine Schaefer 2023
- 5. WHAT IS WEB ACCESSIBILITY WCAG Web Content Accessibility Guidelines ➡ Internationally shared standard for web accessibility Different levels of Accessibility A AA AAA Americans with Disabilities Act (ADA) Josefine Schaefer 2023
- 6. POUR Principles 🔍 Perceivable WHAT IS WEB ACCESSIBILITY Josefine Schaefer 🕹 Operable 🗯 Understandable ⚔ Robust 2023
- 7. Why should you care? Josefine Schaefer 2023
- 8. 👥 Accessibility = Human Right Josefine Schaefer WHY SHOULD YOU CARE 👯 Wider Audience 🤝 Accessibility benefits all of us 📝 (New) Laws for Accessibility Compliance 📈 Accessible Code = “Good” Code ONE BILLION 😮 2023
- 9. Josefine Schaefer WHY SHOULD YOU CARE 2023
- 10. Diverse User Personas cardsforhumanity.frog.co Josefine Schaefer 2023
- 11. Let’s dive in Josefine Schaefer 2023
- 12. Outline 🔴 Color Contrast 🎹 Keyboard Accessibility Semantic HTML Josefine Schaefer 2023
- 14. CONTRAST RATIO 14 . 6 : 1 CONTRAST RATIO 1 . 4 : 1 CONTRAST RATIO 21 : 1 Josefine Schaefer COLOR CONTRAST CONTRAST RATIO 6 . 3 : 1 WCAG AA requires 4.5 : 1 contrast ratio 2023
- 15. Josefine Schaefer Larger & Bold Text Requires less Contrast Ratio Large-scale text (>18pt) and bold text (>14pt) require 3:1 contrast ratio WCAG 2.1, SC 1.4.3. 3 : 1 3 : 1 2023
- 16. Let’s try it Josefine Schaefer 2023
- 17. COLOR CONTRAST You can’t trust color. Josefine Schaefer 2023
- 18. What can you do? Josefine Schaefer 2023
- 21. Josefine Schaefer COLOR CONTRAST Don’t use color as your only indicator of change. 2023
- 23. Josefine Schaefer LIGHT & DARK MODE 2023
- 24. Josefine Schaefer LIGHT & DARK MODE prefers-color-scheme 2023
- 25. ● Don’t forget about hover & focus styles ○ Non-text elements (i.e. interface controls) require 3:1 contrast ratio Josefine Schaefer COLOR CONTRAST ● Diverse user needs: ○ What about neurodivergent folks? 2023
- 27. ● POUR Principles: Operable ● Interactive elements have to be reachable via keyboard ● Tab order ● Visible focus Josefine Schaefer KEYBOARD ACCESSIBILITY 2023
- 28. Let’s try it Josefine Schaefer 2023
- 29. What can you do? Josefine Schaefer 2023
- 31. ● Add a Skip Link ● Visualize Tab Order ○ Don’t mess with the tabindex ● Ensure Visible Focus ○ Avoid outline:0 or outline:none ● Use Semantic HTML Josefine Schaefer SEMANTIC HTML 2023
- 33. ● Alternative text ● Discernable labels for links & buttons ● Use elements for their given purpose ● Suitable input type ● Headline hierarchies Josefine Schaefer SEMANTIC HTML 2023
- 34. ● Convey structural information ● Assign and label all perceivable content areas Josefine Schaefer LANDMARKS 2023
- 35. ● Hierarchical headline structure ● Aria-landmarks Josefine Schaefer KEYBOARD ACCESSIBILITY 2023
- 37. Let’s try it Josefine Schaefer 2023
- 38. What can you do? Josefine Schaefer 2023
- 39. ● Make alt-text a requirement ○ Set alt=”” for decorative images ● Double check your <div>’s ● Validate HTML ● Stick to meaningful headline hierarchies Josefine Schaefer SEMANTIC HTML 2023
- 40. This was a lot … Josefine Schaefer 2023
- 41. … but of course, there is always more… ● Test for (different) screen readers Josefine Schaefer WHAT ELSE CAN YOU DO? 2023
- 42. Josefine Schaefer SCREEN READERS Narrator Jaws NVDA Orca VoiceOver 2023
- 43. … but of course, there is always more… ● Test for different screen readers Josefine Schaefer WHAT ELSE CAN YOU DO? ● Test on mobile ● Accessible Fonts ● Audio and Video Transcripts ● Language Accessibility 2023
- 44. How to get started? Josefine Schaefer 2023
- 45. How to get started ● Integrate accessibility from the start ● Accessibility audit ○ Requirements & resources ● Identify “quick” wins Josefine Schaefer APPROACHING ACCESSIBILITY 2023
- 46. Automation is your friend ● Accessibility linters & GitHub Actions ● Educate your team ● Remove barriers ● Hire specialists, if you can Josefine Schaefer AUTOMATED TESTING 2023
- 48. Thank you so much! https://linktr.ee/josefinesch Josefine Schaefer CONTACT @JsfnSchfr @j-schaefer @Josefine Schfr 🔗 Beautiful illustrations by @nicolaidiekmann ✍ 2023