Sur les 106 critères du RGAA 4.1, le critère 1.1 est celui qui apparaît dans 90 % des audits e-commerce. Pas parce qu'il est complexe — il ne l'est pas. Mais parce que chaque fiche produit, chaque bannière et chaque icône ajoute une image, et que presque personne ne pense à son alternative textuelle au moment de l'upload. Sur un catalogue de 3 000 références, cela fait vite plusieurs milliers d'images muettes pour un lecteur d'écran.

Ce que dit exactement le critère

Le critère 1.1 exige que chaque image porteuse d'information ait une alternative textuelle. Derrière cette phrase, deux obligations distinctes : les images qui véhiculent une information doivent la restituer en texte, et les images purement décoratives doivent être explicitement ignorées par les technologies d'assistance. Ce n'est pas une question de goût — un lecteur d'écran comme NVDA ou VoiceOver lit l'attribut `alt`, et rien d'autre, pour décrire une image à un utilisateur aveugle.

Le seul test à retenir

Posez-vous une question unique : si je supprime cette image, est-ce que je perds de l'information ? Si oui, l'image est informative et a besoin d'un `alt` descriptif. Si non, elle est décorative et doit recevoir un `alt` vide — `alt=""` — pour que le lecteur d'écran la saute sans la mentionner.

// alt absent n'est pas alt vide

Ne confondez jamais l'absence d'attribut avec `alt=""`. Une image sans attribut `alt` du tout pousse certains lecteurs d'écran à lire le nom du fichier à voix haute ("D S C zéro zéro quarante-deux point j p g"). Une image avec `alt=""` est proprement ignorée. L'écart d'expérience est énorme.

Comment écrire un bon alt

Un bon alt est court, factuel, et se substitue à l'image. Il ne commence jamais par "image de" ou "photo de" : le lecteur d'écran annonce déjà "image" avant de lire l'alternative. Il décrit la fonction de l'image dans son contexte, pas chacun de ses pixels.

  • →Produit : "Sac à dos Voyager 30 L, toile bleu marine" — pas "IMG_4892" ni "sac"
  • →Icône fonctionnelle : décrire l'action, pas la forme — "Rechercher", pas "loupe"
  • →Bannière promo avec texte intégré : recopier le message — "-20 % sur la rentrée jusqu'au 15 septembre"
  • →Logo de paiement : la marque — "Paiement sécurisé par Stripe"
  • →Graphique ou infographie : résumer la donnée clé, pas écrire "graphique"

Les pièges fréquents en e-commerce

  • →Photos produit avec `alt=""` ou alt = nom du fichier (`IMG_4892.jpg`)
  • →Icônes-boutons (panier, compte, recherche) sans alt — le lecteur d'écran lit l'URL de l'icône
  • →Bannières promotionnelles avec le texte intégré dans l'image, sans alt — l'offre est invisible pour l'utilisateur aveugle
  • →Logos de partenaires et de moyens de paiement sans alt — l'utilisateur ne sait pas à qui il confie sa carte
  • →Images de fond CSS porteuses d'information — invisibles pour l'alt, à doubler d'un texte accessible masqué
  • →Vignettes de variantes (couleurs, tailles) partageant toutes le même alt générique

Trois cas particuliers qui piègent

L'image-lien

Quand une image est l'unique contenu d'un lien (`<a><img></a>`), c'est l'alt de l'image qui devient l'intitulé du lien. Un alt vide produit alors un lien sans intitulé : le lecteur d'écran annonce "lien" sans dire vers quoi. L'alt doit décrire la destination — "Voir la fiche du sac Voyager", pas "sac".

L'image de texte

Une promo dont tout le texte est gravé dans un visuel (typique des bannières de soldes) doit recopier ce texte dans son alt. Mieux : le RGAA recommande d'éviter les images de texte quand le même rendu est atteignable en HTML et CSS, car elles cassent aussi le zoom et le contraste.

Le CAPTCHA visuel

Un CAPTCHA image sans alternative bloque purement et simplement l'utilisateur aveugle. L'alt doit au minimum décrire sa fonction, et une alternative non visuelle (audio) doit être proposée à côté.

✓ Le bon alt en 3 secondes

Pour un produit : nom du produit + variante. Pour une icône : action déclenchée. Pour une bannière : message + offre. Jamais commencer par "image de" ou "photo de".

Détecter les images sans alt à grande échelle

Vérifier 3 000 fiches à la main est impossible. Un moteur comme axe-core repère instantanément toute image sans attribut `alt` — mais il ne juge pas la pertinence du texte : il sait qu'un alt existe, pas s'il décrit vraiment l'image. C'est la limite de tout audit automatisé : il trouve les images muettes, un humain valide les alternatives douteuses. C'est précisément ce partage des tâches sur lequel ComplAudit est construit.

Questions fréquentes

Faut-il un alt sur les images de fond CSS ?

Une image injectée en `background-image` n'a pas d'attribut alt. Si elle est décorative, c'est parfait. Si elle porte de l'information, ajoutez un équivalent textuel accessible : un texte visuellement masqué, ou un `aria-label` sur l'élément porteur.

Quelle est la longueur maximale d'un alt ?

Pas de limite stricte, mais visez une phrase. Au-delà d'environ 125 caractères, certains lecteurs d'écran tronquent. Pour une image complexe (schéma, graphique), mettez un alt court et placez une description longue à proximité dans la page.

Un alt identique pour toutes les variantes de couleur, est-ce grave ?

Pour le critère technique, l'image a bien un alt. Mais pour l'utilisateur aveugle, les variantes deviennent indistinguables. Précisez la couleur ou la variante dans l'alt de chaque vignette.

RGAA 1.1 et WCAG disent-ils la même chose ?

Le critère RGAA 1.1 implémente le critère WCAG 1.1.1 ("Non-text Content", niveau A). Corriger l'un corrige l'autre — pratique pour un site visé à la fois par le RGAA en France et par la WCAG à l'international.

Pour détecter en masse les images sans alt sur votre boutique, avec le sélecteur DOM et l'URL de chacune :

→ Lancer un audit