Accessia
Auditer mon site
Tous les critères par thématique

Thématique 1 · Images

Critère RGAA 1.2 : Images de décoration ignorées

Une image purement décorative annoncée par le lecteur d'écran (« image, fond-bleu.png ») ralentit la lecture et pollue la compréhension de la page.

Niveau
A
WCAG 2.2
1.1.1, 4.1.2
Thématique
Images
Vérification
Détection partielle

La question posée par le RGAA

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?

Comment respecter ce critère

  • Donnez aux images décoratives un attribut alt vide (alt=""), sans attribut title.
  • Pour un SVG décoratif, ajoutez aria-hidden="true".
  • Préférez une image de fond CSS pour les éléments purement graphiques.

Exemple

Une image de décoration doit être ignorée des technologies d'assistance (alt vide + pas de rôle contradictoire).

✗ À éviter

<img src="separateur.png" alt="séparateur décoratif">

✓ À faire

<img src="separateur.png" alt="" role="presentation">

Les tests officiels

Pour être conforme, chaque élément concerné de la page doit satisfaire les tests suivants :

  1. 1.2.1 — Chaque image (balise <img>) de décoration, sans légende, vérifie-t-elle une de ces conditions ? (La balise <img> possède un attribut alt vide (alt="") et est dépourvue de tout autre attribut permettant de fournir une alternative textuelle ; La balise <img> possède un attribut WAI-ARIA aria-hidden="true" ou role="presentation".)
  2. 1.2.2 — Chaque zone non cliquable (balise <area> sans attribut href) de décoration, vérifie-t-elle une de ces conditions ? (La balise <area> possède un attribut alt vide (alt="") et est dépourvue de tout autre attribut permettant de fournir une alternative textuelle ; La balise <area> possède un attribut WAI-ARIA aria-hidden="true" ou role="presentation".)
  3. 1.2.3 — Chaque image objet (balise <object> avec l’attribut type="image/…") de décoration, sans légende, vérifie-t-elle ces conditions ? (La balise <object> possède un attribut WAI-ARIA aria-hidden="true" ; La balise <object> est dépourvue d’alternative textuelle ; Il n’y a aucun texte faisant office d’alternative textuelle entre <object> et </object>.)
  4. 1.2.4 — Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ? (La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ; La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ; Les balises <title> et <desc> sont absentes ou vides ; La balise <svg> et ses enfants sont dépourvus d’attribut title.)
  5. 1.2.5 — Chaque image bitmap (balise <canvas>) de décoration, sans légende, vérifie-t-elle ces conditions ? (La balise <canvas> possède un attribut WAI-ARIA aria-hidden="true" ; La balise <canvas> et ses enfants sont dépourvus d’alternative textuelle ; Il n’y a aucun texte faisant office d’alternative textuelle entre <canvas> et </canvas>.)
  6. 1.2.6 — Chaque image embarquée (balise <embed> avec l’attribut type="image/…") de décoration, sans légende, vérifie-t-elle ces conditions ? (La balise <embed> possède un attribut WAI-ARIA aria-hidden="true" ; La balise <embed> et ses enfants sont dépourvus d’alternative textuelle.)

Source : RGAA 4.1.2, critère 1.2, DINUM (nouvel onglet), sous Licence Ouverte. Le RGAA précise aussi des cas particuliers et un glossaire à consulter pour un audit officiel.

Comment Accessia le vérifie

Accessia détecte automatiquement une partie des manquements à ce critère et les signale « à confirmer » ; la revue guidée vous fait vérifier le reste avec les tests officiels.