Slide 1
Slide 1 text
Designing
for the real world
@HugoGiraudel — Accessibility advocate @N26 (Berlin, Germany)
May 17th 2018
Slide 2
Slide 2 text
What’s
accessibility?
@HugoGiraudel
Slide 3
Slide 3 text
A set of
standards
@HugoGiraudel
Slide 4
Slide 4 text
Interfaces for
everyone
@HugoGiraudel
Slide 5
Slide 5 text
Inclusive
design
@HugoGiraudel
Slide 6
Slide 6 text
Not being
selfish
@HugoGiraudel
Slide 7
Slide 7 text
Empathy
@HugoGiraudel
Slide 8
Slide 8 text
Impairments
disabilities
@HugoGiraudel
Slide 9
Slide 9 text
Visual
@HugoGiraudel
Slide 10
Slide 10 text
Mobility
@HugoGiraudel
Slide 11
Slide 11 text
Cognitive
@HugoGiraudel
Slide 12
Slide 12 text
Hearing
@HugoGiraudel
Slide 13
Slide 13 text
Vocal
@HugoGiraudel
Slide 14
Slide 14 text
Context
@HugoGiraudel
Slide 15
Slide 15 text
Permanent
@HugoGiraudel
Slide 16
Slide 16 text
Temporary
@HugoGiraudel
Slide 17
Slide 17 text
Situational
@HugoGiraudel
Slide 18
Slide 18 text
Visual
impairments
@HugoGiraudel
Slide 19
Slide 19 text
Low vision
@HugoGiraudel
Slide 20
Slide 20 text
@HugoGiraudel
Slide 21
Slide 21 text
Large
font size
(16-22pt)
@HugoGiraudel
Slide 22
Slide 22 text
Good
contrast
@HugoGiraudel
Slide 23
Slide 23 text
Allow
zooming
@HugoGiraudel
Slide 24
Slide 24 text
Avoid
non-scalable
content
@HugoGiraudel
Slide 25
Slide 25 text
Combine
text, colors
& shapes
@HugoGiraudel
Slide 26
Slide 26 text
Color
blindness /
low contrast
@HugoGiraudel
Slide 27
Slide 27 text
High contrast
@HugoGiraudel
Slide 28
Slide 28 text
The smaller
the higher
@HugoGiraudel
Slide 29
Slide 29 text
Test it against
standards
@HugoGiraudel
Slide 30
Slide 30 text
@HugoGiraudel
Slide 31
Slide 31 text
Never
color only
@HugoGiraudel
Slide 32
Slide 32 text
Beware
color-coded
elements
@HugoGiraudel
Slide 33
Slide 33 text
Combine
colors with
patterns
@HugoGiraudel
Slide 34
Slide 34 text
@HugoGiraudel
Slide 35
Slide 35 text
Blindness
@HugoGiraudel
Slide 36
Slide 36 text
Meaningful
content flow
@HugoGiraudel
Slide 37
Slide 37 text
Keyboard
usage
@HugoGiraudel
Slide 38
Slide 38 text
No critical
hover states
@HugoGiraudel
Slide 39
Slide 39 text
Alternative
text
@HugoGiraudel
Slide 40
Slide 40 text
Try a
screen-reader
@HugoGiraudel
Slide 41
Slide 41 text
Mobility
impairments
@HugoGiraudel
Slide 42
Slide 42 text
Single hand
availability
@HugoGiraudel
Slide 43
Slide 43 text
Upper limb
disability
@HugoGiraudel
Slide 44
Slide 44 text
Tendonitis &
carpal tunnel
syndrome
@HugoGiraudel
Slide 45
Slide 45 text
Hand tremor
& Parkinson
@HugoGiraudel
Slide 46
Slide 46 text
How to
@HugoGiraudel
Slide 47
Slide 47 text
CTA at the
bottom
@HugoGiraudel
Slide 48
Slide 48 text
@HugoGiraudel
Slide 49
Slide 49 text
Avoid
multi-touch
@HugoGiraudel
Slide 50
Slide 50 text
Avoid
repetitive
gestures
@HugoGiraudel
Slide 51
Slide 51 text
Limit amount
of actions
@HugoGiraudel
Slide 52
Slide 52 text
Be forgiving
with accuracy
@HugoGiraudel
Slide 53
Slide 53 text
Test with
other hand
@HugoGiraudel
Slide 54
Slide 54 text
Keyboard /
screen-reader
@HugoGiraudel
Slide 55
Slide 55 text
Cognitive
impairments
@HugoGiraudel
Slide 56
Slide 56 text
Autism
@HugoGiraudel
Slide 57
Slide 57 text
Consistent
layouts
@HugoGiraudel
Slide 58
Slide 58 text
Explicit &
straight-
forward
@HugoGiraudel
Slide 59
Slide 59 text
Avoid
acronyms &
idioms
@HugoGiraudel
Slide 60
Slide 60 text
Caption
videos
@HugoGiraudel
Slide 61
Slide 61 text
Dyslexia
@HugoGiraudel
Slide 62
Slide 62 text
Use a clear
font face
@HugoGiraudel
Slide 63
Slide 63 text
~70 chars /
line
@HugoGiraudel
Slide 64
Slide 64 text
~1.5 line
height
@HugoGiraudel
Slide 65
Slide 65 text
Decent
contrast
@HugoGiraudel
Slide 66
Slide 66 text
Start-align
content
@HugoGiraudel
Slide 67
Slide 67 text
Alternative
ways
@HugoGiraudel
Slide 68
Slide 68 text
Vestibular
disorder
@HugoGiraudel
Slide 69
Slide 69 text
No parallax
@HugoGiraudel
Slide 70
Slide 70 text
No auto-scroll
@HugoGiraudel
Slide 71
Slide 71 text
Subtle
animations
@HugoGiraudel
Slide 72
Slide 72 text
Allow
disabling
animations
@HugoGiraudel
Slide 73
Slide 73 text
Attention
deficit
disorder
@HugoGiraudel
Slide 74
Slide 74 text
Consistent
user flow
@HugoGiraudel
Slide 75
Slide 75 text
Avoid infinite
animations
@HugoGiraudel
Slide 76
Slide 76 text
Anxiety
@HugoGiraudel
Slide 77
Slide 77 text
Avoid time-
sensitive
@HugoGiraudel
Slide 78
Slide 78 text
Be clear and
supportive
@HugoGiraudel
Slide 79
Slide 79 text
@HugoGiraudel
Slide 80
Slide 80 text
Allow
reviewing
@HugoGiraudel
Slide 81
Slide 81 text
@HugoGiraudel
Slide 82
Slide 82 text
Post-traumatic
stress disorder
@HugoGiraudel
Slide 83
Slide 83 text
Trigger
warnings
@HugoGiraudel
Slide 84
Slide 84 text
Review
the copy
@HugoGiraudel
Slide 85
Slide 85 text
Diverse group
of testers
@HugoGiraudel
Slide 86
Slide 86 text
Leave out
the jokes
@HugoGiraudel
Slide 87
Slide 87 text
Epilepsy
@HugoGiraudel
Slide 88
Slide 88 text
Avoid flashing
content
@HugoGiraudel
Slide 89
Slide 89 text
Animate on
user action
@HugoGiraudel
Slide 90
Slide 90 text
Seizure
@HugoGiraudel
Slide 91
Slide 91 text
Hearing
impairments
@HugoGiraudel
Slide 92
Slide 92 text
Loud
environment
@HugoGiraudel
Slide 93
Slide 93 text
Ear infection
@HugoGiraudel
Slide 94
Slide 94 text
Hard of
hearing
@HugoGiraudel
Slide 95
Slide 95 text
Deafness
@HugoGiraudel
Slide 96
Slide 96 text
How to
@HugoGiraudel
Slide 97
Slide 97 text
Alternative
ways
@HugoGiraudel
Slide 98
Slide 98 text
Caption
videos
@HugoGiraudel
Slide 99
Slide 99 text
No vocal only
@HugoGiraudel
Slide 100
Slide 100 text
Consider
stutters
@HugoGiraudel
Slide 101
Slide 101 text
Alternative
ways
@HugoGiraudel
Slide 102
Slide 102 text
Wrapping up
@HugoGiraudel
Slide 103
Slide 103 text
Layout &
structure
@HugoGiraudel
Slide 104
Slide 104 text
Color &
contrast
@HugoGiraudel
Slide 105
Slide 105 text
Stick to
common
patterns
@HugoGiraudel
Slide 106
Slide 106 text
Usability over
aesthetics
@HugoGiraudel
Slide 107
Slide 107 text
Do better
everyday
@HugoGiraudel
Slide 108
Slide 108 text
Think about
more people
@HugoGiraudel
Slide 109
Slide 109 text
Accept
differences
@HugoGiraudel
Slide 110
Slide 110 text
Design for
everyone
@HugoGiraudel
Slide 111
Slide 111 text
Thank you!
@HugoGiraudel
May 17th 2018