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

Comprendre

Les images purement décoratives doivent être ignorées des lecteurs d’écran (alt vide, aria-hidden).

Ce critère s’applique lorsque la page contient : images, images vectorielles, images réactives, boutons image, contenus embarqués (object, embed), images bitmap (canvas).

Ce que vérifie Agence RGAA

Aucun contrôle automatique fiable aujourd’hui : ce critère est vérifié par une personne (en interne ou par un auditeur RGAA).

Un résultat automatique n’est jamais un audit : seul un contrôle humain (en interne ou par un auditeur RGAA) permet de conclure.

Tests officiels

1. Test 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".

   Méthodologie de test

   1. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <img> ;
   2. Pour chaque image, vérifier que l’image ne possède pas d’attributs aria-labelledby, aria-label ou title et qu’elle possède :
      • Soit un attribut alt vide (alt="") ;
      • Soit un attribut WAI-ARIA aria-hidden="true" ou role="presentation".
   3. Si c’est le cas pour chaque image, le test est validé.

2. Test 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".

   Méthodologie de test

   1. Retrouver dans le document les images décoratives structurées au moyen d’un élément <area> (sans attribut href) ;
   2. Pour chaque image, vérifier que l’élément <area> ne possède pas d’attributs aria-labelledby, aria-label ou title et qu’il possède :
      • Soit un attribut alt vide (alt="") ;
      • Soit un attribut WAI-ARIA aria-hidden="true" ou role="presentation".
   3. Si c’est le cas pour chaque image, le test est validé.

3. Test 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>.

   Méthodologie de test

   1. Retrouver dans le document les images décoratives structurées dépourvues de légende au moyen d’un élément <object> (avec un attribut type="image/…") ;
   2. Pour chaque image, vérifier que la balise ouvrante <object> ne possède pas d’attributs aria-labelledby, aria-label ou title et qu’elle :
      • Possède un attribut WAI-ARIA aria-hidden="true" ;
      • Et est dépourvue d’alternative textuelle ;
      • Et est dépourvue d’un contenu alternatif présent entre les balises <object> et </object>.
   3. Si c’est le cas pour chaque image, le test est validé.

4. Test 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.

   Méthodologie de test

   1. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <svg> ;
   2. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :
      • Possède un attribut WAI-ARIA aria-hidden="true" ;
      • Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;
      • Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;
      • Et est dépourvu d’attribut title (ainsi que ses éléments enfants).
   3. Si c’est le cas pour chaque image, le test est validé.

5. Test 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>.

   Méthodologie de test

   1. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <canvas> ;
   2. Pour chaque image, vérifier que l’élément <canvas> ne possède pas d’attributs aria-labelledby, aria-label ou title et qu’il :
      • Possède un attribut WAI-ARIA aria-hidden="true" ;
      • Et est dépourvu d’alternative textuelle ;
      • Et est dépourvu d’un contenu alternatif présent entre les balises <canvas> et </canvas>.
   3. Si c’est le cas pour chaque image, le test est validé.

6. Test 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.

   Méthodologie de test

   1. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <embed> (avec un attribut type="image/…") ;
   2. Pour chaque image, vérifier que l’élément <embed> ne possède pas d’attributs aria-labelledby, aria-label ou title et qu’il :
      • Possède un attribut WAI-ARIA aria-hidden="true" ;
      • Et est dépourvu d’alternative textuelle ;
   3. Si c’est le cas pour chaque image, le test est validé.

Texte officiel du référentiel RGAA 4.1.2 publié par la DINUM — voir la source.