Texte alternatif : quel alt pour quel type d'image ?

Rédiger un texte alternatif semble simple en théorie mais s'avère plus subtil en pratique. Beaucoup de rédacteurs tombent dans le piège de la description littérale ou, à l'inverse, de l'alt text trop succinct pour être utile. Ce guide vous donne des techniques concrètes pour rédiger des alternatives textuelles qui servent vraiment vos utilisateurs.

Le principe fondamental : contexte avant description

La question à se poser

Ne demandez pas "Que montre cette image ?" mais plutôt "Quelle information cette image transmet-elle dans ce contexte ?".

Une même photo peut nécessiter des alt text complètement différents selon son usage :

Photo d'un PDG sur une page "A propos" :

<img src="pdg.jpg" alt="Marie Martin, PDG de l'entreprise depuis 2018.">

Même photo dans un article sur le leadership féminin :

<img src="pdg.jpg" alt="Marie Martin lors de son discours au Forum Women in Tech 2025.">

Même photo dans une galerie portraits :

<img src="pdg.jpg" alt="Portrait professionnel de Marie Martin en costume.">

Les 5 types d'images et leurs alt text

1. Images informatives

Ces images apportent une information que le texte environnant ne contient pas.

Technique : Décrivez l'information, pas l'image.

<!-- Graphique de croissance -->
<img src="graph-ca.png" alt="Croissance du chiffre d'affaires de 45% entre 2024 et 2025.">

<!-- Photo produit -->
<img src="chaussure.jpg" alt="Running Nike Air Max, coloris bleu marine, semelle blanche.">

<!-- Capture d'écran -->
<img src="interface.png" alt="Écran de paramètres avec l'option Mode sombre activée.">

2. Images fonctionnelles

Ces images déclenchent une action (boutons, liens).

Technique : Décrivez l'action, pas l'apparence.

<!-- Bouton de recherche -->
<button>
  <img src="loupe.svg" alt="Rechercher">
</button>

<!-- Lien vers les réseaux sociaux -->
<a href="https://twitter.com/rgaachecker">
  <img src="twitter.svg" alt="Suivre RGAA Checker sur Twitter">
</a>

<!-- Logo cliquable -->
<a href="/">
  <img src="logo.png" alt="RGAA Checker - Retour à l'accueil">
</a>

3. Images décoratives

Ces images n'apportent aucune information : motifs de fond, séparateurs, illustrations d'ambiance.

Technique : alt vide alt="" pour que les lecteurs d'écran les ignorent.

<!-- Séparateur décoratif -->
<img src="wave-separator.svg" alt="">

<!-- Illustration d'ambiance -->
<img src="illustration-abstract.png" alt="">

<!-- Icone accompagnant du texte explicite -->
<span>
  <img src="check.svg" alt="">
  Commande validée
</span>

4. Images de texte

Les images contenant du texte (bannière, citation stylisée, etc.).

Technique : Reproduisez le texte dans l'alt ou rendez-le sélectionnable en HTML/CSS.

<!-- À éviter : texte dans une image -->
<img src="promo-banner.jpg" alt="Offre spéciale : -30% sur tous les audits jusqu'au 31 janvier">

<!-- Préférable : texte réel + décoration -->
<div class="banner">
  <span>Offre spéciale : -30% sur tous les audits</span>
  <img src="confetti.png" alt="">
</div>

5. Images complexes (graphiques, schémas)

Les diagrammes, infographies et graphiques nécessitent plus qu'un simple alt text.

Technique : alt court + description longue accessible.

<figure>
  <img
    src="flowchart.png"
    alt="Diagramme du processus d'audit en 5 étapes."
    aria-describedby="flowchart-desc"
  >
  <figcaption id="flowchart-desc">
    Étape 1 : Collecte des URL. Étape 2 : Analyse automatisée.
    Étape 3 : Tests manuels. Étape 4 : Rapport détaillé.
    Étape 5 : Plan de remédiation.
  </figcaption>
</figure>

Pour les graphiques de données, proposez toujours un tableau accessible en complément.

Techniques de rédaction

Soyez concis

La longueur recommandée est de 80 à 125 caractères. Au-delà, les lecteurs d'écran peuvent couper le texte.

Trop long :

alt="Photo de notre équipe de 12 développeurs réunis dans la salle de conférence avec des ordinateurs portables ouverts devant eux, des plantes vertes en arrière-plan et de la lumière naturelle entrant par les grandes fenêtres"

Juste bien :

alt="L'équipe de développement RGAA Checker au complet lors du hackathon trimestriel."

