L’accessibilité est un sujet trop peu abordé dans le monde du web aujourd’hui. Et pourtant ! 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. Malheureusement, les synthèses s’adaptent mais on ne peut en dire autant de tous les développeurs et intégrateurs. Je vais aujourd’hui é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. Cela fait potentiellement plusieurs millions de visiteurs 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 :
Bien sûr 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. Un bouton pour activer ou 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 – jusque là la plupart des designers respectent ça.
Les couleurs
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 :
Les cartes de google map sont également difficiles à lire pour les malvoyants et certains daltoniens. Pour changer les couleurs d’un iframe de Google Map il existe un site permettant de jouer avec :
Comment tester son site ?
Il existe plusieurs outils en ligne pour tester très facilement et de manière efficace un site.
Check my colours
Check my color est un outil qui vérifie tous les contrastes de votre site pour vérifier leur compatibilité. Il met en évidence les erreurs de couleurs pour vous permettre d’améliorer votre site pour les malvoyants.
W3C validator
Le W3C validator va vous apporter un certain nombre d’informations concernant le bon fonctionnement du code de votre site. Il va mettre en valeur les erreurs et problèmes à résoudre dans le code HTML comme par exemple l’absence de balises alt.
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 !
Bonjour Candice, très intéressant ton article, je suis aussi sensible aux problèmes que rencontre les mal-voyants. Et c’est fou car je suis auxiliaire des aveugles à Lyon, tu en fait partie aussi ? Tu souhaites refaire leur site ou c’était juste un modèle ? Je suis également graphiste mais spécialisée dans l’impression et non le web, l’association aurait aussi besoin de refaire leur flyer ^^ ! Bonne journée. Morgane.
Bonjour Morgane !
L’exemple du site des auxiliaires des aveugles vient d’un meetup auquel j’ai participé en décembre dernier présenté par François Yon. Il a utilisé comme exemple d’utilisation de la synthèse vocale le site de son association. Voici le lien du meetup !
Ce meetup m’a permis de rédiger une partie de cet article en complétant mes connaissances.
Au plaisir de te rencontrer !
Candice