RGAA 4.1.2 · THÉMATIQUE 1 · IMAGES

Critère 1.1 : Chaque image porteuse d’information a-t-elle une alternative textuelle ?

Texte officiel du RGAA 4.1.2 (DINUM), mis en page par Claren · Mis à jour le

Ce critère appartient à la thématique « Images » du RGAA 4.1.2. Il se vérifie par 8 tests.

Le critère

Chaque image porteuse d’information a-t-elle une alternative textuelle ?

Les tests

Test 1.1.1

Chaque image (balise <img> ou balise possédant l’attribut WAI-ARIA role="img") porteuse d’information a-t-elle une alternative textuelle ?

Méthodologie du test 1.1.1
  1. Retrouver dans le document les images structurées au moyen d’un élément <img> ou d’un élément possédant l’attribut WAI-ARIA role="img" ;
  2. Pour chaque image, déterminer si l’image est porteuse d’information ;
  3. Dans le cas où il s’agit d’un élément <img>, vérifier que l’image est pourvue au moins d’une alternative textuelle parmi les suivantes :
    • Passage de texte associé via l’attribut WAI-ARIA aria-labelledby ;
    • Contenu de l’attribut WAI-ARIA aria-label ;
    • Contenu de l’attribut alt ;
    • Contenu de l’attribut title.
  4. Dans le cas où il s’agit d’un élément possédant l’attribut WAI-ARIA role="img", vérifier que l’image est pourvue au moins d’une alternative textuelle parmi les suivantes :
    • Passage de texte associé via l’attribut WAI-ARIA aria-labelledby ;
    • Contenu de l’attribut WAI-ARIA aria-label.
  5. Si au moins une alternative textuelle est trouvée, le test est validé.

Test 1.1.2

Chaque zone d’une image réactive (balise <area>) porteuse d’information a-t-elle une alternative textuelle ?

Méthodologie du test 1.1.2
  1. Retrouver dans le document les éléments <area> ;
  2. Pour chaque élément <area>, déterminer si la zone réactive est porteuse d’information ;
  3. Vérifier que la zone réactive est pourvue au moins d’une alternative textuelle parmi les suivantes :
    • Contenu de l’attribut WAI-ARIA aria-label ;
    • Contenu de l’attribut alt ;
  4. Si au moins une alternative textuelle est trouvée, le test est validé.

Test 1.1.3

Chaque bouton de type image (balise <input> avec l’attribut type="image") a-t-il une alternative textuelle ?

Méthodologie du test 1.1.3
  1. Retrouver dans le document les éléments <input> pourvus de l’attribut type="image" ;
  2. Pour chaque élément <input> pourvu de l’attribut type="image", déterminer si l’image utilisée est porteuse d’information ;
  3. Vérifier que l’élément <input> est pourvu au moins d’une alternative textuelle parmi les suivantes :
    • Passage de texte associé via l’attribut WAI-ARIA aria-labelledby ;
    • Contenu de l’attribut WAI-ARIA aria-label ;
    • Contenu de l’attribut alt ;
    • Contenu de l’attribut title.
  4. Si au moins une alternative textuelle est trouvée, le test est validé.

Test 1.1.4

Chaque zone cliquable d’une image réactive côté serveur est-elle doublée d’un mécanisme utilisable quel que soit le dispositif de pointage utilisé et permettant d’accéder à la même destination ?

Méthodologie du test 1.1.4
  1. Retrouver dans le document les éléments <img> pourvus de l’attribut ismap ;
  2. Pour chaque élément <img> pourvu de l’attribut ismap, vérifier la présence d’un lien ou d’un ensemble de liens (ou bien d’un autre type de composant d’interface qui jouerait un rôle similaire comme une liste de sélection, par exemple) permettant d’accéder aux mêmes ressources que lorsque l’image fait l’objet d’un clic.
  3. Si c’est le cas, le test est validé.

Test 1.1.5

Chaque image vectorielle (balise <svg>) porteuse d’information, vérifie-t-elle ces conditions ?

Méthodologie du test 1.1.5
  1. Retrouver dans le document les éléments <svg> ;
  2. Pour chaque élément <svg>, déterminer si l’image est porteuse d’information ;
  3. S’assurer que l’élément <svg> est pourvu d’un attribut WAI-ARIA role="img" ;
  4. Si ce n’est pas le cas, le test est invalidé.
  5. Le cas échéant, vérifier que l’élément <svg> est pourvu au moins d’une alternative textuelle parmi les suivantes :
    • Contenu de l’élément <title> ;
    • Passage de texte associé via l’attribut WAI-ARIA aria-labelledby ;
    • Contenu de l’attribut WAI-ARIA aria-label ;
  6. Si au moins une alternative textuelle est trouvée, le test est validé.

Test 1.1.6

Chaque image objet (balise <object> avec l’attribut type="image/…") porteuse d’information, vérifie-t-elle une de ces conditions ?

