Audit de site web › Balise alt : exemples

Balise alt : exemples concrets pour chaque type d'image

En bref : l'attribut alt (souvent appelé « balise alt ») est le texte qui remplace une image pour qui ne la voit pas : lecteur d'écran, connexion lente, robot de Google. La règle tient en une question : si l'image disparaissait, que faudrait-il écrire à sa place pour ne rien perdre ? Si la réponse est « rien », l'alt reste vide.

À quoi sert l'attribut alt

Pour l'accessibilité : une obligation des normes

Les règles internationales d'accessibilité, les WCAG 2.2 du W3C, commencent par ce point. Leur critère 1.1.1 « Contenu non textuel », de niveau A (le plus élémentaire), demande que tout contenu non textuel ait une alternative textuelle qui remplit la même fonction. Deux cas particuliers : un bouton ou un champ doit avoir un nom qui décrit son rôle, et une image purement décorative doit pouvoir être ignorée par les aides techniques.

En France, le référentiel officiel RGAA reprend ces exigences dans son thème 1, « Images ». Ses critères vérifient que chaque image porteuse d'information a une alternative textuelle (1.1), que chaque image de décoration est ignorée par les technologies d'assistance (1.2), que l'alternative est pertinente (1.3) et qu'une image complexe a, si nécessaire, une description détaillée (1.6). Le critère 1.3 compte autant que le 1.1 : un alt présent mais faux (« IMG_4521 », « image ») ne suffit pas. Votre site est-il concerné par l'obligation légale ? Voyez l'accessibilité d'un site est-elle obligatoire ?.

Pour Google : comprendre l'image

Dans ses bonnes pratiques pour Google Images, Google écrit que le texte alternatif est « l'attribut le plus important » pour donner des informations sur une image. Il s'en sert, avec le texte voisin, pour comprendre l'image, et l'alt d'une image cliquable lui sert de texte de lien. Son exemple : alt="chiot" est acceptable, alt="Chiot dalmatien en train de jouer à la balle" est meilleur, et une suite de mots-clés est à éviter.

La même page rappelle que Google n'indexe pas les images de fond CSS : une photo de réalisation doit être une vraie balise <img> pour sortir dans Google Images. Aucune position n'est promise grâce à l'alt : c'est une aide à la compréhension, pas un raccourci.

12 exemples, du logo au graphique

Pour chaque cas : ce qu'on trouve souvent, puis une meilleure version. Les entreprises et les textes sont fictifs ; les cas suivent les catégories de l'arbre de décision du W3C (image informative, décorative, fonctionnelle, texte en image, image complexe) et de la norme HTML.

1. 1 Logo dans l'en-tête, lien vers l'accueil

   Cliquable, en haut de chaque page.

   À éviter

   <a href="/"><img src="logo.png" alt="logo"></a>

   Mieux

   <a href="/"><img src="logo.png" alt="Martin Couverture, accueil"></a>

   L'image est un lien : son alt devient le nom du lien. « logo » ne dit ni de qui, ni où l'on va.

2. 2 Logo seul, à côté du nom écrit en texte

   Le nom est déjà écrit dans le même lien.

   À éviter

   <a href="/"><img src="logo.png" alt="Martin Couverture"> Martin Couverture</a>

   Mieux

   <a href="/"><img src="logo.png" alt=""> Martin Couverture</a>

   Sinon le lecteur d'écran lirait le nom deux fois : alt vide.

3. 3 Photo de chantier, avant travaux

   Page « Nos réalisations » d'un couvreur.

   À éviter

   <img src="IMG_4521.jpg" alt="IMG_4521">

   Mieux

   <img src="toiture-avant.jpg" alt="Toit en ardoise avec tuiles cassées et mousse, avant réfection">

   Le nom du fichier n'apprend rien ; la bonne version dit ce qu'on voit et pourquoi.

4. 4 Photo de chantier, après travaux

   La même toiture, refaite.

   À éviter

   <img src="toiture-apres.jpg" alt="couvreur Lyon toiture ardoise réfection toit Lyon pas cher">

   Mieux

   <img src="toiture-apres.jpg" alt="Même toit après réfection : ardoises neuves et faîtage refait">

   La première est une liste de mots-clés, que Google déconseille. La seconde se lit comme une phrase et répond à la photo précédente.

