Accessibilité numérique 🇨🇭🇫🇷 : 3 actions concrètes pour rendre votre site plus inclusif et performant 🚀 avec Erika Hugel

WEBVTT

1
00:00:04.193 --> 00:00:06.114
Bienvenue dans Marketing Explorer,

2
00:00:06.674 --> 00:00:07.754
le rendez-vous du marketing,

3
00:00:07.774 --> 00:00:09.655
de la demande et de l'inbound marketing.

4
00:00:09.875 --> 00:00:10.275
L'inbound,

5
00:00:10.455 --> 00:00:13.696
c'est des techniques qui permettent d'atteindre la liberté en croissance digitale.

6
00:00:14.276 --> 00:00:15.936
Mais c'est aussi un mindset d'explorateur,

7
00:00:16.216 --> 00:00:17.317
d'apprentissage en continu.

8
00:00:18.077 --> 00:00:19.557
Si tu te reconnais dans cette description,

9
00:00:19.737 --> 00:00:20.178
abonne-toi,

10
00:00:20.398 --> 00:00:22.218
ce podcast va devenir ton meilleur allié.

11
00:00:22.838 --> 00:00:25.179
Ce podcast est rendu possible par Brand Your Expertise,

12
00:00:25.819 --> 00:00:28.640
l'agence marketing en personal branding que j'ai fondée pour

13
00:00:28.740 --> 00:00:31.863
permettre aux marques à devenir incontournables en deux heures par mois.

14
00:00:32.984 --> 00:00:36.948
Diffuser du contenu éducationnel sous forme de sujets qui touchent au cœur et aux neurones,

15
00:00:37.408 --> 00:00:41.412
transformer les experts en talents médiatisables et surtout performer.

16
00:00:41.932 --> 00:00:42.973
Si cette vision te parle,

17
00:00:43.073 --> 00:00:46.216
alors rendez-vous sur brandyourexpertise.ch.

18
00:00:46.817 --> 00:00:47.377
Bon podcast !

19
00:00:47.938 --> 00:00:54.524
Bienvenue sur le podcast de Marketing Explorer où les entrepreneurs suisses découvrent des solutions activables pour booster leur marketing de croissance.

20
00:00:55.072 --> 00:00:55.472
Aujourd'hui,

21
00:00:55.733 --> 00:00:57.514
nous parlons d'un sujet souvent négligé,

22
00:00:57.534 --> 00:00:58.095
mais crucial,

23
00:00:58.175 --> 00:00:59.556
l'accessibilité numérique.

24
00:00:59.736 --> 00:01:00.056
Ensemble,

25
00:01:00.076 --> 00:01:06.321
nous allons voir comment rendre votre site inclusif peut transformer votre business et vous diriger dans trois actions concrètes.

26
00:01:06.381 --> 00:01:06.641
Aujourd'hui,

27
00:01:06.641 --> 00:01:08.663
j'ai l'honneur d'être accompagné d'Erika Eugel.

28
00:01:08.803 --> 00:01:09.364
Bonjour Erika.

29
00:01:09.584 --> 00:01:10.304
Bonjour Fabien.

30
00:01:10.304 --> 00:01:10.565
Erika,

31
00:01:10.645 --> 00:01:13.267
c'est le couteau suisse digital à avoir dans sa team.

32
00:01:13.867 --> 00:01:14.908
Développement de sites web,

33
00:01:14.968 --> 00:01:15.769
d'applications,

34
00:01:15.969 --> 00:01:16.750
UX designer,

35
00:01:16.830 --> 00:01:19.092
elle rend les services numériques accessibles à tous.

36
00:01:19.312 --> 00:01:19.592
Alors

37
00:01:20.052 --> 00:01:22.855
Erika, tu es spécialiste de l'accessibilité numérique.

38
00:01:22.935 --> 00:01:23.675
Pour nos éditeurs,

