Les images purement décoratives — séparateurs, fonds, icônes sans sens — sont-elles ignorées par les logiciels de lecture ?
Critère officiel 1.2 — Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Pourquoi c'est important
Si les images décoratives ne sont pas ignorées, le logiciel de lecture les mentionne une à une, interrompant la lecture du contenu utile. Cela rend la navigation très fastidieuse pour les personnes aveugles.
Exemples concrets
Ce qui est conforme
Le bandeau graphique décoratif en haut de la page « Vie associative » est configuré pour être invisible aux logiciels de lecture : ils passent directement au titre de la page.
Ce qui pose problème
Le logiciel de lecture annonce « banniere-mairie.jpg » puis « separateur.png » avant même d'atteindre le titre de la page, sans qu'aucune information utile ne soit transmise.
Comment agir
Dans WordPress, pour une image purement décorative, laissez le champ « Texte alternatif » complètement vide — ne tapez pas « décoratif », « espace » ou « - ». Un champ vide est le signal correct pour ignorer l'image.
Règles clés
- Image décorative : alt="" (attribut présent, valeur vide).
- SVG décoratif : aria-hidden="true" ET focusable="false" (IE11).
- Ne jamais omettre l'attribut alt — son absence est différente de alt vide.
Erreurs fréquentes
- Image décorative sans attribut alt (absent ≠ vide — comportement imprévisible)
- SVG décoratif sans aria-hidden='true' — annoncé comme 'image' ou 'graphique'
- Icône décorative avec alt décrivant l'apparence ('étoile bleue') au lieu de alt=""
Exemples de code
icône décorative sans alt vide
✗ Non conforme<!-- Alt absent : comportement imprévisible -->
<img src="icon-check.png">
<!-- Alt décrivant l'apparence : inutile -->
<img src="icon-check.png" alt="coche verte">Sans alt, certains lecteurs d'écran restituent le nom de fichier. Avec alt='coche verte', ils annoncent une information visuelle sans valeur sémantique.
icône décorative correctement ignorée
✓ Conforme<img src="icon-check.png" alt="">
<svg aria-hidden="true" focusable="false">
<use href="#icon-check"/>
</svg>alt="" signale explicitement 'décoratif'. aria-hidden="true" retire le SVG de l'arbre AT. focusable="false" évite qu'il reçoive le focus sous IE11.
Référence WCAG : 1.1.1, 4.1.2