Chaque image qui apporte une information est-elle décrite en texte ?
Critère officiel 1.1 — Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Pourquoi c'est important
Une personne aveugle utilisant un logiciel de lecture entend uniquement « image » si aucune description n'est fournie. Elle ne peut pas accéder à l'information que l'image était censée communiquer.
Exemples concrets
Ce qui est conforme
La photo du nouveau complexe sportif est accompagnée de la description : « Vue aérienne du complexe sportif Marcel-Cerdan, inauguré en septembre 2024, comprenant une piscine et trois terrains de sport. »
Ce qui pose problème
La même photo n'a aucune description : le logiciel de lecture annonce simplement « image » et passe à la suite. L'information sur le complexe est totalement perdue.
Comment agir
Dans WordPress, cliquez sur l'image dans la médiathèque, puis remplissez le champ « Texte alternatif » avec une phrase décrivant ce que l'image apporte comme information — pas son aspect visuel, mais son message.
Règles clés
- L'alt décrit la fonction ou l'information transmise par l'image, jamais son apparence.
- Pour une image dans un lien sans texte adjacent : l'alt décrit la destination du lien, pas l'image.
- Pour une image dans un lien avec texte adjacent décrivant déjà la destination : alt="" (décoration).
- Un <svg> informatif doit avoir role="img" et un titre accessible via <title> enfant ou aria-label.
- alt="" signifie intentionnellement 'image décorative' — différent de l'absence d'alt.
Erreurs fréquentes
- Attribut alt absent sur un élément <img>
- alt renseigné avec le nom de fichier (alt="photo.jpg") ou une URL
- alt qui décrit l'apparence plutôt que l'information (alt="image d'une flèche bleue" au lieu de alt="Retour à l'accueil")
- alt redondant avec le texte adjacent visible — à traiter comme une image de décoration (critère 1.2)
- SVG informatif sans role="img" et sans alternative textuelle (<title> ou aria-label)
- Bouton de type image (<input type="image">) sans attribut alt
- Image dans un lien : alt décrivant l'image plutôt que la destination du lien
- Graphique (camembert, courbe, histogramme) avec alt décrivant les données de façon linéaire sans structure — préférer un tableau HTML des données accompagnant le graphique avec role='presentation' ou aria-hidden='true' sur l'image
- Image avec alt='' dans un lien (approche correcte pour image décorative) mais sans aria-label sur le lien — résultat : lien entièrement vide pour les AT
Exemples de code
img classique
✗ Non conforme<img src="retour.png">Absence d'attribut alt. Le lecteur d'écran restituera le nom de fichier ou ignorera l'image.
img classique
✓ Conforme<img src="retour.png" alt="Retour à la page précédente">L'alt décrit la fonction (retour arrière), pas l'apparence graphique de la flèche.
img dans un lien
✗ Non conforme<a href="/accueil"><img src="logo.png" alt="Logo"></a>L'alt « Logo » ne dit pas où mène le lien. Le lecteur d'écran annoncera « lien, Logo » sans information de destination.
img dans un lien
✓ Conforme<a href="/accueil"><img src="logo.png" alt="Accueil — Nom du site"></a>L'alt décrit la destination du lien. Le logo lui-même est secondaire.
SVG informatif
✗ Non conforme<svg viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2z"/></svg>SVG sans role ni alternative : ignoré ou mal restitué par les lecteurs d'écran.
SVG informatif
✓ Conforme<svg role="img" aria-label="Attention" viewBox="0 0 24 24">
<title>Attention</title>
<path d="M12 2L2 22h20L12 2z"/>
</svg>role="img" expose le SVG comme image. <title> fournit l'alternative textuelle. aria-label en renfort pour les AT qui ignorent <title>.
input type image
✗ Non conforme<input type="image" src="rechercher.png">Bouton de soumission imagé sans alt : le lecteur d'écran restituera le nom du fichier ou rien.
input type image
✓ Conforme<input type="image" src="rechercher.png" alt="Rechercher">L'alt décrit l'action du bouton.
Référence WCAG : 1.1.1