Texte alternatif : écrire un alt qui sert à quelqu'un

Fermez les yeux et faites-vous lire votre page d’accueil par un lecteur d’écran. À la place de la belle photo de votre vitrine, vous entendrez peut-être « IMG_4071 point JPG ». Ou rien du tout. C’est ce qu’entend chaque jour une personne aveugle ou malvoyante qui visite un site où les images n’ont pas de texte alternatif.

À quoi sert l’attribut alt

Dans le code, une image s’écrit <img src="vitrine.jpg" alt="...">. Le texte de l’attribut alt est lu par les lecteurs d’écran, affiché à la place de l’image quand elle ne charge pas, et utilisé par les moteurs de recherche.

Google le dit dans ses bonnes pratiques pour les images : il se sert du texte alternatif, avec la vision par ordinateur et le contenu de la page, pour comprendre le sujet d’une image. Il conseille un texte utile et riche en information, qui utilise les mots-clés de façon appropriée et dans le contexte de la page, et il cite le bourrage de mots-clés dans les attributs alt comme une mauvaise pratique.

Les deux usages vont donc dans le même sens. Un bon alt pour un lecteur d’écran est aussi un bon alt pour Google.

Trois questions avant d’écrire

Le W3C, qui publie les standards du web, propose un arbre de décision pour savoir quoi mettre. Il se résume ainsi.

L’image apporte-t-elle une information ?

Une photo d’un chantier terminé, un plan d’accès, un produit : oui. Décrivez ce qu’elle montre d’utile dans le contexte de la page.

L’image est-elle un lien ou un bouton ?

Un logo qui renvoie à l’accueil, une icône de panier : l’alt décrit la destination ou l’action, pas le dessin. « Accueil », « Voir le panier », et non « logo bleu » ou « icône de chariot ».

L’image est-elle purement décorative ?

Un motif, une séparation, une photo d’ambiance qui répète le texte voisin : l’attribut doit être présent mais vide, alt="". Le lecteur d’écran passe alors l’image sans rien dire. Supprimer l’attribut est une erreur : certains lecteurs liraient alors le nom du fichier.

Des exemples dans un contexte de petite entreprise

Sur la page d’un menuisier, photo d’une cuisine posée. Faible : « cuisine ». Trop chargé : « menuisier Nantes cuisine sur mesure bois menuiserie Nantes pas cher ». Utile : « Cuisine en chêne massif avec îlot central, posée dans une maison des années 1930 ».

Sur la fiche produit d’une épicerie fine. Faible : « pot de miel ». Utile : « Pot de miel de châtaignier de 250 g, étiquette kraft, couvercle doré ».

Sur une page d’équipe. Faible : « photo ». Utile : « Léa, apprentie pâtissière, glace des éclairs au chocolat ». À condition, bien sûr, que la personne ait accepté d’apparaître sur le site.

Le bon réflexe : écrire l’alt comme si vous décriviez la photo au téléphone à quelqu’un qui doit choisir sur cette base.

Les petites règles qui évitent les erreurs

Inutile de commencer par « image de » ou « photo de » : le lecteur d’écran annonce déjà qu’il s’agit d’une image. Restez sous une phrase ou deux ; pour un schéma complexe, décrivez-le en détail dans le texte de la page. Ne répétez pas mot pour mot la légende placée juste en dessous. Et nommez aussi vos fichiers avec des mots compréhensibles, cuisine-chene-ilot.jpg plutôt que IMG_4071.jpg : Google indique que le nom de fichier peut lui donner des indices sur le sujet de l’image.

Où le remplir

Sur WordPress, le champ « Texte alternatif » apparaît dans la médiathèque quand on clique sur une image. Sur Wix, Shopify ou Squarespace, il se trouve dans les réglages de l’image, souvent sous un nom comme « Texte alternatif » ou « Description de l’image pour les moteurs de recherche ».

Le contrôle

Collez le code source d’une de vos pages dans notre lecteur de balises : il compte les images et liste celles qui n’ont pas d’attribut alt. Commencez par la page d’accueil et vos pages de prestations. Pour les images que vous avez laissées volontairement vides, vérifiez qu’elles sont bien décoratives.