À l'heure de la numérisation, le thème de l'accessibilité ne doit pas être négligé. Les textes dits alternatifs constituent une possibilité de faciliter l'accès aux contenus sur Internet pour les personnes souffrant de handicaps. Ces textes sont conçus de manière à restituer le contenu d'un site Web aux personnes souffrant de certains handicaps sous une forme compréhensible pour elles. Mais : qu'est-ce qu'un tel texte alternatif exactement ? Qui en a besoin ? Et comment en créer un ?
Pour rendre les sites et les contenus web accessibles, les textes alternatifs, entre autres, sont très importants pour faciliter l'accès aux personnes handicapées. Ils fournissent des informations et des fonctions aux personnes aveugles et malvoyantes ainsi qu'aux personnes souffrant de handicaps physiques ou cognitifs. Ils aident également à comprendre les graphiques, les photos et les éléments de commande. Les lecteurs d'écran ou les afficheurs braille utilisent les alternatives textuelles et rendent ainsi ces éléments accessibles aux personnes handicapées.
D'autre part, elles sont également utiles pour l'optimisation des moteurs de recherche. Les alternatives textuelles transmettent aux moteurs de recherche les informations relatives à une image. Cela permet d'améliorer la capacité de recherche.
Comment créer des alternatives de texte ?
La réponse à la question de savoir comment créer une alternative textuelle est très simple : il suffit pour cela d'insérer un texte alternatif dans la zone correspondante d'un élément auquel un tel texte est attribué. La plupart des développeurs appliquent cette méthode dans ce que l'on appelle un CMS. L'abréviation CMS signifie Content Management System. 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é à cet effet. C'est là qu'intervient l'attribut alt ou aussi appelé alt-Tag . Il y est inséré à l'intérieur de la balise img. C'est dans la zone intérieure de l'attribut alt que l'on écrit le texte qui sera ensuite édité via les technologies d'assistance.
Mais cela ne suffit pas. Il ne faut pas non plus oublier l'attribut title, car il existe des lecteurs d'écran qui 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 les deux balises. En outre, cela a également pour fonction d'afficher le contenu comme information supplémentaire sur un élément lorsque l'on passe la souris sur la zone.
En outre, il existe encore l'attribut aria. Plus précisément l'attribut aria-label ou encore l'attribut aria-labelledby. Ceux-ci sont utilisés pour étiqueter les boutons ou les champs de formulaire.
Les différents types d'images
Dans un monde où nous nous numérisons de plus en plus, 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 ils se distinguent également par leur fonction. Or, celles-ci doivent d'abord être reconnues. Les descriptions sont inutiles si elles ne peuvent pas rendre compte de 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 ?
Tout d'abord, il convient de se familiariser avec les différences entre les différents types de graphiques. Pour cela, il est important de comprendre le sens et l'objectif d'un graphique. En général, on distingue les graphiques informatifs, fonctionnels et décoratifs. Par ailleurs, il existe aussi ce que l'on appelle les graphiques. Ici, la description est très simple, il suffit de reprendre le texte que l'on voit dans le graphique.
Images informatives
Dans le cas des images informatives, le contenu visible d'un graphique est transmis par des textes alternatifs. L'accent est mis sur les informations qui sont pertinentes pour le message de l'image. La description d'un logo en est un exemple. On y décrit brièvement à quoi ressemble le logo et qui en est l'auteur.
Dans l'exemple ci-dessous, une alternative textuelle est intégrée dans un logo en HTML :
<img
src="logo.jpg"
alt="Le logo de Eye-Able . Il représente un œil".
title="Le logo de Eye-Able . Il représente un œil" >.
</img>
Ici, un fichier image est intégré au 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" via le lecteur d'écran ou la ligne braille.
De cette manière, la barrière est supprimée et toutes les personnes qui utilisent les technologies d'assistance peuvent comprendre ce qui est présenté dans ce graphique.
Diagrammes
Toutefois, s'il s'agit d'un diagramme, cela doit toujours être décidé au cas par cas. Cela dépend souvent du type et des informations contenues. Si le graphique ne contient que peu d'informations, celles-ci peuvent être incluses dans le texte alternatif. Par exemple : "Représente les résultats électoraux des partis dans un diagramme à barres. Parti A : 40%, parti B : 30%, parti C : 20%, etc.". Toutefois, si quelque chose de plus complexe ou de plus long est représenté, il est recommandé d'insérer les informations détaillées dans un texte ultérieur. Le texte alternatif ne devrait alors indiquer que le type et l'objectif du diagramme. En outre, il pourrait être indiqué que la description plus détaillée suit plus loin. Un exemple serait un graphique représentant le nombre d'habitants des Länder. Le contenu serait alors le suivant : "Représente le nombre d'habitants des 16 Länder dans un diagramme à barres. Remarque : la description plus détaillée se trouve dans le texte".
Images fonctionnelles
Ensuite, nous considérons les images fonctionnelles. Ce sont des graphiques liés. On les divise en liens, éléments ou boutons. Dans les alternatives textuelles, on définit la fonction et non pas ce qui doit être reconnu. Au lieu de cela, on indique où le lien mène.
Voici un tel exemple en HTML pour un graphique lié :
<a href=“https://eye-able.com/“>
<img src=“logo.jpg“
alt="Page d'accueil de Eye-Able"
title="Page d'accueil de Eye-Able"
</img>
</a>
L'attribut a-Tag et l'attribut href sont utilisés en HTML pour créer un lien. Dans ce cas, le lien est créé vers la page https://eye-able.com/. Dans l'élément img, nous voyons à nouveau le logo de Eye-Able, mais cette fois, les attributs alt et title ne décrivent pas le graphique, mais la fonction. Ainsi, le contenu "Page d'accueil de Eye-Able" est maintenant émis via les technologies d'assistance.
Il en va de même pour les symboles. Par exemple, si une disquette est utilisée, l'apparence de l'icône n'est pas pertinente pour la sortie avec un lecteur d'écran, car elle symbolise la fonction de stockage. Les icônes de recherche en sont un autre exemple. Le fait qu'il s'agisse d'une loupe n'a aucune importance. Ce qui est beaucoup plus intéressant, c'est l'action qui se cache derrière. L'action représente une option de recherche ou le début 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 être accompagné de la mention "Flèche vers la droite" dans le texte alternatif. Pour une personne voyante, il est clair que la page suivante s'ouvre lorsqu'on clique dessus, mais pas pour les personnes aveugles. En effet, elles n'entendent que "flèche vers la droite" dans la synthèse vocale. Ce n'est pas assez clair ou ne permet pas de voir que la page suivante s'ouvre lorsque l'on appuie sur le bouton. C'est pourquoi il est plus judicieux d'accompagner ces textes alternatifs de "passer à la page suivante" ou de "tourner la page".
Images décoratives
Les images décoratives sont un autre type de graphiques. Elles sont utilisées pour décorer un site web. La procédure de création de textes alternatifs est ici très simple. Ici, le contenu du texte alternatif est laissé vide. Il est important que l'attribut des textes alternatifs soit tout de même présent. Seul le contenu du texte reste ici libre. Cela a pour conséquence que le lecteur d'écran saute ce graphique non pertinent lors de la sortie.
Comment écrire de bons textes alternatifs ?
Maintenant que les différents visuels ont été présentés, il ne reste plus qu'une question : "Comment formuler des textes alternatifs optimaux ?" Une fois que l'on connaît toutes ces subtilités et différences entre les images, il ne reste plus que quelques règles à respecter. Les indications suivantes peuvent y aider :
- Début d'une alternative textuelle :
Il faut veiller ici à ne pas faire de doublons. Le début ne doit donc pas commencer par : "L'image ...", "Le graphique ...", "La photo ..." ou "Le lien" .... Les lecteurs d'écran reconnaissent et indiquent de toute façon s'il s'agit d'un graphique ou d'un lien. Il est donc préférable d'y renoncer.
longueur des textes :
La longueur d'un texte alternatif n'est pas définie. Toutefois, une ou deux phrases devraient suffire pour décrire un graphique. L'idéal est de 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 s'en tenir à cette limite. Bien entendu, un texte peut être plus long. Il ne devrait toutefois pas dépasser 120 caractères.
Orthographe et ponctuation :
Il faut veiller à ce que l'orthographe soit correcte. Si un mot contient une faute d'orthographe, il peut rapidement y avoir des ambiguïtés, car un lecteur d'écran affiche exactement ce qui est consigné dans le texte alternatif. De même, la grammaire correcte joue un rôle important pour la compréhension des images. Mais la ponctuation correcte est également importante. Des signes de ponctuation erronés ou manquants rendent en effet difficile la compréhension du graphique par les auditeurs. C'est pourquoi il convient de vérifier l'orthographe et la grammaire avant d'insérer le contenu du texte.
Droits d'auteur :
De nombreux graphiques possèdent un certificat de droit d'auteur. Mais cette information est-elle importante pour la compréhension d'une image ? La réponse est non ! Pour une bonne formulation des alternatives textuelles, cette information n'est pas intéressante, car une description d'image ne contient que l'essentiel. C'est pourquoi cette information devrait être omise.
Réaction :
Il est facile de déterminer si la description de l'image est réussie. Mais comment faire ? Il est facile de répondre à cette question. Cela ne demande pas beaucoup d'efforts. Un bref feedback d'une personne aveugle ou malvoyante permet de savoir si le contenu du texte a été formulé de manière judicieuse. Mais tout le monde ne connaît pas forcément une personne dont la vue est limitée. Il est possible de résoudre ce problème d'une autre manière. Toute personne qui n'a pas encore vu l'image peut être interrogée ici. Cela peut bien sûr se faire ici par écrit, mais aussi par téléphone. Dès qu'il y a ici un retour "positif", la description est réussie.
Que se passe-t-il en l'absence de textes alternatifs ?
L'absence de texte alternatif pour les images peut être particulièrement gênante pour les utilisateurs aveugles. En effet, cela les empêcherait de comprendre le contenu de l'image. En même temps, le lecteur d'écran n'afficherait dans ce cas que le nom du fichier, comme par exemple : "img123.jpg". Une telle description n'aiderait personne. Les développeurs devraient donc toujours veiller à utiliser des contenus textuels. Mais il est également important de connaître les différences afin de pouvoir décrire les images et les graphiques de manière pertinente. Les technologies d'assistance peuvent alors les reproduire à l'aide des alternatives textuelles. Ainsi, l'Internet devient un peu plus accessible pour tous.