39
00:01:23.735 --> 00:01:24.476
peux-tu expliquer...

40
00:01:24.616 --> 00:01:29.498
pourquoi c'est une priorité stratégique pour les entreprises au-delà de l'aspect éthique.

41
00:01:29.558 --> 00:01:30.539
Pourquoi c'est important ?

42
00:01:30.659 --> 00:01:32.920
Parce que ça concerne énormément de personnes.

43
00:01:33.200 --> 00:01:34.981
Il a été recensé que près de

44
00:01:35.641 --> 00:01:39.122
15% de la population mondiale vivait avec un handicap,

45
00:01:39.323 --> 00:01:43.744
que ça touche environ une personne sur quatre en France et une personne sur cinq en Suisse.

46
00:01:46.286 --> 00:01:46.586
Donc voilà,

47
00:01:46.646 --> 00:01:47.566
déjà ça touche.

48
00:01:47.566 --> 00:01:48.026
En Suisse,

49
00:01:48.326 --> 00:01:48.447
oui,

50
00:01:48.607 --> 00:01:48.947
tout de même.

51
00:01:49.647 --> 00:01:51.568
On ne peut pas se négliger à une personne sur cinq.

52
00:01:53.185 --> 00:01:53.845
de son trafic.

53
00:01:53.845 --> 00:01:54.386
Ce qu'on peut dire,

54
00:01:55.226 --> 00:01:58.469
c'est qu'il y a un élargissement de l'audience via cette accessibilité,

55
00:01:59.269 --> 00:02:07.155
puisqu'on va en toucher des personnes qui ont vraiment besoin de ce type de configuration pour ces applications ou sites web.

56
00:02:08.236 --> 00:02:09.276
On sait qu'au bas mot,

57
00:02:09.857 --> 00:02:11.378
ça représente 400 000 personnes,

58
00:02:11.398 --> 00:02:12.659
j'ai pu voir dans les statistiques,

59
00:02:13.459 --> 00:02:15.301
dans les données en Suisse,

60
00:02:15.401 --> 00:02:18.063
mais c'est vraiment la fourchette la plus basse,

61
00:02:18.103 --> 00:02:19.604
on parle de beaucoup plus de millions de personnes.

62
00:02:20.296 --> 00:02:20.757
en Suisse.

63
00:02:21.457 --> 00:02:21.997
Concrètement,

64
00:02:22.077 --> 00:02:27.381
par où commencer si on veut améliorer l'accessibilité de son site ?

65
00:02:27.941 --> 00:02:29.583
Pour les entrepreneurs qui nous écoutent,

66
00:02:29.943 --> 00:02:34.786
quelles sont les trois actions à mettre en place dès aujourd'hui pour rendre leur site plus accessible ?

67
00:02:35.006 --> 00:02:35.186
Déjà,

68
00:02:35.627 --> 00:02:36.707
il faut faire un audit.

69
00:02:37.188 --> 00:02:42.051
Il faut savoir où on se situe avec notre plateforme,

70
00:02:42.111 --> 00:02:42.551
finalement,

71
00:02:42.651 --> 00:02:45.974
et voir quels sont les points les plus bloquants.

72
00:02:46.334 --> 00:02:46.814
Et du coup,

73
00:02:47.615 --> 00:02:48.335
grâce à cet audit,

74
00:02:48.375 --> 00:02:49.356
il est possible de faire

75
00:02:50.012 --> 00:02:50.893
des améliorations,

76
00:02:51.713 --> 00:02:55.435
en termes notamment de navigation ou d'interaction avec les utilisateurs.

77
00:02:55.695 --> 00:02:56.436
Et après,

78
00:02:57.236 --> 00:02:57.836
une autre action,

79
00:02:57.916 --> 00:03:00.658
ce serait d'aller former,

80
00:03:00.898 --> 00:03:01.298
finalement,

81
00:03:01.358 --> 00:03:04.220
former les personnes en interne aussi.

