Inclusivité : une image ne vaut pas toujours mille mots
Plongez dans l'univers de l'accessibilité numérique en explorant comment décrire les images pour les rendre compréhensibles à tous.
Focus sur les images, l’un des premiers obstacles à l’accessibilité des contenus pour les internautes présentant une déficience visuelle… mais pas seulement.
Rendre les images accessibles : pour qui et pourquoi ?
Les images peuvent représenter une difficulté pour les utilisateurs mal ou non-voyants qui naviguent à l’aide d’un lecteur vocal. Sans alternative textuelle, les images significatives ne sont pas détectées et l’internaute passe à côté d’informations potentiellement importantes pour lui. A l’inverse, les images décoratives, qui n’apportent aucune plus-value informative, polluent la restitution vocale si elles sont assorties d’une description.
Les internautes présentant un trouble DYS risquent de peiner à déchiffrer le texte contenu dans les images en raison du style de police, de caractères trop petits, d’un interlignage trop faible ou d’un contraste insuffisant avec la couleur de l’arrière-plan. C’est pourquoi il faut éviter d’incorporer du texte dans les images ou, a minima, les accompagner d’une transcription textuelle.
Enfin, les internautes disposant d’une mauvaise connexion à Internet peuvent avoir du mal (ou ne pas vouloir) charger les images… une alternative textuelle leur permettra de ne pas perdre une miette de l’information.
Image signifiante ou décorative ?
Vous l’aurez compris, la clé de l’accessibilité des images réside dans la présence et la pertinence d’un texte de remplacement.
Ce texte a deux finalités :
- Il est lu par les lecteurs d’écran utilisés par les internautes non ou mal-voyants.
- Il s’affiche, en remplacement des images, lorsqu’elles ne se chargent pas.
Chez goLive, la première question que l’on se pose, au moment d’intégrer une image, est la suivante :
Si l’image n’était pas présente dans la page, est-ce qu’il manquerait une information ?
La réponse est non ? Alors, l’image est décorative. Soit parce qu’elle est purement illustrative, soit parce qu’elle contient une information déjà présente dans le texte situé à proximité. Dans ce cas, un texte de remplacement alourdirait la restitution vocale de la page.
Si la réponse est oui : une alternative textuelle est requise.
Rédiger une alternative textuelle pertinente
En accessibilité, le texte de remplacement s’intègre dans l’attribut « alt » de la balise HTML image. Il doit reprendre fidèlement l’information véhiculée par l’image (ni plus, ni moins) tout en restant concis.
Voici quelques exemples de texte alternatif :
L’image est une photo porteuse d’une information. Le texte alternatif décrit l’élément significatif de la photo.
➜ Photo du candélabre de la fonderie d’art du Val d’Osne indiquant une station du métro de Paris
L’image est une illustration comportant une information visuelle et textuelle. Le texte alternatif conjugue les informations graphiques et textuelles.
➜ Illustration indiquant que la pomme possède un indice calorique bas : 53 calories pour 100 grammes
L’image contient du texte. Le texte alternatif est une reprise exacte du contenu.
➜ Évènement du Ministère de l’Enseignement Supérieur et de la Recherche La France au cœur de la recherche le 13 avril 2023
Quand faut-il fournir une description détaillée ?
Si l’image est riche d’informations, comme une infographie, on ajoute une description détaillée au texte alternatif. Ce dernier se contente alors de décrire brièvement la fonction de l’image, et indique où se trouve la transcription. Par exemple : « Vue d’ensemble du processus d’inscription (description détaillée ci-dessous) ».
Tout comme le texte alternatif, la description détaillée doit restituer fidèlement l’information portée par l’image. Or, une infographie comporte à la fois du texte, de l’illustration et de la mise en forme. Loin d’être aussi simple qu’il n’y paraît, l’exercice de transcription consiste à restituer l’ensemble de ces éléments en respectant le déroulé de l’information, les niveaux de texte et les emphases induites par la taille de la typographie, la couleur, les encadrés, etc. Sans tomber dans la surinterprétation.
L’art et la manière de rendre les images accessibles
Avec une double casquette technique et éditoriale, le webmaster est souvent le mieux placé pour intervenir sur la rédaction et l’intégration des éléments d’accessibilité.
Chargé de la mise à jour des sites Internet, il est le garant de l’accessibilité des contenus sur le long terme. Pour chaque image intégrée sur le site, son expérience lui permettra de juger de la pertinence d’un texte alternatif, d’une description longue ou d’un attribut « alt » vide.
Il saura également comment traiter les cas particuliers comme les images-liens, qui peuvent tourner au casse-tête selon les configurations.
Et si on testait vos connaissances ?
D’après vous, l’image ci-dessous nécessite-t-elle un texte alternatif ? (indice : l’image et le texte sont contenus dans un même lien)
Voir la réponse
La réponse est non. L’image est accompagnée d’un texte reprenant l’essentiel de son contenu, tous deux placés dans un même lien. L’image devient décorative, son attribut « alt » doit rester vide au risque de faire doublon avec les informations déjà présentes dans le texte.