Le texte alternatif : pourquoi c'est essentiel
Le texte alternatif, c'est probablement le sujet d'accessibilité le plus simple à comprendre et pourtant l'un des plus mal traité. L'attribut alt est la description textuelle d'une image : il est lu par les lecteurs d'écran et s'affiche quand l'image ne charge pas. Les critères RGAA 1.1 à 1.9 couvrent les images. Le principe est limpide : chaque image doit soit transmettre son information en texte, soit être ignorée.
La règle d'or : quel est le rôle de l'image ?
Avant d'écrire un seul mot, posez-vous cette question : que perdrait l'utilisateur si l'image n'existait pas ? La réponse détermine tout :
- Rien du tout → image décorative →
alt="" - Une information → image informative →
alt="[description]" - Du texte → image texte →
alt="[le texte de l'image]" - C'est un lien/bouton → image fonctionnelle →
alt="[destination/action]"
Exemples par type d'image
Images informatives
C'est là que je vois le plus d'erreurs. Regardez la différence :
| Image | Mauvais alt | Bon alt |
|---|---|---|
| Photo mairie | "photo" | "Façade de la mairie de Bordeaux, bâtiment en pierre du XVIIIe siècle" |
| Graphique CA | "graphique" | "Évolution du CA 2023-2025 : croissance de 12 à 18 M€" |
| Portrait dirigeant | "photo profil" | "Marie Dupont, directrice générale" |
Images de décoration
Arrière-plans, séparateurs, illustrations purement esthétiques : aucune information supplémentaire → alt="". Attention, alt vide, pas alt absent ! C'est une erreur que je croise constamment : sans attribut alt du tout, le lecteur d'écran lit le nom du fichier. Imaginez entendre « DSC_0047_final_v2.jpg ». Pas très utile.
Images fonctionnelles
Le piège classique. Quand l'image est un lien ou un bouton, l'alt décrit la destination ou l'action, pas l'image elle-même :
- Logo → accueil :
alt="Accueil - Nom du site" - Icône recherche :
alt="Rechercher" - Icône PDF :
alt="Télécharger le rapport (PDF, 2 Mo)"
Images complexes
Pour les graphiques ou infographies riches, un alt court en résumé suffit dans l'attribut, complété par une description longue via aria-describedby ou un tableau de données à proximité.
Icônes et pictogrammes
- Icône + texte adjacent :
alt=""(le texte fait déjà le boulot, pas besoin de doublon) - Icône seule :
alt="[signification]" - SVG :
<svg role="img" aria-label="Description">
Bonnes pratiques de rédaction
Stop. Relisez votre alt text à voix haute. Est-ce que ça a du sens ? Si oui, c'est un bon début. Sinon, reprenez :
- Concis : 5 à 15 mots pour les images simples, allez droit au but
- Ne pas commencer par « Image de... » : le lecteur d'écran annonce déjà « image », vous allez créer un doublon agaçant
- Décrire l'information, pas l'apparence : « Graphique montrant une hausse de 12 % » plutôt que « graphique avec des barres bleues »
- Contextualiser : le même graphique peut avoir un alt différent selon l'article dans lequel il apparaît
- Pas de mots-clés SEO dans l'alt — ce n'est pas fait pour ça, et les lecteurs d'écran vont réciter votre bourrage de mots-clés
Un bon texte alternatif est invisible pour les voyants mais indispensable pour les utilisateurs de lecteurs d'écran. C'est l'un des gestes les plus simples et les plus impactants pour l'accessibilité. Et ça ne prend que quelques secondes par image.