Introduction to Web Accessibility
- 1. Web accessibility For who? How? Why? 21.05.2019 • Hamburg
- 2. Make the web available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability. “ W3C Mission
- 3. Accessibility is about... Environment Disabilities
- 4. We do things for people
- 5. Sensory Physical Cognitive Typology of impairments
- 6. Sensory Blindness and low vision Colorblindness Hearing loss and deafness Physical Cognitive Typology of impairments
- 7. Sensory Blindness and low vision Colorblindness Hearing loss and deafness Physical Reduced dexterity Amputee Paralyzed Cognitive Typology of impairments
- 8. Sensory Blindness and low vision Colorblindness Hearing loss and deafness Physical Reduced dexterity Amputee Paralyzed Cognitive Learning disabilities Distractibility Mental health Typology of impairments
- 9. The accessible web: tools and strategies
- 11. screen reader screen magnifier Assistive technologies voice interface
- 12. Dyslexic, Web extension by Jari Eskelinen Adaptive strategies
- 13. Helping people with sensory disabilities ● Provide captions or transcript ● Provide text alternatives to images and icons ● Support keyboard ● Use correct landmark ● Make sure there is enough contrast ● Text content is understandable without presentation
- 14. Helping people with physical disabilities ● Provide text alternatives to images and icons ● Support keyboard ● Use sufficient time limits ● Use correct landmark
- 15. Helping people with cognitive disabilities ● Avoid complex navigation and page layouts ● Avoid complex sentences and unusual words ● Use illustrations or icons to enforce meaning ● Make sure users can suppress animations and audio ● Make sure content is understandable without presentation
- 17. Norms and specifications WAI-ARIA 2014 Accessible Rich Internet Applications WCAG 1.0 1999 Web Content Accessibility Guidelines WCAG 2.0 2008 W3C 1994
- 18. Reminder: HTML is awesome
- 21. Quickref preview “Image is too big to be displayed”
- 22. Must do Should do May do WCAG Levels A AA AAA
- 23. Perceptible Operable Understandable WCAG overview
- 24. Perceptible ● Text alternatives for non-text content ● Content can be presented in different ways ● Content is easy to see and hear ● Content is distinguishable
- 25. Operable ● Keyboard accessible ● User is given enough time ● Easy to navigate, find content, determine where you are ● Easy input modalities
- 26. Understandable ● Text is readable and understandable ● Content appears and operates in predictable ways ● Input assistance
- 28. 1.4.1 Use of color
- 30. 1.4.1 Use of color image: https://www.uxbooth.com/articles/accessibility-visual-design/
- 32. Trello “Color Blind Friendly” mode
- 33. 2.2 Enough time image: https://medium.com/@sheribyrnehaber/designing-toast-messages-for-accessibility-fb610ac364be
- 38. ~15% of people have a disability
- 40. Boost SEO
- 43. Tools for everybody! Developers ● WCAG Quick Ref • https://www.w3.org/WAI/WCAG21/quickref/ ● WAI-ARIA • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA ● Web developer addon • https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Designers ● Material design Accessibility guidelines • https://material.io/design/usability/accessibility.html ● WCAG contrast checker • https://contrastchecker.com/ ● Browser extensions to test colors Content creators ● SEO writing tips (tools such as Yoast SEO) ● Text complexity checkers
- 44. Sources General infos and techniques How people use the web • https://www.w3.org/WAI/people-use-web/ Assistive technologies & Adaptive strategies • https://www.w3.org/WAI/people-use-web/tools-techniques/ Accessibility for Visual Design, Nick Babich • https://www.uxbooth.com/articles/accessibility-visual-design Accessibility and SEO overlap • https://moz.com/blog/accessibility-seo-1 • https://webaim.org/blog/web-accessibility-and-seo/ Facts & numbers WCAG Mission • https://www.w3.org/Consortium/mission.html 15% of people have a disability • https://www.worldbank.org/en/topic/disability Other Dyslexic, Web extension by Jari Eskelinen • https://addons.mozilla.org/fr/firefox/addon/mobile-dyslexic Motherfucking website • https://motherfuckingwebsite.com/
- 45. Credits Icons & Emojis Twitter emojis • https://twitter.github.io Mozilla emojis • https://emojipedia.org/mozilla Flaticon • https://www.flaticon.com
- 46. Thanks!