Les images doivent comporter un texte alternatif (texte « alt »). C’est souvent l’une des premières notions que les concepteurs et les développeurs apprennent en matière d’accessibilité. À première vue, c’est un concept simple à comprendre et généralement facile à mettre en œuvre. Il est également assez aisé de détecter automatiquement si une image comporte ou non un texte alternatif. Des outils intégrés aux navigateurs tels que Axe DevTools permettent de trouver le texte alternatif de la plupart des types d’images.
Ce qui est moins facile à déterminer, c'est quand utiliser un texte alternatif et comment rédiger un texte alternatif de qualité qui soit efficace. Pour rédiger un texte alternatif adapté, vous devez comprendre à qui il s'adresse et quel est l'objectif de l'image.
Mais au fond, qui utilise les textes alternatifs ?
Le texte alternatif est principalement utilisé par les personnes qui utilisent des lecteurs d'écran pour accéder à des sites web, des applications et d’autres logiciels. Les personnes qui utilisent des lecteurs d’écran sont généralement soit totalement aveugles, soit malvoyantes, ce qui rend difficile la lecture du texte d’une page. Les personnes malvoyantes peuvent ne pas être en mesure de voir une image suffisamment clairement pour en comprendre la nature, tandis que les personnes entièrement aveugles ne peuvent pas voir l’image du tout. Si une image véhicule des informations importantes qui ne sont pas disponibles ailleurs sur la page, une personne qui ne peut pas voir l’image n’aura pas accès à ces informations si l’image ne dispose pas d’un texte alternatif spécifié par l’attribut HTML « alt ».
Les personnes disposant d'une connexion Internet très lente peuvent également tirer parti du texte alternatif. Elles peuvent désactiver l'affichage des images afin d'accélérer le chargement des pages, sans pour autant perdre les informations véhiculées par les images importantes. Lorsque vous désactivez l'affichage des images dans les paramètres de la plupart des principaux navigateurs, c'est le texte alternatif de l'image qui s'affiche à la place.
La page d'accueil de WebAIM, avec un logo, une grande image d'arrière-plan et plusieurs icônes.
La page d'accueil de WebAIM, encore une fois, mais cette fois sans images – Notez que seules les images importantes comportent un texte alternatif.
Les personnes présentant des troubles cognitifs peuvent également désactiver les images d'une page afin de réduire le nombre de sources de distraction. Si une personne a du mal à traiter de grandes quantités d'informations ou est facilement distraite, la désactivation des images peut s'avérer utile.
Il se peut également qu'une personne souffre d'un trouble d'apprentissage qui l'empêche de comprendre facilement un texte. Dans ce cas, il est conseillé d'inclure des images et d'autres supports afin de l'aider à assimiler plus facilement les informations contenues dans la page.
Outre le fait d'améliorer l'accessibilité, le texte alternatif est également utilisé par les moteurs de recherche pour déterminer le sujet d'une image et est considéré comme un facteur de référencement pour le SEO (optimisation du référencement des images).
Dans quels cas les images doivent-elles comporter un texte alternatif ?
Toujours ! Chaque image doit comporter un texte alternatif afin de garantir une expérience positive aux utilisateurs qui ont recours à des lecteurs d’écran. Même si une image est purement décorative et ne nécessite pas de texte alternatif descriptif (nous y reviendrons plus loin), il est tout de même important d’utiliser une balise alt=« ». Cela évite que le lecteur d’écran ne lise à voix haute le nom du fichier image à l’utilisateur, ce qui constituerait une mauvaise expérience. En résumé, toutes les images doivent comporter une balise alt, même s’il s’agit simplement d’une balise vide (« »).
Après avoir répondu « toujours ! » plus haut, je tiens à préciser mon commentaire concernant les images « décoratives ».Dans le domaine de l'accessibilité, on fait la distinction entre les images décoratives et les images informatives.
Les images décoratives ne nécessitent généralement pas de texte alternatif (au-delà de la balise vide que j'ai mentionnée plus haut). Elles peuvent figurer sur la page pour des raisons purement esthétiques (en d'autres termes, pour embellir la page). Elles peuvent également reprendre des informations déjà présentes sur la page sous forme de texte. Dans ce cas, ajouter un texte alternatif à l'image serait redondant.
Les images informatives, en revanche, transmettent une certaine information. Pour déterminer si une image est informative ou non, je me pose la question suivante : que se passerait-il si elle était supprimée de la mise en page ? Si la suppression de cette image entraînait un manque d'informations, cela signifie qu'elle est informative et qu'elle nécessite un texte alternatif.
Cette page Web comporte deux images : une grande image d'arrière-plan colorée et un logo. Que se passe-t-il si elles sont supprimées ?
Ici, les deux images ont été supprimées de la page. Je comprends toujours tout même sans la grande image de bannière, mais comme le logo manque, je ne sais plus très bien sur quel site je me trouve.
La technique consistant à supprimer l'image peut également vous aider à comprendre le contexte de l’image. Dans le cas de l’image d’arrière-plan, son contexte est constitué du texte et des boutons qui la recouvrent. Le texte et les boutons situés en dessous expliquent tout ce que vous devez savoir sur cette bannière. Ajouter une description « alt » à l’image de la bannière n’apporterait rien de plus au sens.
Il est assez courant de voir des images accompagnées de texte, notamment sur les sites d'actualités, les réseaux sociaux et les sites de commerce en ligne. Souvent, les images sont accompagnées d'un titre ou d'un autre texte qui les décrit.
« Ensemble de théière Star Wars Dark Vador » et le prix (59,99 $) apparaissent dans le texte situé sous l'image d'une théière, d'une tasse et d'une soucoupe, toutes sur le thème de Dark Vador.
Dans le cas de ce service à thé Dark Vador (de ThinkGeek, RIP), le texte situé sous l’image décrit celle-ci et est également rendu à l’aide de code HTML, ce qui signifie que les lecteurs d’écran pourront le détecter. On pourrait faire valoir que l’image devrait comporter un texte alternatif plus descriptif que le texte qui se trouve en dessous. Par exemple, le texte alternatif pourrait décrire la théière sur la photo comme étant le casque emblématique de Dark Vador, et la tasse à thé comme étant ornée du panneau thoracique lumineux de Dark Vador. Cependant, les utilisateurs ne connaîtront pas tous les détails concernant ce service à thé tant qu’ils ne se rendront pas sur la page produit correspondante ; on pourrait donc également faire valoir que l’image n’a pas besoin de texte alternatif, car son objectif — tout comme celui du texte situé en dessous — est d’inciter l’utilisateur à cliquer sur le lien pour obtenir plus d’informations.
La morale de cette histoire, c'est que le fait de déterminer si une image est décorative ou non dépend souvent du contexte.
Types d'images qui nécessitent impérativement un texte alternatif
Il existe certains types d'images qui sont toujours informatives et qui nécessitent donc toujours un texte alternatif. Il s'agit notamment :
- Images servant de liens ou de boutons
- Images contenant du texte important
- Logos
Même dans ces cas-là, il est important de tenir compte du contexte de l'image : si un texte affiché en HTML, situé à proximité de l'image, fournit les mêmes informations, l'ajout d'un texte alternatif peut s'avérer superflu.
Images servant de liens ou de boutons
Il est assez courant de trouver des images, notamment sur les sites de marketing ou de commerce en ligne, qui font également office de liens. Par exemple, sur une fiche produit type d'Amazon, la plupart des images de la page sont des photos de produits qui, lorsque l'on clique dessus, renvoient vers des informations plus détaillées sur le produit. Ces images sont parfois accompagnées d'un texte, mais ce n'est pas toujours le cas, comme dans l'exemple suivant :
La page « Découvertes intéressantes » d'Amazon présente une grille d'images sans texte, qui renvoient toutes vers des produits. Heureusement, toutes ces images sont accompagnées d'un texte alternatif correct !
Il existe trois éléments clés à prendre en compte pour rédiger un texte alternatif pour les images (ou les boutons) qui constituent également des liens :
- Les images cliquables doivent comporter un texte alternatif ou faire partie d'une zone cliquable contenant également du texte HTML décrivant l'image.
- Le texte alternatif ou le texte associé à l'image doit indiquer clairement ce qui se passera lorsque vous cliquerez sur le lien ou que vous activerez le bouton.
- Les images qui ne sont pas accompagnées de texte doivent comporter une balise « alt » !
Les lecteurs d'écran lisent systématiquement les liens et les boutons à voix haute. Si un lien est une image et ne comporte pas de texte alternatif, l'utilisateur d'un lecteur d'écran n'entendra que le mot « lien ». Suivre des liens et cliquer sur des boutons sont deux des principaux moyens utilisés par les internautes pour interagir avec les sites web. Si un utilisateur ne peut pas déterminer à quoi sert un lien ou un bouton, il ne pourra probablement pas utiliser cette partie de la page.
Images de texte
En général, il est préférable d’utiliser le HTML pour afficher le texte autant que possible, plutôt que d’intégrer du texte dans une image. Le texte HTML ne nécessite aucun travail supplémentaire de la part du développeur pour le rendre accessible. Cependant, dans un contexte marketing, le texte est parfois utilisé d’une manière qui ne peut pas être facilement reproduite à l’aide du HTML et du CSS.
Prenez cette ancienne capture d'écran de Victoria's Secret :
Cette bannière publicitaire pour une promotion sur les pyjamas utilise deux styles de texte. L'un est une simple police sans empattement en noir, facile à reproduire à l'aide de HTML et de CSS. L'autre est une police sans empattement qui donne l'impression d'être écrite avec des paillettes. Il serait très difficile de reproduire cet effet de paillettes à l'aide de CSS.
La publicité est toutefois constituée d’une seule image et comprend d’autres images représentant des ensembles de pyjamas, des paires de chaussons et une femme ouvrant un cadeau. Si les concepteurs et les développeurs souhaitaient convertir le texte noir de base en HTML tout en conservant la mise en page, ils devraient utiliser le HTML et le CSS pour créer une mise en page adaptative capable d’intégrer plusieurs images et éléments de texte. La solution adoptée par le site de Victoria’s Secret a consisté à reproduire l’intégralité du texte figurant dans l’image sous forme de texte alternatif.
Étant donné que ces publicités ne restent souvent en ligne qu’une semaine, voire moins, la rapidité d’exécution est essentielle. Certaines entreprises choisissent de se contenter d’ajouter un texte alternatif à l’image complète plutôt que de respecter l’exigence interdisant l’utilisation d’images contenant du texte. Techniquement, cela constitue un manquement aux WCAG, car si le texte alternatif est utile aux utilisateurs de lecteurs d’écran, les personnes malvoyantes n’ont pas la possibilité de modifier la police, la couleur de la police et la couleur d’arrière-plan.
Logos
Il est très rare qu'un produit ou le logo d'une entreprise soit utilisé d'une manière qui ne nécessite pas de texte alternatif. Même lorsque le logo comporte du texte, celui-ci fait généralement partie intégrante de l'image et ne peut pas en être séparé.
Par exemple, le logo d'UserTesting est presque entièrement composé de texte. Même s'il serait possible de reproduire ce texte en HTML pour éviter d'avoir à ajouter une balise « alt », il n'existe aucun moyen simple et efficace d'y parvenir sans nuire au design du logo. Il est donc beaucoup plus simple d'ajouter une balise « alt » à l'image.
alt : Logo UserTesting
Les logos sont également souvent utilisés dans l’en-tête ou la bannière d’un site et constituent généralement des liens menant à la page d’accueil du site. De nos jours, de nombreux utilisateurs s’attendent à cette fonctionnalité. Au minimum, le texte alternatif du logo d’une entreprise figurant dans l’en-tête doit correspondre au nom de l’entreprise. Pour offrir une expérience légèrement meilleure, il peut être utile d’ajouter un texte alternatif supplémentaire indiquant la destination du lien. Pour le logo UserTesting, le texte alternatif pourrait être « UserTesting – Accueil ».
Les icônes sont aussi des images
Il existe de nombreux types d'images qui peuvent être informatives ou non. C'est à vous de déterminer si une image est informative avant de décider s'il faut rédiger un texte alternatif. Les icônes constituent un type d'image qui revient souvent lors de la phase de conception. Elles méritent ici une section à part entière car, d'après mon expérience, les concepteurs oublient souvent que les icônes et les symboles sont eux aussi des images.
Les icônes obéissent aux mêmes principes que les autres types d'images : soit elles sont informatives, soit elles ne le sont pas. Voici quelques questions à vous poser concernant les icônes que vous utilisez :
- Y a-t-il du texte juste à côté de l'icône ?
- S'il y a du texte, décrit-il précisément à quoi sert l'icône ?
- Si l'icône est un lien ou un bouton, où mène-t-elle ?
On voit de plus en plus souvent des icônes qui apparaissent seules, sans aucun texte à côté. Dans ce cas, il est très important d’ajouter un texte alternatif à ces icônes. Sinon, elles n’auront aucun sens pour les personnes qui ne peuvent pas les voir. Il est très rare que les icônes aient un rôle purement décoratif.
Le site Awwwards utilise plusieurs icônes sans légende dans l'en-tête. Malheureusement, aucune d'entre elles ne dispose d'un texte alternatif.
Les icônes sans texte ne sont pas idéales. Il est préférable et moins ambigu d'utiliser une étiquette textuelle — affichée à l'aide du langage HTML — juste à côté de l'icône :
- Les icônes peuvent servir à plusieurs fins (pensez à l'icône en forme d'engrenage).
- L'ajout d'icônes servant de liens ou de boutons à côté du texte permet d'agrandir la zone cliquable ou tactile du lien ou du bouton.
- Si un texte alternatif est ajouté à l'icône parce qu'il n'y a pas de texte à proximité, les utilisateurs de lecteurs d'écran bénéficieront probablement d'une meilleure expérience que les autres.
Si vous utilisez des icônes, essayez de prévoir un emplacement pour une étiquette textuelle à côté de l'icône. Si cela n'est pas possible, veillez à ce que l'icône soit très claire et compréhensible, suffisamment grande pour être facilement visible (et cliquable), et qu'elle comporte un texte alternatif.
Quand faut-il rédiger un texte alternatif, et qui doit s'en charger ?
Si vous avez créé l’image, c’est à vous de rédiger le texte alternatif. Si vous n’avez pas créé l’image mais que vous êtes le premier à l’intégrer dans une maquette fonctionnelle, une maquette visuelle ou un prototype, c’est à vous de rédiger le texte alternatif. Si vous êtes développeur et que vous mettez en œuvre une interface utilisateur comportant des images à partir d’un travail réalisé par un créateur de contenu ou un graphiste, vous ne devriez pas avoir à vous charger de la rédaction du texte alternatif : celui-ci devrait déjà avoir été rédigé avant que l’image ne vous parvienne. La responsabilité du développeur est de s'assurer que le texte alternatif est correctement mis en œuvre.
Lorsque les concepteurs rédigent le texte alternatif des images (en particulier des icônes et des logos) alors qu’ils finalisent une série de maquettes fonctionnelles ou visuelles pour une fonctionnalité ou une page, ils peuvent l’intégrer dans les annotations de ces maquettes. Si quelqu’un rédige un article de blog, il peut écrire le texte alternatif ou une légende (voire les deux) pour chaque image incluse au fur et à mesure de la rédaction du brouillon.
Un texte alternatif rédigé bien après coup (par exemple, lors d’un « sprint d’accessibilité » ou, pire encore, après la mise en ligne du site) s’avère généralement moins efficace. La raison d’être et le contexte justifiant l’insertion d’une image peuvent avoir été perdus de vue au cours du processus. Comme pour tous les aspects de l’accessibilité, il est à la fois plus rapide et plus simple de rédiger le texte alternatif dès le départ plutôt que de le faire a posteriori.
Trouver le juste équilibre dans les descriptions d'images
Si les symboles, les icônes et les logos sont faciles à décrire en raison de leur simplicité, les images plus détaillées nécessitent une attention particulière afin de ne pas submerger le lecteur. Concentrez-vous sur les éléments clés de l’image, tels que le nombre de personnes présentes, le lieu et les activités qui s’y déroulent. Des descriptions bien pensées aident les personnes en situation de handicap à mieux comprendre des images qu’elles ne pourraient pas voir autrement.
Si vous décrivez une maison dans un texte alternatif, se contenter d’écrire « Photo d’une maison » ne suffira probablement pas. Une description plus détaillée, telle que « Maison moderne de plain-pied située dans une rue résidentielle calme, avec un chien brun assis devant », fournit en revanche un contexte utile. En revanche, entrer dans des détails excessifs, comme « Grande maison contemporaine blanche de plain-pied avec de grandes baies vitrées, des touches de pierre grise, un jardin soigneusement entretenu avec quatre arbres matures, et un chien de taille moyenne, brun et blanc, assis sur le perron d'entrée et l'air heureux », peut s'avérer trop chargé et inutile.
En conclusion : rédiger des textes alternatifs fait de vous un meilleur concepteur (et offre une meilleure expérience à vos utilisateurs !)
L'un des aspects les plus intéressants de la réflexion sur les textes alternatifs est qu'elle vous oblige à vous interroger sur la signification et l'objectif de chaque image. De plus, le fait de rédiger des textes alternatifs peut vous aider à améliorer vos créations graphiques et votre contenu.
Lorsque vous rédigez un texte alternatif pour une icône, vous pouvez vous rendre compte que celle-ci est trop vague. Cela peut alors vous amener à modifier vos créations afin de rendre l'icône plus compréhensible. Si vous rédigez un article de blog et que vous avez du mal à trouver une légende pour une image que vous souhaitez inclure, vous finirez peut-être par supprimer l'image, car vous vous rendrez compte qu'elle n'illustre pas votre propos aussi bien que vous le pensiez.
En réfléchissant davantage aux images que vous intégrez dans vos créations graphiques ou vos contenus — et à l'impact qu'elles ont sur tous les types de public —, vous parvenez à renforcer considérablement l'efficacité de votre travail. Les images peuvent constituer un vecteur d'information très puissant. Plus vous y consacrez de réflexion, plus elles peuvent gagner en impact.
