Chapitre 8.1 — Les alternatives textuelles

⏱️ TL;DR — Toute image porte une décision, pas une recette : soit elle véhicule une information (le alt la décrit), soit elle est décorative (le alt reste vide : alt=""), soit elle est fonctionnelle — dans un lien ou un bouton — et alors le alt décrit l’action, pas l’image. Dernier cas : si le texte à côté dit déjà tout, on met alt="" pour ne pas répéter. Le critère de référence est 1.1.1 Contenu non textuel (niveau A). Retenir la règle d’or : alt="" (vide) et alt absent ne sont PAS la même chose.

🎯 Objectifs

• Dérouler l’arbre de décision du alt pour n’importe quelle image.
• Distinguer image informative, décorative et fonctionnelle.
• Comprendre la différence entre alt="" (vide, volontaire) et alt absent.
• Écrire un alt concis, pertinent, sans bruit — et reconnaître un mauvais alt.

Le critère : 1.1.1 Contenu non textuel

WCAG 1.1.1 exige que tout contenu non textuel ait une alternative textuelle qui remplit la même fonction. Pour une image, cette alternative, c’est l’attribut alt de la balise <img>. Le lecteur d’écran l’annonce à la place de l’image ; il s’affiche aussi si l’image ne charge pas.

Le point clé : l’alternative doit remplir la même fonction, pas décrire les pixels. Une même photo peut mériter trois alt différents selon le rôle qu’elle joue sur la page. Le alt ne dépend donc pas de l’image, mais de son contexte.

L’arbre de décision du alt

Avant d’écrire quoi que ce soit, pose-toi les questions dans cet ordre.

1. Image informative → décris l’information

L’image apporte un contenu que le texte environnant ne donne pas. Le alt transmet cette information, pas une description d’artiste.

<!-- ❌ Nom de fichier : le lecteur d'écran lira « graphique point p n g » -->
<img src="graphique.png">
 
<!-- ❌ Redondant et vide de sens : « image de graphique » -->
<img src="graphique.png" alt="Image d'un graphique">
 
<!-- ✅ L'information que porte l'image -->
<img src="graphique.png" alt="Les inscriptions ont doublé entre 2024 et 2026.">

2. Image décorative → alt vide

Une bordure, un aplat, une photo d’ambiance qui n’ajoute aucune information : elle ne doit rien annoncer. On met un alt vide — pas absent. Le lecteur d’écran saute alors l’image en silence.

<!-- ✅ Décorative : alt vide, l'image est ignorée par le lecteur d'écran -->
<img src="vague-deco.svg" alt="">
 
<!-- ❌ alt ABSENT : beaucoup de lecteurs d'écran liront le nom de fichier -->
<img src="vague-deco.svg">

⚠️ Piège — alt="" et alt absent produisent des résultats opposés. Le alt vide dit « rien à voir ici, passe » ; le alt absent laisse le lecteur d’écran se débrouiller, et beaucoup annoncent alors l’URL ou le nom de fichier (« bannière-hero-final-v3 »). Une image décorative doit avoir alt="", jamais rien.

3. Image fonctionnelle → décris l’action

L’image est dans un lien ou un bouton (logo cliquable, icône d’action). Ici, le alt ne décrit pas l’image : il décrit ce que fait le contrôle. L’utilisateur se moque de savoir qu’il y a une loupe dessinée ; il veut savoir que ce bouton recherche.

<!-- ❌ Décrit l'image, pas l'action -->
<a href="/"><img src="logo.svg" alt="Logo rond bleu A11yLearn"></a>
<button><img src="loupe.svg" alt="Icône loupe"></button>
 
<!-- ✅ Décrit la destination / l'action -->
<a href="/"><img src="logo.svg" alt="A11yLearn, accueil"></a>
<button><img src="loupe.svg" alt="Rechercher"></button>

4. Info déjà donnée à côté → alt vide

Si une légende ou le texte adjacent dit déjà la même chose, répéter dans le alt crée un doublon pénible à l’écoute. On met alt="" et on laisse le texte faire le travail.

<!-- ✅ La légende porte l'info : l'image ne la répète pas -->
<figure>
  <img src="badge.png" alt="">
  <figcaption>Badge « Module terminé » débloqué après le quiz final.</figcaption>
</figure>

Ce qui fait un BON alt

• Concis : une phrase, l’essentiel. Pas un paragraphe (pour ça → images complexes).
• Pertinent au contexte : la même photo n’a pas le même alt sur un blog de cuisine et sur une fiche produit.
• Sans bruit : évite « image de », « photo de », « illustration montrant » — le lecteur d’écran annonce déjà « image ». Tu doublerais le mot.
• Pas de mots-clés SEO entassés, pas de ponctuation décorative, pas d’émojis à rallonge.

♿ Côté utilisateur — Une personne aveugle qui parcourt ta page entend tes alt les uns après les autres, souvent à vitesse rapide. Un alt="Image d'une photo montrant le logo de l'entreprise A11yLearn en couleur bleue" sur un logo d’accueil devient « graphique, Image d’une photo montrant le logo de l’entreprise A11yLearn en couleur bleue, lien » — épuisant et inutile. « A11yLearn, accueil, lien » suffit et dit l’essentiel. Chaque mot en trop a un coût audible.

🧭 Sur A11yLearn — Le catalogue de cours affiche une vignette par formation. On applique l’arbre : la vignette est dans le lien qui mène au cours → elle est fonctionnelle, et le titre du cours est déjà écrit juste en dessous. Résultat : alt="" sur la vignette, et le lien porte le nom du cours en texte. Le lecteur d’écran annonce « Bases de React, lien » — une fois, proprement — au lieu de « vignette-react-cours, lien, Bases de React, lien » en double.

📚 Aller plus loin — Le W3C publie un arbre de décision alt officiel (« An alt Decision Tree ») sur w3.org/WAI : il déroule exactement ces cas avec des exemples. À garder en marque-page pour trancher les cas limites.

✏️ Exercices

Exercice 1 — Choisis le bon alt. Pour chacune, dis quel type d’image c’est et quel alt tu mets : (a) une flèche décorative « → » entre deux cartes, (b) le logo du site, cliquable, qui ramène à l’accueil, (c) une capture d’écran montrant une étape d’installation qui n’est décrite nulle part ailleurs, (d) une icône de crayon seule dans un bouton d’édition.

Exercice 2 — Corrige ce code. Repère et corrige les deux erreurs.

<img src="hero.jpg">
<a href="/panier"><img src="cart.svg" alt="icône panier"></a>

<img src="hero.jpg" alt="">
<a href="/panier"><img src="cart.svg" alt="Voir mon panier"></a>

🧠 Quiz de révision

Chapitre suivant : SVG & icônes — rendre les SVG accessibles et donner un nom aux icônes seules.