Les images font partie intégrante de nombreux sites web : photos, illustrations, icônes, logos, graphiques ou captures d’écran. Mais lorsqu’une image transmet une information utile, cette information doit aussi pouvoir être comprise par une personne qui ne voit pas l’image de la même manière ou qui utilise un lecteur d’écran.
Le texte alternatif, souvent appelé “alt”, sert précisément à fournir une alternative textuelle lorsque cela est nécessaire.
Qu’est-ce qu’un texte alternatif d’image ?
Le texte alternatif est une description associée à une image dans le code de la page. Lorsqu’un lecteur d’écran rencontre l’image, il peut restituer cette information à l’utilisateur.
Le but n’est pas de décrire chaque détail visuel. Il faut surtout transmettre l’information ou la fonction utile de l’image dans son contexte.
Toutes les images ont-elles besoin d’un texte alternatif ?
Non. Tout dépend du rôle de l’image.
Une image informative, qui apporte une information absente du texte environnant, nécessite généralement une alternative pertinente. Une image purement décorative peut au contraire être ignorée par les technologies d’assistance lorsqu’elle n’ajoute aucune information utile.
L’important est donc de comprendre la fonction de l’image avant de rédiger son texte alternatif.
Comment rédiger un bon texte alternatif ?
Un bon texte alternatif est généralement :
- utile dans le contexte de la page ;
- court lorsque l’image est simple ;
- précis sans décrire des détails inutiles ;
- différent du texte déjà présent autour de l’image lorsqu’une répétition n’apporte rien ;
- orienté vers l’information réellement transmise par l’image.
Il n’est généralement pas nécessaire de commencer par “image de” ou “photo de”, sauf si le type même de visuel apporte une information utile.
Que faire pour une image décorative ?
Une image utilisée uniquement pour l’ambiance ou la décoration ne doit pas forcément être annoncée par un lecteur d’écran. Dans ce cas, elle peut être marquée comme décorative afin d’éviter d’ajouter du bruit inutile dans la navigation.
Ajouter un texte alternatif à toutes les images sans réfléchir peut donc être aussi problématique que de ne jamais en mettre.
Et pour une image qui contient du texte ?
Lorsqu’une information importante apparaît uniquement dans une image, elle doit rester disponible sous une forme textuelle accessible.
Le meilleur choix est souvent d’éviter d’intégrer des informations essentielles uniquement dans une image lorsque le texte peut être présenté directement en HTML. Cela améliore aussi le zoom, le reflow, la traduction et la lisibilité sur différents écrans.
Comment traiter un logo ?
Un logo qui sert à identifier l’entreprise doit généralement avoir une alternative qui indique le nom utile de l’organisation.
Lorsque le logo est aussi un lien vers l’accueil, son nom accessible doit rester cohérent avec sa fonction et éviter les formulations inutiles ou redondantes.
Et les icônes dans les boutons ?
Une icône seule peut nécessiter un nom accessible lorsque sa fonction n’est pas déjà exprimée par du texte.
Par exemple, une icône de loupe utilisée seule comme bouton doit permettre de comprendre qu’elle lance une recherche. Si le bouton contient déjà le texte “Rechercher”, l’icône peut souvent rester décorative.
Comment rendre un graphique ou une infographie accessible ?
Un graphique transmet souvent plus d’informations qu’une simple photo. Un court texte alternatif peut alors identifier le graphique, mais les données ou conclusions importantes doivent également être disponibles sous une forme textuelle adaptée.
Selon la complexité du contenu, cela peut prendre la forme d’un résumé, d’un tableau de données, d’une description plus détaillée ou d’un texte adjacent.
Quelles erreurs rencontre-t-on souvent ?
- un attribut alt vide sur une image informative ;
- un texte alternatif identique au nom de fichier ;
- une accumulation de mots-clés SEO au lieu d’une description utile ;
- une description trop longue d’un visuel simple ;
- la répétition mot pour mot d’un texte déjà affiché à côté ;
- une image décorative décrite inutilement ;
- un bouton représenté uniquement par une icône sans nom accessible.
Le texte alternatif sert-il au SEO ?
Le texte alternatif peut aider les moteurs à comprendre le contenu d’une image, mais sa fonction première dans une démarche d’accessibilité reste de fournir une alternative utile aux personnes qui ne peuvent pas exploiter l’image visuellement.
Il ne faut donc pas transformer le champ alt en liste de mots-clés. Une description naturelle, pertinente et adaptée au contexte est préférable.
Que prévoient les WCAG 2.2 ?
Les WCAG 2.2 prévoient notamment que les contenus non textuels disposent d’une alternative adaptée à leur fonction ou à l’information qu’ils transmettent, avec des traitements différents selon qu’il s’agit d’un contenu informatif, décoratif ou d’un contrôle interactif.
La bonne alternative dépend donc toujours du contexte d’utilisation de l’image.
Comment contrôler les images d’un site ?
Un premier contrôle consiste à parcourir les pages principales et à se demander, pour chaque image : transmet-elle une information ? Est-elle décorative ? Sert-elle de bouton ou de lien ? Le texte autour permet-il déjà de comprendre son rôle ?
Il est également utile de vérifier le comportement avec un lecteur d’écran ou des outils d’inspection adaptés, car la présence d’un attribut alt ne garantit pas à elle seule que l’alternative est pertinente.
Que peut vérifier DOMMAT ?
Dans un audit ou un contrôle d’accessibilité, DOMMAT peut examiner les alternatives textuelles des images, le rôle des visuels, les icônes interactives et les contenus graphiques dans le périmètre convenu.
Pour aller plus loin, consultez ce que vérifie un audit d’accessibilité web, l’approche Accessibilité DOMMAT, notre article sur les formulaires accessibles ou celui consacré à la navigation clavier et au focus visible.
Vous pouvez également présenter votre besoin d’accessibilité.