Critère 1.1, thématique 1 « Images » Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Texte officiel du RGAA. Fiche complète du critère 1.1
Explication Rampe — non normative (thématique « Images »)
Les images doivent avoir un équivalent en texte quand elles transmettent une information, et être ignorées des technologies d’assistance quand elles sont décoratives. Une personne aveugle, qui écoute la page avec un lecteur d’écran, ne perçoit l’image qu’à travers ce texte. Exemple : un pictogramme « panier » sans texte associé peut être annoncé comme « image », sans plus de précision.
Tests du critère 1.1
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
- 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-ARIArole="img"; - Pour chaque image, déterminer si l’image est porteuse d’information ;
- 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.
- Passage de texte associé via l’attribut WAI-ARIA
- 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.
- Passage de texte associé via l’attribut WAI-ARIA
- 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
- Retrouver dans le document les éléments
<area>; - Pour chaque élément
<area>, déterminer si la zone réactive est porteuse d’information ; - 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;
- Contenu de l’attribut WAI-ARIA
- 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
- Retrouver dans le document les éléments
<input>pourvus de l’attributtype="image"; - Pour chaque élément
<input>pourvu de l’attribut type="image", déterminer si l’image utilisée est porteuse d’information ; - 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.
- Passage de texte associé via l’attribut WAI-ARIA
- 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
- Retrouver dans le document les éléments
<img>pourvus de l’attributismap; - Pour chaque élément
<img>pourvu de l’attributismap, 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. - 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 ?
- La balise
<svg>possède un attribut WAI-ARIArole="img"; - La balise
<svg>a une alternative textuelle.
Méthodologie du test 1.1.5
- Retrouver dans le document les éléments
<svg>; - Pour chaque élément
<svg>, déterminer si l’image est porteuse d’information ; - S’assurer que l’élément
<svg>est pourvu d’un attribut WAI-ARIArole="img"; - Si ce n’est pas le cas, le test est invalidé.
- 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;
- Contenu de l’élément
- 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 ?
- La balise
<object>possède une alternative textuelle et un attributrole="img"; - L’élément
<object>est immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ; - Un mécanisme permet à l’utilisateur de remplacer l’élément
<object>par un contenu alternatif.
Méthodologie du test 1.1.6
- Retrouver dans le document les balises ouvrantes
<object>pourvues de l'attributtype="image/…"; - Pour chaque balise ouvrante
<object>pourvue de l'attributtype="image/…", déterminer si l’image utilisée est porteuse d'information ; - Vérifier que l’élément
<object>est pourvu d’un attribut WAI-ARIArole="img"; - 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.
- Passage de texte associé via l’attribut WAI-ARIA
- Si au moins une alternative textuelle est trouvée, le test est validé ;
- 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.
- 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 ?
- La balise
<embed>possède une alternative textuelle et un attributrole="img"; - L’élément
<embed>est immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ; - Un mécanisme permet à l’utilisateur de remplacer l’élément
<embed>par un contenu alternatif.
Méthodologie du test 1.1.7
- Pour chaque élément
<embed>pourvu de l’attributtype="image/…", déterminer si l’image utilisée est porteuse d’information ; - Vérifier que l’élément
<embed>est pourvu d’un attribut WAI-ARIArole="img"; - 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.
- Passage de texte associé via l’attribut WAI-ARIA
- Si au moins une alternative textuelle est trouvée, le test est validé ;
- 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.
- 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 ?
- La balise
<canvas>possède une alternative textuelle et un attributrole="img"; - Un contenu alternatif est présent entre les balises
<canvas>et</canvas>; - L’élément
<canvas>est immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ; - Un mécanisme permet à l’utilisateur de remplacer l’élément
<canvas>par un contenu alternatif.
Méthodologie du test 1.1.8
- Retrouver dans le document les éléments
<canvas>; - Pour chaque élément
<canvas>, déterminer si l’image utilisée est porteuse d’information ; - Vérifier que l’élément
<canvas>est pourvu d’un attribut WAI-ARIArole="img"; - 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.
- Passage de texte associé via l’attribut WAI-ARIA
- Si au moins une alternative textuelle est trouvée, le test est validé.
- 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.
- Soit pourvu d’un contenu alternatif présent entre les balises
- 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.