82
00:03:04.720 --> 00:03:08.502
Parce qu'une fois qu'on sait ce qu'il faut faire ou ne pas faire,

83
00:03:09.523 --> 00:03:12.505
on pourra garantir l'accessibilité dans la durée,

84
00:03:13.045 --> 00:03:13.745
sur le long terme.

85
00:03:14.085 --> 00:03:15.026
Et plus concrètement,

86
00:03:15.566 --> 00:03:16.187
sur quel type,

87
00:03:16.187 --> 00:03:18.448
si on prenait trois actions sur lesquelles tu vas jouer ?

88
00:03:18.732 --> 00:03:26.558
Il faut s'assurer que les contrastes soient suffisants entre le texte et le fond pour qu'il soit suffisamment lisible pour le part tous.

89
00:03:27.539 --> 00:03:27.659
Ça,

90
00:03:27.739 --> 00:03:29.360
c'est pour les gens qui sont capables de voir.

91
00:03:29.580 --> 00:03:29.860
Il y a,

92
00:03:31.201 --> 00:03:33.303
donc on parlait de structurer l'information,

93
00:03:33.683 --> 00:03:34.804
c'est aussi important,

94
00:03:34.804 --> 00:03:44.812
mais ça c'est pour les gens qui plutôt ne voient pas du tout ou n'ont pas la capacité de se servir d'une souris comme la plupart des gens.

95
00:03:45.504 --> 00:03:46.765
Ils sont mis à naviguer au clavier,

96
00:03:46.825 --> 00:03:53.349
donc ça c'est un point aussi qu'on peut essayer de mettre en place et surtout à vérifier sur son site.

97
00:03:53.850 --> 00:04:02.135
C'est est-ce qu'il est possible de naviguer avec la touche tabulation de son clavier et d'accéder à tout le contenu de son site via cette tabulation.

98
00:04:02.255 --> 00:04:02.656
Après,

99
00:04:03.356 --> 00:04:07.439
au niveau des petits outils qui peuvent être utilisés,

100
00:04:07.979 --> 00:04:14.023
ce sont surtout des extensions pour Chrome ou Firefox par exemple,

101
00:04:14.164 --> 00:04:14.704
Eddings Map.

102
00:04:15.008 --> 00:04:21.451
qui permet de vérifier que le contenu est structuré de manière cohérente.

103
00:04:21.691 --> 00:04:31.756
Il y a l'outil classique de développement du navigateur qui permet de vérifier la façon dont est construit un élément HTML,

104
00:04:31.936 --> 00:04:40.360
s'il est construit de manière suffisamment adaptée pour tout ce qui va être lecteur d'écran.

105
00:04:40.908 --> 00:04:41.368
Justement,

106
00:04:41.548 --> 00:04:42.829
tu peux en parler un petit peu plus ?

107
00:04:42.869 --> 00:04:43.909
J'avais découvert ça avec toi,

108
00:04:44.029 --> 00:04:45.069
le lecteur d'écran.

109
00:04:47.050 --> 00:04:49.151
Je crois qu'il y a aussi des claviers peut-être un peu particuliers.

110
00:04:49.151 --> 00:04:51.231
Tu peux m'en dire un peu plus sur cette particularité ?

111
00:04:52.472 --> 00:04:53.552
C'est quoi un lecteur d'écran ?

112
00:04:53.852 --> 00:04:54.652
Un lecteur d'écran,

113
00:04:55.353 --> 00:05:00.294
c'est une application qu'on va lancer et qui va finalement lire le contenu d'une page.

114
00:05:00.714 --> 00:05:02.435
Il existe l'application NVDA.

115
00:05:02.915 --> 00:05:03.215
NVDA,

116
00:05:03.415 --> 00:05:04.936
c'est une application qu'on lance et qui,

117
00:05:05.296 --> 00:05:05.676
du coup...

