Lorsqu’on souhaite réaliser un site web avec du contenu accessible à tous, aujourd’hui, on se met très rapidement à parler d’alternatives. Les maquettes graphiques, les besoins fonctionnels imposent certains choix qui posent parfois quelques problèmes d’accessibilité à certaines utilisatrices ou utilisateurs (voire à toutes et tous). Créer « un site alternatif pour les aveugles » serait une grossière erreur notamment parce que :
- ces personnes ne sont pas les seules concernées par la mise en accessibilité des contenus ;
- on sait très bien, et vous avez peut-être déjà rencontré le cas, que ce genre de site parallèle ne sera jamais maintenu à jour ou qu’on oubliera de le tester à chaque mise à jour de site (structure HTML/styles CSS).
On va donc préférer créer des alternatives uniquement là où il y en a besoin et au même endroit que la « chose non accessible ». Il existe différents types d’alternatives en fonction des contenus et de la façon dont ils sont affichés. Dans cette série d’articles, je vais me concentrer sur les alternatives textuelles.
Cela nous permettra également de faire le point sur l’usage des mots « balise » ou « attribut » car ce ne sont pas des synonymes. En effet, il peut porter à confusion et induire en erreur d’utiliser un terme pour un autre. Cet article de MDN bien utile permet de (ré)apprendre l’anatomie d’un élément HTML.
Il m’est impossible de prendre au sérieux des intégrateurs ou intégratrices qui me parlent de balises alt ou de balises title à tort et à travers au lieu de dire attribut. Imprégnez-vous bien de la documentation partagée ci-dessus ; le code HTML fait partie de notre métier !
Je vais m’appuyer sur les ressources du Référentiel Général d’Amélioration de l’Accessibilité (RGAA), référentiel français basé sur WCAG, qui permet d’auditer l’accessibilité des sites web.
Je ferai également appel à la spécification ARIA qui permet, dans le cas des alternatives, de donner plus de contexte aux éléments via des attributs HTML spécifiques. Cependant, ces attributs ARIA ne sont restitués que par les technologies d’assistance (outils qui permettent de faciliter la navigation aux utilisateurs et utilisatrices comme une plage braille ou un lecteur d’écran) ; ce n’est donc pas la réponse à tous les cas. De plus, ils sont à utiliser en connaissance de cause pour éviter de faire pire que mieux.
Note : j’ai créé un glossaire qui reprend les termes un peu techniques et les différentes abréviations. Je vous invite à vous y référer en cas de difficulté de compréhension ;-)
À qui peuvent bien servir les alternatives textuelles ?
Les alternatives aux contenus non accessibles peuvent servir à différentes personnes dans différentes situations. Voici quelques exemples (qui ne sont pas une liste exhaustive de tous les problèmes et de tous les handicaps) :
- les personnes aveugles ne verront pas les images ou les informations véhiculées par les couleurs ou les formes. Elles utilisent généralement un lecteur d’écran et/ou une plage braille. Ces technologies d’assistance interprètent le contenu grâce à la structure HTML sémantique du code source des pages web ;
- les personnes malvoyantes auront du mal à lire du texte incrusté dans une image (en zoomant, ça devient flou) ou des informations véhiculées par les couleurs ;
- les personnes daltoniennes auront du mal à comprendre des informations véhiculées par les couleurs uniquement (notamment dans des graphiques, par exemple) ;
- les personnes ayant un handicap cognitif peuvent avoir besoin d’alternative à des contenus complexes comme un graphique, par exemple ;
- les personnes sourdes ou malentendantes auront besoin d’alternatives aux contenus audio.
Les différents moyens d’écrire des alternatives textuelles selon les usages
Quand j’ai démarré cet article, je l’avais appelé le « petit monde des alternatives textuelles ». En écrivant les grandes lignes, j’ai bien vu que je me trompais. Ce monde est bien plus vaste. J’ai donc découpé cet article en plusieurs articles afin d’en faciliter la lecture et la navigation.
D’autres alternatives textuelles
Il existe d’autres cas où on peut avoir besoin d’alternative textuelle (ou même, un peu plus que ça) qui peut se trouver sous des formes différentes. Par exemple :
- pour une image complexe qui contient du texte (par exemple, un graphique) et qui nécessite une description détaillée : un texte disponible à proximité de l’image qui reprend le contenu de l’image ou un lien vers une page qui reprend son contenu ;
- pour une vidéo : une transcription textuelle, des sous-titres ;
- pour un numéro de téléphone : un formulaire de contact ou une adresse e-mail.