Rédiger un bon texte alternatif pour les images

À quoi sert le texte alternatif

Le texte alternatif est l’équivalent textuel d’une image, écrit dans l’attribut alt. Les lecteurs d’écran le lisent à voix haute, les plages braille l’affichent, et le navigateur le montre quand l’image ne se charge pas. Les moteurs de recherche peuvent aussi l’utiliser. La norme web d’accessibilité, les WCAG, demande un équivalent textuel qui remplit la même fonction que l’image (critère de succès 1.1.1, niveau A).

L’idée clé : le texte alternatif n’est pas une légende, ni une description de l’image pour elle-même. Il dit ce que l’image apporte à la page. La même photo peut demander un texte alternatif différent sur deux pages, ou aucun.

Quatre types d’images

• Les images informatives apportent du sens : une photo, une icône à côté d’un numéro de téléphone, un diagramme. Écris un court texte alternatif qui transmet ce sens.
• Les images fonctionnelles se trouvent dans des liens et des boutons. Le texte alternatif nomme l’action ou la cible, pas l’image : « Rechercher » pour une loupe, « Imprimer cette page » pour une icône d’imprimante.
• Les images décoratives n’apportent rien : une bordure, un espaceur, une fioriture, ou une image qui ne fait que répéter le texte voisin. Donne-leur un attribut alt vide (alt="") pour que les lecteurs d’écran les ignorent, ou place-les en arrière-plan dans la feuille de style.
• Les images de texte sont un dernier recours. Si tu en as besoin, le texte alternatif reprend les mots de l’image. Un logo qui n’est pas un lien reçoit le nom de l’organisation.

Comment rédiger un bon texte alternatif

1. 1Demande-toi pourquoi l’image est sur la page. Que manquerait-il à un visiteur si elle disparaissait ?
2. 2Écris ce qui compte pour cet objectif, en quelques mots ou en une phrase.
3. 3Commence par le contenu. Un lecteur d’écran annonce en général qu’il s’agit d’une image, donc « image de » ou « photo de » aide rarement.
4. 4Ne répète pas ce que dit déjà le texte à côté de l’image. S’il dit tout, l’image est décorative et reçoit un alt vide.
5. 5Lis le texte alternatif à voix haute sans regarder la page. A-t-il un sens à lui seul ?

Erreurs courantes

• Pas d’attribut alt du tout. Certains lecteurs d’écran lisent alors le nom du fichier.
• Un nom de fichier ou un code comme texte alternatif, par exemple « IMG_2041.jpg ».
• La même suite de mots-clés sur de nombreuses images. Le texte alternatif s’adresse d’abord aux personnes.
• Une longue description d’une image purement décorative.
• Décrire l’apparence d’une image de bouton au lieu de son action. Un bouton de recherche n’est pas « loupe », c’est « Rechercher ».

Quelle longueur ?

Le critère WCAG 1.1.1 ne fixe pas de nombre de caractères. Le W3C conseille de rester bref, idéalement quelques mots ou une phrase. Pour les graphiques et autres images complexes, donne l’information complète sous forme de texte sur la page et garde un texte alternatif court. S’il te faut plus d’une phrase, l’image porte probablement un contenu qui a sa place dans le texte de la page.

Vérifie ton site

Pour trouver les images sans texte alternatif utile, lance le Vérificateur de texte alternatif gratuit sur une page. Pour obtenir des suggestions pour de nombreuses images, utilise l’outil Textes alternatifs. Une suggestion automatique peut passer à côté de ce qui compte sur ta page : lis donc chaque texte et modifie-le s’il ne correspond pas à la fonction de l’image.

Les outils de Do4U aident à la saisie, pas à la décision : tu sais mieux que quiconque si une image est informative, fonctionnelle ou décorative. Vérifie de nouveau après de gros changements sur ton site.