Share
Embed
Slide 1
Slide 1 text
L’accessibilité au
delà des specs
@HugoGiraudel — Accessibility advocate @N26 (Berlin, Germany)
October 4th 2018
Slide 2
Slide 2 text
Qu’est-ce que
l’accessibilité ?
@HugoGiraudel
Slide 3
Slide 3 text
Un ensemble
de standards
@HugoGiraudel
Slide 4
Slide 4 text
Des interfaces
pour tous
@HugoGiraudel
Slide 5
Slide 5 text
Empathie
@HugoGiraudel
Slide 6
Slide 6 text
Ne pas être
égoïste
@HugoGiraudel
Slide 7
Slide 7 text
Design
inclusif
@HugoGiraudel
Slide 8
Slide 8 text
Retour
d’expérience
@HugoGiraudel
Slide 9
Slide 9 text
Handicaps &
déficiences
@HugoGiraudel
Slide 10
Slide 10 text
Visuels
@HugoGiraudel
Slide 11
Slide 11 text
Moteurs
@HugoGiraudel
Slide 12
Slide 12 text
Cognitifs
@HugoGiraudel
Slide 13
Slide 13 text
Auditifs
@HugoGiraudel
Slide 14
Slide 14 text
Vocaux
@HugoGiraudel
Slide 15
Slide 15 text
Contexte
@HugoGiraudel
Slide 16
Slide 16 text
Permanent
@HugoGiraudel
Slide 17
Slide 17 text
Temporaire
@HugoGiraudel
Slide 18
Slide 18 text
Situationnel
@HugoGiraudel
Slide 19
Slide 19 text
Déficiences
visuelles
@HugoGiraudel
Slide 20
Slide 20 text
“Mauvaise”
vue
@HugoGiraudel
Slide 21
Slide 21 text
@HugoGiraudel
Slide 22
Slide 22 text
Police large
(16 à 22pt)
@HugoGiraudel
Slide 23
Slide 23 text
Contraste
élevé
@HugoGiraudel
Slide 24
Slide 24 text
Avec
possibilité de
zoomer
@HugoGiraudel
Slide 25
Slide 25 text
Éviter les
contenus à
échelle fixe
@HugoGiraudel
Slide 26
Slide 26 text
Combiner
texte, couleurs
& formes
@HugoGiraudel
Slide 27
Slide 27 text
Daltonisme &
perte de
contraste
@HugoGiraudel
Slide 28
Slide 28 text
Contraste
élevé
@HugoGiraudel
Slide 29
Slide 29 text
Petite police =
contraste élevé
@HugoGiraudel
Slide 30
Slide 30 text
Tester vis-à-
vis des specs
@HugoGiraudel
Slide 31
Slide 31 text
@HugoGiraudel
Slide 32
Slide 32 text
Jamais la
couleur seule
@HugoGiraudel
Slide 33
Slide 33 text
Attention aux
éléments à
code couleur
@HugoGiraudel
Slide 34
Slide 34 text
Combiner
couleurs et
motifs
@HugoGiraudel
Slide 35
Slide 35 text
@HugoGiraudel
Slide 36
Slide 36 text
Cécité
@HugoGiraudel
Slide 37
Slide 37 text
Utilisation du
clavier
@HugoGiraudel
Slide 38
Slide 38 text
Flux de
contenu
cohérent
@HugoGiraudel
Slide 39
Slide 39 text
Pas de survols
critiques
@HugoGiraudel
Slide 40
Slide 40 text
Textes
alternatifs
@HugoGiraudel
Slide 41
Slide 41 text
Essayer un
lecteur
d’écran
@HugoGiraudel
Slide 42
Slide 42 text
Déficiences
motrices
@HugoGiraudel
Slide 43
Slide 43 text
Une seule
main
disponible
@HugoGiraudel
Slide 44
Slide 44 text
Handicaps
aux membres
supérieurs
@HugoGiraudel
Slide 45
Slide 45 text
Tendinites &
syndrome du
canal carpien
@HugoGiraudel
Slide 46
Slide 46 text
Tremblements
& Parkinson
@HugoGiraudel
Slide 47
Slide 47 text
Comment
faire ?
@HugoGiraudel
Slide 48
Slide 48 text
Boutons
en bas de
l’écran
@HugoGiraudel
Slide 49
Slide 49 text
@HugoGiraudel
Slide 50
Slide 50 text
Éviter le
multi-touch
@HugoGiraudel
Slide 51
Slide 51 text
Éviter les
gestes
répétitifs
@HugoGiraudel
Slide 52
Slide 52 text
Limiter le
nombre
d’actions
@HugoGiraudel
Slide 53
Slide 53 text
Être idulgent
avec la
précision
@HugoGiraudel
Slide 54
Slide 54 text
Tester avec
son autre
main
@HugoGiraudel
Slide 55
Slide 55 text
Clavier /
lecteur
d’écran
@HugoGiraudel
Slide 56
Slide 56 text
Déficiences
cognitives
@HugoGiraudel
Slide 57
Slide 57 text
Autisme
@HugoGiraudel
Slide 58
Slide 58 text
Mise en page
cohérente
@HugoGiraudel
Slide 59
Slide 59 text
Explicite &
simple
@HugoGiraudel
Slide 60
Slide 60 text
Éviter les
acronymes &
idiomes
@HugoGiraudel
Slide 61
Slide 61 text
Sous-titrer
les videos
@HugoGiraudel
Slide 62
Slide 62 text
Dyslexie
@HugoGiraudel
Slide 63
Slide 63 text
Utiliser une
police claire
@HugoGiraudel
Slide 64
Slide 64 text
~70 caractères
/ line
@HugoGiraudel
Slide 65
Slide 65 text
Hauteur de
ligne de ~1.5
@HugoGiraudel
Slide 66
Slide 66 text
Contraste
correct
@HugoGiraudel
Slide 67
Slide 67 text
Ferrer le
contenu
naturellement
@HugoGiraudel
Slide 68
Slide 68 text
Fournir
d’autres
moyens
@HugoGiraudel
Slide 69
Slide 69 text
Troubles
vestibulaires
@HugoGiraudel
Slide 70
Slide 70 text
Éviter la
parallax
@HugoGiraudel
Slide 71
Slide 71 text
Éviter le
scroll
automatique
@HugoGiraudel
Slide 72
Slide 72 text
Animations
subtiles
@HugoGiraudel
Slide 73
Slide 73 text
Désactiver les
animations
@HugoGiraudel
Slide 74
Slide 74 text
Troubles
déficitaires de
l’attention
@HugoGiraudel
Slide 75
Slide 75 text
Scénarios
d’utilisation
clairs
@HugoGiraudel
Slide 76
Slide 76 text
Éviter les
animations en
boucle
@HugoGiraudel
Slide 77
Slide 77 text
Anxiété
@HugoGiraudel
Slide 78
Slide 78 text
Éviter les
limites dans le
temps
@HugoGiraudel
Slide 79
Slide 79 text
Être clair et
encourageant
@HugoGiraudel
Slide 80
Slide 80 text
@HugoGiraudel
Slide 81
Slide 81 text
Permettre la
revue
@HugoGiraudel
Slide 82
Slide 82 text
@HugoGiraudel
Slide 83
Slide 83 text
Syndrome
post-
traumatique
@HugoGiraudel
Slide 84
Slide 84 text
Avertissements
de contenu
@HugoGiraudel
Slide 85
Slide 85 text
Soigner le ton
@HugoGiraudel
Slide 86
Slide 86 text
Éviter les
plaisanteries
@HugoGiraudel
Slide 87
Slide 87 text
Panel varié de
testeur·euse·s
@HugoGiraudel
Slide 88
Slide 88 text
Épilepsie
@HugoGiraudel
Slide 89
Slide 89 text
Éviter les
clignotements
@HugoGiraudel
Slide 90
Slide 90 text
Animer à la
demande
@HugoGiraudel
Slide 91
Slide 91 text
Risques de
crises
@HugoGiraudel
Slide 92
Slide 92 text
Déficiences
auditives
@HugoGiraudel
Slide 93
Slide 93 text
Environnement
bruyant
@HugoGiraudel
Slide 94
Slide 94 text
Otites &
infections
@HugoGiraudel
Slide 95
Slide 95 text
Faible
audition
@HugoGiraudel
Slide 96
Slide 96 text
Surdité
@HugoGiraudel
Slide 97
Slide 97 text
Comment
faire ?
@HugoGiraudel
Slide 98
Slide 98 text
Sous-titrer les
vidéos
@HugoGiraudel
Slide 99
Slide 99 text
Fournir
d’autres
moyens
@HugoGiraudel
Slide 100
Slide 100 text
Pour résumer
@HugoGiraudel
Slide 101
Slide 101 text
Structure et
mise en page
@HugoGiraudel
Slide 102
Slide 102 text
Contenu et
ton
@HugoGiraudel
Slide 103
Slide 103 text
Couleurs &
contraste
@HugoGiraudel
Slide 104
Slide 104 text
Fonctionnements
connus
@HugoGiraudel
Slide 105
Slide 105 text
Utilisation >
esthétique
@HugoGiraudel
Slide 106
Slide 106 text
Faire mieux
chaque jour
@HugoGiraudel
Slide 107
Slide 107 text
Penser à
davantage de
profils
@HugoGiraudel
Slide 108
Slide 108 text
Accepter les
differences
@HugoGiraudel
Slide 109
Slide 109 text
Concevoir
pour tout le
monde
@HugoGiraudel
Slide 110
Slide 110 text
Merci !
@HugoGiraudel
October 4th 2018