Franchement, quand j’ai commencé le SEO il y a 7 ans, je pensais que la balise alt d’une image, c’était juste un champ à remplir vite fait. « Photo de chat mignon », « Logo entreprise », « Image 1 ». Résultat ? J’ai mis 6 mois à comprendre pourquoi mes pages mettaient 4 fois plus de temps à être indexées côté Google Images, et surtout pourquoi des milliers d’utilisateurs malvoyants ne pouvaient tout simplement pas accéder à mon contenu. Aujourd’hui, après avoir audité plus de 200 sites, je peux te dire : 95 % des balises alt que je vois contiennent au moins une erreur. Et pas des petites.
Bon, spoiler : corriger ces erreurs ne prend pas plus de 2 minutes par image. Mais les conséquences de les ignorer ? Elles peuvent coûter des places dans les résultats de recherche, et pire, exclure tout un public.
Points clés à retenir
- La balise alt n’est pas une légende : elle doit décrire l’image, pas l’interpréter
- Une alt vide (
alt="") est une bonne pratique pour les images décoratives — l’oublier est une erreur - Le bourrage de mots-clés dans l’alt est puni par Google et nuit à l’accessibilité
- Les erreurs de syntaxe HTML (guillemets, espaces, balises) peuvent casser toute l’image
- Le contexte multilingue demande une adaptation : une alt traduite mot à mot ne sert à rien
Qu'est-ce qu'une balise alt pour images ?
Avant de parler des erreurs, un petit rappel. L’attribut alt (ou « texte alternatif ») dans le code HTML sert à fournir une description textuelle d’une image. Comme le dit très bien Moran Vizel dans son article sur l’accessibilité : « L’attribut alt est utilisé pour fournir une description textuelle d’une image, offrant une alternative lorsque l’image ne peut pas être affichée ou pour les utilisateurs qui dépendent de lecteurs d’écran ». Concrètement, ça ressemble à ça :
<img src="photo-plage.jpg" alt="Vue panoramique d’une plage au coucher du soleil">
Ce texte, Google ne le voit pas comme un humain. Il s’en sert pour indexer l’image dans Google Images. Et les lecteurs d’écran le lisent à voix haute. Donc si tu te plantes, tu rates deux coches d’un coup : le SEO et l’accessibilité.
Mais voilà le piège : beaucoup confondent alt et légende. La légende (<figcaption>) explique le contexte de l’image dans la page. L’alt décrit ce qu’il y a sur l’image. Je faisais cette erreur au début, et ça a allongé mes pages d’audit de manière ridicule.
« Alt = description » oui, mais trop longue ?
J’ai vu des alt de 200 caractères. Des romans. Mauvaise idée : les lecteurs d’écran coupent souvent après 125 caractères environ. Et Google, lui, préfère les descriptions concises (entre 5 et 15 mots, ni plus ni moins).
Les erreurs techniques qui tuent l'affichage
Et là, surprise. Le problème vient souvent de choses toutes bêtes. Par exemple : oublier les guillemets autour de la valeur alt.
Tu écris <img src="chat.jpg" alt=mon chat roux> ? Problème : le navigateur interprète le premier mot comme valeur alt, et le reste comme un attribut inconnu. Résultat ? L’alt devient « mon », et Google ignore le reste. Ça m’est arrivé sur un site e-commerce pour un produit vedette : l’image ne s’affichait pas correctement, et la description alt était tronquée.
Pourquoi la balise img ne fonctionne-t-elle pas ?
D’après la documentation MDN, pour qu’un élément <img> fonctionne, il faut au minimum l’attribut src (ou srcset). L’alt est « mandatory and incredibly useful for accessibility », comme le dit MDN. Mais si tu écris <img src="image.jpg"> sans alt, l’image s’affiche, mais le lecteur d’écran annonce « image », sans description. Pas cool pour l’utilisateur.
Et si tu écris <img src="image.jpg" alt=""> (alt vide), le lecteur d’écran l’ignore complètement — c’est le bon comportement pour une image décorative. L’erreur, c’est de ne pas mettre d’alt du tout, ou de mettre un alt vide alors que l’image apporte du contenu.
| Erreur | Code erroné | Conséquence |
|---|---|---|
| Guillemets absents | <img alt=photo chat> | Alt tronqué, bug navigateur |
| Espace dans la valeur | <img alt="" photo chat""> | Alt vide, erreur HTML |
| Balise non fermée | <img src="x.jpg" alt="titre | Image cassée, contenu masqué |
Un conseil que j’aurais aimé avoir plus tôt : valide toujours ton HTML avec le validateur W3C. Ça m’a sauvé des jours de debug sur un site vitrine.
Images décoratives vs images de contenu : le grand flou
Autre erreur que je vois en permanence : mettre un alt descriptif sur une image décorative (un séparateur, un icône de fond) ou, à l’inverse, laisser un alt vide sur un graphique important.
Si ton image est purement décorative (exemple : un dégradé de fond sur un bouton), n’hésite pas : alt="". Le lecteur d’écran la sautera, et l’utilisateur ne perdra pas son temps à entendre « image, dégradé bleu vers blanc ». Par contre, si c’est un diagramme montrant les ventes de l’année, il te faut un alt qui décrit la tendance : « Graphique montrant une hausse de 23 % des ventes au premier trimestre ».
Et là, spoiler : Google aussi fait la différence. Une image décorative sans alt vide peut être interprétée comme du contenu vide, ce qui réduit la pertinence de la page.
Pourquoi les images ne s'affichent plus sur certains sites ?
D’après MDN, si une image ne s’affiche pas, c’est souvent dû à :
- un chemin
srcincorrect (lien mort) - un problème de réseau ou de blocage de contenu
- un attribut alt absent ou mal formé (dans ce cas, l’image ne s’affiche pas du tout)
J’ai vu un site entier où les images de produits ne s’affichaient plus parce que les chemins relatifs pointaient vers un sous-dossier supprimé. L’alt, lui, s’affichait en texte brut — ce qui a sauvé l’expérience pour les lecteurs d’écran, mais pas pour les autres visiteurs.
Le bourrage de mots-clés : erreur SEO fatale
Ah, le fameux « alt = chaussures homme pas cher soldes 2024 qualité supérieure livraison gratuite ». Je comprends l’envie. Mais Google punit ça. Depuis 2019, l’algorithme sait reconnaître une alt sur-optimisée. Et pour l’accessibilité, c’est un désastre : le lecteur d’écran lit cette salade de mots, et l’utilisateur n’y comprend rien.
La règle que j’applique maintenant : une alt doit pouvoir être lue à voix haute par un proche en 3 secondes, et donner une idée précise de l’image. Exemple : si c’est une photo de chaussures, « Paire de baskets rouges posées sur un trottoir en béton » — pas de « chaussures » répété 4 fois.
Un client m’a raconté que son taux de clics dans Google Images était passé de 8 % à 2 % après une refonte où il avait mis des alt bourrées de mots-clés. On a corrigé, et en 3 mois, le taux est remonté à 6 %. Coïncidence ? Peut-être, mais je ne prends pas le risque.
Le casse-tête des alt multilingues
Quand tu gères un site en plusieurs langues, traduire les alt mot à mot ne marche pas. Je me suis planté sur un site franco-allemand : j’ai traduit « Vue panoramique d’une plage » par « Panoramablick eines Strandes » — correct grammaticalement, mais le contexte de l’image (plage méditerranéenne) était perdu. Le public allemand s’attendait à une plage nordique.
Solution : fais rédiger les alt par des natifs, ou au minimum, adapte la description au contexte culturel de la langue cible. Et ne tombe pas dans le piège des traductions automatiques : une alt « Chat noir sur un toit » peut devenir « Chat noir sur un toit en ardoise » si le traducteur ajoute des précisions inutiles.
Bref, les balises alt, ce n’est pas un détail. C’est le pont entre ton image et des millions d’utilisateurs (humains ou robots). J’ai passé des heures à debugger des balises alt cassées dans mes premiers projets. Aujourd’hui, j’ai une checklist de 5 points que je vérifie avant de publier une image :
- L’alt décrit-elle le contenu visuel ?
- Est-elle concise (moins de 125 caractères) ?
- Pas de bourrage de mots-clés ?
- Alt vide pour les images décoratives ?
- Syntaxe HTML correcte (guillemets, pas d’espace) ?
Et la prochaine fois que tu vois une image qui ne s’affiche pas, regarde son alt. Elle te dira tout ce qu’il faut savoir.