Méthodologie du test 1.1.6
  1. Retrouver dans le document les balises ouvrantes <object> pourvues de l'attribut type="image/…" ;
  2. Pour chaque balise ouvrante <object> pourvue de l'attribut type="image/…", déterminer si l’image utilisée est porteuse d'information ;
  3. Vérifier que l’élément <object> est pourvu d’un attribut WAI-ARIA role="img" ;
  4. Vérifier que l’élément <object> est pourvu au moins d’une alternative textuelle parmi les suivantes :
    • Passage de texte associé via l’attribut WAI-ARIA aria-labelledby ;
    • Contenu de l’attribut WAI-ARIA aria-label ;
    • Contenu de l’attribut title.
  5. Si au moins une alternative textuelle est trouvée, le test est validé ;
  6. Sinon, vérifier que l'élément <object> est :
    • Soit immédiatement suivi d'un lien ou bouton adjacent permettant d'accéder à un contenu alternatif ;
    • Soit un mécanisme permet à l'utilisateur de remplacer l'élément <object> par un contenu alternatif.
  7. Si c'est le cas, le test est validé.

Test 1.1.7

Chaque image embarquée (balise <embed> avec l’attribut type="image/…") porteuse d’information, vérifie-t-elle une de ces conditions ?

Méthodologie du test 1.1.7
  1. Pour chaque élément <embed> pourvu de l’attribut type="image/…", déterminer si l’image utilisée est porteuse d’information ;
  2. Vérifier que l’élément <embed> est pourvu d’un attribut WAI-ARIA role="img" ;
  3. Vérifier que l’élément <embed> est pourvu au moins d’une alternative textuelle parmi les suivantes :
    • Passage de texte associé via l’attribut WAI-ARIA aria-labelledby ;
    • Contenu de l’attribut WAI-ARIA aria-label ;
    • Contenu de l’attribut title.
  4. Si au moins une alternative textuelle est trouvée, le test est validé ;
  5. Sinon, vérifier que l’élément <embed> est :
    • Soit immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ;
    • Soit un mécanisme permet à l’utilisateur de remplacer l’élément <embed> par un contenu alternatif.
  6. Si c’est le cas, le test est validé.

Test 1.1.8

Chaque image bitmap (balise <canvas>) porteuse d’information, vérifie-t-elle une de ces conditions ?

Méthodologie du test 1.1.8
  1. Retrouver dans le document les éléments <canvas> ;
  2. Pour chaque élément <canvas>, déterminer si l’image utilisée est porteuse d’information ;
  3. Vérifier que l’élément <canvas> est pourvu d’un attribut WAI-ARIA role="img" ;
  4. Vérifier que la balise ouvrante <canvas> est pourvue au moins d’une alternative textuelle parmi les suivantes :
    • Passage de texte associé via l’attribut WAI-ARIA aria-labelledby ;
    • Contenu de l’attribut WAI-ARIA aria-label.
  5. Si au moins une alternative textuelle est trouvée, le test est validé.
  6. Si les étapes 3 et 4 ne sont pas satisfaites, vérifier que l’élément <canvas> est :
    • Soit pourvu d’un contenu alternatif présent entre les balises <canvas> et </canvas> ;
    • Soit immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ;
    • Soit un mécanisme permet à l’utilisateur de remplacer l’élément <canvas> par un contenu alternatif.
  7. Si c’est le cas, le test est validé.

Note : si l'élément <canvas> dispose d'un rôle img, son alternative ne peut être fournie que par les techniques listées à l'étape 4.

Correspondance WCAG

Ce qu’un contrôle automatique peut voir

Les contrôles automatiques de Claren couvrent une partie de ce critère. Le reste se vérifie à la main.

Faire vérifier votre site

Un test automatique ne tranche qu’une partie des critères. Un audit RGAA les contrôle tous à la main, sur un échantillon de pages, et vous laisse un plan de correction.

Prendre rendez-vous

Tester une page gratuitement en ligne

Version officielle : critère 1.1 sur accessibilite.numerique.gouv.fr.

Textes du critère, des tests, de la méthodologie, des cas particuliers et des notes techniques : RGAA 4.1.2, DINUM, sous Licence Ouverte 2.0 (Etalab), repris tels quels. Intitulés des critères WCAG 2.2 : W3C, W3C Document License. Les liens des termes mènent au glossaire officiel du RGAA.

PARLONS DE VOTRE SITE

Un créneau tout de suite, ou nous vous rappelons.

Un premier échange pour comprendre votre situation et vous dire par quoi commencer : choisissez un créneau dans notre agenda, ou laissez votre numéro et nous vous rappelons.

Prendre rendez-vous

Premier rendez-vous gratuit et sans engagement : 30 minutes (15 minutes pour une boutique en ligne).

Le diagnostic flash, c’est quoi ?

Le diagnostic flash est gratuit : nous examinons jusqu’à 5 pages de votre site et vous envoyons le rapport par e-mail. Il repère de premiers obstacles ; il ne remplace pas un audit et ne donne pas de taux de conformité.

Recevoir le diagnostic gratuit

Vous représentez (obligatoire)
Le secteur public
Le secteur privé

Vos informations servent seulement à vous rappeler. Confidentialité.

Choisissez un créneau.

Un échange de trente minutes, en visioconférence ou par téléphone, pour comprendre votre situation. Vous recevez une confirmation du rendez-vous par e-mail.

Un échange sans engagement. Aucun créneau n’est proposé avant trois jours.