Aller au contenu principal

L’accessibilité et le design sur le web sont-ils réconciliables ?

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 million 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 ».

Logo de l'association sur un fond bleu portant le nom de l'association et, en stylisé, les silhouettes d'un non-voyant accompagné de son auxiliaire. Photo du code de l'image avec la balise alt remplie.

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 distraites 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 de 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 :

Capture d'écran du site ColorSafe

Tester votre palette de couleurs

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 :

Capture d'écran du site Wave qui a scanné le site de Wedgi

Tester votre site sur Wave

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 !

Photo de Candice Entressangle

A propos de l'autrice

Je suis Candice Entressangle, créatrice de site internet depuis près de 10 ans. J’aide les entrepreneurs à avoir un site dont ils sont fiers.

Voir d'autres articles

Wedgi.fr fait peau neuve !

WordPress, Prestashop ou Shopify : quelle solution choisir pour son site e-commerce ?

Créer une arborescence de site efficace : Les clés d’une structure bien pensée

Discutons de votre projet :

N’oubliez pas d’indiquer toutes les informations qui peuvent m’être utiles dans une demande de devis : lien du site, documents, questions, et autres détails sont les bienvenus !

Chers étudiants je ne peux malheureusement pas accueillir d’alternant ou de stagiaire actuellement.

Suivez-moi sur les réseaux

Vous êtes une agence ou un freelance :