Vos images n'ont pas besoin de texte alternatif

Vous venez d'ajouter un alt sur chaque image de votre site. Votre collègue QA est content, Lighthouse ne remonte plus d'erreur. Sauf qu'un utilisateur de lecteur d'écran vient d'entendre 15 descriptions inutiles avant d'arriver au contenu.

Vous avez créé un nouveau problème d'accessibilité en essayant d'en résoudre un.

Comment distinguer les images qui parlent de celles qui doivent se taire

#Pourquoi mettre un alt partout dégrade l'expérience utilisateur

Le bruit. Un lecteur d'écran annonce chaque image avec son texte alternatif. Si l'image est décorative, ce texte est du bruit pur : il interrompt la lecture, noie l'information utile et fatigue l'utilisateur. Le W3C le dit explicitement : les valeurs textuelles sur les images décoratives « ajoutent du désordre auditif à la sortie des lecteurs d'écran ou peuvent distraire les utilisateurs ».

En pratique. Prenez une page produit e-commerce. 15 images : une photo d'ambiance en bannière, des séparateurs, des icônes avec des labels visibles, des coins arrondis. Vous mettez un alt descriptif sur chacune. Un utilisateur de VoiceOver entend : « Image bannière lifestyle homme souriant devant ordinateur, séparateur horizontal bleu, icône panier, icône étoile, image décorative coin arrondi... » 15 interruptions avant d'arriver au prix du produit.

L'effet cumulé. Si vous avez 18 images décoratives avec un alt descriptif, le lecteur d'écran répète 18 fois un texte sans rapport avec le contenu. Le temps de lecture explose.

La spec dit l'inverse. Le réflexe « je mets un alt partout pour être conforme » est faux. WCAG 1.1.1 (niveau A) demande explicitement que les images décoratives soient « implémentées de manière à pouvoir être ignorées par les technologies d'assistance ». La conformité, c'est un alt vide sur les images décoratives. Pas un alt descriptif.

Les chiffres. Selon le rapport WebAIM Million 2025, 18,5 % des images n'ont pas d'alt du tout. Et 13,4 % des images qui ont un alt ont un texte douteux ou répétitif : alt="image", alt="graphic", alt="blank", un nom de fichier, ou un alt identique au texte adjacent. Faites le calcul : près d'un tiers des images sur les sites les plus visités ont un alt manquant, douteux ou répétitif. Sur 3 images, 1 a un problème.

Le vrai réflexe. Les conseils « mettez un alt partout » sont simplistes. Ils datent d'une époque où le web était différent. Aujourd'hui, un développeur qui applique cette règle sans discernement crée autant de problèmes qu'il en résout.

EAA et accessibilité web : ce qui change pour votre entreprise en 2026

#Alt-texte et SEO : ce qu'en dit vraiment Google

On entend souvent : « Chaque image doit avoir un alt pour le SEO. » La réalité est plus nuancée. Google recommande les textes alternatifs pour les images informatives, mais un alt inutile sur une image décorative n'apporte aucun bénéfice SEO. Selon la documentation Google sur les images, le bon alt pour l'accessibilité EST le bon alt pour le SEO.

Le keyword stuffing dans les alt est la pire stratégie possible. Google le pénalise activement, et c'est catastrophique pour l'accessibilité. Un utilisateur de lecteur d'écran qui entend alt="chaussures homme pas cher livraison gratuite soldes promotion chaussures" sur une photo de produit ne reçoit aucune information utile.

Votre responsable SEO vous demande de « mettre des mots-clés dans tous les alt » ? Répondez avec les faits : un bon alt décrit le contenu de l'image en une phrase naturelle. C'est exactement ce que Google valorise.

<!-- ❌ Keyword stuffing : pénalisé par Google, inutile pour l'utilisateur -->
<img src="sneakers.jpg" alt="chaussures homme pas cher sneakers soldes promotion livraison gratuite" />
 
<!-- ✅ Alt descriptif : bon pour le SEO ET l'accessibilité -->
<img src="sneakers.jpg" alt="Sneakers blanches modèle Runner, vue de profil." />

Les deux objectifs ne s'opposent pas. Ils convergent.

Accessibilité et SEO : comment les mêmes corrections font grimper vos positions Google

#Quatre types d'images qui ne doivent PAS avoir de texte alternatif

Le W3C WAI identifie plusieurs catégories d'images décoratives. Le test est simple : une image est décorative si les utilisateurs peuvent accomplir toutes les tâches et comprendre toutes les informations de la page sans elle. Si vous retirez l'image et que rien ne manque : alt="".

#Type 1 : Images décoratives et de mise en page

Photos d'ambiance, bordures, séparateurs, coins arrondis, spacers, pixels espions. Ce sont des artefacts visuels, pas du contenu. Elles ne transmettent aucune information.

<!-- ❌ Le lecteur d'écran annonce "séparateur horizontal bleu" -->
<img src="separator.png" alt="séparateur horizontal bleu" />
 
<!-- ❌ Le lecteur d'écran annonce "spacer" -->
<img src="spacer.gif" alt="spacer" />
 