Évitez les redondances

Les lecteurs d'écran annoncent déjà qu'il s'agit d'une image. N'écrivez jamais "image de", "photo de", "illustration de".

<!-- Redondant -->
alt="Photo d'un chaton jouant"

<!-- Correct -->
alt="Chaton jouant avec une pelote de laine."

Exception : indiquez le type si c'est pertinent (logo, graphique, capture d'écran, peinture).

Terminez par un point

Le point final crée une pause dans la synthèse vocale, séparant clairement l'alt du contenu suivant.

N'utilisez pas de mots-clés SEO forcés

L'alt text doit être naturel et informatif, pas bourré de mots-clés.

<!-- Spam SEO à éviter -->
alt="chaussures running homme femme pas cher soldes promo nike adidas"

<!-- Naturel et utile -->
alt="Nike Air Max 2025 bleu marine, modèle homme taille 42."

Workflow de rédaction

Étape 1 : Catégorisez l'image

Est-elle informative, fonctionnelle, décorative, textuelle ou complexe ?

Étape 2 : Identifiez le contexte

Quel rôle joue cette image sur cette page spécifique ?

Étape 3 : Rédigez en pensant à l'utilisateur

Qu'a besoin de savoir une personne qui ne voit pas l'image pour comprendre la page ?

Étape 4 : Vérifiez la longueur

Restez entre 80 et 125 caractères si possible.

Étape 5 : Relisez avec un lecteur d'écran

Activez VoiceOver ou NVDA et écoutez comment votre alt text sonne en contexte.

Gérer les cas difficiles

Images personnalisées par l'utilisateur

Pour les avatars, photos de profil ou images uploadées par les utilisateurs, fournissez une description générique par défaut :

<img src="user-upload.jpg" alt="Photo de profil de Jean Dupont">

Images qui changent dynamiquement

Pour les carrousels ou les images aléatoires, générez l'alt dynamiquement :

// Exemple React
<img
  src={product.image}
  alt={`${product.name}, ${product.color}, ${product.price} EUR`}
/>

Contenu généré par les utilisateurs

Permettez aux utilisateurs de saisir leur propre alt text lors de l'upload, avec une suggestion générée par IA comme point de départ.

Les erreurs qui reviennent

Quatre défauts constituent l'essentiel de ce qu'on trouve en audit.

Le bourrage de mots-clés. Un alt écrit pour le référencement dessert les deux causes à la fois : il rend la restitution pénible et n'apporte plus rien au classement.

<!-- À éviter -->
<img alt="chaussures running homme pas cher promo soldes livraison">

La description générique. « Image », « Photo », « Illustration » n'apportent rien : mieux vaut un alt vide qu'un alt qui ne dit rien, parce que l'alt vide au moins ne fait pas perdre de temps.

La répétition de la légende. Si un figcaption décrit déjà l'image, l'alt ne doit pas redire la même chose. Il complète, ou il reste vide.

L'alt absent, confondu avec l'alt vide. Le premier est une erreur, le second une décision. Le critère RGAA 1.2 évalue précisément ce point sur les images décoratives, et un scan le tranche seul.

Vérifier ce qui a été écrit

Trois contrôles, du moins cher au plus fiable.

1. Lire les alt seuls, sans les images. Si la page reste compréhensible, les alt font leur travail. C'est le test le plus rapide et le plus révélateur.
2. Passer un automate pour repérer les alt manquants, les alt vides sur des images porteuses de sens et les noms de fichiers laissés en place.
3. Écouter la page au lecteur d'écran. Seule manière d'entendre une redondance entre l'alt et le texte voisin, que rien d'autre ne détecte.

Conclusion

La rédaction d'un texte alternatif efficace est un exercice d'empathie : il s'agit de transmettre l'information essentielle à quelqu'un qui ne peut pas voir l'image. La clé est de toujours penser au contexte plutôt qu'à la description littérale.

Avec de la pratique, la rédaction d'alt text devient naturelle. Utilisez notre générateur de texte alternatif pour accélérer le processus, mais gardez toujours un œil critique pour adapter les suggestions à votre contexte spécifique.

L'investissement en temps est minime (quelques secondes par image) mais l'impact sur l'expérience de vos utilisateurs est considérable.

Reste à savoir combien d'images de votre page sont concernées. Un scan repère celles qui n'ont aucune alternative (critère 1.1) et vous rend la liste ; juger la pertinence de chaque alt, en revanche, restera toujours votre travail.

Analyser les images de votre page →