Comment une lecture accessible des images est possible !

À l'heure de la numérisation, la question de l'accessibilité ne doit pas être négligée. L'un des moyens de faciliter l'accès des personnes handicapées au contenu de l'internet est ce que l'on appelle les textes alternatifs. Ces textes sont conçus pour fournir aux personnes souffrant de certains handicaps le contenu d'un site web sous une forme qu'elles peuvent comprendre. Mais qu'est-ce qu'un texte alternatif ? Qu'est-ce qu'un texte alternatif ? Qui en a besoin ? Et comment en créer un ?

Pour rendre les sites web et leur contenu accessibles, les textes alternatifs, entre autres, sont très importants pour faciliter l'accès des personnes handicapées. Ils transmettent des informations et des fonctions aux aveugles et aux malvoyants, ainsi qu'aux personnes souffrant de handicaps physiques ou cognitifs. Ils aident également à comprendre les graphiques, les photos et les commandes. Les lecteurs d'écran ou les afficheurs braille utilisent les alternatives textuelles, ce qui rend 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 transfèrent les informations relatives à une image aux moteurs de recherche. Cela permet d'améliorer la facilité de recherche.

Comment créer des alternatives textuelles ?

La réponse à la question de savoir comment créer un texte alternatif est assez simple : il suffit d'insérer un texte alternatif dans la zone appropriée d'un élément qui sera doté d'un tel texte. 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 (système de gestion de contenu). Il s'agit d'un logiciel utilisé pour la création et la gestion de contenu web.

Le langage de programmation HTML peut également être utilisé à cette fin. C'est là qu'entre en jeu l'attribut alt, également appelé balise alt. Il est inséré dans la balise img. Le texte est écrit dans la zone intérieure de l'attribut alt, qui est ensuite transmis via les technologies d'assistance.

Cependant, cela ne suffit pas. L'attribut title ne doit pas non plus être oublié, car certains lecteurs d'écran ne lisent pas la description de l'attribut alt, mais celle de l'attribut title. Il est donc judicieux de spécifier un texte identique pour les deux balises. En outre, cela permet d'afficher le contenu en tant qu'information supplémentaire sur un élément lorsque la souris passe sur la zone.

En outre, il existe l'attribut aria. Plus précisément, l'attribut aria-label ou encore l'attribut aria-labelledby. Ces attributs sont utilisés pour étiqueter les boutons ou les champs de formulaire.

Les différents types d'images

Dans un monde de plus en plus numérique, il ne suffit pas de créer des alternatives textuelles. Il est beaucoup plus efficace de décrire correctement les différents types d'images, qui diffèrent également par leur fonction. Mais il faut d'abord les reconnaître. Les descriptions sont inutiles si elles ne reflètent pas la fonction d'une image. La question se pose donc : Quels sont les types d'images ? Et quelle est la meilleure façon de les décrire ?

Tout d'abord, vous devez vous familiariser avec les différences entre les divers types de graphiques. Il est important de comprendre l'objectif d'un graphique. En général, on distingue les graphiques informatifs, fonctionnels et décoratifs. En outre, il existe ce que l'on appelle les caractères typographiques. Ici, la description est très simple, il suffit de reprendre le texte qui figure dans le diagramme.

Images informatives

Dans le cas des images informatives, le contenu visible d'un graphique est transmis par des textes alternatifs. L'attention est portée sur les informations pertinentes pour le message de l'image. La description d'un logo en est un exemple. Il s'agit d'une brève description de l'aspect du logo et de son auteur.

Dans l'exemple suivant, un texte alternatif est intégré dans un logo en HTML :

<img

src= "logo.jpg"

alt="Le logo d'Eye-Able. Il représente un œil."

title="Le logo d'Eye-Able. Il représente un œil.">

</img>

Ici, un fichier image est incorporé dans le code HTML à l'aide de l'élément img, où l'attribut src spécifie la source de l'image. La description du graphique 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 restitué par le lecteur d'écran ou l'afficheur braille.

De cette manière, la barrière est levée et toutes les personnes qui utilisent des technologies d'assistance peuvent comprendre ce que l'on voit dans ce graphique.

Diagrammes

Toutefois, s'il s'agit d'un diagramme, la décision doit toujours être prise au cas par cas. Cela dépend souvent du type et de l'information contenue. Si le graphique ne contient que peu d'informations, celles-ci peuvent être incluses dans le texte alternatif. Par exemple, "Présente les résultats électoraux des partis dans un diagramme à barres. Parti A : 40%, Parti B : 30%, Parti C : 20%, et ainsi de suite". Toutefois, s'il s'agit d'une présentation plus complexe ou plus longue, il est recommandé d'inclure 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 ci-dessous. Un exemple serait un diagramme montrant les chiffres de la population des États allemands. Le contenu serait alors le suivant : "Représente les chiffres de population des 16 États fédéraux dans un diagramme à barres. Note : La description plus détaillée suit dans le texte".

Images fonctionnelles

