L’accessibilité est un sujet de plus en plus abordé dans le monde du web aujourd’hui. Grâce aux synthèses vocales (ou lecteurs d’écran) de plus en plus améliorées sur PC, Mac et smartphones, les malvoyants peuvent lire de plus en plus de choses sur un site internet. Les technologies s’améliorent, mais on ne peut en dire autant de tous les développeurs et intégrateurs.
Je vais ici évoquer principalement la déficience visuelle que je connais le mieux, mais d’autres handicaps sont également à prendre en compte : handicap mental, daltonisme, handicap moteur etc.
Quelques chiffres
On compte plus d’1,2 millions de personnes handicapées visuelles en France, auxquelles s’ajoutent les seniors dont la vue baisse au fil du temps. On compte également 3 millions de français daltoniens (exclusivement hommes puisque c’est une maladie qui concerne beaucoup plus les hommes que les femmes). On peut également compter les personnes qui ont des difficultés pour manier correctement la souris, celles qui ont des troubles mentaux tels que troubles de l’attention, autisme, les personnes malentendantes… Cela fait plusieurs millions de visiteurs potentiels ayant des problèmes pour naviguer correctement sur un site internet.
Quels éléments posent problème ?
Les images
Les images, comment les déficients visuels peuvent les voir ? Ils ne peuvent pas, mais on peut la leur décrire ! Le lecteur d’écran, à défaut de décrire l’image lui-même, va lire ce qui se trouve dans la balise “alt”. Vous pouvez donc vous permettre d’écrire dans votre code :
Les textes inclus dans les images (à la façon de ce logo justement) sont à proscrire également à moins qu’ils ne soient cités dans la balise alt.
Les vidéos et autres contenus animés
Les contenus animés par du Javascript sont souvent un cauchemar et une perte de temps pour les utilisateurs de synthèse vocale. Par exemple les slides qui défilent seuls font soit planter le logiciel, soit ils déroutent l’utilisateur, soit ils sont simplement illisibles. C’est également désagréable pour les personnes atteintes d’un trouble de l’attention qui seront distraits par les animations. Un bouton pour désactiver l’animation suffit la plupart du temps à résoudre le problème.
Attention également à ne pas mettre de défilements trop rapides qui pourraient empêcher les personnes atteintes de problèmes moteurs à cliquer dessus avant la fin du temps imparti. Les contrastes entre les textes et les images doivent être également bien définis et ne pas clignoter.
Les couleurs, contrastes et tailles
Les daltoniens et les personnes malvoyantes, si elles n’utilisent pas le lecteur d’écran, vont avoir du mal à lire les textes trop petits ou trop proches de leur couleur de fond.
Pour ce problème il existe un petit outil en ligne qui vous permet de trouver une couleur de texte garantie accessible en fonction de la couleur de votre fond et de votre texte :
Comment tester son site ?
Il existe plusieurs outils en ligne pour tester très facilement et de manière efficace un site. Mon préféré est Wave : hyper complet, il met en évidence tous les défauts qui pourraient gêner une personne qui utilise une synthèse vocale :
En savoir plus
Le sujet est vaste et les améliorations pour garantir une lisibilité de votre site par tous les utilisateurs sont presque infinies.
Je vous invite à lire l’article très intéressant d’Adam Silver concernant l’optimisation d’un site pour les personnes daltoniennes : cliquez ici !
