@radibit
The importance of
accessibility and inclusivity
Slide 2
Slide 2 text
2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
1.
What does digital accessibility
mean
Slide 5
Slide 5 text
5
The level at which a website or an app and its
features are e
ff
ective to as many people as
possible, regardless of their physical or
functional capacity
Slide 6
Slide 6 text
6
Accessibility is perception
Slide 7
Slide 7 text
7
Accessibility is perception
Slide 8
Slide 8 text
8
Accessibility is usability
Slide 9
Slide 9 text
9
Accessibility is logic
Slide 10
Slide 10 text
10
Accessibility is equal opportunity
Slide 11
Slide 11 text
11
Accessibility is empathy
Slide 12
Slide 12 text
12
Accessibility is about you and me
Slide 13
Slide 13 text
13
“By designing with accessibility
in mind what we're actually
doing is we're designing for our
friends, family, and our future
selves.”
— Alistair Duggin
Slide 14
Slide 14 text
14
1 billion people in the world have some form of
disability
Slide 15
Slide 15 text
15
🧔 👱
Slide 16
Slide 16 text
16
👨🦳 👩🦳
Slide 17
Slide 17 text
17
80% of disability cases are due to population
aging
Slide 18
Slide 18 text
2.
Impairment challenges in the
context of digital products
Slide 19
Slide 19 text
19
“Disability is not just a health problem. It is a
complex phenomenon, re
fl
ecting the interaction
between features of a person’s body and
features of the society in which they live.”
–World Health Organization
Slide 20
Slide 20 text
20
Microsoft inclusive toolkit
Slide 21
Slide 21 text
21
As web and mobile producers, it’s our
responsibility to know how our products
a
ff
ect human interactions and avoid
creating mismatches
Slide 22
Slide 22 text
22
Types of disability
Slide 23
Slide 23 text
23
Hearing
(hearing loss)
Slide 24
Slide 24 text
24
5% of the world’s population
(~ 466 million people) has some form of
auditory impairment
Slide 25
Slide 25 text
25
By 2050 over 900 million people
(1 in 10 people) will have hearing impairment
Slide 26
Slide 26 text
26
Hearing loss can be conductive
Slide 27
Slide 27 text
27
Hearing loss can be conductive
Slide 28
Slide 28 text
28
www.atalan.fr/agissons/en/malentendance.html
Alt: mu
ff l
ed sound of a person talking
Slide 29
Slide 29 text
29
Hearing loss can be perceptive
Slide 30
Slide 30 text
30
www.atalan.fr/agissons/en/malentendance.html
Alt: a person talking with crackling and
whistling noises on the background
Slide 31
Slide 31 text
31
1. Captions and text transcript
synced with video content
Solutions
Slide 32
Slide 32 text
32
1. Captions and text transcript
synced with video content
2. Use of sign language while
transmitting live content e.g.
news websites, webinars
Solutions
Slide 33
Slide 33 text
33
Chris Heilmann, Microsoft
Slide 34
Slide 34 text
34
Eyesight
(visual impairments)
Slide 35
Slide 35 text
35
Globally, at least 2.2 billion people have a
vision impairment or blindness
Slide 36
Slide 36 text
36
Vision impairment — color blindness
Slide 37
Slide 37 text
37
Vision impairment — color blindness
Slide 38
Slide 38 text
38
www.atalan.fr/agissons/en/daltonisme.html
Alt: a slider moving from right to left changing the
colors of a pie chart and its legend
Slide 39
Slide 39 text
39
www.atalan.fr/agissons/en/daltonisme.html
Slide 40
Slide 40 text
40
Vision impairment — eyesight loss
Slide 41
Slide 41 text
41
Alt: a hand is holding up a lens that blurs
vision and moves it across a picture of a
mountain scenery
Slide 42
Slide 42 text
42
Experiencing an interface through the eyes
of people with certain impairments helps
you to establish a great level of empathy
and boosts your creative thinking
Slide 43
Slide 43 text
43
1. Avoid using color as a single
cue
Solutions
Slide 44
Slide 44 text
44
1. Avoid using color as a single
cue
2. Readable text colors against
background
Solutions
Slide 45
Slide 45 text
45
1. Avoid using color as a single
cue
2. Readable text colors against
background
3. Keep it minimal
Solutions
Slide 46
Slide 46 text
46
Mobility
(motor impairments)
Slide 47
Slide 47 text
47
Motor impairments can be caused by a wide
range of conditions like stroke, Parkinson's
disease, cerebral palsy, muscular dystrophy,
broken arm.
Slide 48
Slide 48 text
48
www.atalan.fr/agissons/en/handicap-moteur.html
Alt: a mouse pointer with activated hand
tremor attempting to click a button
Slide 49
Slide 49 text
49
1. Optimize for keyboard usage
Solutions
Slide 50
Slide 50 text
50
1. Optimize for keyboard usage
2. Provide enough area for
actionable elements
Solutions
Slide 51
Slide 51 text
51
Cognitive di
ffi
culties
(dyslexia, literacy)
Slide 52
Slide 52 text
52
1. Memory
Slide 53
Slide 53 text
53
1. Memory
2. Problem-solving
Slide 54
Slide 54 text
54
1. Memory
2. Problem-solving
3. Attention
Slide 55
Slide 55 text
55
1. Memory
2. Problem-solving
3. Attention
4. Text processing
58
1. Avoid drawing people’s
attention away from the main
content or functionality
Solutions
Slide 59
Slide 59 text
59
1. Avoid drawing people’s
attention away from the main
content or functionality
2. Use clear and simple
language
Solutions
Slide 60
Slide 60 text
60
1. Avoid drawing people’s
attention away from the main
content or functionality
2. Use clear and simple
language
3. O
ff
er multiple-choice rather
than free-form text
fi
elds
Solutions
Slide 61
Slide 61 text
61
Vestibular disorders and seizures
Slide 62
Slide 62 text
62
1. O
ff
er people option to turn
o
ff
or reduce motion
Solutions
Slide 63
Slide 63 text
63
1. O
ff
er people option to turn
o
ff
or reduce motion
2. Avoid
fl
ashing or
fl
ickering
e
ff
ects and animations
Solutions
Slide 64
Slide 64 text
64
Permanent, temporary,
situational scenarios
Slide 65
Slide 65 text
3.
Inclusive design
Slide 66
Slide 66 text
66
Inclusive design is a methodology that
enables people with diverse characteristics to
use a product in various environments
Slide 67
Slide 67 text
67
By embracing inclusive design, we
strive to build web products that can
be used by as many people as possible
Slide 68
Slide 68 text
68
Inclusive design principles
Slide 69
Slide 69 text
69
1. Recognize exclusion
Slide 70
Slide 70 text
70
1. Recognize exclusion
2. O
ff
er choice
Slide 71
Slide 71 text
71
1. Recognize exclusion
2. O
ff
er choice
3. Consider situation
Slide 72
Slide 72 text
72
1. Recognize exclusion
2. O
ff
er choice
3. Consider situation
4. Provide equivalent experiences
Slide 73
Slide 73 text
73
1. Recognize exclusion
2. O
ff
er choice
3. Consider situation
4. Provide equivalent experiences
5. Prioritize core features
Slide 74
Slide 74 text
4.
Accessibility as part of the product
work
fl
ow
Slide 75
Slide 75 text
75
♻ Integrate accessibility on each step of the
product’s lifecycle
Slide 76
Slide 76 text
76
🎨 🛠 Involve everyone who is part of the
design and implementation decision making
process
Slide 77
Slide 77 text
77
💸 Estimate the value of each core feature and
how it can meet the needs of more people
Slide 78
Slide 78 text
78
🧪 Test and maintain with accessibility in mind
Slide 79
Slide 79 text
79
“I could change lives and make
a bigger impact, and that's why
I have never been able to turn
o
ff
that switch for accessibility.”
— Marcy Sutton