118
00:05:07.132 --> 00:05:09.774
Quand on va tabuler avec son clavier,

119
00:05:10.494 --> 00:05:18.337
il va lire le contenu qui se trouve au moment où il pointe l'élément sur le navigateur.

120
00:05:19.137 --> 00:05:19.337
Après,

121
00:05:19.377 --> 00:05:20.558
ça fonctionne sur les navigateurs,

122
00:05:20.558 --> 00:05:21.879
mais ça fonctionne sur les applications,

123
00:05:22.559 --> 00:05:23.959
ça peut être lancé sur tout.

124
00:05:24.700 --> 00:05:32.603
D'où l'intérêt de ne pas seulement mettre en conformité les sites web,

125
00:05:33.103 --> 00:05:34.764
c'est aussi les applications.

126
00:05:35.272 --> 00:05:36.932
tout ce qui est numérique en définitive.

127
00:05:37.193 --> 00:05:41.974
Donc le système va lire les informations qui lui sont données,

128
00:05:42.214 --> 00:05:45.335
parce que ça va dépendre de comment sont construits les éléments.

129
00:05:46.235 --> 00:05:47.475
Que tu vois des quick wins,

130
00:05:47.815 --> 00:05:52.537
c'est conseil qui permet d'avoir beaucoup d'impact rapidement et peut-être aussi des pièges à éviter.

131
00:05:53.017 --> 00:05:55.838
C'est de renseigner les éléments visuels,

132
00:05:55.938 --> 00:05:57.478
donc les images notamment,

133
00:05:57.698 --> 00:06:03.039
mais pas si ce sont des images qui n'ont pas pour but d'apporter une information.

134
00:06:03.240 --> 00:06:04.920
Si ça reste des images...

135
00:06:05.100 --> 00:06:06.041
purement illustrative.

136
00:06:07.322 --> 00:06:13.687
Le lecteur d'écran n'a pas besoin de donner d'informations complémentaires parce que finalement,

137
00:06:13.707 --> 00:06:22.935
ça va polluer la lecture et ça va ajouter trop d'informations et ça va rendre la chose incompréhensible même si l'intention était bonne au départ,

138
00:06:22.995 --> 00:06:25.677
mais ça rajoute trop d'informations.

139
00:06:26.097 --> 00:06:31.061
Il est important de décrire ce qu'il y a sur une image,

140
00:06:31.221 --> 00:06:33.483
surtout si elle apporte une information particulière.

141
00:06:33.503 --> 00:06:33.984
Par exemple,

142
00:06:34.044 --> 00:06:34.404
c'est...

143
00:06:35.036 --> 00:06:37.458
Quand on a un graphique avec des...

144
00:06:38.419 --> 00:06:41.221
une infographie avec des données écrites,

145
00:06:42.182 --> 00:06:42.523
celle-ci,

146
00:06:43.323 --> 00:06:44.764
il est important de les décrire.

147
00:06:45.425 --> 00:06:45.665
Alors,

148
00:06:46.166 --> 00:06:46.766
une infographie,

149
00:06:46.766 --> 00:06:47.767
ça peut être très complexe,

150
00:06:47.827 --> 00:06:53.752
donc une option n'est pas forcément de rajouter que la description au niveau de l'image,

151
00:06:54.213 --> 00:06:55.534
mais de relier cette image,

152
00:06:56.374 --> 00:06:56.495
ça,

153
00:06:56.535 --> 00:06:57.555
ça se fait techniquement aussi,

154
00:06:57.836 --> 00:06:58.636
enfin au niveau du code,

155
00:06:59.077 --> 00:07:01.759
de relier cette image avec un contenu qui sera plus précis,

156
00:07:02.420 --> 00:07:02.740
qui est...

157
00:07:04.576 --> 00:07:14.401
mis à disposition de tout le monde et qui va décrire et expliquer comment lire cette infographie finalement.