5. 5 Photo d'équipe

   Page « Qui sommes-nous » d'un cabinet comptable.

   À éviter

   <img src="equipe.jpg" alt="Notre équipe dynamique et passionnée à votre service">

   Mieux

   <img src="equipe.jpg" alt="Les quatre associés du cabinet devant les bureaux de la rue Victor-Hugo">

   Un slogan n'est pas une description : dites qui l'on voit, et où.

6. 6 Photo de produit

   Fiche d'une boutique en ligne.

   À éviter

   <img src="sac.jpg" alt="sac">

   Mieux

   <img src="sac.jpg" alt="Sac cabas en cuir camel, anses courtes, vu de face">

   Ici, couleur, matière et angle de vue sont l'information ; « sac » est trop pauvre.

7. 7 Image décorative

   Une vague qui sépare deux parties.

   À éviter

   <img src="vague.svg" alt="vague décorative bleue">

   Mieux

   <img src="vague.svg" alt="">

   Elle n'apporte rien : alt vide, ou mieux, une image de fond CSS.

8. 8 Icône à côté d'un texte

   Devant le numéro écrit en clair.

   À éviter

   <img src="tel.svg" alt="icône téléphone"> 04 00 00 00 00

   Mieux

   <img src="tel.svg" alt=""> 04 00 00 00 00

   Le numéro est déjà lisible. L'icône ne fait que l'illustrer : alt vide.

9. 9 Bouton-image

   Une loupe qui lance la recherche.

   À éviter

   <input type="image" src="loupe.svg" alt="loupe">

   Mieux

   <input type="image" src="loupe.svg" alt="Rechercher">

   Pour un bouton, on décrit l'action, pas le dessin.

10. 10 Lien-image vers un réseau social

    Icône Facebook du pied de page.

    À éviter

    <a href="https://facebook.com/..."><img src="fb.svg"></a>

    Mieux

    <a href="https://facebook.com/..."><img src="fb.svg" alt="Notre page Facebook"></a>

    Sans alt, le lecteur d'écran annonce souvent l'adresse ou le nom du fichier. L'alt donne la destination.

11. 11 Image contenant du texte

    Bannière de promotion au texte incrusté.

    À éviter

    <img src="promo.jpg" alt="promotion">

    Mieux

    <img src="promo.jpg" alt="-20 % sur l'entretien de chaudière jusqu'au 30 novembre">

    Le texte de l'image doit figurer dans l'alt, mot pour mot, sinon l'offre n'existe ni pour une personne aveugle ni pour Google.

12. 12 Graphique

    Histogramme d'un rapport annuel.

    À éviter

    <img src="ca.png" alt="graphique">

    Mieux

    <img src="ca.png" alt="Chiffre d'affaires de 2023 à 2025, en hausse chaque année ; montants dans le tableau ci-dessous">
    <table>…les trois montants…</table>

    « graphique » ne transmet aucune donnée. L'alt résume ce que montre le graphique, et le tableau placé juste après donne le détail : c'est la description détaillée dont parle le critère 1.6 du RGAA.

Les erreurs les plus fréquentes

1. Pas d'attribut alt du tout. Le lecteur d'écran lit alors souvent le nom du fichier. Un alt vide et un alt absent ne sont pas la même chose : le vide dit « décoratif, passez », l'absent dit « on a oublié ».
2. Le nom du fichier ou un mot vague : « photo1 », « image », « DSC0042 ». Google conseille aussi des noms de fichiers parlants.
3. Le même alt sur toutes les images, souvent le nom de l'entreprise, collé par une extension ou un thème.
4. Un alt rempli de mots-clés et de noms de villes. C'est du bourrage de mots-clés au sens des règles anti-spam de Google.
5. Décrire le dessin au lieu de l'action sur un bouton ou un lien-image (exemples 9 et 10), ou oublier le texte écrit dans l'image (exemple 11).
6. Compter sur l'attribut title pour décrire l'image : il ne la remplace pas.

Vérifier les alt d'une page

Dans le code source. Ctrl + U, puis Ctrl + F et tapez <img : lisez ce qui suit alt= pour chaque image.

Dans la console du navigateur. Clic droit, « Inspecter », onglet « Console », collez cette ligne puis Entrée :

[...document.images].map(i => (i.hasAttribute('alt') ? '"' + i.alt + '"' : 'SANS ALT') + '  ' + i.src)

Chaque image s'affiche avec son alt entre guillemets, ou « SANS ALT ». La commande ne fait que lire la page ; reste à juger si chaque texte est juste, ce qu'aucun outil ne fait à votre place.

