Savoir qu’il faut un alt est une chose. Savoir quoi y écrire en est une autre. Un alt="photo" existe dans le code, et ne sert à rien. Un alt pertinent demande de comprendre ce que l’image communique, et de le traduire en texte.
La méthode de base
Avant d’écrire un alt, une seule question : qu’est-ce que cette image dit que le texte environnant ne dit pas déjà ?
La réponse à cette question est le contenu de l’alt. Pas une description de l’image (“photo d’une personne debout devant un bâtiment”), mais une transmission de l’information qu’elle porte (“Elise Dupont, maire de Nom_ville, devant la mairie”).
Deux règles de rédaction :
Ne pas commencer par “image de” ou “photo de” : les technologies d’assistance (AT) annoncent déjà le rôle (“graphique”, “image”). Commencer directement par l’information. “Vue aérienne du port” plutôt que “Photo aérienne du port”.
Être aussi concis que l’information le permet : un alt n’est pas une légende. Il doit transmettre l’essentiel, pas tout ce qui est visible. Pour les images complexes (graphiques, cartes, infographies), une description longue peut être fournie via aria-describedby ou un texte adjacent.
Cinq types d’images, cinq approches
Type 1 : La photo documentaire ou éditoriale
Une photo qui illustre un article, présente une personne, ou documente un événement.
Ce qu’on décrit : l’information principale que la photo apporte, identité des personnes si pertinent, contexte de l’événement, lieu si significatif.
Ce qu’on ne décrit pas : les détails accessoires, les couleurs, la composition artistique.
<!-- ✗ NC — trop vague -->
<img src="reunion-conseil.jpg" alt="Photo de réunion">
<!-- ✗ NC — décrit l'image, pas son contenu informatif -->
<img src="reunion-conseil.jpg"
alt="Des personnes assises autour d'une table dans une salle éclairée">
<!-- ✓ C — transmet l'information -->
<img src="reunion-conseil.jpg"
alt="Séance du conseil municipal du 15 mars 2025, 15 conseillers réunis en salle du conseil">
<!-- ✓ C — si les personnes sont identifiables et l'identification est pertinente -->
<img src="equipe-mairie.jpg"
alt="L'équipe municipale de Nom_ville : Elise Dupont (maire), accompagnée de ses 8 adjoints">Cas particulier avec la photo de personne : quand une photo illustre un article sur une personne nommée dans le texte adjacent, l’alt peut être simplifié. Si le titre de l’article est “Elise Dupont, nouvelle maire de Nom_ville” et que la photo montre clairement cette personne, alt="Elise Dupont" suffit, car le contexte fournit le reste.
Type 2 : Le graphique ou diagramme
Un camembert, un histogramme, une courbe : des images qui encodent des données chiffrées.
Ce qu’on décrit : les données clés, les tendances principales, les valeurs importantes. L’alt doit transmettre l’information statistique, pas décrire les barres ou les secteurs.
<!-- ✗ NC — décrit le graphique, pas les données -->
<img src="budget-2025.png"
alt="Graphique en secteurs colorés montrant la répartition du budget">
<!-- ✓ C — transmet les données -->
<img src="budget-2025.png"
alt="Répartition du budget 2025 : voirie 40 %, action sociale 30 %, culture et sports 20 %,
administration générale 10 %">Pour les graphiques complexes : si les données sont nombreuses, l’alt peut pointer vers un tableau de données accessible plutôt que tout énumérer.
<img src="statistiques-frequentation.png"
alt="Fréquentation de la médiathèque 2020-2024 — voir le tableau de données ci-dessous">
<table>
<!-- tableau avec les données complètes -->
</table>Type 3 : L’infographie
Une infographie combine texte, données et illustrations. Tout le texte visible dans l’infographie doit être accessible, soit dans l’alt, soit dans un texte adjacent, soit dans les deux.
<!-- ✗ NC — le texte de l'infographie n'est pas accessible -->
<img src="infographie-tri-dechets.png"
alt="Guide du tri des déchets">
<!-- ✓ C — le contenu textuel est reproduit -->
<img src="infographie-tri-dechets.png"
alt="Guide du tri des déchets de Nom_ville :
Bac jaune pour les emballages plastiques, cartons, métal.
Bac vert pour le verre uniquement.
Bac gris pour les ordures ménagères non recyclables.
Collecte le mardi matin avant 7h.">Si l’infographie est très dense, le critère 1.6 s’applique : une description détaillée doit être fournie via un mécanisme adjacent (bouton “Description longue”, texte sous l’image, lien vers une version textuelle).
Type 4 : Le logo
Un logo transmet une identité : celle de l’organisation, du partenaire, de l’institution.
Ce qu’on décrit : le nom de l’organisation, et si utile, la nature de l’organisation.
<!-- ✗ NC — trop vague -->
<img src="logo-mairie.png" alt="Logo">
<!-- ✗ NC — décrit l'image, pas l'identité -->
<img src="logo-mairie.png" alt="Blason bleu et or avec une ancre">
<!-- ✓ C — identité de l'organisation -->
<img src="logo-mairie.png" alt="Commune de Nom_ville">
<!-- ✓ C — si le logo est dans un lien vers la page d'accueil -->
<a href="/">
<img src="logo-mairie.png" alt="Nom_ville, retour à l'accueil">
</a>Note sur les logos de partenaires : une page “Nos partenaires” liste les logos de plusieurs organisations. Chaque logo doit avoir un alt avec le nom du partenaire. Si les logos sont cliquables (liens vers les sites partenaires), l’alt doit décrire la destination.
<a href="https://www.finistere.fr">
<img src="logo-cd29.png" alt="Site du Conseil Départemental du Finistère">
</a>Type 5 : Le bouton ou lien iconographique
Une image seule dans un lien ou un bouton, sans texte visible adjacent. L’alt n’est plus une description de l’image mais un intitulé de l’action ou de la destination.
<!-- ✗ NC — décrit l'image, pas l'action -->
<a href="/recherche">
<img src="icone-loupe.png" alt="Loupe">
</a>
<!-- ✗ NC — trop générique -->
<a href="/recherche">
<img src="icone-loupe.png" alt="Icône">
</a>
<!-- ✓ C — décrit l'action ou la destination -->
<a href="/recherche">
<img src="icone-loupe.png" alt="Rechercher sur le site">
</a>
<!-- ✓ C — bouton d'action -->
<button>
<img src="icone-fermer.png" alt="Fermer le menu">
</button>Les formulations à éviter systématiquement
| Formulation | Pourquoi c’est un problème |
|---|---|
alt="image" | Ne dit rien, les AT annoncent déjà le rôle |
alt="photo" | Idem |
alt="img_2847.jpg" | Nom de fichier, aucune information |
alt="Image : Vue du port" | ”Image :” est redondant |
alt="Cliquez ici" | Ne décrit pas la destination |
alt="logo" | Ne dit pas de quelle organisation |
alt="bannière" | Ne dit pas ce que la bannière communique |
La longueur d’un alt
Il n’y a pas de limite officielle dans le RGAA. En pratique :
Pour une photo simple : une phrase courte suffit (10 à 20 mots).
Pour un graphique avec plusieurs données : 2-3 phrases, les données clés seulement.
Pour une infographie dense : l’alt peut être long (50-100 mots), ou court avec un renvoi vers un texte adjacent plus complet.
À éviter : les alt de plusieurs paragraphes directement dans l’attribut. Ils ne sont pas conçus pour ça. Utiliser aria-describedby vers un élément adjacent, ou fournir un lien “Description complète”.
Un exercice pratique
Voici une image hypothétique : la photo de groupe de l’équipe du Comité des Fêtes de Nom_ville, prise lors de la foire aux moules 2024, devant la salle des fêtes. Vingt personnes, toutes souriantes, en tabliers aux couleurs de la commune.
Quel alt ?
<!-- Version minimale — suffisante si aucune identification n'est requise -->
<img src="comite-fetes-2024.jpg"
alt="L'équipe du Comité des Fêtes de Nom_ville lors de la foire aux moules 2024">
<!-- Version avec contexte — si la photo accompagne un article sur l'événement -->
<img src="comite-fetes-2024.jpg"
alt="Les vingt bénévoles du Comité des Fêtes devant la salle des fêtes de Nom_ville, foire aux moules 2024">
<!-- Version avec identification — si les personnes sont nommées dans la légende -->
<img src="comite-fetes-2024.jpg"
alt="Photo de groupe du Comité des Fêtes, voir la liste des membres ci-dessous">Les trois versions sont conformes. La meilleure dépend du contexte éditorial, c’est toujours une décision, jamais une formule.
Critères RGAA : 1.1 (présence de l’alternative), 1.3 (pertinence de l’alternative).