Considérons ensuite les images fonctionnelles. Il s'agit de graphiques liés. Elles sont divisées en liens, éléments ou boutons. Dans les alternatives textuelles, vous définissez la fonction et non ce qu'il faut reconnaître. En revanche, vous indiquez où le lien mène.

Voici un 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'étiquette a 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 d'Eye-Able, mais cette fois, les attributs alt et title décrivent la fonction plutôt que le graphique. Ainsi, le contenu "Page d'accueil d'Eye-Able" est maintenant restitué par 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 sauvegarde. Les icônes de recherche constituent un autre exemple. Qu'il s'agisse d'une loupe ou non n'a pas d'importance. Ce qui est beaucoup plus intéressant, c'est l'action qui se cache derrière. Elle représente une option de recherche ou le début d'une recherche.

La situation est similaire pour les boutons. Un bouton qui représente une flèche pointant vers la droite ne devrait jamais avoir "flèche pointant vers la droite" dans le texte alternatif. Pour une personne voyante, il est clair que la page suivante s'ouvre lorsque l'on clique dessus, mais ce n'est pas le cas pour les personnes aveugles. En effet, elles n'entendent "flèche vers la droite" que par le biais de la synthèse vocale. Cela n'est pas assez clair ou ne montre pas que la page suivante s'ouvre lorsque l'on appuie sur le bouton. Il est donc plus logique de proposer ces textes alternatifs avec "aller à la page suivante" ou "continuer à faire défiler".

Images décoratives

Les images décoratives constituent un autre type de graphique. Elles sont utilisées pour décorer une page web. La procédure de création de textes alternatifs est très simple. Le contenu du texte alternatif est laissé vide. Il est important que l'attribut du texte alternatif soit toujours présent. Seul le contenu du texte est laissé vide. Cela a pour conséquence que le lecteur d'écran ne tient pas compte de ce graphique non pertinent dans la sortie.

Comment rédiger de bons textes alternatifs ?

Maintenant que les différents graphiques ont été présentés, il ne reste plus qu'une seule question : "Comment formuler des textes alternatifs optimaux ?" Une fois que l'on connaît toutes ces subtilités et différences des images, il n'y a plus que quelques règles à suivre. Les conseils suivants peuvent vous aider :

1. Début d'un texte alternatif :

   Il faut veiller à ce qu'il n'y ait pas de doublons. Le début ne doit donc pas commencer par : "L'image ...", "Le graphique ...", "La photo ..." ou "Le lien" .... Le fait qu'il s'agisse d'un graphique ou d'un lien est de toute façon reconnu et restitué par les lecteurs d'écran. Il convient donc d'y renoncer.

2. Longueur des textes :

   La longueur du texte alternatif n'est pas précisée. Toutefois, une ou deux phrases devraient suffire pour la description d'un graphique. La longueur idéale est de 80 caractères. Pourquoi 80 caractères ? Les aveugles lisent souvent ces textes à l'aide d'une plage braille. Les plages braille peuvent produire 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. Toutefois, il ne doit pas dépasser 120 caractères.

3. Orthographe et ponctuation :

   Il faut veiller à ce que l'orthographe soit correcte. Si un mot contient une faute d'orthographe, cela peut rapidement conduire à une ambiguïté, puisqu'un lecteur d'écran restitue exactement ce qui est stocké 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 importante. Une ponctuation incorrecte ou manquante rend difficile la compréhension du graphique par l'auditeur. C'est pourquoi il convient de vérifier l'orthographe et la grammaire avant d'insérer le contenu textuel.

4. Droits d'auteur :

   De nombreux graphiques comportent une mention de copyright. Mais cette information est-elle importante pour comprendre une image ? La réponse est oui : Non ! Pour une bonne formulation des alternatives textuelles, ces informations sont inintéressantes, car dans une description d'image, seules les choses les plus importantes sont écrites. Par conséquent, ces informations doivent être omises.

5. Retour d'information :

   Il est facile de déterminer si la description de l'image est réussie. Mais comment ? Il est facile de répondre à cette question. Elle ne demande pas beaucoup d'efforts. Un bref retour d'information de la part 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 de personne malvoyante. Ce problème peut être résolu d'une autre manière. Toutes les personnes qui n'ont pas encore vu l'image peuvent être interrogées. Cela peut se faire par écrit, bien sûr, mais aussi par téléphone. Dès qu'une réponse "positive" nous parvient, la description est réussie.

Que se passe-t-il lorsque des textes alternatifs manquent ?

L'absence de textes alternatifs pour les images peut être particulièrement gênante pour les utilisateurs aveugles. Cela signifierait qu'ils ne pourraient pas voir le contenu du graphique. Dans le même temps, le lecteur d'écran n'afficherait que le nom du fichier dans ce cas, par exemple : "img123.jpg". Une telle description n'aiderait personne. Les développeurs doivent donc toujours veiller à utiliser du contenu textuel. Cependant, il est également important de connaître les différences afin de pouvoir décrire les images et les graphiques de manière significative. Les technologies d'assistance peuvent alors les restituer en utilisant les alternatives textuelles. Cela rend l'internet un peu plus accessible à tous.