Portail de l'accessibilité numérique

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 ?

• La balise <svg> possède un attribut WAI-ARIA role="img" ;
• La balise <svg> a une alternative textuelle.

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 ?

• La balise <object> possède une alternative textuelle et un attribut role="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

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 ?

• La balise <embed> possède une alternative textuelle et un attribut role="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

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 ?

• La balise <canvas> possède une alternative textuelle et un attribut role="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

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.

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F65, H24, H36, H37, H53.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content.

Correspondances tests automatisés

• Règle Axe: area-alt - "Active <area> elements must have alternate text"
• Règle Axe: image-alt - "Images must have alternate text"
• Règle Axe: input-image-alt - "Image buttons must have alternate text"
• Règle Axe: object-alt - "<object> elements must have alternate text"
• Règle Axe: role-img-alt - "[role="img"] elements have an alternative text"
• Règle Axe: svg-img-alt - "svg elements with an img role have an alternative text"

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 du test 1.2.1

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é.

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 du test 1.2.2

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é.

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 du test 1.2.3

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é.

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 du test 1.2.4

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é.

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 du test 1.2.5

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é.

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 du test 1.2.6

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é.

Note technique

Lorsqu’une image est associée à une légende, la note technique WCAG recommande de prévoir systématiquement une alternative textuelle (cf. critère 1.9). Dans ce cas le critère 1.2 est non applicable.

Dans le cas d’une image vectorielle (balise <svg>) de décoration qui serait affichée au travers d’un élément <use href="…"> enfant de l’élément <svg>, le test 1.2.4 s’appliquera également à l’élément <svg> associé par le biais de l’élément <use>.

Un attribut WAI-ARIA role="presentation" peut être utilisé sur les images de décoration et les zones non cliquables de décoration. Le rôle "none" introduit en ARIA 1.1 et synonyme du rôle "presentation" peut être aussi utilisé. Il reste préférable cependant d’utiliser le rôle "presentation" en attendant un support satisfaisant du rôle "none".

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A), 4.1.2 Nom, rôle et valeur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA4, C9, F38, F39, G196, H67.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content, 9.4.1.2 Name, role, value.

Correspondances tests automatisés

• Règle Axe: area-alt - "Active <area> elements must have alternate text"
• Règle Axe: image-alt - "Images must have alternate text"
• Règle Axe: input-image-alt - "Image buttons must have alternate text"
• Règle Axe: object-alt - "<object> elements must have alternate text"
• Règle Axe: role-img-alt - "[role="img"] elements have an alternative text"
• Règle Axe: svg-img-alt - "svg elements with an img role have an alternative text"

Test 1.3.1 Chaque image (balise <img> ou balise possédant l’attribut WAI-ARIA role="img") porteuse d’information, ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?

• S’il est présent, le contenu de l’attribut alt est pertinent.
• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.

Méthodologie du test 1.3.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") pourvues d’une alternative textuelle.
2. Pour chaque image, vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.3.2 Pour chaque zone (balise <area>) d’une image réactive porteuse d’information, ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?

• S’il est présent, le contenu de l’attribut alt est pertinent.
• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.

Méthodologie du test 1.3.2

1. Retrouver dans le document les éléments <area> pourvus d’une alternative textuelle.
2. Pour chaque élément <area>, vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.3.3 Pour chaque bouton de type image (balise <input> avec l’attribut type="image"), ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?

• S’il est présent, le contenu de l’attribut alt est pertinent.
• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.

Méthodologie du test 1.3.3

1. Retrouver dans le document les éléments <input> pourvus de l’attribut type="image" et d’une alternative textuelle.
2. Pour chaque élément <input> pourvu de l’attribut type="image", vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.3.4 Pour chaque image objet (balise <object> avec l’attribut type="image/…") porteuse d’information, ayant une alternative textuelle ou un contenu alternatif, cette alternative est-elle pertinente (hors cas particuliers) ?

• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.
• S’il est présent, le contenu alternatif est pertinent.

Méthodologie du test 1.3.4

1. Retrouver dans le document les éléments <object> pourvus de l’attribut type="image/…" et d’une alternative textuelle.
2. Pour chaque élément <object> pourvu de l’attribut type="image/…", vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.3.5 Pour chaque image embarquée (balise <embed> avec l’attribut type="image/…") porteuse d’information, ayant une alternative textuelle ou un contenu alternatif, cette alternative est-elle pertinente (hors cas particuliers) ?

• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.
• S’il est présent, le contenu alternatif est pertinent.

Méthodologie du test 1.3.5

1. Retrouver dans le document les éléments <embed> pourvus de l’attribut type="image/…" et d’une alternative textuelle.
2. Pour chaque élément <embed> pourvu de l’attribut type="image/…", vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.3.6 Pour chaque image vectorielle (balise <svg>) porteuse d’information, ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?

• S’il est présent, le contenu de l’élément <title> est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.

Méthodologie du test 1.3.6

1. Retrouver dans le document les éléments <svg> pourvus d’une alternative textuelle.
2. Pour chaque élément <svg>, vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.3.7 Pour chaque image bitmap (balise <canvas>) porteuse d’information, ayant une alternative textuelle ou un contenu alternatif, cette alternative est-elle pertinente (hors cas particuliers) ?

• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.
• S’il est présent, le contenu alternatif est pertinent.

Méthodologie du test 1.3.7

1. Retrouver dans le document les éléments <canvas> pourvus d’une alternative textuelle.
2. Pour chaque élément <canvas>, vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.3.8 Pour chaque image bitmap (balise <canvas>) porteuse d’information et ayant un contenu alternatif entre <canvas> et </canvas>, ce contenu alternatif est-il correctement restitué par les technologies d’assistance ?

Méthodologie du test 1.3.8

1. Retrouver dans le document les éléments <canvas> pourvus d’un contenu alternatif entre les balises <canvas> et </canvas>.
2. Pour chaque élément <canvas>, vérifier que le contenu alternatif est correctement restitué par les technologies d’assistance.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.3.9 Pour chaque image porteuse d’information et ayant une alternative textuelle, l’alternative textuelle est-elle courte et concise (hors cas particuliers) ?

Méthodologie du test 1.3.9

1. Retrouver dans le document les images pourvues d’une alternative textuelle.
2. Pour chaque image, vérifier l’alternative textuelle est courte et concise.
3. Si c’est le cas pour chaque image, le test est validé.

Cas particuliers

Il existe une gestion de cas particuliers lorsque l’image est utilisée comme CAPTCHA ou comme image-test. Dans cette situation, où il n’est pas possible de donner une alternative pertinente sans détruire l’objet du CAPTCHA ou du test, le critère est non applicable.

Note : le cas des CAPTCHA et des images-test est traité de manière spécifique par le critère 1.4.

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A), 4.1.2 Nom, rôle et valeur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA6, ARIA9, ARIA10, F30, F71, G94, G95, G196.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content, 9.4.1.2 Name, role, value.

