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.

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

10. Assistive
Technologies
Adaptive
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

16. Improve and evaluate

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

27. Let’s see examples

28. 1.4.1 Use of color

29. image: https://www.uxbooth.com/articles/accessibility-visual-design/

30. 1.4.1 Use of color
image: https://www.uxbooth.com/articles/accessibility-visual-design/

31. 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

34. 1.1 Text alternatives

35. 1.1 Text alternatives

36. 1.3.2 Meaningful Sequence
image:
https://material.io/design/usability/
accessibility.html#hierarchy

37. <nav>
<section>
<h1> <h2>...
Semantic HTML

38. ~15%
of people have a
disability

39. Good accessibility
will also...

40. Boost SEO

41. Benefit other users

42. Resources &
References

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!