What is web accessibility?
This presentation defines what is accessibility, and who are the people who might have problems using a website.
We explain how they browse the web and what are their common problems.
Then we explain how to make websites more accessible by following the WCAG guidelines.
Finally, we present a few examples of accessibility issues, and show how correcting them is also useful to other users.
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
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
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
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
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/