Logo des Enovateurs
Des malvoyants par millions : leur inclusion sur le Web, ce n'est pas en option

Des malvoyants par millions : leur inclusion sur le Web, ce n'est pas en option

Se mettre, un instant, à la place d'une personne souffrant de troubles de la vision... et s'imaginer utiliser son smartphone, ou lire un article en ligne. Cette expérience illustre la nécessité de rendre les contenus du Web plus accessibles. Quelques bonnes pratiques peuvent transformer l'expérience numérique des mal- et non-voyant·es.

En 2019, l'OMS a publié un rapport consacré aux troubles de la vision : selon ses estimations, plus de 2,2 milliards de personnes dans le monde sont malvoyantes ou aveugles. Un quart des habitants de la planète souffre donc d'une déficience visuelle plus ou moins sévère.

Les outils existants : loupes et lecteurs d'écran

Certain·es utilisateurs·trices se servent d'un système de loupe pour agrandir les informations qui s'affichent à l'écran. Il peut s'agir d'une vraie loupe, ou de l'outil intégré dans le navigateur.

Barre d'adresse du navigateur Firefox avec un zoom de 200%
Le raccourci clavier pour utiliser le zoom : "Ctrl" et "+" (à renouveler autant de fois que nécessaire)
Affichage par défaut sur un navigateur
Zoom par défaut
Affichage d'une page avec un zoom à 300%
Zoom : 300%

D'autres personnes se servent de lecteurs d'écran. Ces programmes lisent à voix haute le texte qui s'affiche sur une page donnée. Ces outils d'assistance permettent donc de savoir où se trouve chaque élément sur une page, et d'interagir avec eux. La navigation s'effectue à l'aide d'un clavier au lieu d'une souris.

Des bonnes pratiques pour rendre le Web plus accessible

Cette vidéo montre l'importance d'éléments parfois négligés lorsqu'on crée des contenus pour le Web.

Les textes alternatifs des images

Lorsqu'on publie une image sur un site ou un réseau social, il est possible de remplir un champ intitulé "Texte alternatif". Celui-ci permet de décrire ce qui se trouve sur le visuel choisi. Ce texte sera lu par les lecteurs d'écran, rendant ainsi accessible ce contenu visuel à tous les usager·es.

Le champ de texte alternatif de Linkedin
Texte alternatif LinkedIn
Le champ de texte alternatif de Instagram
Texte alternatif Instagram
  • Renseigner pour chaque image un texte alternatif suffisamment détaillé.
  • Par exemple : "deux adolescents jouent au ballon sur la pelouse".

Les différents niveaux de titres

Structurant un texte avec soin permet de se représenter plus facilement l'organisation des informations. Un lecteur d'écran sélectionne les grands titres, puis les sous-titres (etc...) pour identifier rapidement le contenu pertinent. Dès l'écriture d'un article, il est donc possible de rendre la navigation plus simple pour tou·tes.

  • Insérer autant de titres (H1, H2...) que nécessaire et créer des paragraphes bien délimités.

Le texte des liens

Grâce aux lecteurs d'écran, les personnes mal- et non-voyantes peuvent naviguer sur les différents liens d'une page à l'aide de leur clavier. Problème : si le texte de tous les liens est identique (par exemple, "cliquez ici"), difficile de se repérer ou de savoir sur quelle page ils renvoient. En étant le plus explicite possible sur le texte des liens, le site devient plus compréhensible.

Exemple d'un lien mal configuré sur l'un des sites du gouvernement
Contre-exemple sur cet article dédié... à l'accessibilité (source : www.gouvernement.fr/action/l-accessibilite)

D'autres éléments fréquemment présents sur le sites et applications, comme les formulaires de contact et les tableaux, méritent eux aussi toute notre attention. L'objectif : les rendre intelligibles pour tous les visiteurs.

A noter : tout ce travail facilite aussi le référencement des contenus, puisque les robots qui indexent les sites sont dépourvus de vision.

[Photo de couverture : Tyler Lastovich]

Louise PASTOURET
Louise PASTOURET
Un numérique accessible à tout·es qui n'épuise pas les ressources de la planète : un enjeu d'avenir sur lequel nous pouvons agir dès à présent. Ma mission : trouver les initiatives responsables, éthiques et inclusives qui font bouger les choses dans le bon sens.

Commentaires

Ecrire un commentaire

Sobriété

Passez à l'étape supérieure :

Découvrez nos tutos !

Chargement d'un nouvel article...

Les Enovateurs

Rejoignez notre communauté de lecteurs

Retrouvez-nous aussi sur

linkedin