Quand alt="" est la bonne réponse

Il existe deux erreurs symétriques sur les images décoratives : mettre un alt descriptif sur une image qui n’en a pas besoin, et oublier l’alt="" sur une image qui devrait être ignorée. Les deux dégradent l’expérience des utilisateurs de lecteurs d’écran dans des directions opposées.

Comprendre quand alt="" est la bonne réponse est aussi important que savoir quoi écrire dans un alt.

Ce que “décoratif” signifie exactement

Une image est décorative quand sa suppression ne prive l’utilisateur d’aucune information.

Ce n’est pas une question de style ou d’intention graphique. Ce n’est pas parce qu’une image est belle, grande, ou centrale dans la mise en page qu’elle est porteuse d’information. C’est une question de contenu informationnel : est-ce que retirer cette image appauvrit ce que la page communique ?

Exemples d’images décoratives :

• Une photo de paysage en bannière de page d’accueil, sans légende et sans lien avec le contenu de la page
• Une illustration générique qui accompagne un article sans illustrer un élément spécifique de cet article
• Un séparateur graphique entre deux sections
• Une icône répétant visuellement ce que le texte adjacent dit déjà

Exemples d’images porteuses d’information :

• La photo d’un conseiller municipal dans la page “Notre équipe”. Elle permet d’identifier la personne
• Le plan de la ville : il contient des informations de localisation non disponibles ailleurs
• L’infographie des résultats du budget participatif : les données ne sont disponibles que dans l’image
• Le logo de la commune dans l’en-tête : il identifie visuellement l’organisation

La règle de décision en quatre questions

Face à une image, quatre questions permettent de trancher.

Question 1 : Si je retire cette image, est-ce que la page communique la même chose ?

Si oui → image décorative → alt=""

Si non → image porteuse d’information → alt descriptif requis

Question 2 : Le texte adjacent dit-il déjà ce que l’image montre ?

Un logo avec le nom de la commune en texte juste à côté. Une icône “téléphone” à côté du numéro de téléphone. Une flèche décorative dans un bouton qui dit “Voir plus”. Dans ces cas, l’image est redondante avec le texte, elle est décorative même si elle a une signification intrinsèque.

Si le texte adjacent suffit → alt=""

Question 3 : L’image est-elle dans un lien ou un bouton ?

Quand une image est le seul contenu d’un lien, elle n’est jamais décorative, elle est le seul vecteur de l’information de destination. Un lien sans texte et avec une image alt="" est un lien vide pour les AT.

Si l’image est le seul contenu du lien → alt décrivant la destination, pas l’image

Question 4 : L’image est-elle un CAPTCHA ou une image-test ?

Ces images ont un traitement spécifique dans le RGAA (critère 1.4) : elles doivent avoir une alternative sous forme d’autre mécanisme d’authentification, pas un alt textuel qui divulguerait la réponse.

Les erreurs fréquentes dans le sens “trop d’alt”

Alt redondant avec le texte adjacent

<!-- ✗ L'icône répète ce que le texte dit -->
<a href="tel:0298xxxxxx">
  <img src="icone-telephone.png" alt="Téléphone">
  02 98 XX XX XX
</a>

<!-- ✓ L'icône est décorative — le numéro porte l'information -->
<a href="tel:0298xxxxxx">
  <img src="icone-telephone.png" alt="">
  02 98 XX XX XX
</a>

NVDA avec le code NC annonce : “Téléphone, graphique, 02 98 XX XX XX, lien”. Avec la correction : “02 98 XX XX XX, lien”. Le premier est plus long et moins clair.

Alt sur les images de fond converties en <img>

Les thèmes WordPress convertissent parfois des images de fond CSS en balises <img> pour des raisons de performance ou de CMS. Ces images (bandeaux, textures, séparateurs) sont décoratives par nature mais se retrouvent avec des alt descriptifs générés automatiquement.

<!-- ✗ Image de fond convertie en img avec alt généré -->
<img src="bandeau-texture.jpg" alt="bandeau-texture">

<!-- ✓ -->
<img src="bandeau-texture.jpg" alt="">

Alt sur les icônes SVG décoratives dans des boutons avec texte

<!-- ✗ L'icône doublerait l'annonce du texte -->
<button>
  <svg aria-label="Envoyer">...</svg>
  Envoyer le message
</button>

<!-- ✓ L'icône est masquée, le texte du bouton suffit -->
<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Envoyer le message
</button>

Les erreurs fréquentes dans le sens “pas assez d’alt”

alt="" sur une image porteuse d’information

<!-- ✗ Le graphique contient des données non disponibles ailleurs -->
<img src="resultats-enquete-2024.png" alt="">

<!-- ✓ -->
<img src="resultats-enquete-2024.png"
  alt="Résultats de l'enquête de satisfaction 2024 :
    78 % de satisfaits, 15 % de neutres, 7 % d'insatisfaits.">

alt="" sur une image seule dans un lien

<!-- ✗ Lien vide pour les AT — impossible à activer utilement -->
<a href="/mairie">
  <img src="logo-mairie.png" alt="">
</a>

<!-- ✓ L'alt décrit la destination du lien -->
<a href="/mairie">
  <img src="logo-mairie.png" alt="Page d'accueil de la mairie de Nom_ville">
</a>

NVDA avec le code NC : “lien graphique”, un lien sans intitulé, classé comme erreur critique par axe.

alt absent (ni vide, ni rempli)

<!-- ✗ Comportement imprévisible selon l'AT -->
<img src="photo-conseil.jpg">

<!-- C'est différent de alt="" -->
<img src="photo-conseil.jpg" alt="">

L’absence d’alt n’est pas équivalente à alt="". L’un signifie “l’auteur a oublié”, l’autre signifie “l’auteur a décidé que c’est décoratif”. Les technologies d’assistance (AT) traitent les deux différemment, et l’absence d’alt est systématiquement une non-conformité sur le critère 1.1.

L’arbre de décision résumé

L'image a-t-elle une signification informative ?
│
├─ Non → alt=""
│
└─ Oui
    │
    ├─ Le texte adjacent dit-il la même chose ?
    │   ├─ Oui → alt=""
    │   └─ Non → alt descriptif
    │
    ├─ L'image est-elle le seul contenu d'un lien ?
    │   └─ Oui → alt décrivant la destination (pas l'image)
    │
    └─ L'image contient-elle du texte ?
        └─ Oui → alt reproduisant ce texte (critère 1.6 si complexe)

Un cas limite fréquent avec la photo d’illustration

Un article de blog sur le conseil municipal est illustré d’une photo de la salle des séances. Cette photo n’ajoute pas d’information factuelle, l’article dit tout ce qu’il y a à savoir sur la réunion. Mais elle montre quand même quelque chose : l’ambiance, la disposition, les personnes présentes.

Est-elle décorative ou informative ?

La réponse dépend du contexte éditorial. Si la photo accompagne un article sur une réunion spécifique et montre les participants identifiables, elle est informative : l’alt doit décrire ce qui est visible. Si la photo est une illustration générique de “salle de réunion” sans rapport direct avec le contenu, elle est décorative avec l’attribut alt="".

Critère RGAA 1.2 : Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?