Remplir l'alt dans WordPress

Dans l'éditeur de blocs, sélectionnez l'image : le panneau de réglages du bloc Image contient un champ « Texte alternatif ». La documentation du bloc Image (mise à jour en août 2026) apporte deux précisions utiles :

• un alt saisi dans le bloc ne vaut que pour cette page ; un alt saisi dans la Médiathèque devient la valeur par défaut chaque fois que vous insérez l'image ailleurs. Remplissez donc d'abord la Médiathèque, puis adaptez au cas par cas ;
• une case permet désormais de marquer l'image comme décorative, pour que les lecteurs d'écran l'ignorent.

Les images ajoutées par le thème ou une extension de galerie ne passent pas par ce champ : contrôlez la page publiée avec la console. Autres soucis de visibilité : pourquoi un site WordPress n'apparaît pas sur Google.

Remplir l'alt dans Wix

Selon l'aide de Wix sur les images et l'accessibilité (en anglais) : cliquez sur l'image dans l'éditeur, puis sur l'icône « Paramètres », et décrivez l'image dans le champ « Que montre l'image ? » (« What's in the image? »). Wix recommande un texte bref, limité aux détails utiles.

L'assistant d'accessibilité de Wix passe le site en revue et liste les images sans texte alternatif ; c'est aussi là qu'une case permet d'indiquer qu'une image est décorative. Les galeries se règlent image par image. Autres causes d'un site Wix invisible : site Wix absent de Google.

Ce contrôle dans notre audit à 19 €

Le point 3.2 de l'Audit express compte, sur votre accueil et jusqu'à 4 pages internes, les images sans attribut alt, et les classe en défaut majeur avec la correction à faire. Il fait partie des 20 contrôles livrés sous 24 h pour 19 € TTC. Sa limite : il repère les alt manquants, pas les alt mal écrits ; les exemples ci-dessus servent à juger ce second point. Voyez un exemple de rapport d'audit, et pour les titres de vos pages, notre guide sur la balise h1.

Mis à jour le 6 octobre 2026. Sources consultées ce jour, liées dans le texte : WCAG 2.2 (1.1.1), RGAA 4.1.2 (thème 1), W3C WAI, norme HTML du WHATWG, Google Search Central, documentation WordPress, aide de Wix.

Questions fréquentes

Faut-il remplir la balise alt de toutes les images ?

Il faut que chaque image ait un attribut alt, mais pas forcément rempli. Une image qui apporte une information ou qui sert de lien reçoit un texte. Une image purement décorative reçoit alt="" (vide), pour que les lecteurs d'écran la passent sans rien dire.

Quelle longueur pour un texte alternatif ?

Aucune norme ne fixe de nombre de caractères. Une courte phrase suffit presque toujours : ce que l'image apprend au visiteur à cet endroit de la page. Si l'image contient beaucoup d'informations, comme un graphique, mettez le détail dans le texte de la page plutôt que dans l'alt.

La balise alt aide-t-elle le référencement ?

Google écrit que le texte alternatif est l'attribut le plus important pour donner des informations sur une image, et qu'il l'aide à la comprendre. Il sert aussi de texte de lien quand l'image est un lien. Google ne promet aucune place en échange, et déconseille d'y entasser des mots-clés.

Quelle différence entre alt et title sur une image ?

L'attribut alt remplace l'image pour qui ne la voit pas : il est lu par les lecteurs d'écran et affiché si l'image ne se charge pas. L'attribut title affiche une infobulle au survol de la souris, que beaucoup d'appareils n'affichent pas. Il ne remplace jamais l'alt.

Faut-il commencer le texte par « image de » ou « photo de » ?

Non. Le lecteur d'écran annonce déjà qu'il s'agit d'une image. Écrivez directement ce qu'elle montre. Précisez « photo » ou « dessin » seulement si c'est une information utile, par exemple pour un portfolio de photographe.

Testez votre site gratuitement

Adresse de votre site : 6 points vérifiés en 10 secondes (HTTPS, temps de réponse, title, description, H1, mobile)

Vérifier gratuitement

À lire aussi : la balise h1, avec des exemples bons et mauvais · les Core Web Vitals (LCP, INP, CLS) expliqués simplement · le prix d'un audit de site et ce qu'il comprend · auditer soi-même son site vitrine en 10 vérifications.

Guide rédigé par un agent d'intelligence artificielle (Claude) pour Pierre, PGA WEBCORPO. Publié le 2026-10-06.