Comment une lecture sans barrière des images est possible !

Le partage est encouragé :

Lunettes posées sur un livre

À l'heure de la numérisation, le thème de l'accessibilité ne doit pas être négligé. Les textes dits alternatifs offrent une possibilité de faciliter l'accès aux contenus sur Internet aux personnes souffrant de handicaps. Ces textes sont conçus de telle sorte qu'ils permettent aux personnes souffrant de certains handicaps de comprendre le contenu d'un site Web. Mais : qu'est-ce exactement qu'un tel texte alternatif ? Qui en a besoin ? Et comment en créer un ?

Pour développer des sites web et des contenus web accessibles, les textes alternatifs, entre autres, sont très importants pour faciliter l'accès aux personnes handicapées. Ces textes 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 même 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 en effet beaucoup 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 n'ont aucun sens si elles ne peuvent pas rendre compte de l'objectif d'un graphique. C'est pourquoi la question se pose : quels sont les différents types d'images ? Et comment les formuler au mieux ?

Il convient tout d'abord de se familiariser avec les différentes différences entre les graphiques. Il est important à cet égard de comprendre le sens et l'objectif d'un graphique. En général, on distingue les graphiques informatifs, fonctionnels ou décoratifs. Par ailleurs, il existe aussi ce que l'on appelle les graphismes. 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 le biais des textes alternatifs. On fait attention aux 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 de qui il s'agit.

Dans l'exemple ci-dessous, une alternative textuelle est intégrée dans un logo en HTML :

Le logo Eye-Able . Il représente un œil.

<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, l'élément img en HTML permet d'intégrer un fichier image et l'attribut src détermine la source de l'image. La description de l'image est insérée entre guillemets dans les attributs alt et title. Ainsi, le contenu textuel "Le logo Eye-Able . Il représente un œil" via le lecteur d'écran ou la ligne braille.

Cela permet d'éliminer la barrière et de faire connaître les technologies d'assistance à tous les utilisateurs, comme le montre ce graphique.

Diagrammes

Mais s'il s'agit ici d'un diagramme, la décision devrait toujours être prise individuellement. Cela dépend souvent du type et des informations contenues. Si le graphique ne contient que quelques informations, celles-ci peuvent être intégrées dans le texte alternatif. Par exemple : "Affiche les résultats électoraux des partis dans un diagramme à barres. Parti A : 40 %, parti B : 30 %, parti C : 20 %, etc. Mais si quelque chose de complexe ou de plus long est présenté, il est recommandé d'insérer les informations détaillées dans un texte ultérieur. Dans ce cas, il suffit d'indiquer le type et l'objectif du diagramme dans le texte alternatif. On pourrait en outre indiquer que la description plus détaillée suit. Un exemple serait que le graphique représente le nombre d'habitants des Länder. Le contenu serait alors le suivant : "Affiche le nombre d'habitants des 16 Länder dans un diagramme à barres. Remarque : la description détaillée est décrite dans le texte suivant".

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 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, on voit à nouveau le logo de Eye-Able, mais cette fois-ci, les attributs alt et title ne décrivent pas le graphique, mais la fonction. Le contenu "Page d'accueil de Eye-Able" est donc maintenant affiché via les technologies auxiliaires.

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 qui représente 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 certes 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 et il n'est pas évident que la page suivante s'ouvre lorsque le bouton est activé. C'est pourquoi il est plus judicieux d'accompagner ces textes alternatifs de "page suivante" ou "feuilleter la page suivante".

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 des textes alternatifs est ici très simple. Ici, le contenu de l'alternative textuelle est laissé vide. Il est important de noter que l'attribut des textes alternatifs est tout de même présent. Seul le contenu du texte reste vide. Cela a en effet pour effet que le lecteur d'écran saute ce graphique non pertinent lors de la sortie.

Comment écrire de bonnes alternatives de texte ?

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 les différences entre les images, il ne reste plus que quelques règles à respecter. Pour cela, on peut suivre les indications suivantes :

  1. Début d'une alternative textuelle :

    Il convient ici de veiller à ce qu'il n'y ait pas de doublon. Ainsi, le début ne devrait 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. C'est pourquoi il faut y renoncer.

  2. longueur des textes :

    La longueur d'un texte alternatif n'est pas définie. Mais pour décrire un graphique, une ou deux phrases devraient suffire. L'idéal est d'avoir 80 caractères. Pourquoi justement 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 une meilleure lisibilité pour les utilisateurs, il est donc conseillé de veiller à cette limite. Bien sûr, un texte peut aussi être plus long. Toutefois, il ne devrait jamais 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, il peut rapidement y avoir des ambiguïtés, car un lecteur d'écran affiche exactement ce qui est inscrit 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.

  4. 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 seul l'essentiel est placé dans une description d'image. Il est donc préférable d'omettre cette information.

  5. Réaction :

    Il est facile de savoir si la description de l'image a été réussie. Comment faire ? Il est très facile de répondre à cette question. Il n'est pas nécessaire d'y consacrer beaucoup d'efforts. Un feed-back rapide d'une personne aveugle ou malvoyante permet de savoir si le contenu d'un texte a été rédigé de manière judicieuse. Mais tout le monde ne connaît pas une personne dont la vue est limitée. Il est toutefois possible de résoudre ce problème d'une autre manière. Toute personne qui n'a pas encore eu l'image devant elle peut être interrogée ici. Cela peut bien sûr se faire par écrit, mais aussi par téléphone. Dès qu'il y a 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 voir le contenu de l'image. En outre, le Scrrenreader 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. Il est toutefois 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 restituer à l'aide des alternatives textuelles. Ainsi, l'Internet devient un peu plus accessible pour tous.

Simple pour tous

Vous êtes intéressé(e) ? Nous nous ferons un plaisir de vous aider.

Avec plus de 25 fonctions autour de l'accessibilité numérique, Eye-Able vous aide également à réduire durablement vos barrières. Vous rendez ainsi vos informations accessibles à tous et n'excluez aucun visiteur* - en bref, vous vous ouvrez à un nouveau groupe cible, sans aucun volume de marketing élevé.

L'icône montre le personnage de l'accessibilité

Entretien de conseil

Entretien de conseil sans engagement sur l'accessibilité numérique en général

L'icône montre le personnage de l'accessibilité

Analyse

Discussion des potentiels d'optimisation de votre site web

L'icône montre le personnage de l'accessibilité

Démonstration en direct

Présentation du logiciel d'assistance directement sur votre site web

Plus de contributions

Si vous avez besoin d'un peu plus :

cathédrale de cologne

Eye-Able atteint le Rhin

Eye-Able atteint de nouveaux rivages. De Würzburg, sa ville natale sur le Main, direction le Rhin ! La ville de Cologne apporte dès à présent sa contribution et fait de ses