Le texte alternatif est l’équivalent textuel d’une image. En HTML, c’est l’attribut alt d’un élément img ; en pratique, son rôle est de préserver la fonction de l’image lorsque le lecteur ne peut pas la voir. Un lecteur d’écran peut l’annoncer, un affichage en mode texte seul ou à faible débit peut l’exposer, et les systèmes de recherche peuvent s’en servir avec la page qui l’entoure pour comprendre l’image. Ce n’est pas un champ destiné à répéter une requête cible ou à servir de levier de positionnement isolé.
Le rôle de l’image, pas les mots-clés
Une même image peut appeler des alternatives différentes selon le contexte. La photo d’une tasse bleue dans une fiche produit peut nécessiter le nom du produit, sa couleur et sa matière. Dans un article sur les habitudes de bureau, l’information utile peut être que la tasse est posée à côté d’un carnet. Si la photo ne fait que décorer un paragraphe qui énonce déjà le même fait, l’alternative correcte peut être vide : alt="". Les recommandations du W3C sur les images font cette distinction selon le rôle : les images informatives décrivent l’information essentielle, les images fonctionnelles décrivent l’action ou la destination, et les images décoratives reçoivent une alternative nulle.
- Image informative
- Énoncez l’information que le lecteur raterait sinon : « Tasse en céramique bleue posée à côté d’un carnet sur un bureau. »
- Image fonctionnelle
- Nommez l’action ou la destination : « Ouvrir la caisse » est plus utile que « icône de panier ».
- Image décorative
- Utilisez alt="" lorsqu’elle n’ajoute aucune information et n’est pas un contrôle interactif.
- Graphique ou schéma complexe
- Utilisez un bref résumé dans alt, et placez les constats, les libellés et les données dans le texte proche ou dans une description liée.
Choisir la bonne alternative
Commencez par le message de la page, puis décidez du rôle que joue l’image. Cela évite l’erreur fréquente qui consiste à décrire un détail séduisant en omettant le fait nécessaire à la compréhension. Pour un graphique, un libellé comme « Inscriptions mensuelles » suffit rarement ; le texte doit aussi énoncer la tendance et les valeurs qui comptent. Pour une image-lien, Google indique que le texte alt de l’image est utilisé comme texte d’ancre : l’alternative doit donc communiquer la destination ou l’action. Une image décorative placée dans un lien est un cas différent : le lien doit tout de même avoir un nom accessible, issu d’un texte visible ou d’un autre libellé fiable.
| Usage de l’image | Alternative utile | À éviter |
|---|---|---|
| Photo de produit | Produit précis, variante distinctive et état visible | Un slogan commercial ou une requête d’achat répétée |
| Bouton avec icône | L’action, par exemple « Télécharger le rapport » | « Flèche bleue » |
| Graphique | Bref constat et texte proche avec les données complètes | Une longue suite de valeurs entassée dans alt |
| Séparateur décoratif | Attribut alt vide | Un nom de fichier ou une mention générique « décoration » |
Rédiger et contrôler le texte alternatif
Rédigez l’alternative une fois l’image placée à côté de son texte final. Gardez-la assez courte pour qu’elle se lise naturellement dans la phrase, placez la distinction clé au début, et reprenez les termes que les lecteurs voient déjà dans la page lorsqu’ils sont pertinents. Ne vous fixez pas de nombre de caractères universel : une icône peut demander deux mots, tandis qu’une photo de produit peut exiger une courte phrase. Si le concept ne peut pas être exprimé brièvement, rendez l’explication plus longue visible dans le contenu de la page.
- Classez l’image comme informative, fonctionnelle, complexe ou décorative dans son contexte final sur la page.
- Rédigez la formule la plus courte qui préserve son rôle ; supprimez « image de » et les autres tournures qui n’apportent aucun sens.
- Comparez l’alternative avec la légende, le titre et le texte voisin, pour qu’elle ne les contredise pas et ne fasse pas que les répéter.
- Inspectez le HTML après rendu pour trouver l’élément img et la valeur alt prévue ; les URL d’images et le titre du média dans le CMS ne la remplacent pas.
- Pour un gabarit représentatif, écoutez le rendu avec un lecteur d’écran ou inspectez l’arbre d’accessibilité, puis échantillonnez les composants répétés et les cas d’image manquante.
Je distingue une image qui porte du sens d’une simple décoration, puis je rédige le texte alternatif pour ce sens, sans y entasser un nom de fichier ou des mots-clés. Cette pratique est une méthode de revue, et non une preuve que chaque image d’un site est accessible : une revue complète vérifie aussi les gabarits rendus, les images liées et les processus éditoriaux.
Limites et erreurs courantes
Le texte alternatif aide à l’accessibilité et donne aux systèmes de recherche un indice pertinent, mais il ne peut pas réparer un contrôle inaccessible, une image bloquée, un texte de page hors sujet ou l’absence d’explication écrite pour un visuel complexe. Google utilise le contexte de la page, les légendes et d’autres signaux, en plus du texte alt, pour comprendre les images. Traitez la découverte des images et la qualité de la page de destination d’une image comme deux contrôles distincts.
- N’utilisez pas un nom de fichier, un titre de CMS ou une liste de mots-clés comme alternative.
- Ne supposez pas qu’un attribut alt non vide vaut toujours mieux : une image décorative doit en général être ignorée avec alt="".
- Ne faites pas porter à alt des mentions légales, des données ou un appel à l’action qui n’existent nulle part ailleurs sur la page.
- Ne réutilisez pas la même alternative générique pour des images de produits sans rapport, simplement parce qu’un gabarit l’accepte.
- N’affirmez pas que l’ajout d’un texte alt garantit un meilleur positionnement web, l’inclusion dans la recherche d’images ou un résultat de conformité en matière d’accessibilité.