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

19.
Quickref preview
“Image is too big to be displayed”

20.
Must do Should do May do
WCAG Levels
A AA AAA

21.
Perceptible Operable Understandable
WCAG overview

22.
Perceptible
● Text alternatives for non-text content
● Content can be presented in different ways
● Content is easy to see and hear
● Content is distinguishable

23.
Operable
● Keyboard accessible
● User is given enough time
● Easy to navigate, find content, determine
where you are
● Easy input modalities

24.
Understandable
● Text is readable and understandable
● Content appears and operates in
predictable ways
● Input assistance

25.
Let’s see examples

26.
1.4.1 Use of color

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

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

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

30.
Trello “Color Blind Friendly” mode

31.
2.2 Enough time
image: https://medium.com/@sheribyrnehaber/designing-toast-messages-for-accessibility-fb610ac364be

32.
1.1 Text alternatives

33.
1.1 Text alternatives

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

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

36.
~15%
of people have a
disability

37.
Good accessibility
will also...

38.
Boost SEO

39.
Benefit other users

40.
Resources &
References

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

42.
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/

43.
Credits
Icons & Emojis
Twitter emojis • https://twitter.github.io
Mozilla emojis • https://emojipedia.org/mozilla
Flaticon • https://www.flaticon.com

44.
Thanks!