Aller au contenu principal
Logo RGAA CheckerRGAA Checker
Critère 1.2

Images de décoration

Chaque image de décoration doit être correctement ignorée par les technologies d'assistance.

En Bref : L'essentiel à retenir

  • Pour les images purement décoratives, il faut empêcher les lecteurs d'écran de les lire.
  • Pour les images HTML (<img>), utilisez un attribut 'alt' vide (alt="").
  • Pour les images SVG (<svg>), utilisez 'aria-hidden="true"' ou 'role="presentation"'.
  • Évitez les erreurs fréquentes telles que l'omission de l'attribut 'alt' ou l'utilisation de 'alt' avec des descriptions inappropriées.

Objectif

Les images purement décoratives (qui n'apportent aucune information ou sont redondantes) ne doivent pas être lues par les lecteurs d'écran pour ne pas polluer la navigation.

Solution Technique

1. Images HTML (<img>)

Utilisez un attribut alt vide.

<!-- ✅ Correct : Image décorative -->
<img src="separateur.png" alt="" />

Attention : Ne pas oublier l'attribut alt, sinon le lecteur d'écran risque de lire le nom du fichier image.

2. Images SVG (<svg>)

Utilisez aria-hidden="true" ou role="presentation".

<!-- ✅ Correct : SVG décoratif -->
<svg aria-hidden="true" focusable="false" viewBox="...">
  <!-- chemins... -->
</svg>

3. Éléments avec role="presentation"

Vous pouvez forcer un élément à être ignoré sémantiquement (mais son contenu reste visible).

<img src="deco.png" role="presentation" alt="" />

Erreurs fréquentes

  • ❌ Oublier l'attribut alt sur une image décorative.
  • ❌ Mettre alt="image" ou alt="décoration".
  • ❌ Utiliser display: none ou visibility: hidden (cela cache l'image pour tout le monde, pas juste les lecteurs d'écran).

Ressources