À l'ère de la numérisation, la question de l'accessibilité ne doit pas être négligée. Les « textes alternatifs » constituent un moyen de faciliter l'accès aux contenus Internet pour les personnes en situation de handicap. Ces textes sont conçus pour restituer le contenu d'un site web aux personnes souffrant de certains handicaps sous une forme qui leur soit compréhensible. Mais qu'est-ce qu'un texte alternatif exactement ? À qui s'adresse-t-il ? Et comment en créer un ?
Pour rendre les sites Web et leurs contenus accessibles à tous, les textes alternatifs, entre autres, jouent un rôle essentiel en facilitant l'accès aux personnes en situation de handicap. Ils fournissent des informations et décrivent les fonctionnalités aux personnes aveugles et malvoyantes, ainsi qu'aux personnes présentant des handicaps physiques ou cognitifs. Ils aident également à comprendre les graphiques, les photos et les éléments d'interface. Les lecteurs d'écran ou les lignes braille utilisent ces textes alternatifs et rendent ainsi ces éléments accessibles aux personnes en situation de handicap.
D'autre part, elles sont également utiles pour l'optimisation pour les moteurs de recherche. Les descriptions textuelles transmettent aux moteurs de recherche des informations sur une image. Cela permet d'améliorer la visibilité du site.
Comment créer des alternatives textuelles ?
La réponse à la question « Comment créer un texte alternatif ? » est très simple : il suffit d'insérer un texte alternatif dans le champ prévu à cet effet d'un élément auquel ce texte est associé. La plupart des développeurs utilisent pour cela ce qu'on appelle un CMS. L'abréviation CMS signifie « Content Management System » (système de gestion de contenu). Il s'agit d'un logiciel utilisé pour la création et la gestion de contenus web.
Le langage de programmation HTML peut également être utilisé à cette fin. C'est là qu'intervient l'attribut « alt », également appelé balise « alt ». Il est inséré à l'intérieur de la balise « img ». Le texte qui sera ensuite lu par les technologies d'assistance est saisi dans la partie interne de l'attribut « alt ».
Mais cela ne suffit pas. Il ne faut pas non plus oublier l'attribut « title », car certains lecteurs d'écran ne lisent pas la description de l'attribut « alt », mais celle de l'attribut « title ». Il est donc judicieux d'indiquer un texte identique pour ces deux balises. De plus, cela permet d'afficher le contenu sous forme d'information supplémentaire sur un élément lorsque l'on passe la souris dessus.
Il existe également l'attribut « aria ». Plus précisément, l'attribut « aria-label » ou encore l'attribut « aria-labelledby ». Ceux-ci sont utilisés pour ajouter des libellés aux boutons ou aux champs de formulaire.
Les différents types d'images
Dans un monde où le numérique occupe une place de plus en plus importante, il ne suffit pas de créer des alternatives textuelles. Il est bien plus efficace de décrire correctement les différents types d’images, car celles-ci ont des fonctions différentes. Mais il faut d’abord les identifier. Les descriptions sont inutiles si elles ne reflètent pas la fonction d’une image. La question se pose donc : quels sont les différents types d’images ? Et comment les décrire au mieux ?
Il convient tout d'abord de se familiariser avec les différences entre les différents types de graphiques. Pour cela, il est important de comprendre la finalité d'un graphique. On distingue généralement les graphiques informatifs, fonctionnels et décoratifs. Il existe par ailleurs ce que l'on appelle les « graphiques typographiques ». Dans ce cas, la description est très simple : il suffit de reprendre le texte qui apparaît dans le graphique.
Images informatives
Dans le cas des images informatives, le contenu visible d'un élément graphique est transmis par le biais de textes alternatifs. On veille alors à inclure les informations pertinentes pour le message véhiculé par l'image. La description d'un logo en est un exemple : elle décrit brièvement à quoi ressemble le logo et qui en est l'auteur.
Dans l'exemple suivant, une alternative textuelle est intégrée à un logo en HTML :
<img
src=« logo.jpg »
alt=« Le logo Eye-Able. Il représente un œil. »
title=« Le logo Eye-Able. Il représente un œil. »>
</img>
Ici, un fichier image est intégré au code HTML à l'aide de l'élément img, l'attribut src indiquant la source de l'image. La description de l'image est insérée entre guillemets dans les attributs alt et title. De cette manière, le contenu textuel « Le logo Eye-Able. Il représente un œil » est lu par le lecteur d'écran ou la ligne braille.
De cette manière, l'obstacle est levé et toutes les personnes qui utilisent des technologies d'assistance peuvent comprendre ce que représente ce graphique.
Graphiques
S'il s'agit toutefois d'un graphique, la décision doit toujours être prise au cas par cas. Cela dépend souvent de la nature du graphique et des informations qu'il contient. Si le graphique ne contient que peu d'informations, celles-ci peuvent être intégrées dans le texte alternatif. Par exemple : « Représente les résultats électoraux des partis sous forme de diagramme à barres. Parti A : 40 %, Parti B : 30 %, Parti C : 20 %, etc. ». Si, en revanche, le graphique représente quelque chose de plus complexe ou de plus long, il est recommandé d’intégrer les informations détaillées dans un texte qui suit. Le texte alternatif ne devrait alors mentionner que la nature et l’objectif du graphique. On pourrait en outre indiquer que la description plus détaillée suit plus bas. Prenons l’exemple d’un graphique présentant la population des Länder. Le contenu serait alors le suivant : « Présente la population des 16 Länder sous forme de diagramme à barres. Remarque : la description plus détaillée suit dans le texte ».
Images fonctionnelles
Nous allons maintenant nous intéresser aux images fonctionnelles. Il s'agit d'images comportant des liens. On les classe en trois catégories : les liens, les éléments ou les boutons. Dans les descriptions alternatives, on définit la fonction de l'image et non ce qu'elle représente. On indique plutôtvers oùmène le lien.
Voici un exemple en HTML d'une image liée :
<a href=“https://services.eye-able.com/“>
<img src=“logo.jpg“
alt=« Page d'accueil d'Eye-Able »
title=« Page d'accueil d'Eye-Able »
</img>
</a>
La balise a et l'attribut href sont utilisés en HTML pour créer un lien. Dans ce cas précis, le lien renvoie vers la page https://services.eye-able.com/. Dans l'élément img, on retrouve le logo d'Eye-Able, mais cette fois-ci, les attributs alt et title ne décrivent pas l'image, mais sa fonction. Ainsi, le contenu « Page d'accueil d'Eye-Able » est désormais lu par les technologies d'assistance.
Il en va de même pour les icônes. Par exemple, lorsqu’on utilise une disquette, l’apparence de l’icône n’a aucune importance pour la lecture par un lecteur d’écran, car elle symbolise la fonction d’enregistrement. Les icônes de recherche en sont un autre exemple. Que l’icône représente une loupe ou non n’a aucune importance. Ce qui est bien plus intéressant, c’est l’action qu’elle représente : elle symbolise une option de recherche ou le lancement d’une recherche.
Il en va de même pour les boutons. Un bouton représentant une flèche vers la droite ne devrait jamais comporter le texte alternatif « flèche vers la droite ». Pour une personne voyante, il est évident que cliquer dessus ouvre la page suivante, mais ce n’est pas le cas pour les personnes aveugles. En effet, grâce au lecteur d’écran, elles n’entendent que « flèche vers la droite ». Ce n’est pas suffisamment clair et ne permet pas de comprendre que la page suivante s’ouvre lorsque l’on clique sur le bouton. Il est donc plus judicieux d’utiliser comme texte alternatif « vers la page suivante » ou « passer à la page suivante ».
Tableaux décoratifs
Les images décoratives constituent un autre type d'éléments graphiques. Elles sont utilisées pour embellir un site web. La procédure à suivre pour créer des textes alternatifs est ici très simple : il suffit de laisser le contenu du texte alternatif vide. Il est important que l'attribut du texte alternatif soit néanmoins présent. Seul le contenu textuel reste vide. Ainsi, le lecteur d'écran ignore cette image non pertinente lors de la lecture.
Comment rédiger de bonnes descriptions alternatives ?
Maintenant que les différents types d'images ont été présentés, une seule question se pose encore : « Comment rédiger des textes alternatifs optimaux ? » Lorsque l'on connaît toutes ces subtilités et ces différences entre les images, il ne reste plus que quelques règles à respecter. Les conseils suivants peuvent vous y aider :
- Début de l'alternative textuelle :
Il faut veiller ici à éviter toute répétition. Le début ne doit donc pas commencer par : « L'image… », « Le graphique… », « La photo… » ou « Le lien… ». Les lecteurs d'écran détectent et annoncent de toute façon s'il s'agit d'un graphique ou d'un lien. Il convient donc de s'abstenir d'utiliser ces expressions.
Longueur des textes :
Il n'y a pas de règle fixe concernant la longueur d'un texte alternatif. Cependant, une à deux phrases devraient suffire pour décrire un élément graphique. L'idéal est de ne pas dépasser 80 caractères. Pourquoi 80 ? Les personnes aveugles lisent souvent ces textes à l'aide d'une ligne braille. Les lignes braille peuvent afficher entre 40 et 80 caractères à la fois. Pour des raisons de clarté, il est donc conseillé de respecter cette limite. Bien sûr, un texte peut également être plus long. Il ne devrait toutefois pas dépasser 120 caractères.
Orthographe et ponctuation :
Il convient de veiller à une orthographe correcte. Si un mot contient une faute d'orthographe, cela peut rapidement prêter à confusion, car un lecteur d'écran lit exactement ce qui est indiqué dans le texte alternatif. De même, une grammaire correcte joue un rôle important dans la compréhension des images. Mais une ponctuation correcte est également essentielle. En effet, des signes de ponctuation incorrects ou manquants compliquent la compréhension de l'image par l'auditeur. C'est pourquoi il convient d'effectuer une vérification orthographique et grammaticale avant d'insérer le contenu textuel.
Droits d'auteur :
De nombreuses images comportent une mention de droits d'auteur. Mais cette information est-elle importante pour la compréhension d'une image ? La réponse est : non ! Elle n'a aucune utilité pour rédiger correctement les alternatives textuelles, car une description d'image ne doit contenir que l'essentiel. C'est pourquoi il convient de ne pas la mentionner.
Commentaires :
On peut rapidement déterminer si la description de l'image est réussie. Mais comment ? Il est facile de répondre à cette question. Cela ne demande pas beaucoup d'efforts. Un bref retour d’une personne aveugle ou malvoyante permet de savoir si le contenu du texte a été formulé de manière pertinente. Mais tout le monde ne connaît pas forcément une personne ayant une déficience visuelle. Il existe d’autres solutions. Toute personne n’ayant pas encore vu l’image peut être interrogée à ce sujet. Cela peut bien sûr se faire par écrit, mais aussi par téléphone. Dès qu’un retour « positif » est reçu, la description est réussie.
Que se passe-t-il exactement lorsque les textes alternatifs manquent ?
L'absence de textes alternatifs pour les images peut s'avérer particulièrement gênante pour les utilisateurs aveugles. En effet, cela les empêcherait de prendre connaissance du contenu de l'image. Dans un tel cas, le lecteur d'écran ne ferait que lire le nom du fichier, par exemple : « img123.jpg ». Une telle description n'aiderait personne. Les développeurs devraient donc toujours veiller à utiliser du contenu textuel. Il est toutefois également important de connaître les différences entre les différents types d’images et de graphiques afin de pouvoir les décrire de manière pertinente. Les technologies d’assistance peuvent alors les restituer à l’aide des textes alternatifs. Cela contribue ainsi à rendre Internet un peu plus accessible à tous.