158
00:07:14.801 --> 00:07:17.842
On va revenir un petit peu sur ce détail d'outils.

159
00:07:17.902 --> 00:07:19.523
Pour ceux qui veulent approfondir,

160
00:07:19.583 --> 00:07:25.746
quels outils ou ressources recommanderais-tu pour évaluer et améliorer l'accessibilité de leur site web ?

161
00:07:26.286 --> 00:07:29.307
J'utilise par exemple WK

162
00:07:29.727 --> 00:07:30.267
Contrast

163
00:07:30.848 --> 00:07:31.308
Checker.

164
00:07:31.996 --> 00:07:38.759
qui permet de vérifier les contrastes de manière automatisée qui sont utilisés sur le site.

165
00:07:38.839 --> 00:07:40.259
C'est intéressant comme outil,

166
00:07:40.840 --> 00:07:41.540
ça fonctionne bien,

167
00:07:41.800 --> 00:07:54.525
mais il est toujours nécessaire de vérifier la chose de manière plus précise par la suite parce que ça va remonter des erreurs qui n'en sont peut-être pas ou ça va mettre des choses qui ne sont peut-être pas justes non plus,

168
00:07:54.705 --> 00:07:56.846
pas suffisantes en termes de contraste.

169
00:07:57.446 --> 00:07:58.667
Alors il y a l'extension

170
00:07:59.007 --> 00:07:59.547
Wave aussi.

171
00:07:59.567 --> 00:08:00.548
Elle permet de...

172
00:08:01.208 --> 00:08:01.528
Pareil,

173
00:08:01.568 --> 00:08:09.394
de faire des tests automatisés qui vont porter sur plusieurs éléments.

174
00:08:09.874 --> 00:08:11.615
Il y a des recherches de contrastes,

175
00:08:11.675 --> 00:08:14.497
des informations au niveau de la structure aussi,

176
00:08:14.858 --> 00:08:18.140
des informations au niveau de tout ce qu'on appelle les ARIA labels,

177
00:08:18.500 --> 00:08:18.620
qui,

178
00:08:18.700 --> 00:08:18.900
ceux-là,

179
00:08:19.000 --> 00:08:22.123
sont vraiment à destination des lecteurs d'écran.

180
00:08:22.963 --> 00:08:24.404
Qu'en est-il des tests utilisateurs ?

181
00:08:24.845 --> 00:08:26.085
Au niveau des tests utilisateurs,

182
00:08:26.105 --> 00:08:29.268
c'est sûr qu'il est intéressant de proposer à des...

183
00:08:29.828 --> 00:08:45.821
des publics en situation de handicap de réaliser des tests sur une plateforme numérique parce qu'elle pourra certainement mieux voir les soucis qu'elle a l'habitude de rencontrer,

184
00:08:46.061 --> 00:08:49.184
elle saura pointer les éléments qui ne vont pas aussi assez rapidement.

185
00:08:49.524 --> 00:08:58.131
Les tests utilisateurs avec des personnes en situation de handicap sont importants parce qu'ils permettent de se rencontrer rapidement.

186
00:08:59.512 --> 00:09:01.453
des soucis qui sont liés à notre interface,

187
00:09:01.893 --> 00:09:03.214
de ce qui ne fonctionne pas.

188
00:09:04.755 --> 00:09:06.016
Chaque handicap est différent.

189
00:09:06.876 --> 00:09:07.076
Donc,

190
00:09:07.897 --> 00:09:15.501
il faudrait cibler de nombreux handicaps parce que finalement,

191
00:09:16.081 --> 00:09:17.322
l'accessibilité numérique,

192
00:09:17.722 --> 00:09:19.783
elle doit répondre à tout type de handicap.

193
00:09:20.023 --> 00:09:22.304
On ne les a pas évoqués encore,

194
00:09:22.384 --> 00:09:25.366
mais il y a des handicaps qui sont moteurs,

