Comment une lecture accessible des images est possible !

À l'ère du numérique, l'accessibilité est une question cruciale. L'une des solutions pour faciliter l'accès au contenu internet aux personnes en situation de handicap consiste à utiliser des textes alternatifs. Ces textes sont conçus pour présenter le contenu d'un site web dans un format compréhensible par les personnes présentant certains handicaps. Mais qu'est-ce qu'un texte alternatif exactement ? Qui en a besoin ? Et comment en créer un ?

Pour rendre les sites web et leurs contenus accessibles, les textes alternatifs sont essentiels, notamment pour faciliter l'accès aux personnes en situation de handicap. Ils fournissent des informations et des fonctionnalités aux personnes aveugles ou malvoyantes, ainsi qu'aux personnes présentant un handicap physique ou cognitif. Ils permettent également de comprendre les graphiques, les photos et les commandes. Les lecteurs d'écran et les afficheurs braille utilisent ces textes alternatifs, rendant ainsi ces éléments accessibles aux personnes en situation de handicap.

Par ailleurs, elles sont également utiles pour le référencement naturel. Les descriptions alternatives transmettent aux moteurs de recherche des informations sur une image, ce qui améliore sa visibilité.

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 de l'élément auquel il sera doté. La plupart des développeurs utilisent cette méthode dans un CMS (Système de Gestion de Contenu). Il s'agit d'un logiciel servant à la création et à la gestion de contenu web.

Le langage de programmation HTML peut également servir à cela. C'est là qu'intervient l'attribut alt, aussi appelé balise alt. Il est inséré à l'intérieur de la balise img. Le texte est écrit dans la zone interne de l'attribut alt, puis affiché grâce aux technologies d'assistance.

Cependant, cela ne suffit pas. Il ne faut pas non plus négliger l'attribut title, car certains lecteurs d'écran lisent la description de l'attribut title et non celle de l'attribut alt. Il est donc judicieux de spécifier un texte identique pour les deux balises. De plus, cela permet d'afficher le contenu sous forme d'informations supplémentaires sur l'élément lorsque la souris survole la zone.

De plus, il y a l'attribut aria. Plus précisément, l'attribut aria-label ou encore l'attribut aria-labelledby. Ceux-ci servent à é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 plus de proposer des alternatives textuelles. Il est bien plus efficace de décrire correctement les différents types d'images, car leurs fonctions diffèrent également. Cependant, il est indispensable de les identifier au préalable. Une description qui ne reflète pas la fonction de l'image est inutile. Dès lors, une question se pose : 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 divers types de graphiques. Il est important de comprendre la finalité d'un graphique. On distingue généralement les graphiques informatifs, fonctionnels et décoratifs. S'y ajoutent les polices de caractères. Leur description est très simple : il s'agit simplement du texte figurant dans le diagramme.

Images informatives

Dans le cas des images informatives, le contenu visible d'un graphique est complété par des textes alternatifs. L'attention est portée sur les informations pertinentes au message de l'image. À titre d'exemple, on peut citer la description d'un logo : elle présente brièvement son apparence et indique son propriétaire.

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, une image est intégrée au code HTML à l'aide de l'élément `img`, dont l'attribut `src` spécifie la source. La description de l'image est insérée entre guillemets dans les attributs `alt` et `title`. Ainsi, le texte « Le logo Eye-Able. Il représente un œil » est affiché par le lecteur d'écran ou l'afficheur braille.

Ainsi, la barrière est levée et toutes les personnes utilisant des technologies d'assistance peuvent comprendre ce qui est représenté sur ce graphique.

Diagrammes

Toutefois, s'il s'agit d'un diagramme, cette décision doit toujours être prise au cas par cas. Cela dépend souvent du type de diagramme et des informations qu'il contient. Si le diagramme ne contient que peu d'informations, celles-ci peuvent figurer dans le texte alternatif. Par exemple : « Présente les résultats des élections des partis sous forme de diagramme à barres. Parti A : 40 %, Parti B : 30 %, Parti C : 20 %, etc. » En revanche, si le diagramme est plus complexe ou plus long, il est recommandé d'inclure les informations détaillées dans un texte ultérieur. Le texte alternatif doit alors se limiter à indiquer le type et l'objectif du diagramme. Il peut également être précisé que la description détaillée suit. Par exemple, pour un diagramme présentant les chiffres de population des Länder allemands, le texte serait : « Représente les chiffres de population des 16 Länder sous forme de diagramme à barres. Remarque : La description détaillée suit dans le texte. »

Images fonctionnelles

Ensuite, examinons les images fonctionnelles. Ce sont des graphiques liés. Ils sont divisés en liens, éléments ou boutons. Dans les descriptions textuelles, vous définissez la fonction et non ce qu'il faut reconnaître. Vous spécifiez plutôt où le lien mène à.

Voici un exemple en HTML pour une image liée :

<a href=" https://eye-able.com/“ >

<img src="logo.jpg"

alt="Page d'accueil de Eye-Able"