<!-- ✅ Le lecteur d'écran ne dit rien -->
<img src="separator.png" alt="" />
<img src="spacer.gif" alt="" />

#Type 2 : Images redondantes avec le texte adjacent

La photo illustre un texte qui la décrit déjà. Décrire l'image en alt crée un doublon.

<!-- ❌ Doublon : le texte dit déjà la même chose -->
<p>Notre équipe lors de la conférence ParisWeb 2025.</p>
<img src="team-parisweb.jpg" alt="L'équipe lors de la conférence ParisWeb 2025" />
 
<!-- ✅ L'image est redondante, alt vide -->
<p>Notre équipe lors de la conférence ParisWeb 2025.</p>
<img src="team-parisweb.jpg" alt="" />

#Type 3 : Icônes accompagnées d'un label visible

Une icône poubelle à côté du texte « Supprimer ». Si vous décrivez l'icône, le lecteur d'écran annonce le label deux fois.

<!-- ❌ Le lecteur d'écran dit : "Icône de poubelle, Supprimer" -->
<button><img src="trash.svg" alt="Icône de poubelle" /> Supprimer</button>
 
<!-- ✅ Le lecteur d'écran dit : "Supprimer, bouton" -->
<button><img src="trash.svg" alt="" /> Supprimer</button>

#Type 4 : Images dans un lien qui contient déjà du texte

Le logo dans un lien vers la page d'accueil, quand le lien contient aussi le texte « Accueil ».

<!-- ❌ Le lecteur d'écran dit : "Logo Includdy, Accueil, lien" -->
<a href="/"> <img src="logo.svg" alt="Logo Includdy" /> Accueil </a>
 
<!-- ✅ Le lecteur d'écran dit : "Accueil, lien" -->
<a href="/"> <img src="logo.svg" alt="" /> Accueil </a>

#Comment cacher correctement une image décorative

Quatre techniques existent. Chacune a son contexte.

#alt="" : la méthode standard

C'est la méthode recommandée par le W3C. Le lecteur d'écran ignore complètement l'image.

Un détail critique : l'alt doit être strictement vide. Un espace (alt=" ") est détecté par certains lecteurs d'écran. Geoff Graham (CSS-Tricks) le confirme : « Be sure it's truly an empty string because even a space gets picked up by some assistive tech. » Des tests réels montrent que NVDA avec alt=" " (espace) annonce « graphic », alors qu'avec alt="" (vide) il ne dit rien.

Et surtout : ne supprimez jamais l'attribut alt lui-même. Écrire <img src="photo.jpg"> sans attribut alt est pire que tout. Le lecteur d'écran annonce le nom du fichier : « photo-DSC0042.jpg ». Un alt avec un nom de fichier pose problème dans 96 combinaisons lecteur d'écran/navigateur.

<!-- ❌ Pire option : pas d'attribut alt du tout -->
<img src="DSC_0042.jpg" />
<!-- Le lecteur d'écran dit : "DSC underscore 0042 dot jpg, image" -->
 
<!-- ❌ Espace dans l'alt -->
<img src="decoration.jpg" alt=" " />
<!-- NVDA dit : "graphic" -->
 
<!-- ✅ Alt strictement vide -->
<img src="decoration.jpg" alt="" />
<!-- Silence -->

#aria-hidden="true" : pour les SVG inline

Un élément <svg> ne peut pas avoir d'attribut alt. Pour masquer une icône SVG décorative, utilisez aria-hidden="true". Cela retire l'élément et tous ses enfants de l'arbre d'accessibilité.

<!-- Icône décorative dans un bouton avec texte -->
<button>
    <svg aria-hidden="true" viewBox="0 0 24 24">
        <path d="M6 19c0 ..." />
    </svg>
    Supprimer
</button>

Attention : ne jamais utiliser aria-hidden="true" sur un élément focusable. Un bouton avec aria-hidden="true" reste focusable au clavier mais invisible pour le lecteur d'écran. L'utilisateur navigue dans le vide.

#CSS background-image : l'image n'existe pas dans le DOM

La technique WCAG C9 recommande CSS pour les images purement visuelles. Avantage : l'image n'existe pas dans le DOM, aucune technologie d'assistance ne la détecte.

/* Image décorative en CSS : invisible pour les technologies d'assistance */
.hero-banner {
    background-image: url("hero-ambiance.jpg");
    background-size: cover;
}

C'est la technique la plus propre pour les photos d'ambiance et les décorations de mise en page.

#Quand une image a besoin d'un texte alternatif

Le test est simple : si retirer l'image fait perdre de l'information au lecteur, elle a besoin d'un alt. Mais l'alt ne décrit pas l'apparence de l'image. Il décrit sa fonction ou son information.

Trois catégories d'images nécessitent un alt :

#Images informatives

Elles transmettent une information que le texte ne donne pas. Photos de produit, captures d'écran, graphiques.

Ce graphique, par exemple : sans alt, sa seule information disparaît pour qui ne le voit pas.

<!-- ❌ Inutile : le lecteur d'écran dit déjà "image" -->
<img src="chart.png" alt="Graphique" />
 