Test 1.4.1 Pour chaque image (balise <img>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?

• S’il est présent, le contenu de l’attribut alt est pertinent.
• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.

Méthodologie du test 1.4.1

1. Retrouver dans le document les images structurées au moyen d’un élément <img> pourvues d’une alternative textuelle et utilisées comme CAPTCHA ou comme image-test.
2. Pour chaque image, vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.4.2 Pour chaque zone (balise <area>) d’une image réactive utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?

• S’il est présent, le contenu de l’attribut alt est pertinent.
• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.

Méthodologie du test 1.4.2

1. Retrouver dans le document les éléments <area> pourvus d’une alternative textuelle et utilisés comme CAPTCHA ou comme image-test.
2. Pour chaque élément <area>, vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.4.3 Pour chaque bouton de type image (balise <input> avec l’attribut type="image") utilisé comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?

• S’il est présent, le contenu de l’attribut alt est pertinent.
• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.

Méthodologie du test 1.4.3

1. Retrouver dans le document les éléments <input> pourvus de l’attribut type="image" et d’une alternative textuelle, et utilisés comme CAPTCHA ou comme image-test.
2. Pour chaque élément <input> pourvu de l’attribut type="image", vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.4.4 Pour chaque image objet (balise <object> avec l’attribut type="image/…") utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle ou un contenu alternatif, cette alternative est-elle pertinente ?

• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.
• S’il est présent, le contenu alternatif est pertinent.

Méthodologie du test 1.4.4

1. Retrouver dans le document les éléments <object> pourvus de l’attribut type="image/…" et d’une alternative textuelle, et utilisés comme CAPTCHA ou comme image-test.
2. Pour chaque élément <object> pourvu de l’attribut type="image/…", vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.4.5 Pour chaque image embarquée (balise <embed> avec l’attribut type="image/…") utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle ou un contenu alternatif, cette alternative est-elle pertinente ?

• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.
• S’il est présent, le contenu alternatif est pertinent.

Méthodologie du test 1.4.5

1. Retrouver dans le document les éléments <embed> pourvus de l’attribut type="image/…" et d’une alternative textuelle, et utilisés comme CAPTCHA ou comme image-test.
2. Pour chaque élément <embed> pourvu de l’attribut type="image/…", vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.4.6 Pour chaque image vectorielle (balise <svg>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?

• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.

Méthodologie du test 1.4.6

1. Retrouver dans le document les éléments <svg> pourvus d’une alternative textuelle et utilisés comme CAPTCHA ou comme image-test.
2. Pour chaque élément <svg>, vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.4.7 Pour chaque image bitmap (balise <canvas>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle ou un contenu alternatif, cette alternative est-elle pertinente ?

• S’il est présent, le contenu de l’attribut title est pertinent.
• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent.
• S’il est présent, le contenu alternatif est pertinent.

Méthodologie du test 1.4.7

1. Retrouver dans le document les éléments <canvas> pourvus d’une alternative textuelle et utilisés comme CAPTCHA ou comme image-test.
2. Pour chaque élément <canvas>, vérifier que l’alternative textuelle est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : G100, G143.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content.

Test 1.5.1 Chaque image (balises <img>, <area>, <object>, <embed>, <svg>, <canvas> ou possédant un attribut WAI-ARIA role="img") utilisée comme CAPTCHA vérifie-t-elle une de ces conditions ?

• Il existe une autre forme de CAPTCHA non graphique, au moins.
• Il existe une autre solution d’accès à la fonctionnalité qui est sécurisée par le CAPTCHA.

Méthodologie du test 1.5.1

1. Retrouver dans le document les images (éléments <img>, <area>, <object>, <embed>, <svg>, <canvas> ou possédant un attribut WAI-ARIA role="img") utilisés comme CAPTCHA ou comme image-test.
2. Pour chaque image, vérifier qu’il existe :
   • soit une autre forme de CAPTCHA non graphique, au moins ;
   • soit une autre solution d’accès à la fonctionnalité qui est sécurisée par le CAPTCHA.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.5.2 Chaque bouton associé à une image (balise input avec l’attribut type="image") utilisée comme CAPTCHA vérifie-t-il une de ces conditions ?

• Il existe une autre forme de CAPTCHA non graphique, au moins.
• Il existe une autre solution d’accès à la fonctionnalité sécurisée par le CAPTCHA.

Méthodologie du test 1.5.2

1. Retrouver dans le document les boutons associés à une image (éléments <input> avec l’attribut type="image") utilisés comme CAPTCHA ou comme image-test.
2. Pour chaque bouton associé à une image, vérifier qu’il existe :
   • soit une autre forme de CAPTCHA non graphique, au moins ;
   • soit une autre solution d’accès à la fonctionnalité qui est sécurisée par le CAPTCHA.
3. Si c’est le cas pour chaque image, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : G144.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content.

Test 1.6.1 Chaque image (balise <img>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?

• Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image.
• Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.

Méthodologie du test 1.6.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") porteuses d’information qui nécessitent une description détaillée.
2. Pour chaque image, vérifier qu’il existe :
   • Soit une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
   • Soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
3. Si c’est le cas pour chaque image, le test est validé.

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

• Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image.
• Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.

Méthodologie du test 1.6.2

1. Retrouver dans le document les éléments <object> pourvus de l’attribut type="image/…", porteurs d’information qui nécessitent une description détaillée.
2. Pour chaque élément <object> pourvu de l’attribut type="image/…", vérifier qu’il existe :
   • soit une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
   • soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
3. Si c’est le cas pour chaque élément <object> pourvu de l’attribut type="image/…", le test est validé.

Test 1.6.3 Chaque image embarquée (balise <embed>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?

• Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image.
• Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.

Méthodologie du test 1.6.3

1. Retrouver dans le document les éléments <embed> pourvus de l’attribut type="image/…", porteurs d’information qui nécessitent une description détaillée.
2. Pour chaque élément <embed> pourvu de l’attribut type="image/…", vérifier qu’il existe :
   • soit une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
   • soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
3. Si c’est le cas pour chaque élément <embed> pourvu de l’attribut type="image/…", le test est validé.

Test 1.6.4 Chaque bouton de type image (balise <input> avec l’attribut type="image") porteur d’information, qui nécessite une description détaillée, vérifie-t-il une de ces conditions ?

• Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image.
• Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
• Il existe un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée.

Méthodologie du test 1.6.4

1. Retrouver dans le document les éléments <input> pourvus de l’attribut type="image", porteurs d’information qui nécessitent une description détaillée.
2. Pour chaque élément <input> pourvu de l’attribut type="image", vérifier qu’il existe :
   • soit une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
   • soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée ;
   • soit un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée.
3. Si c’est le cas pour chaque élément <input> pourvu de l’attribut type="image", le test est validé.

Test 1.6.5 Chaque image vectorielle (balise <svg>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?

• Il existe un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente.
• Il existe un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée.
• Il existe un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée.
• Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.

Méthodologie du test 1.6.5

1. Retrouver dans le document les éléments <svg> porteurs d’information qui nécessitent une description détaillée.
2. Pour chaque élément <svg>, vérifier qu’il existe :
   • soit un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente ;
   • soit un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ;
   • soit un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée ;
   • soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
3. Si c’est le cas pour chaque élément <svg>, le test est validé.

Test 1.6.6 Pour chaque image vectorielle (balise <svg>) porteuse d’information, ayant une description détaillée, la référence éventuelle à la description détaillée dans l’attribut WAI-ARIA aria-label et la description détaillée associée par l’attribut WAI-ARIA aria-labelledby ou aria-describedby sont-elles correctement restituées par les technologies d’assistance ?

Méthodologie du test 1.6.6

1. Retrouver dans le document les éléments <svg> porteurs d’information dont la description détaillée est fournie au moyen d’un attribut aria-label, aria-labelledby ou aria-describedby.
2. Pour chaque élément <svg>, vérifier que le contenu de la description détaillée est correctement restitué par les technologies d’assistance.
3. Si c’est le cas pour chaque élément <svg>, le test est validé.

Test 1.6.7 Chaque image bitmap (balise <canvas>), porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?

• Il existe un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente.
• Il existe un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée.
• Il existe un contenu textuel entre <canvas> et </canvas> faisant référence à une description détaillée adjacente à l’image bitmap.
• Il existe un contenu textuel entre <canvas> et </canvas> faisant office de description détaillée.
• Il existe un lien ou bouton adjacent permettant d’accéder à la description détaillée.

Méthodologie du test 1.6.7

1. Retrouver dans le document les éléments <canvas> porteurs d’information qui nécessitent une description détaillée.
2. Pour chaque élément <canvas>, vérifier qu’il existe :
   • soit un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente ;
   • soit un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ;
   • soit un contenu textuel entre <canvas> et </canvas> faisant référence à une description détaillée adjacente à l’image bitmap ;
   • soit un contenu textuel entre <canvas> et </canvas> faisant office de description détaillée ;
   • soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
3. Si c’est le cas pour chaque élément <canvas>, le test est validé.

Test 1.6.8 Pour chaque image bitmap (balise <canvas>) porteuse d’information, qui implémente une référence à une description détaillée adjacente, cette référence est-elle correctement restituée par les technologies d’assistance ?

Méthodologie du test 1.6.8

1. Retrouver dans le document les éléments <canvas> porteurs d’information dont la description détaillée est fournie au moyen d’un attribut aria-label, aria-labelledby ou aria-describedby.
2. Pour chaque élément <canvas>, vérifier que le contenu de la description détaillée est correctement restitué par les technologies d’assistance.
3. Si c’est le cas pour chaque élément <canvas>, le test est validé.

Test 1.6.9 Pour chaque image (balise <img>, <input> avec l’attribut type="image", <area>, <object>, <embed>, <svg>, <canvas>, ou possédant un attribut WAI-ARIA role="img") porteuse d’information, qui est accompagnée d’une description détaillée et qui utilise un attribut WAI-ARIA aria-describedby, l’attribut WAI-ARIA aria-describedby associe-t-il la description détaillée ?

Méthodologie du test 1.6.9

1. Retrouver dans le document les images (éléments <img>, <input> avec l’attribut type="image", <area>, <object>, <embed>, <svg>, <canvas> ou possédant un attribut WAI-ARIA role="img") porteuses d’information dont la description détaillée utilise un attribut WAI-ARIA aria-describedby.
2. Pour chaque image, vérifier que le contenu de la description détaillée est correctement restitué par les technologies d’assistance.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.6.10 Chaque balise possédant un attribut WAI-ARIA role="img" porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?

• Il existe un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente.
• Il existe un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée.
• Il existe un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée.
• Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.

Méthodologie du test 1.6.10

1. Retrouver dans le document les éléments pourvus d’un attribut WAI-ARIA role="img" porteurs d’information qui nécessitent une description détaillée.
2. Pour chaque élément role="img", vérifier qu’il existe :
   • soit un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente ;
   • soit un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ;
   • soit un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée ;
   • soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
3. Si c’est le cas pour chaque élément role="img", le test est validé.

Notes techniques

Dans le cas du SVG, le manque de support de l’élément <title> et <desc> par les technologies d’assistance crée une difficulté dans le cas de l’implémentation de l’alternative textuelle de l’image et de sa description détaillée. Dans ce cas, il est recommandé d’utiliser l’attribut WAI-ARIA aria-label pour implémenter à la fois l’alternative textuelle courte et la référence à la description détaillée adjacente ou l’attribut WAI-ARIA aria-labelledby pour associer les passages de texte faisant office d’alternative courte et de description détaillée.

L’utilisation de l’attribut WAI-ARIA aria-describedby n’est pas recommandée pour lier une image (<img>, <object>, <embed>, <canvas>) à sa description détaillée, par manque de support des technologies d’assistance. Néanmoins, lorsqu’il est utilisé, l’attribut devra nécessairement faire référence à l’id de la zone contenant la description détaillée.

La description détaillée adjacente peut être implémentée via une balise <figcaption>, dans ce cas le critère 1.9 doit être vérifié (utilisation de <figure> et des attributs WAI-ARIA role="figure" et aria-label, notamment).

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA6, G92, G74, G73.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content.

Test 1.7.1 Chaque image (balise <img>) porteuse d’information, ayant une description détaillée, vérifie-t-elle ces conditions ?

• La description détaillée dans la page et signalée par l’alternative textuelle est pertinente.
• La description détaillée via un lien ou un bouton adjacent est pertinente.
• Le passage de texte associé via l’attribut WAI-ARIA aria-describedby est pertinent.

Méthodologie du test 1.7.1

1. Retrouver dans le document les images structurées au moyen d’un élément <img> qui possèdent une description détaillée.
2. Pour chaque image, vérifier que la description détaillée est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.7.2 Chaque bouton de type image (balise <input> avec l’attribut type="image") porteur d’information, ayant une description détaillée, vérifie-t-il ces conditions ?

• La description détaillée dans la page et signalée par l’alternative textuelle est pertinente.
• La description détaillée via un lien ou un bouton adjacent est pertinente.
• Le passage de texte associé via l’attribut WAI-ARIA aria-describedby est pertinent.

Méthodologie du test 1.7.2

1. Retrouver dans le document les éléments <input> pourvus de l’attribut type="image" qui possèdent une description détaillée.
2. Pour chaque élément <input> pourvu de l’attribut type="image", vérifier que la description détaillée est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

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

• La description détaillée dans la page et signalée par l’alternative textuelle est pertinente.
• La description détaillée adjacente à l’image objet est pertinente.
• La description détaillée via un lien ou un bouton adjacent est pertinente.
• Le passage de texte associé via l’attribut WAI-ARIA aria-describedby est pertinent.

Méthodologie du test 1.7.3

1. Retrouver dans le document les éléments <object> pourvus de l’attribut type="image/…" qui possèdent une description détaillée.
2. Pour chaque élément <object> pourvu de l’attribut type="image/…", vérifier que la description détaillée est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

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

• La description détaillée dans la page et signalée par l’alternative textuelle est pertinente.
• La description détaillée adjacente à l’image embarquée est pertinente.
• La description détaillée via un lien ou un bouton adjacent est pertinente.
• Le passage de texte associé via l’attribut WAI-ARIA aria-describedby est pertinent.

Méthodologie du test 1.7.4

1. Retrouver dans le document les éléments <embed> pourvus de l’attribut type="image/…" qui possèdent une description détaillée.
2. Pour chaque élément <embed> pourvu de l’attribut type="image/…", vérifier que la description détaillée est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.7.5 Chaque image vectorielle (balise <svg>) porteuse d’information, ayant une description détaillée, vérifie-t-elle ces conditions ?

• La description détaillée dans la page et signalée par l’alternative textuelle est pertinente.
• La description détaillée dans la page et signalée par le texte contenu dans la balise <desc> ou <title> est pertinente.
• La description détaillée adjacente contenue dans la balise <desc> est pertinente.
• La description détaillée via un lien ou un bouton adjacent est pertinente.
• Le passage de texte associé via l’attribut WAI-ARIA aria-describedby est pertinent.

Méthodologie du test 1.7.5

1. Retrouver dans le document les éléments <svg> qui possèdent une description détaillée.
2. Pour chaque élément <svg>, vérifier que la description détaillée est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Test 1.7.6 Chaque image bitmap (balise <canvas>) porteuse d’information, ayant une description détaillée, vérifie-t-elle ces conditions ?

• La description détaillée dans la page et signalée par l’alternative textuelle est pertinente.
• La description détaillée dans la page et signalée par le texte contenu entre <canvas> et </canvas> est pertinente.
• La description détaillée contenue entre <canvas> et </canvas> est pertinente.
• La description détaillée adjacente à l’image bitmap est pertinente.
• La description détaillée via un lien ou un bouton adjacent est pertinente.
• Le passage de texte associé via l’attribut WAI-ARIA aria-describedby est pertinent.

Méthodologie du test 1.7.6

1. Retrouver dans le document les éléments <canvas> qui possèdent une description détaillée.
2. Pour chaque élément <canvas>, vérifier que la description détaillée est pertinente.
3. Si c’est le cas pour chaque image, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F67, G92.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content.

Test 2.1.1 Chaque cadre (balise <iframe> ou <frame>) a-t-il un attribut title ?

Méthodologie du test 2.1.1

1. Retrouver dans le document les cadres (élément <iframe> ou <frame>).
2. Pour chaque cadre, vérifier qu’il possède un attribut title .
3. Si c’est le cas pour chaque cadre, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 4.1.2 Nom, rôle et valeur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : H64.
• EN 301 549 V3.2.1 (2021-03) : 9.4.1.2 Name, role, value.

Correspondances tests automatisés

• Règle Axe: frame-title - "Frames must have an accessible name"

Test 3.1.1 Pour chaque mot ou ensemble de mots dont la mise en couleur est porteuse d’information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

Méthodologie du test 3.1.1

1. Retrouver dans le document les informations données par la couleur dans un mot ou un ensemble de mots.
2. Pour chacune de ces informations, vérifier qu’il existe un autre moyen de récupérer cette information (présence d’un attribut title, d’une icône ou d’un effet graphique de forme ou de position, un effet typographique…).
3. Si c’est le cas pour chaque information, le test est validé.

Test 3.1.2 Pour chaque indication de couleur donnée par un texte, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

Méthodologie du test 3.1.2

1. Retrouver dans le document les informations données par la couleur dans un texte.
2. Pour chacune de ces informations, vérifier qu’il existe un autre moyen de récupérer cette information (présence d’un attribut title, d’une icône ou d’un effet graphique de forme ou de position, un effet typographique…).
3. Si c’est le cas pour chaque information, le test est validé.

Test 3.1.3 Pour chaque image véhiculant une information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

Méthodologie du test 3.1.3

1. Retrouver dans le document les informations données par la couleur dans une image.
2. Pour chacune de ces informations, vérifier qu’il existe un autre moyen de récupérer cette information (présence d’un attribut title, d’une icône ou d’un effet graphique de forme ou de position, un effet typographique…).
3. Si c’est le cas pour chaque information, le test est validé.

Test 3.1.4 Pour chaque propriété CSS déterminant une couleur et véhiculant une information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

Méthodologie du test 3.1.4

1. Retrouver dans le document les informations données par la couleur dans une propriété CSS.
2. Pour chacune de ces informations, vérifier qu’il existe un autre moyen de récupérer cette information (présence d’un attribut title, d’une icône ou d’un effet graphique de forme ou de position, un effet typographique…).
3. Si c’est le cas pour chaque information, le test est validé.

Test 3.1.5 Pour chaque média temporel véhiculant une information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

Méthodologie du test 3.1.5

1. Retrouver dans le document les informations données par la couleur dans un média temporel.
2. Pour chacune de ces informations, vérifier qu’il existe un autre moyen de récupérer cette information (présence d’un attribut title, d’une icône ou d’un effet graphique de forme ou de position, un effet typographique…).
3. Si c’est le cas pour chaque information, le test est validé.

Test 3.1.6 Pour chaque média non temporel véhiculant une information, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

Méthodologie du test 3.1.6

1. Retrouver dans le document les informations données par la couleur dans un média non temporel.
2. Pour chacune de ces informations, vérifier qu’il existe un autre moyen de récupérer cette information (présence d’un attribut title, d’une icône ou d’un effet graphique de forme ou de position, un effet typographique…).
3. Si c’est le cas pour chaque information, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A), 1.4.1 Utilisation de la couleur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F13, G14, G182, G111, G117, G138, G205.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships, 9.1.4.1 Use of colour.

Test 3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions (hors cas particuliers) ?

• Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins.
• Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.

Méthodologie du test 3.2.1

1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste.
2. Pour chacun de ces textes, vérifier que :
   • soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
   • soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.
3. Si c’est le cas pour chaque texte, le test est validé.

Test 3.2.2 Dans chaque page web, le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?

• Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins.
• Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.

Méthodologie du test 3.2.2

1. Retrouver dans le document les textes et les textes en image en gras d’une taille restituée inférieure à 18,5px qui pourraient poser des problèmes de contraste.
2. Pour chacun de ces textes, vérifier que :
   • soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
   • soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.
3. Si c’est le cas pour chaque texte, le test est validé.

Test 3.2.3 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px vérifient-ils une de ces conditions (hors cas particuliers) ?

• Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins.
• Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.

Méthodologie du test 3.2.3

1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px qui pourraient poser des problèmes de contraste.
2. Pour chacun de ces textes, vérifier que :
   • soit le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ;
   • soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.
3. Si c’est le cas pour chaque texte, le test est validé.

Test 3.2.4 Dans chaque page web, le texte et le texte en image en gras d’une taille restituée supérieure ou égale à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?

• Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins.
• Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.

Méthodologie du test 3.2.4

1. Retrouver dans le document les textes et les textes en image en gras d’une taille restituée supérieure ou égale à 18,5px qui pourraient poser des problèmes de contraste.
2. Pour chacun de ces textes, vérifier que :
   • soit le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ;
   • soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.
3. Si c’est le cas pour chaque texte, le test est validé.

Test 3.2.5 Dans le mécanisme qui permet d’afficher un rapport de contraste conforme, le rapport de contraste entre le texte et la couleur d’arrière-plan est-il suffisamment élevé ?

Méthodologie du test 3.2.5

1. Retrouver dans le document les mécanismes qui permettent d’afficher un rapport de contraste conforme.
2. Pour chacun de ces mécanismes, vérifier que le rapport de contraste entre le texte et la couleur d’arrière-plan est suffisamment élevé.
3. Si c’est le cas pour chaque mécanisme, le test est validé.

Cas particuliers

Dans ces situations, les critères sont non applicables pour ces éléments :

• Le texte fait partie d’un logo ou d’un nom de marque d’un organisme ou d’une société ;
• Le texte ou l’image de texte est purement décoratif ;
• Le texte fait partie d’une image véhiculant une information mais le texte lui-même n’apporte aucune information essentielle ;
• Le texte ou l’image de texte fait partie d’un élément d’interface sur lequel aucune action n’est possible (par exemple un bouton avec l’attribut disabled).

Correspondances

• Critères de succès WCAG 2.1 : 1.4.3 Contraste (minimum) (AA).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : C29, F83, G18, G136, G148, G174, G145.
• EN 301 549 V3.2.1 (2021-03) : 5.2 Activation of accessibility features, 9.1.4.3 Contrast (minimum).

Correspondances tests automatisés

• Règle Axe: color-contrast - "Elements must have sufficient color contrast"

Test 4.1.1 Chaque média temporel pré-enregistré seulement audio, vérifie-t-il, si nécessaire, l’une de ces conditions (hors cas particuliers) ?

• Il existe une transcription textuelle accessible via un lien ou bouton adjacent.
• Il existe une transcription textuelle adjacente clairement identifiable.

Méthodologie du test 4.1.1

1. Retrouver dans le document les médias temporels (éléments <audio>, <video> ou <object>) seulement audio qui nécessitent une transcription textuelle.
2. Pour chaque média temporel seulement audio, vérifier la présence d’une transcription textuelle :
   • soit accessible au moyen d’un bouton ou d’un lien adjacent (une URL ou une ancre) ;
   • soit adjacente clairement identifiable.
3. Si c’est le cas pour chaque média temporel, le test est validé.

Test 4.1.2 Chaque média temporel pré-enregistré seulement vidéo vérifie-t-il, si nécessaire, l’une de ces conditions (hors cas particuliers) ?

• Il existe une version alternative « audio seulement » accessible via un lien ou bouton adjacent.
• Il existe une version alternative « audio seulement » adjacente clairement identifiable.
• Il existe une transcription textuelle accessible via un lien ou bouton adjacent.
• Il existe une transcription textuelle adjacente clairement identifiable.
• Il existe une audiodescription synchronisée.
• Il existe une version alternative avec une audiodescription synchronisée accessible via un lien ou bouton adjacent.

Méthodologie du test 4.1.2

1. Retrouver dans le document les médias temporels (éléments <video> ou <object>) seulement vidéo qui nécessitent une transcription textuelle.
2. Pour chaque média temporel seulement vidéo, vérifier la présence :
   • soit d’une version alternative audio seulement accessible au moyen d’un lien ou bouton adjacent (une URL ou une ancre) ;
   • soit d’une version alternative audio seulement adjacente ;
   • soit d’une transcription textuelle accessible au moyen d’un bouton ou d’un lien adjacent (une URL ou une ancre) ;
   • soit d’une transcription textuelle adjacente clairement identifiable ;
   • soit d’une audiodescription synchronisée ;
   • soit d’une version alternative avec une audiodescription synchronisée accessible au moyen d’un bouton ou d’un lien adjacent (une URL ou une ancre).
3. Si c’est le cas pour chaque média temporel, le test est validé.

Test 4.1.3 Chaque média temporel synchronisé pré-enregistré vérifie-t-il, si nécessaire, une de ces conditions (hors cas particuliers) ?

• Il existe une transcription textuelle accessible via un lien ou bouton adjacent.
• Il existe une transcription textuelle adjacente clairement identifiable.
• Il existe une audiodescription synchronisée.
• Il existe une version alternative avec une audiodescription synchronisée accessible via un lien ou bouton adjacent.

Méthodologie du test 4.1.3

1. Retrouver dans le document les médias temporels (éléments <video> ou <object>) synchronisés qui nécessitent une transcription textuelle.
2. Pour chaque média temporel synchronisé, vérifier la présence :
   • soit d’une transcription textuelle accessible au moyen d’un lien ou bouton adjacent (une URL ou une ancre) ;
   • soit d’une transcription textuelle adjacente clairement identifiable ;
   • soit d’une audiodescription synchronisée ;
   • soit d’une version alternative avec une audiodescription synchronisée accessible au moyen d’un bouton ou d’un lien adjacent (une URL ou une ancre) ;
3. Si c’est le cas pour chaque média temporel, le test est validé.

Cas particuliers

Il existe une gestion de cas particulier lorsque :

• Le média temporel est utilisé à des fins décoratives (c’est-à-dire qu’il n’apporte aucune information) ;
• Le média temporel est lui-même une alternative à un contenu de la page (une vidéo en langue des signes ou la vocalisation d’un texte, par exemple) ;
• Le média temporel est utilisé pour accéder à une version agrandie ;
• Le média temporel est utilisé comme un CAPTCHA ;
• Le média temporel fait partie d’un test qui deviendrait inutile si la transcription textuelle, les sous-titres synchronisés ou l’audiodescription étaient communiqués ;
• Le média temporel a été publié avant le 23 septembre 2020 (d’après la loi du 28 mai 2019).

Dans ces situations, le critère est non applicable.

Ce cas particulier s’applique également aux critères 4.2, 4.3, 4.5.

Correspondances

• Critères de succès WCAG 2.1 : 1.2.1 Contenus seulement audio et seulement vidéo (pré-enregistrés) (A), 1.2.3 Audio-description ou version de remplacement pour un média temporel (pré-enregistré) (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : G8, G58, G69, G78, G158, G159, G166, G173, H96, SM6, SM7.
• EN 301 549 V3.2.1 (2021-03) : 9.1.2.1 Audio-only and video-only (pre-recorded), 9.1.2.3 Audio description or media alternative (pre-recorded).

Test 4.2.1 Pour chaque média temporel pré-enregistré seulement audio, ayant une transcription textuelle, celle-ci est-elle pertinente (hors cas particuliers) ?

Méthodologie du test 4.2.1

1. Retrouver dans le document les médias temporels pré-enregistrés seulement audio qui possèdent une transcription textuelle.
2. Pour chaque média temporel seulement audio, vérifier que transcription textuelle est pertinente.
3. Si c’est le cas pour chaque média temporel, le test est validé.

Test 4.2.2 Chaque média temporel pré-enregistré seulement vidéo vérifie-t-il une de ces conditions (hors cas particuliers) ?

• La transcription textuelle est pertinente.
• L’audiodescription synchronisée est pertinente.
• L’audiodescription synchronisée de la version alternative est pertinente.
• La version alternative audio seulement est pertinente.

Méthodologie du test 4.2.2

1. Retrouver dans le document les médias temporels pré-enregistrés seulement vidéo qui possèdent une transcription textuelle.
2. Pour chaque média temporel seulement vidéo, vérifier la pertinence :
   • soit de la transcription textuelle ;
   • soit de l’audiodescription synchronisée ;
   • soit de l’audiodescription synchronisée de la version alternative ;
   • soit de la version alternative audio seulement.
3. Si c’est le cas pour chaque média temporel, le test est validé.

Test 4.2.3 Chaque média temporel synchronisé pré-enregistré vérifie-t-il une de ces conditions (hors cas particuliers) ?

• La transcription textuelle est pertinente.
• L’audiodescription synchronisée est pertinente.
• L’audiodescription synchronisée de la version alternative est pertinente.

Méthodologie du test 4.2.3

1. Retrouver dans le document les médias temporels pré-enregistrés synchronisés.
2. Pour chaque média temporel synchronisé, vérifier la pertinence :
   • soit de la transcription textuelle ;
   • soit de l’audiodescription synchronisée ;
   • soit de l’audiodescription synchronisée de la version alternative.
3. Si c’est le cas pour chaque média temporel, le test est validé.

Cas particuliers

Voir cas particuliers critère 4.1.

Correspondances

• Critères de succès WCAG 2.1 : 1.2.1 Contenus seulement audio et seulement vidéo (pré-enregistrés) (A), 1.2.3 Audio-description ou version de remplacement pour un média temporel (pré-enregistré) (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F30, F67, SM6, SM7.
• EN 301 549 V3.2.1 (2021-03) : 7.2.2 Audio description synchronization, 9.1.2.1 Audio-only and video-only (pre-recorded), 9.1.2.3 Audio description or media alternative (pre-recorded).

Test 4.3.1 Chaque média temporel synchronisé pré-enregistré vérifie-t-il, si nécessaire, l’une de ces conditions (hors cas particuliers) ?

• Le média temporel synchronisé possède des sous-titres synchronisés.
• Il existe une version alternative possédant des sous-titres synchronisés accessible via un lien ou bouton adjacent.

Méthodologie du test 4.3.1

1. Retrouver dans le document les médias temporels pré-enregistrés synchronisés.
2. Pour chaque média temporel synchronisé, vérifier la présence :
   • soit de sous-titres synchronisés ;
   • soit d’une version alternative possédant des sous-titres synchronisés accessible au moyen d’un lien ou d’un bouton adjacent.
3. Si c’est le cas pour chaque média temporel, le test est validé.

Test 4.3.2 Pour chaque média temporel synchronisé pré-enregistré possédant des sous-titres synchronisés diffusés via une balise <track>, la balise <track> possède-t-elle un attribut kind="captions" ?

Méthodologie du test 4.3.2

1. Retrouver dans le document les médias temporels synchronisés possédant des sous-titres synchronisés au moyen d’un élément <track>.
2. Pour chaque média temporel synchronisé, vérifier que la balise <track> possède un attribut kind="captions".
3. Si c’est le cas pour chaque média temporel synchronisé, le test est validé.

Cas particuliers

Voir cas particuliers critère 4.1.

Correspondances

• Critères de succès WCAG 2.1 : 1.2.2 Sous-titres (pré-enregistrés) (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F74, F75, G58, G87, G93, H95, SM11, SM12.
• EN 301 549 V3.2.1 (2021-03) : 9.1.2.2 Captions (pre-recorded).

Correspondances tests automatisés

• Règle Axe: video-caption - "<video> elements must have captions"

Test 4.4.1 Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, une piste de sous-titres au moins respecte-t-elle ces conditions ?

• Les sous-titres sont dans la langue de la vidéo ;
• Les sous-titres sont pertinents ;
• Les sous-titres sont correctement synchronisés.

Méthodologie du test 4.4.1

1. Retrouver dans le document les médias temporels synchronisés possédant des sous-titres synchronisés.
2. Pour chaque média temporel synchronisé, vérifier que les sous-titres sont :
   • dans la langue de la vidéo (si le contenu oralisé est en anglais, les sous-titres doivent être en anglais) ;
   • pertinents (toutes les informations sonores importantes sont présentes, les dialogues notamment) ;
   • correctement synchronisés. Si vous n’observez pas de décalage entre le discours oralisé et l’apparition des sous-titres, les sous-titres sont correctement synchronisés. La norme de référence spécifie que les sous-titres doivent apparaître dans les 100 ms suivant l’horodatage du sous-titre.
3. Si c’est le cas pour chaque média temporel synchronisé, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.2.2 Sous-titres (pré-enregistrés) (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F8, F74, F75, G87, G93, SM11, SM12.
• EN 301 549 V3.2.1 (2021-03) : 7.1.2 Captioning synchronization, 9.1.2.2 Captions (pre-recorded).

Test 4.8.1 Chaque média non temporel vérifie-t-il, si nécessaire, une de ces conditions (hors cas particuliers) ?

• Un lien ou un bouton adjacent, clairement identifiable, permet d’accéder à une page contenant une alternative.
• Un lien ou un bouton adjacent, clairement identifiable, permet d’accéder à une alternative dans la page.

Méthodologie du test 4.8.1

1. Retrouver dans le document les médias non temporels.
2. Pour chaque média non temporel, vérifier qu’un lien ou un bouton adjacent, clairement identifiable :
   • soit contient l’adresse (url) d’une page contenant une alternative ;
   • soit permet d’accéder à une alternative dans la page.
3. Si c’est le cas pour chaque média non temporel, le test est validé.

Test 4.8.2 Chaque média non temporel associé à une alternative vérifie-t-il une de ces conditions (hors cas particuliers) ?

• La page référencée par le lien ou bouton adjacent est accessible.
• L’alternative dans la page, référencée par le lien ou bouton adjacent, est accessible.

Méthodologie du test 4.8.2

1. Retrouver dans le document les médias non temporels associés à une alternative.
2. Pour chaque média non temporel, vérifier que :
   • la page référencée par le lien ou le bouton adjacent est accessible ;
   • l’alternative dans la page, référencée par le lien ou le bouton adjacent, est accessible.
3. Si c’est le cas pour chaque média non temporel, le test est validé.

Cas particuliers

Il existe une gestion de cas particulier lorsque :

• Le média non temporel est utilisé à des fins décoratives (c’est-à-dire qu’il n’apporte aucune information) ;
• Le média non temporel est diffusé dans un environnement maîtrisé ;
• Le média non temporel est inséré via JavaScript en vérifiant la présence et la version du plug-in, en remplacement d’un contenu alternatif déjà présent.

Dans ces situations, le critère est non applicable.

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : H46.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content.

Test 4.9.1 Pour chaque média non temporel ayant une alternative, cette alternative permet-elle d’accéder au même contenu et à des fonctionnalités similaires ?

Méthodologie du test 4.9.1

1. Retrouver dans le document les médias non temporels associés à une alternative.
2. Pour chaque média non temporel, vérifier que l’alternative est pertinente (elle permet d’accéder au même contenu et à des fonctionnalités similaires).
3. Si c’est le cas pour chaque média non temporel, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F30, H46.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content.

Test 4.10.1 Chaque séquence sonore déclenchée automatiquement via une balise <object>, <video>, <audio>, <embed>, <bgsound> ou un code JavaScript vérifie-t-elle une de ces conditions ?

• La séquence sonore a une durée inférieure ou égale à 3 secondes.
• La séquence sonore peut être stoppée sur action de l’utilisateur.
• Le volume de la séquence sonore peut être contrôlé par l’utilisateur indépendamment du contrôle de volume du système.

Méthodologie du test 4.10.1

1. Au chargement du document, si un son se déclenche automatiquement, vérifier que :
   • soit la séquence sonore a une durée inférieure ou égale à 3 secondes ;
   • soit un dispositif (un bouton par exemple), sur l’élément ayant déclenché le son (voir note), ou dans la page, permet de le stopper ;
   • soit le volume de la séquence peut être contrôlé par l’utilisateur, indépendamment du contrôle de volume du système.
2. Si c’est le cas, le test est validé.

Note : les éléments suivants sont susceptibles de déclencher des sons au chargement de la page : éléments <audio>, <video>, <object>, <embed>, <bgsound> ou un code JavaScript (utilisation de la Web Audio API, par exemple).

Note

Ce critère est soumis au principe de non-interférence.

Correspondances

• Critères de succès WCAG 2.1 : 1.4.2 Contrôle du son (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F23, F93, G60, G170, G171.
• EN 301 549 V3.2.1 (2021-03) : 9.1.4.2 Audio control.

Test 4.11.1 Chaque média temporel a-t-il, si nécessaire, les fonctionnalités de contrôle de sa consultation ?

Méthodologie du test 4.11.1

1. Retrouver dans le document les médias temporels.
2. Pour chaque média temporel, vérifier la présence des fonctionnalités obligatoires de contrôle de la consultation :
   • au minimum : lecture, pause ou stop ;
   • si le média a du son, il doit avoir une fonctionnalité d’activation / désactivation du son ;
   • si le média a des sous-titres, il doit avoir une fonctionnalité de contrôle de l’apparition/disparition des sous-titres ;
   • si le média a une audiodescription, il doit avoir une fonctionnalité de contrôle de l’apparition/disparition de l’audiodescription.
3. Si c’est le cas pour chaque média temporel, le test est validé.

Test 4.11.2 Pour chaque média temporel, chaque fonctionnalité vérifie-t-elle une de ces conditions ?

• La fonctionnalité est accessible par le clavier et tout dispositif de pointage.
• Une fonctionnalité accessible par le clavier et tout dispositif de pointage permettant de réaliser la même action est présente dans la page.

Méthodologie du test 4.11.2

1. Retrouver dans le document les médias temporels pourvus de fonctionnalités de contrôle.
2. Pour chaque média temporel, vérifier que :
   • soit la fonctionnalité est accessible par le clavier et tout dispositif de pointage ;
   • soit une fonctionnalité accessible par le clavier et tout dispositif de pointage permettant de réaliser la même action est présente dans la page.
3. Si c’est le cas pour chaque média temporel, le test est validé.

Test 4.11.3 Pour chaque média temporel, chaque fonctionnalité vérifie-t-elle une de ces conditions ?

• La fonctionnalité est activable par le clavier et tout dispositif de pointage.
• Une fonctionnalité activable par le clavier et tout dispositif de pointage permettant de réaliser la même action est présente dans la page.

Méthodologie du test 4.11.3

1. Retrouver dans le document les médias temporels pourvus de fonctionnalités de contrôle.
2. Pour chaque média temporel, vérifier que :
   • soit la fonctionnalité est activable par le clavier et tout dispositif de pointage ;
   • soit une fonctionnalité activable par le clavier et tout dispositif de pointage permettant de réaliser la même action est présente dans la page.
3. Si c’est le cas pour chaque média temporel, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 2.1.1 Clavier (A), 2.1.2 Pas de piège au clavier (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : G4, G90, G202.
• EN 301 549 V3.2.1 (2021-03) : 7.1.1 Captioning playback, 7.2.1 Audio description playback, 9.2.1.1 Keyboard, 9.2.1.2 No keyboard trap.

Test 5.6.1 Pour chaque tableau de données, chaque en-tête de colonne s’appliquant à la totalité de la colonne vérifie-t-il une de ces conditions ?

• L’en-tête de colonnes est structuré au moyen d’une balise <th>.
• L’en-tête de colonnes est structuré au moyen d’une balise pourvue d’un attribut WAI-ARIA role="columnheader".

Méthodologie du test 5.6.1

1. Retrouver dans le document les tableaux de données.
2. Pour chaque en-tête de colonnes s’appliquant à la totalité de la colonne, vérifier que l’en-tête de colonne est structuré au moyen :
   • soit d’un élément <th> ;
   • soit d’un élément pourvu d’un attribut WAI-ARIA role="columnheader".
3. Si c’est le cas pour chaque en-tête de colonne s’appliquant à la totalité de la colonne, le test est validé.

Test 5.6.2 Pour chaque tableau de données, chaque en-tête de ligne s’appliquant à la totalité de la ligne vérifie-t-il une de ces conditions ?

• L’en-tête de lignes est structuré au moyen d’une balise <th>.
• L’en-tête de lignes est structuré au moyen d’une balise pourvue d’un attribut WAI-ARIA role="rowheader".

Méthodologie du test 5.6.2

1. Retrouver dans le document les tableaux de données.
2. Pour chaque en-tête de ligne s’appliquant à la totalité de la ligne, vérifier que l’en-tête de ligne est structuré au moyen :
   • soit d’un élément <th> ;
   • soit d’un élément pourvu d’un attribut WAI-ARIA role="rowheader".
3. Si c’est le cas pour chaque en-tête de ligne s’appliquant à la totalité de la ligne, le test est validé.

Test 5.6.3 Pour chaque tableau de données, chaque en-tête ne s’appliquant pas à la totalité de la ligne ou de la colonne est-il structuré au moyen d’une balise <th> ?

Méthodologie du test 5.6.3

1. Retrouver dans le document les tableaux de données.
2. Pour chaque en-tête ne s’appliquant pas à la totalité de la ligne ou de la colonne, vérifier que l’en-tête de ligne est structuré au moyen d’un élément <th>.
3. Si c’est le cas pour chaque en-tête ne s’appliquant pas à la totalité de la ligne ou de la colonne, le test est validé.

Test 5.6.4 Pour chaque tableau de données, chaque cellule associée à plusieurs en-têtes est-elle structurée au moyen d’une balise <td> ou <th> ?

Méthodologie du test 5.6.4

1. Retrouver dans le document les tableaux de données.
2. Pour chaque cellule associée à plusieurs en-têtes est-elle structurée au moyen d’une balise <th> ou <td>.
3. Si c’est le cas pour chaque en-tête ne s’appliquant pas à la totalité de la ligne ou de la colonne, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F91, H51.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships.

Test 5.7.1 Pour chaque contenu de balise <th> s’appliquant à la totalité de la ligne ou de la colonne, la balise <th> respecte-t-elle une de ces conditions (hors cas particuliers) ?

• La balise <th> possède un attribut id unique.
• La balise <th> possède un attribut scope.
• La balise <th> possède un attribut WAI-ARIA role="rowheader" ou role="columnheader".

Méthodologie du test 5.7.1

1. Retrouver dans le document les tableaux de données.
2. Pour chaque en-tête (élément <th>) s’appliquant à la totalité de la ligne ou de la colonne, vérifier que l’élément <th> possède :
   • soit un attribut id unique ;
   • soit un attribut scope ;
   • soit un attribut WAI-ARIA role="rowheader" ou "columnheader".
3. Si c’est le cas pour chaque en-tête s’appliquant à la totalité de la ligne ou de la colonne, le test est validé.

Test 5.7.2 Pour chaque contenu de balise <th> s’appliquant à la totalité de la ligne ou de la colonne et possédant un attribut scope, la balise <th> vérifie-t-elle une de ces conditions ?

• La balise <th> possède un attribut scope avec la valeur "row" pour les en-têtes de ligne.
• La balise <th> possède un attribut scope avec la valeur "col" pour les en-têtes de colonne.

Méthodologie du test 5.7.2

1. Retrouver dans le document les tableaux de données.
2. Pour chaque en-tête (élément <th>) s’appliquant à la totalité de la ligne ou de la colonne et pourvu d’un attribut scope, vérifier que l’attribut scope possède :
   • soit une valeur "row" pour les en-têtes de ligne ;
   • soit une valeur "col" pour les en-têtes de colonne.
3. Si c’est le cas pour chaque en-tête s’appliquant à la totalité de la ligne ou de la colonne et pourvu d’un attribut scope, le test est validé.

Test 5.7.3 Pour chaque contenu de balise <th> ne s’appliquant pas à la totalité de la ligne ou de la colonne, la balise <th> vérifie-t-elle ces conditions ?

• La balise <th> ne possède pas d’attribut scope.
• La balise <th> ne possède pas d’attribut WAI-ARIA role="rowheader" ou role="columnheader".
• La balise <th> possède un attribut id unique.

Méthodologie du test 5.7.3

1. Retrouver dans le document les tableaux de données.
2. Pour chaque en-tête (élément <th>) ne s’appliquant pas à la totalité de la ligne ou de la colonne, vérifier que l’élément <th> :
   • possède un attribut id unique ;
   • ne possède pas d’attribut scope  ;
   • ne possède pas d’attribut WAI-ARIA role="rowheader" ou "columnheader".
3. Si c’est le cas pour chaque en-tête ne s’appliquant pas à la totalité de la ligne ou de la colonne, le test est validé.

Test 5.7.4 Pour chaque contenu de balise <td> ou <th> associée à un ou plusieurs en-têtes possédant un attribut id, la balise vérifie-t-elle ces conditions ?

• La balise possède un attribut headers.
• L’attribut headers possède la liste des valeurs d’attribut id des en-têtes associés.

Méthodologie du test 5.7.4

1. Retrouver dans le document les tableaux de données.
2. Pour chaque élément <td> ou <th> associé à un ou plusieurs en-têtes possédant un attribut id, vérifier que :
   • l’élément <td> ou <th> possède un attribut headers ;
   • l’attribut headers possède la liste des valeurs d’attribut id des en-têtes associés.
3. Si c’est le cas pour chaque élément <td> ou <th> associé à un ou plusieurs en-têtes possédant un attribut id, le test est validé.

Test 5.7.5 Pour chaque balise pourvue d’un attribut WAI-ARIA role="rowheader" ou role="columnheader" dont le contenu s’applique à la totalité de la ligne ou de la colonne, la balise vérifie-t-elle une de ces conditions ?

• La balise possède un attribut WAI-ARIA role="rowheader" pour les en-têtes de ligne.
• La balise possède un attribut WAI-ARIA role="columnheader" pour les en-têtes de colonne.

Méthodologie du test 5.7.5

1. Retrouver dans le document les tableaux de données.
2. Pour chaque en-tête s’appliquant à la totalité de la ligne ou de la colonne et pourvu d’un attribut WAI-ARIA role="rowheader" ou "columnheader", vérifier que l’élément possède :
   • soit un attribut WAI-ARIA role="rowheader" pour les en-têtes de ligne ;
   • soit un attribut WAI-ARIA role="columnheader" pour les en-têtes de colonne.
3. Si c’est le cas pour chaque en-tête s’appliquant à la totalité de la ligne ou de la colonne et pourvu d’un attribut WAI-ARIA role="rowheader" ou "columnheader", le test est validé.

Cas particuliers

Dans le cas de tableaux de données ayant des en-têtes sur une seule ligne ou une seule colonne, les en-têtes peuvent être structurés à l’aide de balise <th> sans attribut scope.

Notes techniques

Si l’attribut headers est implémenté sur une cellule déjà reliée à un en-tête (de ligne ou de colonne) avec l’attribut scope (avec la valeur col ou row), c’est l’en-tête ou les en-têtes référencés par l’attribut headers qui seront restitués aux technologies d’assistance. Les en-têtes reliés avec l’attribut scope seront ignorés.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F90, H43, H63.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships.

Correspondances tests automatisés

• Règle Axe: td-headers-attr - "All cells in a table element that use the headers attribute must only refer to other cells of that same table"
• Règle Axe: th-has-data-cells - "All th elements and elements with role=columnheader/rowheader must have data cells they describe"

Test 6.1.1 Chaque lien texte vérifie-t-il une de ces conditions (hors cas particuliers) ?

• L’intitulé de lien seul permet d’en comprendre la fonction et la destination.
• L’intitulé de lien additionné au contexte du lien permet d’en comprendre la fonction et la destination.

Méthodologie du test 6.1.1

1. Retrouver dans le document les liens texte.
2. Pour chaque lien texte, vérifier que ce qui permet d’en comprendre la fonction et la destination est :
   • soit l’intitulé du lien seul ;
   • soit le contexte du lien.
3. Si c’est le cas pour chaque lien texte, le test est validé.

Test 6.1.2 Chaque lien image vérifie-t-il une de ces conditions (hors cas particuliers) ?

• L’intitulé de lien seul permet d’en comprendre la fonction et la destination.
• L’intitulé de lien additionné au contexte du lien permet d’en comprendre la fonction et la destination.

Méthodologie du test 6.1.2

1. Retrouver dans le document les liens image (lien avec pour contenu un élément <img> ou un élément ayant l’attribut WAI-ARIA role="img", un élément <area> possédant un attribut href, un élément <object>, un élément <canvas> ou un élément <svg>).
2. Pour chaque lien image, vérifier que ce qui permet d’en comprendre la fonction et la destination est :
   • soit l’intitulé du lien seul, fourni par l’alternative textuelle de l’image ;
   • soit le contexte du lien.
3. Si c’est le cas pour chaque lien image, le test est validé.

Test 6.1.3 Chaque lien composite vérifie-t-il une de ces conditions (hors cas particuliers) ?

• L’intitulé de lien seul permet d’en comprendre la fonction et la destination.
• L’intitulé de lien additionné au contexte du lien permet d’en comprendre la fonction et la destination.

Méthodologie du test 6.1.3

1. Retrouver dans le document les liens composites (lien composé à la fois de contenu texte et d’éléments de type image).
2. Pour chaque lien composite, vérifier que ce qui permet d’en comprendre la fonction et la destination est :
   • soit l’intitulé du lien seul, fourni par la combinaison du contenu texte et de l’alternative textuelle de l’image ;
   • soit le contexte du lien.
3. Si c’est le cas pour chaque lien composite, le test est validé.

Test 6.1.4 Chaque lien SVG vérifie-t-il une de ces conditions (hors cas particuliers) ?

• L’intitulé de lien seul permet d’en comprendre la fonction et la destination.
• L’intitulé de lien additionné au contexte du lien permet d’en comprendre la fonction et la destination.

Méthodologie du test 6.1.4

1. Retrouver dans le document les liens SVG (élément <svg> qui possède un élément <a> pourvu d’un attribut xlink-href (SVG 1.1) ou href (SVG 2)).
2. Pour chaque lien SVG, vérifier que ce qui permet d’en comprendre la fonction et la destination est :
   • soit l’intitulé du lien seul, fourni par le nom accessible de l’élément <svg> (résolu généralement à partir du contenu d’un élément <text>) ;
   • soit le contexte du lien.
3. Si c’est le cas pour chaque lien SVG, le test est validé.

Test 6.1.5 Pour chaque lien ayant un intitulé visible, le nom accessible du lien contient-il au moins l’intitulé visible (hors cas particuliers) ?

Méthodologie du test 6.1.5

1. Retrouver dans le document les liens autres que SVG dont le contenu est fourni à la fois par un intitulé visible et par le contenu soit d’un attribut title ou d’un attribut aria-label ou d’un attribut aria-labelledby.
2. Pour chaque lien, vérifier que le contenu de l’attribut title ou de l’attribut aria-label ou de l’attribut aria-labelledby contient l’intitulé visible.
3. Si c’est le cas pour chaque lien, le test est validé pour les liens autres que SVG.
4. Retrouver dans le document les liens SVG dont le contenu est fourni à la fois par un intitulé visible et par le contenu soit d’un attribut aria-labelledby, ou d’un attribut aria-label ou d’un élément title (enfant direct de l’élément <svg>) ou d’un attribut x-link:title (SVG 1.1) ou d’un ou plusieurs éléments <text>.
5. Pour chaque lien SVG, vérifier que le contenu de l’attribut aria-labelledby ou de l’attribut aria-label ou de l’élément <title> ou de l’attribut x-link:title ou d’un ou plusieurs éléments <text> contient l’intitulé visible.
6. Si c’est le cas pour chaque lien SVG, le test est validé pour les liens SVG.
7. Si le test est validé à la fois pour les liens non SVG et pour les liens SVG, le test est globalement validé.

Cas particuliers

Il existe une gestion de cas particuliers pour les tests 6.1.1, 6.1.2, 6.1.3 et 6.1.4 lorsque le lien est ambigu pour tout le monde. Dans cette situation, où il n’est pas possible de rendre le lien explicite dans son contexte, le critère est non applicable.

Il existe une gestion de cas particuliers pour le test 6.1.5 lorsque :

• La ponctuation et les lettres majuscules sont présentes dans le texte de l’intitulé visible : elles peuvent être ignorées dans le nom accessible sans porter à conséquence ;
• Le texte de l’intitulé visible sert de symbole : le texte ne doit pas être interprété littéralement au niveau du nom accessible. Le nom doit exprimer la fonction véhiculée par le symbole (par exemple, “B” au niveau d’un éditeur de texte aura pour nom accessible “Mettre en gras”, le signe “>” en fonction du contexte signifiera “Suivant” ou “Lancer la vidéo”). Le cas des symboles mathématiques fait cependant exception (voir la note ci-dessous).

Note : si l’étiquette visible représente une expression mathématique, les symboles mathématiques peuvent être repris littéralement pour servir d’étiquette au nom accessible (ex. : “A>B”). Il est laissé à l’utilisateur le soin d’opérer la correspondance entre l’expression et ce qu’il doit épeler compte tenu de la connaissance qu’il a du fonctionnement de son logiciel de saisie vocale (“A plus grand que B” ou “A supérieur à B”).

Notes techniques

Lorsque l’intitulé visible est complété par une autre expression dans le nom accessible :

• WCAG insiste sur le placement de l’intitulé visible au début du nom accessible sans toutefois réserver l’exclusivité de cet emplacement ;
• WCAG considère comme un cas d’échec une correspondance non exacte de la chaîne de caractères de l’intitulé visible au sein du nom accessible.

Par exemple, si l’on considère l’intitulé visible « Commander maintenant » complété dans le nom accessible par l’expression « produit X », on peut avoir les différents cas suivants :

• « Commander maintenant produit X » est valide (bonne pratique) ;
• « Produit X : commander maintenant » est valide ;
• « Commander produit X maintenant » est non valide.

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A), 2.4.4 Fonction du lien (selon le contexte) (A), 2.5.3 Étiquette dans le nom (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA7, ARIA8, C7, F63, F89, F96, G53, G91, G208, G211, H30, H33, H77, H78, H79, H80, H81.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content, 9.2.4.4 Link purpose (in context), 9.2.5.3 Label in name.

Test 6.2.1 Dans chaque page web, chaque lien a-t-il un intitulé entre <a> et </a> ?

Méthodologie du test 6.2.1

1. Retrouver dans le document les liens quels qu’ils soient.
2. Pour chaque lien, vérifier que le contenu de l’élément <a> (ou d’un élément pourvu d’un attribut WAI-ARIA role=link) contient un intitulé (texte ou alternative).
3. Si c’est le cas pour chaque lien, le test est validé.

Notes techniques

Une ancre n’est pas un lien même si pendant longtemps l’élément <a> a servi de support à cette technique. Elle n’est donc pas concernée par le présent critère.

Correspondances

• Critères de succès WCAG 2.1 : 1.1.1 Contenu non textuel (A), 2.4.4 Fonction du lien (selon le contexte) (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F89, G91, H30.
• EN 301 549 V3.2.1 (2021-03) : 9.1.1.1 Non-text content, 9.2.4.4 Link purpose (in context).

Correspondances tests automatisés

• Règle Axe: link-name - "Links must have discernible text"

Test 7.3.1 Chaque élément possédant un gestionnaire d’événement contrôlé par un script vérifie-t-il une de ces conditions (hors cas particuliers) ?

• L’élément est accessible par le clavier et tout dispositif de pointage.
• Un élément accessible par le clavier et tout dispositif de pointage permettant de réaliser la même action est présent dans la page.

Méthodologie du test 7.3.1

1. Retrouver dans le document, tous les éléments sur lesquels est implémenté un gestionnaire d’événements JavaScript (par exemple click, focus, mouseover, blur, keydown, touch…).
2. Vérifier que l’élément est accessible au moyen du clavier :
   • Il est atteignable avec la touche de tabulation (tab).
   • Si l’élément gère une action simple, il est activable au clavier avec la touche entrée (Entrée).
   • Si l’élément gère une action complexe, il est utilisable avec le clavier (généralement avec les touches de direction).
3. Sinon, vérifier qu’un élément accessible par le clavier permettant de réaliser la même action est présent dans la page.
4. Vérifier que l’élément est accessible par tout dispositif de pointage (souris, toucher, stylet…).
5. Sinon, vérifier qu’un élément accessible au moyen d’un dispositif de pointage et permettant de réaliser la même action est présent dans la page.
6. Si c’est le cas, le test est validé.

Test 7.3.2 Un script ne doit pas supprimer le focus d’un élément qui le reçoit. Cette règle est-elle respectée (hors cas particuliers) ?

Méthodologie du test 7.3.2

1. Activer, l’un après l’autre, tous les éléments capables de recevoir le focus.
2. Vérifier que le focus n’est pas supprimé via une fonctionnalité JavaScript.
3. Si c’est le cas, le test est validé.

Cas particuliers

Il existe une gestion de cas particuliers lorsque la fonctionnalité dépend de l’utilisation d’un gestionnaire d’événement sans équivalent universel ; par exemple, une application de dessin à main levée ne pourra pas être rendue contrôlable au clavier. Dans ces situations, le critère est non applicable.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A), 2.1.1 Clavier (A), 2.4.7 Visibilité du focus (AA).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F42, F54, F55, G90, G202, SCR2, SCR20, SCR29, SCR35.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships, 9.2.1.1 Keyboard, 9.2.4.7 Focus visible.

Test 8.1.1 Chaque page web est-elle définie par un type de document ?

Note

Les technologies d’assistance ne dépendent plus de l’analyse directe du HTML. L’absence de déclaration d’un type de document ne pose donc plus de problème d’accessibilité pour les personnes en situation de handicap. Le critère doit dorénavant toujours être considéré comme conforme.

Correspondances

• Critères de succès WCAG 2.1 : 4.1.1 Analyse syntaxique (A).
• EN 301 549 V3.2.1 (2021-03) : 9.4.1.1 Parsing.

Correspondances tests automatisés

• Validateur nu HTML checker accompagné du bookmarklet « Check for WCAG 2.0 parsing compliance » disponible sur la page "about" de cet outil.

Test 8.2.1 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié ?

Note

Les technologies d’assistance ne dépendent plus de l’analyse directe du HTML. Les problèmes d’accessibilité spécifiquement liés à la validité du code n’existent plus. Les erreurs remontées par le validateur qui ont un impact pour les personnes en situation de handicap sont traitées par d’autres critères. Le critère doit dorénavant toujours être considéré comme conforme.

Correspondances

• Critères de succès WCAG 2.1 : 4.1.1 Analyse syntaxique (A), 4.1.2 Nom, rôle et valeur (A).
• EN 301 549 V3.2.1 (2021-03) : 9.4.1.1 Parsing, 9.4.1.2 Name, role, value.

Correspondances tests automatisés

• Règle Axe: aria-required-attr - "Required ARIA attributes must be provided"
• Règle Axe: aria-allowed-attr - "Elements must only use allowed ARIA attributes"
• Règle Axe: aria-required-children - "Certain ARIA roles must contain particular children"
• Règle Axe: aria-required-parent - "Certain ARIA roles must be contained by particular parents"
• Règle Axe: aria-roledescription - "Use aria-roledescription on elements with a semantic role"
• Règle Axe: aria-roles - "ARIA roles used must conform to valid values"
• Règle Axe: aria-valid-attr - "ARIA attributes must conform to valid names"
• Règle Axe: aria-valid-attr-value - "ARIA attributes must conform to valid values"
• Règle Axe: definition-list - "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements"
• Règle Axe: dlitem - "<dt> and <dd> elements must be contained by a <dl>"
• Règle Axe: duplicate-id-active - "IDs of active elements must be unique"
• Règle Axe: duplicate-id-aria - "IDs used in ARIA and labels must be unique"
• Règle Axe: list - "<ul> and <ol> must only directly contain <li>, <script> or <template> elements"
• Règle Axe: listitem - "<li> elements must be contained in a <ul> or <ol>"
• Validateur nu HTML checker accompagné du bookmarklet « Check for WCAG 2.0 parsing compliance » disponible sur la page "about" de cet outil.

Test 8.3.1 Pour chaque page web, l’indication de langue par défaut vérifie-t-elle une de ces conditions ?

• L’indication de la langue de la page (attribut lang et/ou xml:lang) est donnée pour l’élément html.
• L’indication de la langue de la page (attribut lang et/ou xml:lang) est donnée sur chaque élément de texte ou sur l’un des éléments parents.

Méthodologie du test 8.3.1

1. Retrouver dans le document l’indication de langue par défaut.
2. Vérifier la présence d’une indication de langue :
   • soit au moyen de l’attribut lang sur la balise html si le code est du HTML5 ou du HTML4 ;
   • soit au moyen des attributs lang et xml:lang sur la balise html si le code est du XHTML 1.0 ;
   • soit au moyen de l’attribut xml:lang sur la balise html si le code est du XHTML 1.1 ;
   • Sinon, vérifier la présence d’une indication de langue sur chaque élément de texte ou l’un de ses parents.
3. Si c’est le cas, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 3.1.1 Langue de la page (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : H57.
• EN 301 549 V3.2.1 (2021-03) : 9.3.1.1 Language of page.

Correspondances tests automatisés

• Règle Axe: html-has-lang - "<html> element must have a lang attribute"

Test 8.4.1 Pour chaque page web ayant une langue par défaut, le code de langue vérifie-t-il ces conditions ?

• Le code de langue est valide.
• Le code de langue est pertinent.

Méthodologie du test 8.4.1

1. Retrouver dans le document l’indication de langue par défaut.
2. Vérifier la présence d’un code de langue :
   • valide (conforme à la norme ISO 639-1 ou ISO 639-2 et suivantes) ;
   • pertinent (qui indique la langue principale du document).
3. Si c’est le cas, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 3.1.1 Langue de la page (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : H57.
• EN 301 549 V3.2.1 (2021-03) : 9.3.1.1 Language of page.

Correspondances tests automatisés

• Règle Axe: html-lang-valid - "<html> element must have a valid value for the lang attribute"

Test 8.5.1 Chaque page web a-t-elle un titre de page (balise <title>) ?

Méthodologie du test 8.5.1

1. Retrouver dans le document le titre structuré au moyen d’un élément <title>.
2. Si c’est le cas, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 2.4.2 Titre de page (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : G88, G127, H25.
• EN 301 549 V3.2.1 (2021-03) : 9.2.4.2 Page titled.

Test 8.6.1 Pour chaque page web ayant un titre de page (balise <title>), le contenu de cette balise est-il pertinent ?

Méthodologie du test 8.6.1

1. Retrouver dans le document le titre structuré au moyen d’un élément <title>.
2. Vérifier si le contenu de l’élément <title> est suffisamment pertinent (il permet de retrouver la page dans l’historique de navigation ou la liste des onglets).
3. Si c’est le cas, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 2.4.2 Titre de page (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F25, G88, G127, H25.
• EN 301 549 V3.2.1 (2021-03) : 9.2.4.2 Page titled.

Test 8.7.1 Dans chaque page web, chaque texte écrit dans une langue différente de la langue par défaut vérifie-t-il une de ces conditions (hors cas particuliers) ?

• L’indication de langue est donnée sur l’élément contenant le texte (attribut lang et/ou xml:lang).
• L’indication de langue est donnée sur un des éléments parents (attribut lang et/ou xml:lang)

Méthodologie du test 8.7.1

1. Retrouver les passages de texte en langue étrangère, à l’exception :
   • des noms propres ;
   • des mots d’origine étrangère, présents dans le dictionnaire de la langue du document ;
   • des mots d’origine étrangère et d’usage courant dont la prononciation ne provoque pas d’incompréhension.
2. Vérifier que chaque passage de texte retenu possède une indication de langue (attribut lang et/ou xml:lang sur l’élément lui-même ou l’un de ses parents).
3. Si c’est le cas, le test est validé.

Cas particuliers

Il y a une gestion de cas particuliers sur le changement de langue pour les cas suivants :

• Nom propre, le critère est non applicable ;
• Nom commun de langue étrangère présent dans le dictionnaire officiel de la langue (voir note 1 ci-dessous) par défaut de la page web, le critère est non applicable ;
• Le terme de langue étrangère soumis, via un champ de formulaire et rappelé dans la page (par exemple comme indication du terme recherché dans le cas d’un moteur de recherche), le critère est non applicable ;
• Passage de texte dont la langue ne peut pas être déterminée : le critère est non applicable ;
• Terme ou passage de texte issus d’une langue morte ou imaginaire pour laquelle il n’existe pas d’interprétation vocale : le critère est non applicable.

Note 1 : les dictionnaires officiels pour les langues fréquemment employées sur les sites publics luxembourgeois sont les suivants :

• pour le luxembourgeois : Lëtzebuerger Online Dictionnaire (LOD) (l’utilisation de spellchecker.lu peut aider à détecter les mots absents du dictionnaire) ;
• pour le français : Trésor de la Langue Française informatisé ;
• pour l’allemand : Digitales Wörterbuch der deutschen Sprache ;
• pour l’anglais : Oxford English Dictionary.

Note 2 : pour les noms communs de langue étrangère, absents dans le dictionnaire officiel de la langue par défaut de la page web, et qui sont passés dans le langage commun (exemple : newsletter) : le critère est applicable, uniquement lorsque l’absence d’indication de langue peut provoquer une incompréhension pour la restitution.

Correspondances

• Critères de succès WCAG 2.1 : 3.1.2 Langue d’un passage (AA).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : H58.
• EN 301 549 V3.2.1 (2021-03) : 9.3.1.2 Language of parts.

Test 8.8.1 Pour chaque page web, le code de langue de chaque changement de langue vérifie-t-il ces conditions ?

• Le code de langue est valide.
• Le code de langue est pertinent.

Méthodologie du test 8.8.1

1. Pour chaque passage de texte validé au test 8.7.1, vérifier que :
   • L’indication de langue est valide.
   • L’indication de langue est pertinente.
2. Si c’est le cas, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 3.1.2 Langue d’un passage (AA).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : H58.
• EN 301 549 V3.2.1 (2021-03) : 9.3.1.2 Language of parts.

Correspondances tests automatisés

• Règle Axe: valid-lang - "lang attribute must have a valid value"

Test 9.1.1 Dans chaque page web, la hiérarchie entre les titres (balise <hx> ou balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level) est-elle pertinente ?

Méthodologie du test 9.1.1

1. Retrouver dans le document les titres (balise <hx> ou balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level).
2. Vérifier que la hiérarchie entre les titres est pertinente.
3. Si c’est le cas, le test est validé.

Test 9.1.2 Dans chaque page web, le contenu de chaque titre (balise <hx> ou balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level) est-il pertinent ?

Méthodologie du test 9.1.2

1. Pour chaque titre identifié au test 9.1.1, vérifier que son contenu est pertinent.
2. Si c’est le cas pour chaque titre, le test est validé.

Test 9.1.3 Dans chaque page web, chaque passage de texte constituant un titre est-il structuré à l’aide d’une balise <hx> ou d’une balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level ?

Méthodologie du test 9.1.3

1. Pour chaque titre identifié au test 9.1.1, vérifier que :
   • soit il est structuré au moyen d’une balise <hx> (“x” désignant une valeur numérique comprise entre 1 et 6) ;
   • soit il est structuré au moyen d’une balise possédant un attribut WAI-ARIA role="heading" et un attribut WAI-ARIA aria-level=x (“x” désignant une valeur numérique).
2. Si c’est le cas pour chaque titre, le test est validé.

Notes techniques

WAI-ARIA permet de définir des titres via le rôle heading et l’attribut aria-level (indication du niveau de titre). Bien qu’il soit préférable d’utiliser l’élément de titre natif en HTML <hx>, l’utilisation du rôle WAI-ARIA heading est compatible avec l’accessibilité.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A), 2.4.1 Contourner des blocs (A), 2.4.6 En-têtes et étiquettes (AA), 4.1.2 Nom, rôle et valeur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA4, ARIA12, G115, G130, G141, H42.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships, 9.2.4.1 Bypass blocks, 9.2.4.6 Headings and labels, 9.4.1.2 Name, role, value.

Correspondances tests automatisés

• Règle Axe: headings-order - "Heading levels should only increase by one"

Test 9.2.1 Dans chaque page web, la structure du document vérifie-t-elle ces conditions (hors cas particuliers) ?

• La zone d’en-tête de la page est structurée via une balise <header>.
• Les zones de navigation principales et secondaires sont structurées via une balise <nav>.
• La balise <nav> est réservée à la structuration des zones de navigation principales et secondaires.
• La zone de contenu principal est structurée via une balise <main>.
• La structure du document utilise une balise <main> visible unique.
• La zone de pied de page est structurée via une balise <footer>.

Méthodologie du test 9.2.1

1. Vérifier que la zone d’en-tête est structurée au moyen d’un élément <header>.
2. Vérifier que les zones de navigation principales et secondaires sont structurées au moyen d’un élément <nav>.
3. Vérifier que l’élément <nav> n’est pas utilisé en dehors de la structuration des zones de navigation principales et secondaires.
4. Vérifier que la zone de contenu principal est structurée au moyen d’un élément <main>.
5. Si le document possède plusieurs éléments <main>, vérifier qu’un seul de ces éléments est visible (les autres occurrences de l’élément sont pourvues d’un attribut hidden).
6. Vérifier que la zone de pied de page est structurée au moyen d’un élément <footer>.
7. Si c’est le cas pour chaque zone de contenu, le test est validé.

Cas particuliers

Lorsque le doctype déclaré dans la page n’est pas le doctype HTML5, ce critère est non applicable.

Notes techniques

La balise <main> peut être utilisée plusieurs fois dans le même document HTML. Néanmoins, il ne peut y avoir en permanence qu’une seule balise visible et lisible par les technologies d’assistances, les autres devant disposer d’un attribut hidden ou d’un style permettant de les masquer aux technologies d’assistances. À noter cependant que l’utilisation d’un style seul restera insuffisante pour assurer l’unicité d’une balise <main> visible en cas de désactivation des feuilles de styles.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA11, G115, H97, H101.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships.

Correspondances tests automatisés

• Règle Axe: region - "All page content should be contained by landmarks"
• Règle Axe: landmark-no-duplicate-main - "Document should not have more than one main landmark"

Test 10.7.1 Pour chaque élément recevant le focus, la prise de focus vérifie-t-elle une de ces conditions ?

• Le style du focus natif du navigateur n’est pas supprimé ou dégradé.
• Un style du focus défini par l’auteur est visible.

Méthodologie du test 10.7.1

1. Retrouver dans le document les éléments susceptibles de recevoir le focus (les éléments d’interface tels que les liens ou les contrôles de formulaire, ainsi que tout élément pourvu d’un attribut tabindex d’une valeur égale ou supérieure à 1).
2. Pour chaque élément susceptible de recevoir le focus, vérifier que l’indication visuelle de la prise de focus est présente (en agissant sur le contour ou le fond ou les deux) et est suffisamment contrastée (ratio de contraste égal ou supérieur à 3:1).
3. Si c’est le cas pour chaque élément susceptible de recevoir le focus, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.4.1 Utilisation de la couleur (A), 2.4.7 Visibilité du focus (AA).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : C15, C40, F73, F78, G149, G165, G183, G195, SCR31.
• EN 301 549 V3.2.1 (2021-03) : 9.1.4.1 Use of colour, 9.2.4.7 Focus visible.

Test 10.8.1 Dans chaque page web, chaque contenu caché vérifie-t-il une de ces conditions ?

• Le contenu caché a vocation à être ignoré par les technologies d’assistance.
• Le contenu caché n’a pas vocation à être ignoré par les technologies d’assistance et est rendu restituable par les technologies d’assistance suite à une action de l’utilisateur réalisable au clavier ou par tout dispositif de pointage sur un élément précédent le contenu caché ou suite à un repositionnement du focus dessus.

Méthodologie du test 10.8.1

1. Retrouver les contenus cachés (éléments pourvus de l’attribut hidden ou de l’attribut WAI-ARIA aria-hidden, ou bien d’une classe ou d’un ensemble de styles CSS susceptibles de masquer le contenu).
2. Pour chaque contenu caché, vérifier que :
   • Soit le contenu caché a vocation à être ignoré par les technologies d’assistance (un élément statistique de visites par exemple).
   • Soit le contenu caché n’a pas vocation à être ignoré par les technologies d’assistance, et dans ce cas il est rendu restituable par les technologies d’assistance au moyen :
     • Soit d’une action de l’utilisateur réalisable au clavier ou par tout dispositif de pointage sur un élément précédent le contenu caché.
     • Soit d’une fonction de programmation qui repositionne le focus sur le contenu.
3. Si c’est le cas pour chaque contenu caché, le test est validé.

Notes techniques

WAI-ARIA propose un attribut aria-hidden (true ou false) qui permet d’inhiber la restitution d’un contenu en direction des technologies d’assistance, sans action sur sa visibilité en direction des agents utilisateurs : un contenu avec aria-hidden="true" ne sera donc plus vocalisable, mais restera visible.

Sauf si le contenu contrôlé par aria-hidden n’a pas vocation à être restitué par les technologies d’assistance, la valeur de l’attribut aria-hidden doit être cohérente avec l’état affiché ou masqué du contenu à l’écran.

La spécification HTML5 propose un attribut hidden qui permet de rendre indisponible (quand l’attribut hidden est présent) un contenu dans le DOM généré (de manière similaire au type="hidden" sur un contrôle de formulaire).

Il est possible d’avoir des situations où un contenu contrôlé par hidden ou aria-hidden se trouve momentanément dans un état incohérent avec le statut affiché ou masqué du contenu, par exemple si l’on désire rendre disponible un élément, mais que son affichage à l’écran reste dépendant d’une action ultérieure. Dans ce cas, c’est l’état final du contenu qui doit être considéré.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.2 Ordre séquentiel logique (A), 4.1.2 Nom, rôle et valeur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : G57.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.2 Meaningful sequence, 9.4.1.2 Name, role, value.

Correspondances tests automatisés

• Règle Axe: aria-hidden-body - "aria-hidden="true" must not be present on the document body"
• Règle Axe: aria-hidden-focus - "ARIA hidden element must not contain focusable elements"

Test 10.9.1 Dans chaque page web, pour chaque texte ou ensemble de textes, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?

Méthodologie du test 10.9.1

1. Retrouver dans le document les informations d’un texte données par la forme, la taille ou la position.
2. Pour chaque information donnée par la forme, la taille ou la position, vérifier qu’il existe un autre moyen de récupérer cette information.
3. Si c’est le cas pour chaque information, le test est validé.

Test 10.9.2 Dans chaque page web, pour chaque image ou ensemble d’images, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?

Méthodologie du test 10.9.2

1. Retrouver dans le document les informations d’une image données par la forme, la taille ou la position.
2. Pour chaque information donnée par la forme, la taille ou la position, vérifier qu’il existe un autre moyen de récupérer cette information.
3. Si c’est le cas pour chaque information, le test est validé.

Test 10.9.3 Dans chaque page web, pour chaque média temporel, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?

Méthodologie du test 10.9.3

1. Retrouver dans le document les informations d’un média temporel données par la forme, la taille ou la position.
2. Pour chaque information donnée par la forme, la taille ou la position, vérifier qu’il existe un autre moyen de récupérer cette information.
3. Si c’est le cas pour chaque information, le test est validé.

Test 10.9.4 Dans chaque page web, pour chaque média non temporel, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?

Méthodologie du test 10.9.4

1. Retrouver dans le document les informations d’un média non temporel données par la forme, la taille ou la position.
2. Pour chaque information donnée par la forme, la taille ou la position, vérifier qu’il existe un autre moyen de récupérer cette information.
3. Si c’est le cas pour chaque information, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.3 Caractéristiques sensorielles (A), 1.4.1 Utilisation de la couleur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F14, F26, G96, G140.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.3 Sensory characteristics, 9.1.4.1 Use of colour.

Test 10.10.1 Dans chaque page web, pour chaque texte ou ensemble de textes, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle implémentée de façon pertinente ?

Méthodologie du test 10.10.1

1. Retrouver dans le document les informations d’un texte données par la forme, la taille ou la position.
2. Pour chaque information donnée par la forme, la taille ou la position, vérifier que le moyen alternatif de récupérer cette information est pertinent, c’est-à-dire qu’il permet de transmettre l’information dans tous les contextes de consultation et pour tous les utilisateurs.
3. Si c’est le cas pour chaque information, le test est validé.

Test 10.10.2 Dans chaque page web, pour chaque image ou ensemble d’images, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle implémentée de façon pertinente ?

Méthodologie du test 10.10.2

1. Retrouver dans le document les informations d’une image données par la forme, la taille ou la position.
2. Pour chaque information donnée par la forme, la taille ou la position, vérifier que le moyen alternatif de récupérer cette information est pertinent, c’est-à-dire qu’il permet de transmettre l’information dans tous les contextes de consultation et pour tous les utilisateurs.
3. Si c’est le cas pour chaque information, le test est validé.

Test 10.10.3 Dans chaque page web, pour chaque média temporel, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle implémentée de façon pertinente ?

Méthodologie du test 10.10.3

1. Retrouver dans le document les informations d’un média temporel données par la forme, la taille ou la position.
2. Pour chaque information donnée par la forme, la taille ou la position, vérifier que le moyen alternatif de récupérer cette information est pertinent, c’est-à-dire qu’il permet de transmettre l’information dans tous les contextes de consultation et pour tous les utilisateurs.
3. Si c’est le cas pour chaque information, le test est validé.

Test 10.10.4 Dans chaque page web, pour chaque média non temporel, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle implémentée de façon pertinente ?

Méthodologie du test 10.10.4

1. Retrouver dans le document les informations d’un média non temporel données par la forme, la taille ou la position.
2. Pour chaque information donnée par la forme, la taille ou la position, vérifier que le moyen alternatif de récupérer cette information est pertinent, c’est-à-dire qu’il permet de transmettre l’information dans tous les contextes de consultation et pour tous les utilisateurs.
3. Si c’est le cas pour chaque information, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.3 Caractéristiques sensorielles (A), 1.4.1 Utilisation de la couleur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F14, F26, G96, G140.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.3 Sensory characteristics, 9.1.4.1 Use of colour.

Test 10.14.1 Dans chaque page web, les contenus additionnels apparaissant au survol d’un composant d’interface via les styles CSS respectent-ils si nécessaire une de ces conditions ?

• Les contenus additionnels apparaissent également à l’activation du composant via le clavier et tout dispositif de pointage.
• Les contenus additionnels apparaissent également à la prise de focus du composant.
• Les contenus additionnels apparaissent également par le biais de l’activation ou de la prise de focus d’un autre composant.

Méthodologie du test 10.14.1

1. Retrouver dans le document les contenus additionnels devenant visible au survol d’un composant d’interface au moyen d’un mécanisme CSS (pseudo-classe :hover).
2. Pour chaque contenu additionnel, vérifier que les contenus additionnels apparaissent également :
   • À l’activation du composant au moyen du clavier ou de tout autre dispositif de pointage.
   • À la prise de focus du composant.
   • À l’activation ou à la prise de focus d’un autre composant.
3. Si c’est le cas pour chaque contenu additionnel, le test est validé.

Test 10.14.2 Dans chaque page web, les contenus additionnels apparaissant au focus d’un composant d’interface via les styles CSS respectent-ils si nécessaire une de ces conditions ?

• Les contenus additionnels apparaissent également à l’activation du composant via le clavier et tout dispositif de pointage.
• Les contenus additionnels apparaissent également au survol du composant.
• Les contenus additionnels apparaissent également par le biais de l’activation ou du survol d’un autre composant.

Méthodologie du test 10.14.2

1. Retrouver dans le document les contenus additionnels devenant visible à la prise de focus d’un composant d’interface au moyen d’un mécanisme CSS (pseudo-classe :focus).
2. Pour chaque contenu additionnel, vérifier que les contenus additionnels apparaissent également :

• À l’activation du composant au moyen du clavier ou de tout autre dispositif de pointage.
• Au survol du composant.
• À l’activation ou du survol d’un autre composant.

3. Si c’est le cas pour chaque contenu additionnel, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 2.1.1 Clavier (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : G202.
• EN 301 549 V3.2.1 (2021-03) : 9.2.1.1 Keyboard.

Test 11.1.1 Chaque champ de formulaire vérifie-t-il une de ces conditions ?

• Le champ de formulaire possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié.
• Le champ de formulaire possède un attribut WAI-ARIA aria-label.
• Une balise <label> ayant un attribut for est associée au champ de formulaire.
• Le champ de formulaire possède un attribut title.
• Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.

Méthodologie du test 11.1.1

1. Retrouver dans le document les champs de formulaire.
2. Pour chaque champ de formulaire, vérifier que le champ de formulaire :
   • possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ;
   • possède un attribut WAI-ARIA aria-label ;
   • est associé à un élément <label> ayant un attribut for ;
   • possède un attribut title ;
   • un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.
3. Si c’est le cas pour champ de formulaire, le test est validé.

Test 11.1.2 Chaque champ de formulaire associé à une balise <label> ayant un attribut for, vérifie-t-il ces conditions ?

• Le champ de formulaire possède un attribut id.
• La valeur de l’attribut for est égale à la valeur de l’attribut id du champ de formulaire associé.

Méthodologie du test 11.1.2

1. Retrouver dans le document les champs de formulaire associé à un élément <label>.
2. Pour chaque champ de formulaire, vérifier que :
   • Le champ de formulaire possède un attribut id.
   • La valeur de l’attribut for de l’élément <label> est égale à la valeur de l’attribut id.
3. Si c’est le cas pour champ de formulaire, le test est validé.

Test 11.1.3 Chaque champ de formulaire ayant une étiquette dont le contenu n’est pas visible ou à proximité (masqué, aria-label) ou qui n’est pas accolé au champ (aria-labelledby), vérifie-t-il une de ses conditions ?

• Le champ de formulaire possède un attribut title dont le contenu permet de comprendre la nature de la saisie attendue.
• Le champ de formulaire est accompagné d’un passage de texte accolé au champ qui devient visible à la prise de focus permettant de comprendre la nature de la saisie attendue.
• Le champ de formulaire est accompagné d’un passage de texte visible accolé au champ permettant de comprendre la nature de la saisie attendue.

Méthodologie du test 11.1.3

1. Retrouver dans le document les champs de formulaire dont l’étiquette n’est pas visible ou à proximité (masquée, utilisation de l’attribut aria-label) ou n’est pas accolée au champ (utilisation de l’attribut aria-labelledby).
2. Pour chaque champ de formulaire, vérifier que le champ de formulaire :
   • soit possède un attribut title dont le contenu permet de comprendre la nature de la saisie attendue ;
   • est accompagné d’un passage de texte accolé au champ qui devient visible à la prise de focus permettant de comprendre la nature de la saisie attendue ;
   • est accompagné d’un passage de texte visible accolé au champ permettant de comprendre la nature de la saisie attendue.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A), 2.4.6 En-têtes et étiquettes (AA), 3.3.2 Étiquettes ou instructions (A), 4.1.2 Nom, rôle et valeur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA6, ARIA9, ARIA14, ARIA16, F68, F82, F86, G82, G131, G167, H44, H65.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships, 9.2.4.6 Headings and labels, 9.3.3.2 Labels or instructions, 9.4.1.2 Name, role, value.

Correspondances tests automatisés

• Règle Axe: label - "Form elements must have labels"

Test 11.2.1 Chaque balise <label> permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ?

Méthodologie du test 11.2.1

1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un élément <label>.
2. Pour chaque champ de formulaire, vérifier que le contenu de l’élément est pertinent.
3. Si c’est le cas pour chaque champ de formulaire, le test est validé.

Test 11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ?

Méthodologie du test 11.2.2

1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut title.
2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent.
3. Si c’est le cas pour chaque champ de formulaire, le test est validé.

Test 11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ?

Méthodologie du test 11.2.3

1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut WAI-ARIA aria-label.
2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent.
3. Si c’est le cas pour chaque champ de formulaire, le test est validé.

Test 11.2.4 Chaque passage de texte associé via l’attribut WAI-ARIA aria-labelledby permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ?

Méthodologie du test 11.2.4

1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut WAI-ARIA aria-labelledby.
2. Pour chaque champ de formulaire, vérifier que le contenu du passage de texte référencé est pertinent.
3. Si c’est le cas pour chaque champ de formulaire, le test est validé.

Test 11.2.5 Chaque champ de formulaire ayant un intitulé visible vérifie-t-il ces conditions (hors cas particuliers) ?

• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label du champ de formulaire contient au moins l’intitulé visible.
• S’il est présent, le passage de texte lié au champ de formulaire via un attribut WAI-ARIA aria-labelledby contient au moins l’intitulé visible.
• S’il est présent, le contenu de l’attribut title du champ de formulaire contient au moins l’intitulé visible.
• S’il est présent, le contenu de la balise <label> associé au champ de formulaire contient au moins l’intitulé visible.

Méthodologie du test 11.2.5

1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie à la fois par un intitulé visible et par le contenu soit d’un élément <label>, soit d’un attribut title ou d’un attribut aria-label ou d’un attribut aria-labelledby.
2. Pour chaque champ de formulaire, vérifier que le contenu de l’élément <label> ou de l’attribut title ou de l’attribut aria-label ou de l’attribut aria-labelledby contient l’intitulé visible.
3. Si c’est le cas pour chaque champ de formulaire, le test est validé.

Test 11.2.6 Chaque bouton adjacent au champ de formulaire qui fournit une étiquette visible permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ?

Méthodologie du test 11.2.6

1. Retrouver dans le document les champs de formulaire dont l’étiquette visible est fournie par un bouton adjacent.
2. Pour chaque champ de formulaire, vérifier que le contenu visible du bouton est pertinent.
3. Si c’est le cas pour chaque champ de formulaire, le test est validé.

Cas particuliers

Il existe une gestion de cas particuliers pour le test 11.2.5 lorsque :

• La ponctuation et les lettres majuscules sont présentes dans le texte de l’intitulé visible : elles peuvent être ignorées dans le nom accessible sans porter à conséquence ;
• Le texte de l’intitulé visible sert de symbole : le texte ne doit pas être interprété littéralement au niveau du nom accessible. Le nom doit exprimer la fonction véhiculée par le symbole (par exemple, “B” au niveau d’un éditeur de texte aura pour nom accessible “Mettre en gras”, le signe “>” en fonction du contexte signifiera “Suivant” ou “Lancer la vidéo”). Le cas des symboles mathématiques fait cependant exception (voir la note ci-dessous).

Note : si l’étiquette visible représente une expression mathématique, les symboles mathématiques peuvent être repris littéralement pour servir d’étiquette au nom accessible (ex. : “A>B”). Il est laissé à l’utilisateur le soin d’opérer la correspondance entre l’expression et ce qu’il doit épeler compte tenu de la connaissance qu’il a du fonctionnement de son logiciel de saisie vocale (“A plus grand que B” ou “A supérieur à B”).

Ce cas particulier s’applique également au test 11.9.2.

Correspondances

• Critères de succès WCAG 2.1 : 2.4.6 En-têtes et étiquettes (AA), 2.5.3 Étiquette dans le nom (A), 3.3.2 Étiquettes ou instructions (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA6, ARIA9, ARIA14, ARIA16, F96, G82, G131, G208, G211, H44, H65.
• EN 301 549 V3.2.1 (2021-03) : 9.2.4.6 Headings and labels, 9.2.5.3 Label in name, 9.3.3.2 Labels or instructions.

Test 11.5.1 Les champs de même nature vérifient-ils l’une de ces conditions, si nécessaire ?

• Les champs de même nature sont regroupés dans une balise <fieldset>.
• Les champs de même nature sont regroupés dans une balise possédant un attribut WAI-ARIA role="group".
• Les champs de même nature de type radio (<input type="radio">) ou balises possédant un attribut WAI-ARIA role="radio") sont regroupés dans une balise possédant un attribut WAI-ARIA role="radiogroup" ou role="group".

Méthodologie du test 11.5.1

1. Retrouver dans le document les champs de formulaire de même nature (par exemple un groupe de saisie d’informations d’identité, une série de cases à cocher, une saisie de date sur plusieurs champs successifs…).
2. Pour chaque groupe de champs de formulaire de même nature, vérifier que ces champs de même nature sont regroupés :
   • soit dans un élément <fieldset> ;
   • soit dans un élément possédant un attribut WAI-ARIA role="group" ;
   • soit dans un élément possédant un attribut WAI-ARIA role="radiogroup" ou "group", s’il s’agit d’éléments <input> de type radio ( ou d’éléments possédant un attribut WAI-ARIA role="radio").
3. Si c’est le cas pour chaque groupe de champs de formulaire de même nature, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A), 3.3.2 Étiquettes ou instructions (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA17, H71.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships, 9.3.3.2 Labels or instructions.

Test 11.6.1 Chaque regroupement de champs de même nature possède-t-il une légende ?

Méthodologie du test 11.6.1

1. Retrouver dans le document les groupes de champs de formulaire de même nature.
2. Pour chaque groupe de champs de formulaire de même nature, vérifier que :
   • Si le regroupement utilise un élément <fieldset>, l’élément <fieldset> possède un élément <legend>.
   • Si l’élément de regroupement utilise un attribut WAI-ARIA role="group" ou "radiogroup", il possède un attribut WAI-ARIA aria-label ou aria-labelledby.
3. Sinon, pour chacun des champs de même nature, vérifier la présence :
   • soit d’un attribut title permettant de déterminer l’appartenance du champ au groupement de champ ;
   • soit d’un attribut aria-label permettant de déterminer l’appartenance du champ au groupement de champ ;
   • soit d’un attribut aria-labelledby qui référence un passage de texte permettant de déterminer l’appartenance du champ au groupement de champ ;
   • soit d’un attribut aria-describedby qui référence un passage de texte permettant de déterminer l’appartenance du champ au groupement de champ ;
4. Si c’est le cas pour chaque groupe de champs de formulaire ou pour chacun des champs de même nature, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A), 3.3.2 Étiquettes ou instructions (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA17, H71.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships, 9.3.3.2 Labels or instructions.

Test 11.7.1 Chaque légende associée à un regroupement de champs de même nature est-elle pertinente ?

Méthodologie du test 11.7.1

1. Retrouver dans le document les groupes de champs de formulaire de même nature.
2. Pour chaque groupe de champs de formulaire de même nature ou pour chacun des champs de même nature qui dispose d’une légende, vérifier que le texte de cette légende est pertinent.
3. Si c’est le cas pour chaque groupe de champs de formulaire ou pour chacun des champs de même nature, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A), 3.3.2 Étiquettes ou instructions (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA17, H71.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships, 9.3.3.2 Labels or instructions.

Test 11.9.1 L’intitulé de chaque bouton vérifie-t-il ces conditions (hors cas particuliers) ?

• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent.
• S’il est présent, le passage de texte lié au bouton via un attribut WAI-ARIA aria-labelledby est pertinent.
• S’il est présent, le contenu de l’attribut value d’une balise <input> de type submit, reset ou button est pertinent.
• S’il est présent, le contenu de la balise <button> est pertinent.
• S’il est présent, le contenu de l’attribut alt d’une balise <input> de type image est pertinent.
• S’il est présent, le contenu de l’attribut title est pertinent.

Méthodologie du test 11.9.1

1. Retrouver dans le document les boutons présents au sein d’un formulaire.
2. Pour chaque bouton, vérifier que son intitulé visible et son nom accessible sont pertinents.
3. Si c’est le cas pour chaque bouton, le test est validé.

Test 11.9.2 Chaque bouton affichant un intitulé visible vérifie-t-il ces conditions (hors cas particuliers) ?

• S’il est présent, le contenu de l’attribut WAI-ARIA aria-label contient au moins l’intitulé visible.
• S’il est présent, le passage de texte lié au bouton via un attribut WAI-ARIA aria-labelledby contient au moins l’intitulé visible.
• S’il est présent, le contenu de l’attribut value d’une balise <input> de type submit, reset ou button contient au moins l’intitulé visible.
• S’il est présent, le contenu de la balise <button> contient au moins l’intitulé visible.
• S’il est présent, le contenu de l’attribut alt d’une balise <input> de type image contient au moins l’intitulé visible.
• S’il est présent, le contenu de l’attribut title contient au moins l’intitulé visible.

Méthodologie du test 11.9.2

1. Retrouver dans le document les boutons présents au sein d’un formulaire.
2. Pour chaque bouton, vérifier que son nom accessible contient au moins son intitulé visible.
3. Si c’est le cas pour chaque bouton, le test est validé.

Cas particuliers

Pour le test 11.9.2, voir cas particuliers critère 11.2.

Correspondances

• Critères de succès WCAG 2.1 : 2.5.3 Étiquette dans le nom (A), 4.1.2 Nom, rôle et valeur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA6, ARIA9, ARIA14, F96, G208, G211, H36, H91, ARIA16.
• EN 301 549 V3.2.1 (2021-03) : 9.2.5.3 Label in name, 9.4.1.2 Name, role, value.

Correspondances tests automatisés

• Règle Axe: button-name - "Buttons must have discernible text"
• Règle Axe: input-button-name - "Input buttons must have discernible text"

Test 11.10.1 Les indications du caractère obligatoire de la saisie des champs vérifient-elles une de ces conditions (hors cas particuliers) ?

• Une indication de champ obligatoire est visible et permet d’identifier nommément le champ concerné préalablement à la validation du formulaire.
• Le champ obligatoire dispose de l’attribut aria-required="true" ou required préalablement à la validation du formulaire.

Méthodologie du test 11.10.1

1. Retrouver dans le document les champs de formulaire obligatoires.
2. Pour chaque champ de formulaire, vérifier que préalablement à la validation du formulaire :
   • soit une indication de champ obligatoire est visible et permet d’identifier nommément le champ concerné ;
   • soit le champ possède un attribut aria-required="true" ou required.
3. Si c’est le cas pour chaque champ de formulaire obligatoire, le test est validé.

Test 11.10.2 Les champs obligatoires ayant l’attribut aria-required="true" ou required vérifient-ils une de ces conditions ?

• Une indication de champ obligatoire est visible et située dans l’étiquette associée au champ préalablement à la validation du formulaire.
• Une indication de champ obligatoire est visible et située dans le passage de texte associé au champ préalablement à la validation du formulaire.

Méthodologie du test 11.10.2

1. Retrouver dans le document les champs de formulaire obligatoires qui possèdent un attribut aria-required="true" ou required.
2. Pour chaque champ de formulaire, vérifier que préalablement à la validation du formulaire :
   • soit une indication de champ obligatoire est visible et située dans l’étiquette associée au champ ;
   • soit une indication de champ obligatoire est visible et située dans le passage de texte associé au champ.
3. Si c’est le cas pour chaque champ de formulaire obligatoire qui possèdent un attribut aria-required="true" ou required, le test est validé.

Test 11.10.3 Les messages d’erreur indiquant l’absence de saisie d’un champ obligatoire vérifient-ils une de ces conditions ?

• Le message d’erreur indiquant l’absence de saisie d’un champ obligatoire est visible et permet d’identifier nommément le champ concerné.
• Le champ obligatoire dispose de l’attribut aria-invalid="true".

Méthodologie du test 11.10.3

1. Retrouver dans le document les messages d’erreur indiquant l’absence de saisie d’un champ obligatoire.
2. Pour chaque message d’erreur, vérifier que :
   • soit le message d’erreur est visible et permet d’identifier nommément le champ concerné ;
   • soit le champ obligatoire associé au message d’erreur possède un attribut aria-invalid="true".
3. Si c’est le cas pour chaque message d’erreur indiquant l’absence de saisie d’un champ obligatoire, le test est validé.

Test 11.10.4 Les champs obligatoires ayant l’attribut aria-invalid="true" vérifient-ils une de ces conditions ?

• Le message d’erreur indiquant le caractère invalide de la saisie est visible et situé dans l’étiquette associée au champ.
• Le message d’erreur indiquant le caractère invalide de la saisie est visible et situé dans le passage de texte associé au champ.

Méthodologie du test 11.10.4

1. Retrouver dans le document les champs de formulaire obligatoires qui possèdent un attribut aria-invalid="true".
2. Pour chaque champ de formulaire, vérifier que :
   • soit le message d’erreur indiquant le caractère invalide de la saisie est visible et situé dans l’étiquette associée au champ ;
   • soit le message d’erreur indiquant le caractère invalide de la saisie est visible et situé dans le passage de texte associé au champ.
3. Si c’est le cas pour chaque champ de formulaire obligatoire qui possède un attribut aria-invalid="true", le test est validé.

Test 11.10.5 Les instructions et indications du type de données et/ou de format obligatoires vérifient-elles une de ces conditions ?

• Une instruction ou une indication du type de données et/ou de format obligatoire est visible et permet d’identifier nommément le champ concerné préalablement à la validation du formulaire.
• Une instruction ou une indication du type de données et/ou de format obligatoire est visible dans l’étiquette ou le passage de texte associé au champ préalablement à la validation du formulaire.

Méthodologie du test 11.10.5

1. Retrouver dans le document les champs de formulaire obligatoires auxquels est associée une instruction ou une indication du type de données et/ou de format obligatoire.
2. Pour chaque champ de formulaire, vérifier que l’instruction ou l’indication du type de données et/ou de format obligatoire est préalablement à la validation du formulaire :
   • soit visible et permet d’identifier nommément le champ concerné ;
   • soit visible dans l’étiquette ou le passage de texte associé au champ.
3. Si c’est le cas pour chaque champ de formulaire obligatoire auquel est associée une instruction ou une indication du type de données et/ou de format obligatoire, le test est validé.

Test 11.10.6 Les messages d’erreurs fournissant une instruction ou une indication du type de données et/ou de format obligatoire des champs vérifient-ils une de ces conditions ?

• Le message d’erreur fournissant une instruction ou une indication du type de données et/ou de format obligatoires est visible et identifie le champ concerné.
• Le champ dispose de l’attribut aria-invalid="true".

Méthodologie du test 11.10.6

1. Retrouver dans le document les messages d’erreur fournissant une instruction ou une indication du type de données et/ou de format obligatoire d’un champ.
2. Pour chaque message d’erreur, vérifier que :
   • soit le message d’erreur est visible et permet d’identifier nommément le champ concerné ;
   • soit le champ associé au message d’erreur possède un attribut aria-invalid="true".
3. Si c’est le cas pour chaque message d’erreur indiquant l’absence de saisie d’un champ obligatoire, le test est validé.

Test 11.10.7 Les champs ayant l’attribut aria-invalid="true" dont la saisie requiert un type de données et/ou de format obligatoires vérifient-ils une de ces conditions ?

• Une instruction ou une indication du type de données et/ou de format obligatoire est visible et située dans la balise <label> associée au champ.
• Une instruction ou une indication du type de données et/ou de format obligatoire est visible et située dans le passage de texte associé au champ.

Méthodologie du test 11.10.7

1. Retrouver dans le document les champs de formulaire qui possèdent un attribut aria-invalid="true".
2. Pour chaque champ de formulaire, vérifier que :
   • soit une instruction ou une indication du type de données et/ou de format obligatoire est visible et située dans l’élément <label> associé au champ ;
   • soit une instruction ou une indication du type de données et/ou de format obligatoire est visible et située dans le passage de texte associé au champ.
3. Si c’est le cas pour chaque champ de formulaire qui possède un attribut aria-invalid="true", le test est validé.

Cas particuliers

Le test 11.10.1 et le test 11.10.2 seront considérés comme non applicables lorsque le formulaire comporte un seul champ de formulaire ou qu’il indique les champs optionnels de manière :

• Visible ;
• Dans la balise <label> ou dans la légende associée au champ.

Dans le cas où l’ensemble des champs d’un formulaire sont obligatoires, les tests 11.10.1 et 11.10.2 restent applicables.

Notes techniques

Dans un long formulaire dont la majorité des champs sont obligatoires, on pourrait constater que ce sont les quelques champs restés facultatifs qui sont explicitement signalés comme tels. Dans ce cas, il faudrait s’assurer que :

• Un message précise visuellement en haut de formulaire que « tous les champs sont obligatoires sauf ceux indiqués comme étant facultatifs » ;
• Une mention « facultatif » est présente visuellement dans le libellé des champs facultatifs ou dans la légende d’un groupe de champs facultatifs ;
• Un attribut required ou aria-required="true" reste associé à chaque champ qui n’est pas concerné par ce caractère facultatif.

Correspondances

• Critères de succès WCAG 2.1 : 3.3.1 Identification des erreurs (A), 3.3.2 Étiquettes ou instructions (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA1, ARIA2, ARIA6, ARIA9, ARIA16, ARIA21, F81, G83, G84, G85, G89, G139, G184, H44, H81, H89, H90, SCR18, SCR32.
• EN 301 549 V3.2.1 (2021-03) : 9.3.3.1 Error identification, 9.3.3.2 Labels or instructions.

Test 12.6.1 Dans chaque page web où elles sont présentes, la zone d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche respectent-elles au moins une de ces conditions ?

• La zone possède un rôle WAI-ARIA de type landmark correspondant à sa nature.
• La zone possède un titre dont le contenu permet de comprendre la nature du contenu de la zone.
• La zone peut être masquée par le biais d’un bouton précédent directement la zone dans l’ordre du code source.
• La zone peut être évitée par le biais d’un lien d’évitement précédent directement la zone dans l’ordre du code source.
• La zone peut être atteinte par le biais d’un lien d’accès rapide visible ou, à défaut, visible à la prise de focus.

Méthodologie du test 12.6.1

1. Retrouver dans le document les zones de regroupement de contenus (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche).
2. Pour chaque zone, vérifier que la zone :
   • soit possède un rôle WAI-ARIA de type landmark correspondant à sa nature ;
   • soit possède un titre de hiérarchie dont le contenu permet de comprendre la nature du contenu de la zone ;
   • soit peut être masquée au moyen d’un bouton précédant directement la zone dans l’ordre du code source ;
   • soit peut être évitée au moyen d’un lien d’évitement précédant directement la zone dans l’ordre du code source ;
   • soit peut être atteinte au moyen d’un lien d’accès rapide soit visible par défaut, soit visible à la prise de focus lors d’une tabulation.
3. Si c’est le cas pour chaque zone de regroupement de contenus, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 1.3.1 Information et relations (A), 2.4.1 Contourner des blocs (A), 4.1.2 Nom, rôle et valeur (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : ARIA4, ARIA11, G115, H69.
• EN 301 549 V3.2.1 (2021-03) : 9.1.3.1 Info and relationships, 9.2.4.1 Bypass blocks, 9.4.1.2 Name, role, value.

Test 12.7.1 Dans chaque page web, un lien permet-il d’éviter la zone de contenu principal ou d’y accéder (hors cas particuliers) ?

Méthodologie du test 12.7.1

1. Retrouver dans le document la zone de contenu principal (indiquée par l’élément main visible).
2. Vérifier que la zone :
   • soit peut être évitée au moyen d’un lien d’évitement précédant directement la zone dans l’ordre du code source ;
   • soit peut être atteinte au moyen d’un lien d’accès rapide visible à la prise de focus lors d’une tabulation.
3. Si c’est le cas, le test est validé.

Test 12.7.2 Dans chaque ensemble de pages, le lien d’évitement ou d’accès rapide à la zone de contenu principal vérifie-t-il ces conditions (hors cas particuliers) ?

• Le lien est situé à la même place dans la présentation.
• Le lien se présente toujours dans le même ordre relatif dans le code source.
• Le lien est visible ou, à défaut, visible à la prise de focus.
• Le lien est fonctionnel.

Méthodologie du test 12.7.2

1. Retrouver dans le document la zone de contenu principal (indiquée par l’élément main visible).
2. Vérifier que le lien d’évitement ou d’accès rapide à la zone est :
   • situé à la même place dans la présentation ;
   • présent toujours dans le même ordre relatif dans le code source (généré côté client) ;
   • visible à la prise de focus lors d’une tabulation ;
   • fonctionnel.
3. Si c’est le cas, le test est validé.

Cas particuliers

Il existe une gestion de cas particuliers lorsque le site web est constitué d’une seule page.

Dans ce cas de figure, l’obligation de la présence d’un lien d’accès rapide est liée au contexte de la page : présence ou absence de navigation ou de contenus additionnels, par exemple. Le critère peut être considéré comme non applicable lorsqu’il est avéré qu’un lien d’accès rapide est inutile.

Correspondances

• Critères de succès WCAG 2.1 : 2.4.1 Contourner des blocs (A), 2.4.3 Parcours du focus (A), 3.2.3 Navigation cohérente (AA).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F66, G1, G59, G123, G124, SCR28.
• EN 301 549 V3.2.1 (2021-03) : 9.2.4.1 Bypass blocks, 9.2.4.3 Focus Order, 9.3.2.3 Consistent navigation.

Correspondances tests automatisés

• Règle Axe: bypass - "Page must have means to bypass repeated blocks"

Test 12.8.1 Dans chaque page web, l’ordre de tabulation dans le contenu est-il cohérent ?

Méthodologie du test 12.8.1

1. Parcourir dans le document l’ensemble des contenus au moyen de la touche de tabulation vers l’avant (touche Tab) et vers l’arrière (touches Maj+Tab).
2. Vérifier que l’ordre de déplacement du focus reste cohérent relativement au contenu considéré (par exemple, l’ordre de tabulation dans une fenêtre modale ne doit considérer que les éléments d’interface présents au sein de cette fenêtre).
3. Si c’est le cas, le test est validé.

Note : il n’est pas obligatoire que la tabulation suive l’ordre de lecture naturel (de gauche à droite et de haut en bas par exemple) tant que les éléments sont accessibles dans un ordre cohérent.

Test 12.8.2 Pour chaque script qui met à jour ou insère un contenu, l’ordre de tabulation reste-t-il cohérent ?

Méthodologie du test 12.8.2

1. Retrouver dans le document l’ensemble des contenus insérés au moyen d’un script (affichage d’éléments masqués, mise jour de contenu via AJAX par exemple).
2. Positionner la tabulation sur l’élément déclencheur et l’activer.
3. Après l’affichage du contenu mis à jour, vérifier que la tabulation reste cohérente (repositionnement correct du focus).
4. Si c’est le cas, le test est validé.

Correspondances

• Critères de succès WCAG 2.1 : 2.4.3 Parcours du focus (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : C27, F44, F85, G59, H4, SCR26, SCR27, SCR37.
• EN 301 549 V3.2.1 (2021-03) : 9.2.4.3 Focus Order.

Test 12.9.1 Dans chaque page web, chaque élément recevant le focus vérifie-t-il une de ces conditions ?

• Il est possible d’atteindre l’élément suivant ou précédent pouvant recevoir le focus avec la touche de tabulation.
• L’utilisateur est informé d’un mécanisme fonctionnel permettant d’atteindre au clavier l’élément suivant ou précédent pouvant recevoir le focus.

Méthodologie du test 12.9.1

1. Retrouver dans le document l’ensemble des éléments d’interface susceptibles de recevoir le focus (au moyen de la tabulation ou au moyen d’un script).
2. Pour chaque élément d’interface, vérifier que l’utilisateur peut atteindre l’élément suivant ou précédent pouvant recevoir le focus :
   • soit au moyen de la touche de tabulation (Tab ou Maj+Tab) ;
   • soit au moyen d’une autre interaction clavier dont l’utilisateur est informé (par exemple, les flèches de direction).
3. Si c’est le cas pour chaque élément d’interface, le test est validé.

Note : certains éléments d’interface complexes, comme un groupe de boutons radio, une liste de sélection et tous les composants développés avec WAI-ARIA font appel à des navigations optimisées qui utilisent généralement les flèches de direction pour passer d’une partie du composant à l’autre. Par exemple, dans un groupe de boutons radio les options sont navigables avec les flèches de direction. De même dans un système d’onglets l’utilisateur active les onglets avec les flèches de direction. Le test sur le piège au clavier se limite alors à vérifier que le composant est atteint avec la tabulation et qu’il est possible de passer au composant suivant ou revenir au composant précédent.

Note

Ce critère est soumis au principe de non-interférence.

Correspondances

• Critères de succès WCAG 2.1 : 2.1.1 Clavier (A), 2.1.2 Pas de piège au clavier (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F10, G21, H91.
• EN 301 549 V3.2.1 (2021-03) : 9.2.1.1 Keyboard, 9.2.1.2 No keyboard trap.

Test 12.11.1 Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ?

Méthodologie du test 12.11.1

1. Retrouver dans le document l’ensemble des contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface
2. Pour chaque contenu additionnel, s’il contient des composants d’interface avec lesquels l’utilisateur peut interagir au clavier (par exemple, une infobulle personnalisée qui propose un lien dans son contenu), vérifier que ces composants d’interface sont atteignables au clavier
3. Si c’est le cas pour chaque contenu additionnel, le test est validé.

Notes techniques

Ce critère adresse les situations où un contenu additionnel contient des composants d’interface avec lesquels il doit être possible d’interagir au clavier. Par exemple, une infobulle personnalisée qui propose un lien dans son contenu.

Correspondances

• Critères de succès WCAG 2.1 : 2.1.1 Clavier (A).
• EN 301 549 V3.2.1 (2021-03) : 9.2.1.1 Keyboard.

Test 13.1.1 Pour chaque page web, chaque procédé de rafraîchissement (balise <object>, balise <embed>, balise <svg>, balise <canvas>, balise <meta>) vérifie-t-il une de ces conditions (hors cas particuliers) ?

• L’utilisateur peut arrêter ou relancer le rafraîchissement.
• L’utilisateur peut augmenter la limite de temps entre deux rafraîchissements de dix fois, au moins.
• L’utilisateur est averti de l’imminence du rafraîchissement et dispose de vingt secondes, au moins, pour augmenter la limite de temps avant le prochain rafraîchissement.
• La limite de temps entre deux rafraîchissements est de vingt heures, au moins.

Méthodologie du test 13.1.1

1. Retrouver dans le document les rafraîchissements initiés dans le contenu par un élément <object>, <embed>, <svg>, <canvas> ou par un élément <meta http-equiv="refresh" content="[compteur]"> (dans l’élément <head> de la page).
2. Pour chaque rafraîchissement, vérifier que :
   • soit la présence d’un mécanisme permet à l’utilisateur de stopper et de relancer le rafraîchissement ;
   • soit la présence d’un mécanisme permet à l’utilisateur d’augmenter la limite de temps entre deux rafraîchissements de dix fois, au moins ;
   • soit la présence d’un mécanisme qui avertit l’utilisateur de l’imminence du rafraîchissement, laisse 20 secondes, au moins, à l’utilisateur, pour augmenter la limite de temps avant le prochain rafraîchissement ;
   • soit la limite de temps entre deux rafraîchissements est de vingt heures, au moins.
3. Si c’est le cas, le test est validé.

Test 13.1.2 Pour chaque page web, chaque procédé de redirection effectué via une balise <meta> est-il immédiat (hors cas particuliers) ?

Méthodologie du test 13.1.2

1. Retrouver dans le document une redirection automatique initiée par un élément <meta http-equiv="refresh" content="0;URL='[URL ciblée]'" />.
2. Vérifier que la redirection est immédiate.
3. Si c’est le cas, le test est validé.

Test 13.1.3 Pour chaque page web, chaque procédé de redirection effectué via un script vérifie-t-il une de ces conditions (hors cas particuliers) ?

• L’utilisateur peut arrêter ou relancer la redirection.
• L’utilisateur peut augmenter la limite de temps avant la redirection de dix fois, au moins.
• L’utilisateur est averti de l’imminence de la redirection et dispose de vingt secondes, au moins, pour augmenter la limite de temps avant la prochaine redirection.
• La limite de temps avant la redirection est de vingt heures, au moins.

Méthodologie du test 13.1.3

1. Retrouver dans le document les redirections automatiques initiées par un script (sous la forme d’un décompte par exemple).
2. Pour chaque redirection automatique, vérifier que :
   • Soit la présence d’un mécanisme permet à l’utilisateur de stopper et relancer la redirection.
   • Soit la présence d’un mécanisme permet à l’utilisateur d’augmenter la limite de temps avant le rafraîchissement de dix fois, au moins.
   • Soit la présence d’un mécanisme qui avertit l’utilisateur de l’imminence du rafraîchissement, laisse 20 secondes, au moins, à l’utilisateur, pour augmenter la limite de temps avant le prochain rafraîchissement.
   • Soit la limite de temps avant la redirection est de vingt heures, au moins.
3. Si c’est le cas, le test est validé.

Test 13.1.4 Pour chaque page web, chaque procédé limitant le temps d’une session vérifie-t-il une de ces conditions (hors cas particuliers) ?

• L’utilisateur peut supprimer la limite de temps.
• L’utilisateur peut augmenter la limite de temps.
• La limite de temps avant la fin de la session est de vingt heures au moins.

Méthodologie du test 13.1.4

1. Retrouver dans le document les procédés limitant le temps d’une session (par exemple, après une authentification).
2. Pour chaque procédé, vérifier que :
   • soit la présence d’un mécanisme permet à l’utilisateur de supprimer la limite de temps ;
   • soit la présence d’un mécanisme permet à l’utilisateur d’augmenter la limite de temps ;
   • soit la limite de temps est de vingt heures, au moins.
3. Si c’est le cas, le test est validé.

Cas particuliers

Il existe une gestion de cas particuliers lorsque la limite de temps est essentielle, notamment lorsqu’elle ne pourrait pas être supprimée sans changer fondamentalement le contenu ou les fonctionnalités liées au contenu.

Dans ces situations, le critère est non applicable. Par exemple, le rafraîchissement d’un flux RSS dans une page n’est pas une limite de temps essentielle ; le critère est applicable. En revanche, une redirection automatique qui amène vers la nouvelle version d’une page à partir d’une URL obsolète est essentielle ; le critère est non applicable.

Note

Le test 13.1.1 de ce critère est soumis au principe de non-interférence.

Correspondances

• Critères de succès WCAG 2.1 : 2.2.1 Réglage du délai (A), 2.2.2 Mettre en pause, arrêter, masquer (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F40, F41, F58, F61, G75, G76, G110, G133, G180, G186, G198, H76, SCR1, SCR16, SCR36, SVR1.
• EN 301 549 V3.2.1 (2021-03) : 9.2.2.1 Timing adjustable, 9.2.2.2 Pause, stop, hide.

Correspondances tests automatisés

• Règle Axe: meta-refresh - "Timed refresh must not exist"

Test 13.7.1 Dans chaque page web, chaque image ou élément multimédia (balise <video>, balise <img>, balise <svg>, balise <canvas>, balise <embed> ou balise <object>) qui provoque un changement brusque de luminosité ou un effet de flash vérifie-t-il une de ces conditions ?

• La fréquence de l’effet est inférieure à 3 par seconde.
• La surface totale cumulée des effets est inférieure ou égale à 21824 pixels.

Méthodologie du test 13.7.1

1. Retrouver dans le document les contenus clignotants ou qui provoquent des effets de flash de type image animée, vidéo (cf. note) ou animation (éléments <img>, <svg>, <canvas>, <embed>, <object> ou <video>).
2. Pour chaque contenu clignotant ou provoquant des effets de flash, vérifier que :
   • soit la fréquence de l’effet est inférieur à 3 par seconde ;
   • soit la surface cumulée est inférieure à 21824 pixels.
3. Si c’est le cas pour chaque contenu clignotant ou provoquant des effets de flash, le test est validé.

Note : l’évaluation de ce critère peut être complexe. Lorsque l’effet est géré par un script ou au moyen de CSS, l’analyse du code est suffisante. L’outil PEAT permet d’analyser les vidéos au format .avi, par exemple. Un exemple de vidéo ayant provoqué des crises d’épilepsie peut être consulté ici : London 2012 Olympics Seizure.

Test 13.7.2 Dans chaque page web, chaque script qui provoque un changement brusque de luminosité ou un effet de flash vérifie-t-il une de ces conditions ?

• La fréquence de l’effet est inférieure à 3 par seconde.
• La surface totale cumulée des effets est inférieure ou égale à 21824 pixels.

Méthodologie du test 13.7.2

1. Retrouver dans le document les contenus clignotants ou qui provoquent des effets de flash obtenus au moyen d’un script.
2. Pour chaque contenu clignotant ou provoquant des effets de flash, vérifier que :
   • soit la fréquence de l’effet est inférieur à 3 par seconde ;
   • soit la surface cumulée est inférieure à 21824 pixels.
3. Si c’est le cas pour chaque contenu clignotant ou provoquant des effets de flash, le test est validé.

Test 13.7.3 Dans chaque page web, chaque mise en forme CSS qui provoque un changement brusque de luminosité ou un effet de flash vérifie-t-il une de ces conditions ?

• La fréquence de l’effet est inférieure à 3 par seconde.
• La surface totale cumulée des effets est inférieure ou égale à 21824 pixels.

Méthodologie du test 13.7.3

1. Retrouver dans le document les contenus clignotants ou qui provoquent des effets de flash obtenus au moyen d’une animation CSS.
2. Pour chaque contenu clignotant ou provoquant des effets de flash, vérifier que :
   • soit la fréquence de l’effet est inférieur à 3 par seconde ;
   • soit la surface cumulée est inférieure à 21824 pixels.
3. Si c’est le cas pour chaque contenu clignotant ou provoquant des effets de flash, le test est validé.

Note

Ce critère est soumis au principe de non-interférence.

Correspondances

• Critères de succès WCAG 2.1 : 2.3.1 Pas plus de trois flashs ou sous le seuil critique (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : G15, G19, G176.
• EN 301 549 V3.2.1 (2021-03) : 9.2.3.1 Three flashes or below threshold.

Test 13.8.1 Dans chaque page web, chaque contenu en mouvement déclenché automatiquement, vérifie-t-il une de ces conditions ?

• La durée du mouvement est inférieure ou égale à 5 secondes.
• L’utilisateur peut arrêter et relancer le mouvement.
• L’utilisateur peut afficher et masquer le contenu en mouvement.
• L’utilisateur peut afficher la totalité de l’information sans le mouvement.

Méthodologie du test 13.8.1

1. Retrouver dans le document les contenus en mouvement (obtenus au moyen d’une image, d’un script ou d’un effet CSS) déclenchés automatiquement au chargement de la page ou lors de l’affichage d’un contenu (cf. note).
2. Pour chaque contenu, vérifier que :
   • soit la durée du mouvement est inférieure à 5 secondes ;
   • soit la présence d’un mécanisme (un bouton, par exemple) permet d’arrêter et de relancer le mouvement ;
   • soit la présence d’un mécanisme (un bouton, par exemple) permet de cacher et d’afficher à nouveau le contenu en mouvement ;
   • soit la présence d’un mécanisme (un bouton, par exemple) permet d’afficher la totalité du contenu sans mouvement.
3. Si c’est le cas pour chaque contenu en mouvement, le test est validé.

Test 13.8.2 Dans chaque page web, chaque contenu clignotant déclenché automatiquement, vérifie-t-il une de ces conditions ?

• La durée du clignotement est inférieure ou égale à 5 secondes.
• L’utilisateur peut arrêter et relancer le clignotement.
• L’utilisateur peut afficher et masquer le contenu clignotant.
• L’utilisateur peut afficher la totalité de l’information sans le clignotement.

Méthodologie du test 13.8.2

1. Retrouver dans le document les contenus clignotants (obtenus au moyen d’une image, d’un script ou d’un effet CSS) déclenchés automatiquement au chargement de la page ou lors de l’affichage d’un contenu (cf. note).
2. Pour chaque contenu, vérifier que :
   • soit la durée du clignotement est inférieure à 5 secondes ;
   • soit la présence d’un mécanisme (un bouton, par exemple) permet d’arrêter et de relancer le clignotement ;
   • soit la présence d’un mécanisme (un bouton, par exemple) permet de cacher et d’afficher à nouveau le contenu clignotant ;
   • soit la présence d’un mécanisme (un bouton, par exemple) permet d’afficher la totalité du contenu clignotant.
3. Si c’est le cas pour chaque contenu clignotant, le test est validé.

Note : l’arrêt ou la mise en pause d’un contenu en mouvement ou clignotant au moyen de la prise de focus (par exemple, l’effet est suspendu uniquement pendant la prise de focus) n’est pas considéré comme un procédé conforme. Dans certains cas, le mouvement ne peut pas être arrêté, par exemple dans le cas d’une barre de progression, dans ce cas, le critère est non applicable.

Note

Ce critère est soumis au principe de non-interférence.

Correspondances

• Critères de succès WCAG 2.1 : 2.2.1 Réglage du délai (A), 2.2.2 Mettre en pause, arrêter, masquer (A).
• Technique(s) suffisante(s) et/ou échec(s) WCAG 2.1 : F4, F7, F16, F47, F50, G4, G11, G152, G186, G187, G191, SCR22, SCR33, SCR36, SM11, SM12.
• EN 301 549 V3.2.1 (2021-03) : 9.2.2.1 Timing adjustable, 9.2.2.2 Pause, stop, hide.

Correspondances tests automatisés

• Règle Axe: blink - "<blink> elements are deprecated and must not be used"
• Règle Axe: marquee - "<marquee> elements are deprecated and must not be used"