titre="Page d'accueil de Eye-Able"

</img>

</a>

Les attributs a-Tag et 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, on retrouve le logo d'Eye-Able, mais cette fois-ci, les attributs alt et title décrivent la fonction plutôt que l'image. Ainsi, le contenu « Page d'accueil d'Eye-Able » est désormais affiché 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 lecture par un lecteur d'écran, car elle symbolise la fonction d'enregistrement. Autre exemple : les icônes de recherche. Qu'il s'agisse d'une loupe ou non est sans importance. Ce qui compte, c'est l'action qui les sous-tend : une option de recherche ou le lancement d'une recherche.

La situation est similaire pour les boutons. Un bouton représentant une flèche pointant vers la droite ne devrait jamais avoir « flèche pointant vers la droite » dans son texte alternatif. Pour une personne voyante, il est évident que la page suivante s'ouvre lorsqu'on clique dessus, mais ce n'est pas le cas pour les personnes aveugles. En effet, elles n'entendent que « flèche vers la droite » par synthèse vocale. Ce message n'est pas suffisamment clair et ne leur indique pas que la page suivante s'ouvre lorsqu'on appuie sur le bouton. Par conséquent, il est plus judicieux de proposer des textes alternatifs comme « page suivante » ou « continuer à faire défiler ».

images décoratives

Les images décoratives constituent un autre type d'éléments graphiques. Elles servent à embellir une page web. La procédure de création des textes alternatifs est ici très simple : leur contenu est laissé vide. Il est important que l'attribut correspondant soit toujours présent. Seul le texte est omis, ce qui permet au lecteur d'écran d'ignorer cet élément graphique non pertinent dans la sortie.

Comment rédiger de bons textes alternatifs ?

Maintenant que les différents éléments graphiques ont été présentés, il ne reste qu'une question : « Comment formuler des textes alternatifs optimaux ? » Une fois que vous maîtrisez les subtilités et les différences entre les images, il ne vous reste plus qu'à suivre quelques règles. Voici quelques conseils utiles :

1. Début d'une alternative textuelle :

   Il est essentiel d'éviter toute duplication. Le texte ne doit donc pas commencer par : « L'image… », « Le graphique… », « La photo… » ou « Le lien… ». Les lecteurs d'écran reconnaissent et affichent de toute façon la nature d'un élément (graphique ou lien). Il convient donc de s'en passer.

2. Longueur des textes :

   La longueur du texte alternatif n'est pas précisée. Toutefois, une ou deux phrases suffisent généralement pour décrire une image. La longueur idéale est de 80 caractères. Pourquoi 80 ? Les personnes aveugles lisent souvent ces textes à l'aide d'un afficheur braille. Ces afficheurs peuvent afficher entre 40 et 80 caractères à la fois. Par souci de clarté, il est donc conseillé de respecter cette limite. Bien entendu, un texte peut être plus long, mais il ne doit pas dépasser 120 caractères.

3. Orthographe et ponctuation :

   Il est essentiel de veiller à l'orthographe. Une faute d'orthographe peut rapidement engendrer une ambiguïté, car un lecteur d'écran restitue fidèlement le texte alternatif. De même, une grammaire correcte est primordiale pour la compréhension des images. La ponctuation est également importante : une ponctuation incorrecte ou manquante rend la compréhension du visuel difficile. C'est pourquoi une vérification orthographique et grammaticale est indispensable avant l'insertion du texte.

4. Droits d'auteur :

   De nombreuses images comportent une mention de droit d'auteur. Mais cette information est-elle essentielle à leur compréhension ? La réponse est non ! Pour une bonne formulation des descriptions textuelles, cette information est superflue, car une description d'image ne contient que les éléments les plus importants. Par conséquent, il convient de l'omettre.

5. Retour:

   Il est facile de déterminer si la description d'une image est pertinente. Mais comment ? La réponse est simple et ne demande pas beaucoup d'efforts. Un bref retour d'une personne aveugle ou malvoyante permet de savoir si le texte est bien formulé. Cependant, tout le monde ne connaît pas de personne handicapée visuelle. Une autre solution existe : interroger ici toutes les personnes n'ayant pas encore vu l'image. Cela peut se faire par écrit, bien sûr, mais aussi par téléphone. Dès réception d'un retour positif, la description est considérée comme pertinente.

Que se passe-t-il concrètement lorsque les textes alternatifs sont absents ?

L'absence de texte alternatif pour les images peut être particulièrement gênante pour les personnes aveugles. Elles ne pourraient alors pas voir le contenu de l'image. Dans ce cas, le lecteur d'écran n'afficherait que le nom du fichier, par exemple : « img123.jpg ». Une telle description serait inutile. Les développeurs doivent donc toujours veiller à utiliser du texte. Il est également important de connaître les différences entre les images et les graphiques afin de pouvoir les décrire de manière pertinente. Les technologies d'assistance peuvent ainsi les afficher en utilisant les textes alternatifs. Cela contribue également à rendre Internet plus accessible à tous.