195
00:09:25.486 --> 00:09:27.487
il y a des handicaps qui sont visuels,

196
00:09:27.507 --> 00:09:28.808
il y a des handicaps qui sont...

197
00:09:29.108 --> 00:09:29.568
auditif,

198
00:09:30.729 --> 00:09:45.053
c'est aussi important quand on parle un peu moins et puis il y a des handicaps qui sont cognitifs donc les personnes par exemple dyslexiques qui ont besoin d'avoir le

199
00:09:45.153 --> 00:09:53.575
texte écrit de manière un peu simplifiée ou plus avec plus d'espace pour mieux faciliter la lecture et puis après la compréhension,

200
00:09:53.755 --> 00:09:55.896
donc voilà il y a beaucoup de choses à...

201
00:09:56.604 --> 00:09:57.505
à mettre en place.

202
00:09:57.725 --> 00:09:58.325
Pour résumer,

203
00:09:58.445 --> 00:09:59.666
rendre son site accessible,

204
00:09:59.786 --> 00:10:01.707
c'est non seulement un engagement éthique,

205
00:10:01.707 --> 00:10:03.368
ça peut être une obligation légale,

206
00:10:03.868 --> 00:10:04.769
ça a du sens,

207
00:10:05.349 --> 00:10:09.172
mais aussi c'est une stratégie gagnante pour élargir son audience et améliorer ses performances.

208
00:10:09.272 --> 00:10:09.572
Merci.

209
00:10:10.124 --> 00:10:10.464
Erika,

210
00:10:11.165 --> 00:10:12.366
pour ces insights précieux.

211
00:10:13.066 --> 00:10:14.667
Pour quel type de mission on peut faire appel à toi ?

212
00:10:15.568 --> 00:10:15.748
Alors,

213
00:10:15.768 --> 00:10:19.631
on peut faire appel à moi pour plusieurs missions.

214
00:10:20.551 --> 00:10:20.972
C'est vrai que,

215
00:10:21.352 --> 00:10:22.353
comme on le disait au début,

216
00:10:23.313 --> 00:10:29.698
je me définis un peu comme un couteau suisse parce que je peux vous accompagner du début à la fin de votre projet.

217
00:10:29.838 --> 00:10:33.961
Je pourrais vous aider à le concevoir de manière la plus accessible possible,

218
00:10:33.961 --> 00:10:35.562
que ce soit en termes de graphisme,

219
00:10:35.982 --> 00:10:37.743
qu'au niveau technique.

220
00:10:37.983 --> 00:10:38.164
Alors,

221
00:10:38.184 --> 00:10:38.604
je peux...

222
00:10:38.964 --> 00:10:39.965
réaliser des audits,

223
00:10:40.005 --> 00:10:49.071
faire le point sur l'état de votre site actuel ou vous aider à en concevoir un plus accessible à l'avenir du graphisme,

224
00:10:49.071 --> 00:10:49.732
du développement,

225
00:10:49.752 --> 00:10:50.432
des conseils.

226
00:10:51.793 --> 00:10:52.154
Très bien,

227
00:10:52.214 --> 00:10:52.514
Erika.

228
00:10:53.314 --> 00:10:53.635
De voilà,

229
00:10:53.735 --> 00:10:55.136
PME ou grande entreprise,

230
00:10:55.176 --> 00:10:58.218
si vous avez besoin d'une lanterne dans votre projet web,

231
00:10:59.159 --> 00:11:00.740
n'hésitez pas à contacter Erika.

232
00:11:00.860 --> 00:11:04.843
Je laisse le lien pour la contacter dans la description.

233
00:11:05.483 --> 00:11:06.644
Et je vous dis à bientôt.

234
00:11:07.105 --> 00:11:07.586
A bientôt,

235
00:11:07.767 --> 00:11:14.708
merci Fabien Si cet épisode t'a plu tu peux lui laisser 5 étoiles sur Rappel Podcast ou me partager A bientôt