Rédigez des textes alternatifs d'images utiles

Ce que vérifie ce contrôle

Parcourt chaque élément <img> de la page et inspecte l’attribut alt. Le contrôle échoue lorsque l’alt est : un nom de fichier (IMG_2837.jpg, hero-final-v2.png), un placeholder générique (image, picture, photo, img), un caractère unique (x, .) ou commence par « Image of » / « Picture of » — les technologies d’assistance annoncent déjà le rôle « graphique », donc préfixer la description ajoute du bruit redondant.

C’est le contrôle complémentaire de Texte alternatif des images, qui vérifie uniquement la présence. Ce contrôle évalue la qualité.

Pourquoi c’est important

Un mauvais texte alternatif dégrade activement l’expérience.

• Les utilisateurs de lecteurs d’écran l’entendent au lieu de voir l’image. « IMG underscore deux huit trois sept point jay-peg » est le pire résultat possible — la technologie d’assistance lit le nom de fichier lettre par lettre.
• Les moteurs de recherche utilisent le texte alternatif comme signal de classement pour la recherche d’images. Mettre un nom de fichier comme alt gaspille l’emplacement.
• Les extracteurs IA (LLM multimodaux qui scannent une page) citent le texte alternatif quand ils décrivent la page. Une page où chaque alt est hero.jpg paraît bâclée tant pour les humains que pour l’IA.

La solution n’est pas « ajouter plus de mots ». C’est « décrire l’image, en contexte, en langage simple ».

Comment le corriger

Ouvrez chaque image signalée et réécrivez l’alt pour décrire ce que l’image transmet dans le contexte où elle apparaît. Même image, page différente, alt différent — c’est normal.

Images décoratives (bordures de logo, séparateurs, motifs d’arrière-plan) — alt vide :

<img src="/divider.svg" alt="">

alt="" dit aux lecteurs d’écran « passez ceci ; ça ne porte aucun sens ». N’omettez pas l’attribut entièrement — l’absence d’alt pousse certains lecteurs à annoncer le nom de fichier par défaut.

Images informatives — décrivez la fonction ou le contenu :

<!-- Mauvais -->
<img src="/charts/q3.png" alt="chart">
<img src="/team/jane.jpg" alt="IMG_2837.jpg">
<img src="/screenshot.png" alt="Image of the dashboard">

<!-- Bon -->
<img src="/charts/q3.png" alt="Revenus du T3 en hausse de 38 % vs T2, portés par l'offre entreprise">
<img src="/team/jane.jpg" alt="Jane Patel, CTO">
<img src="/screenshot.png" alt="Tableau de bord MetricSpot affichant cinq contrôles réussis">

Images liées — décrivez la destination du lien, pas l’image :

<a href="/docs/">
  <img src="/icons/book.svg" alt="Documentation">
</a>

Images complexes (graphiques, infographies) — décrivez les données, puis renvoyez vers un complément :

<img src="/q3-funnel.png" alt="Entonnoir de conversion : 1000 visites → 230 inscriptions → 28 payants (2,8 %).">
<a href="/q3-funnel-full.txt">Tableau de données complet</a>

Patterns CMS / framework.

• WordPress — Bibliothèque de médias → cliquez sur une image → champ « Texte alternatif ». Auditez les articles existants via Outils → Santé du site → Images sans texte alternatif.
• Astro / Next.js Image — <Image alt={...} /> est requis au niveau du type ; TypeScript refusera de compiler sans alt.
• React — écrivez une petite règle de lint (jsx-a11y/alt-text de eslint-plugin-jsx-a11y) et faites échouer la CI sur les alts manquants ou ressemblant à des noms de fichiers.

Auditez vous-même. Ouvrez la console DevTools et exécutez :

[...document.images]
  .filter(i => !i.alt || /^(image|img|picture|photo|\.|x)$/i.test(i.alt.trim()) || /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(i.alt))
  .map(i => i.src);

Tout ce qui apparaît dans la liste résultante est un alt nul.

Questions fréquentes

Chaque image doit-elle avoir un texte alternatif ?

Oui, mais il peut être vide (alt="") pour les images décoratives. L’attribut lui-même doit être présent — c’est son absence que les outils signalent comme une violation.

Quelle longueur doit avoir un texte alternatif ?

Aussi long que nécessaire, aussi court que possible. Une phrase est la norme ; un graphique peut en demander deux. Évitez la « limite » de 125 caractères que vous verrez parfois citée — c’est une rumeur de buffer de lecteur d’écran, pas une vraie contrainte.

Faut-il inclure le mot « image » ?

Non. Les lecteurs d’écran annoncent déjà le rôle (« graphique »). Dire « Image d’un chien » fait dire au lecteur « graphique, image d’un chien ». Écrivez simplement « Chiot golden retriever en train de mâcher une chaussure ».