<!-- ✅ L'alt transmet l'information du graphique -->
<img src="chart.png" alt="Graphique : baisse de 21,6 % à 18,5 % des images sans alt entre 2024 et 2025." />

#Images fonctionnelles

Elles déclenchent une action (lien, bouton). L'alt décrit la destination ou l'action, pas l'image.

<!-- ❌ Décrit l'image, pas l'action -->
<a href="/"><img src="logo.svg" alt="Logo bleu et vert avec le texte Includdy" /></a>
 
<!-- ✅ Décrit la destination du lien -->
<a href="/"><img src="logo.svg" alt="Accueil Includdy" /></a>

#Images complexes

Graphiques, infographies, schémas. Un alt court ne suffit pas. Combinez un alt synthétique avec une description longue.

<figure>
    <img src="infographic.png" alt="Infographie : les 5 erreurs d'alt-texte les plus fréquentes." />
    <figcaption>
        <!-- Description détaillée accessible à tous -->
        Les cinq erreurs : alt manquant (18,5 % des images), alt générique ("image", "photo"), alt = nom de fichier, alt redondant avec le texte, alt sur image
        décorative. Source : WebAIM Million 2025.
    </figcaption>
</figure>

Deux règles souvent oubliées : ne commencez pas par « Image de » ou « Photo de » (le lecteur d'écran annonce déjà « image »), et terminez par un point pour que le lecteur d'écran marque une pause.

Longueur recommandée : maximum 150 caractères environ. Au-delà, utilisez une description longue.

#L'arbre de décision en 4 questions

Avant d'écrire un alt, posez-vous ces 4 questions dans l'ordre. L'arbre de décision du W3C WAI couvre la majorité des cas.

Question 1 : L'image apporte-t-elle une information que le texte autour ne donne pas ? Non → alt="". C'est une image décorative.

Question 2 : L'image est-elle dans un lien ou un bouton ? Oui → l'alt décrit la destination ou l'action. Pas l'image.

Question 3 : L'image contient-elle du texte ? Oui → l'alt reprend ce texte. Sauf si le texte est déjà présent à côté de l'image.

Question 4 : L'image est-elle un graphique ou un schéma complexe ? Oui → alt court (synthèse en une phrase) et description longue (dans <figcaption> ou un lien).

Vous devez traiter 50 images sur une page ? Avec ces 4 questions, vous savez en 10 secondes quoi faire pour chacune. Pas besoin de relire la spécification WCAG à chaque fois. Pour les cas où la même image change de rôle d'une page à l'autre, notre guide complet du texte alternatif détaille seize exemples illustrés.

Générateur de texte alternatif gratuit : l'alt de chaque image, selon son rôle

Le brouillon WCAG 3 confirme cette approche avec une question encore plus simple : « retirer l'image changerait-il la compréhension de la page ? » Non → image décorative → alt="".

#Comment vérifier vos images en pratique

Les outils automatisés ont un angle mort sur les textes alternatifs. Ils trouvent les alt manquants, mais pas les alt inutiles.

Détecter qu'une image n'a pas d'alt, c'est facile. Déterminer si un alt existant est pertinent, c'est une autre affaire. Aucun outil automatisé ne sait le faire de manière fiable.

Votre site passe Lighthouse à 100 sur l'accessibilité ? Lighthouse vérifie la présence d'un alt, pas sa pertinence. Le WebAIM Million 2025 le confirme : 13,4 % des images avec un alt ont un texte douteux ou répétitif. Un outil automatisé ne peut pas savoir si votre alt="photo" sur une image décorative est un problème.

Scénario concret : vous lancez un audit automatisé. 0 erreur sur les images. En réalité, 12 images décoratives ont des alt redondants qui polluent l'expérience pour les utilisateurs de lecteurs d'écran. L'outil ne les détecte pas.

Ce qu'un outil automatisé détecte :

• alt manquant (<img src="photo.jpg"> sans attribut alt)
• alt = nom de fichier (alt="DSC_0042.jpg")
• alt générique (alt="image", alt="photo")

Ce qu'il ne détecte pas :

• alt descriptif sur une image décorative (faux positif d'accessibilité)
• alt redondant avec le texte adjacent
• alt qui décrit l'apparence au lieu de la fonction
• alt trop long ou trop vague pour être utile

Des outils comme Includdy vont plus loin que la détection basique : ils identifient les images décoratives avec des alt superflus, pas seulement les alt manquants. C'est la différence entre « toutes vos images ont un alt » et « tous vos alt sont pertinents ».

Pour une vérification manuelle rapide : activez VoiceOver (macOS : Cmd+F5) ou NVDA (Windows, gratuit) et naviguez votre page. Chaque fois que le lecteur d'écran annonce une image sans rapport avec le contenu, c'est un alt à corriger.

La conformité WCAG sur les images ne se résume pas à « un alt sur chaque image ». C'est « le bon alt sur chaque image ». Quatre questions, un arbre de décision, et 90 % de vos images sont traitées correctement.

Pour identifier automatiquement les alt manquants ET les alt inutiles sur vos images, testez Includdy.

Questions fréquentes