Introduction

Ce document a été établi dans le cadre des ressources venant accompagner la prise en main de la version 3 du référentiel général d'accessibilité pour les administrations (RGAA 3 2017).

Il est destiné à toute personne soucieuse de vérifier la conformité d'un contenu web au RGAA 3 2017. Il s'agit d'une méthodologie de tests documentant les étapes permettant de vérifier si un critère du RGAA 3 2017 est conforme ou non. Cette méthodologie est donc à utiliser en complément du référentiel technique du RGAA et ne peut être utilisé seul.

Pour chaque critère ou test, deux méthodes au moins sont proposées, une pour Internet Explorer et une pour Firefox. Il s'agit de deux des navigateurs également inscrits dans la base de référence des tests au lecteur d'écran.

Les méthodes proposées ne sont pas les seules possibles, certains critères ou tests peuvent également être faits sur d'autres navigateurs. Un choix restreint a été fait pour limiter la longueur du document et faciliter sa lisibilité et sa prise en main.

Parce que nul ne devrait avoir à se doter de logiciels spécifiques et coûteux pour s'assurer de respecter la réglementation, tous les outils proposés pour réaliser les tests ont été choisis pour trois raisons :

  • la fiabilité des résultats et le recours fréquent par les experts du métier 
  • la facilité d'utilisation et d'exploitation des résultats, vous épargnant l'installation de logiciels complexes 
  • leur caractère gratuit, et dans la mesure du possible libre, ne vous imposant pas de recourir à l'achat d'une licence.

D'autres outils existent, libre à chacun de les tester et les utiliser.

À noter que cette méthodologie est un document d'accompagnement visant à vous aider dans l'utilisation du référentiel technique du RGAA 3 2017. Il ne dispense pas d'une lecture approfondie du référentiel technique, ni d'une formation au RGAA.

Outils

Les méthodes utilisent les outils suivants :

Feuilles CSS utilisateurs type

Pour récupérer les feuilles de styles utilisées dans certains tests de la méthodologie, téléchargez une des archives :

Note au sujet du mode CSS désactivé

La plupart des tests proposés s'effectuent en désactivant CSS. Ce mode est intéressant car il donne un accès immédiat à la structure native du contenu, à la nature réelle des éléments et aux contenus cachés. Ce mode est également idéal pour appliquer les personnalisations proposées par les barres d'outils ou via des feuilles de styles utilisateurs.

Il est néanmoins conseillé de maintenir, par exemple dans un onglet adjacent, une version CSS activé afin d'avoir accès à la version stylée de la page.

Il est possible de voir apparaître, lorsqu'on désactive CSS, des contenus ou des composants qui ne seront pas restitués. C'est le cas par exemple de composants génériques comme une fenêtre modale insérée par défaut sur toutes les pages et qui n'est utilisée qu'en cas de besoin. Cela peut-être le cas également de portion de code oublié lors de l'intégration. Dans ces cas, naturellement, les contenus ne sont pas à auditer.

Recherche d'attributs

Les recommandations HTML (HTML5, HTML4.0…) acceptent différentes écritures des attributs :

  • sans guillemets <p class=toto>
  • avec des guillemets simples <p class='toto'>
  • avec des guillemets doubles <p class="toto">

Les inspecteurs de code des navigateurs corrigent les écritures pour ne faire apparaître que des doubles guillemets. Pour cette raison, dans la méthodologie, lorsqu'il est demandé de rechercher un attribut, celui-ci est toujours écrit avec les guilemets doubles : role="application".

Mais il n'est pas exclu de rencontrer dans le code généré par les inspecteurs des attributs avec des guillemets simples ou sans guillemets.

Lorsque la méthodologie vous demande de rechercher un attribut, et si la recherche ne renvoie aucun résultat avec les doubles guillemets, il est important de rechercher avec les guillemets simples ou sans guillemets pour vous assurer du résultat de la recherche.

Images

Critère 1.1 [A] Chaque image a-t-elle une alternative textuelle ?

Tests 1.1.1, 1.1.3

Avec la WAT
  1. Dans le menu « Images », activer l'option « List images ».
  2. Tous les éléments graphiques de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
  3. Vérifier que chaque image possède un attribut alt.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Images », activer l'option « Afficher les attributs alt ».
  3. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir :
    • « img » pour afficher les balises img.
    • « input » pour afficher les balises input.
  4. Chercher dans la page les images et les boutons images dépourvus d'alternative.
  5. Si aucun résultat n'est trouvé, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Images », activer l'option « Display alt attributes ».
  3. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir img,input{border:2px solid red}
  4. Chercher dans la page les images et les boutons images dépourvus d'alternative.
  5. Si aucun résultat n'est trouvé, le test est validé.
Avec le validateur
  1. Valider le code.
  2. Vérifier que le validateur ne remonte aucune erreur due à l'absence d'un attribut alt. (Exemple : An img element must have an alt attribute, except under certain conditions.)
  3. Si c'est le cas, le test est validé.

Test 1.1.2

Avec la WAT
  1. Dans le menu « Images », activer l'option « Show image maps new window ».
  2. Une nouvelle fenêtre s'ouvre et liste toutes les images maps de la page.
  3. Vérifier que les balises area qui possèdent un attribut href, possèdent un attribut alt.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit sur la page et choisir « Examiner l'élément ».
  2. Rechercher map.
  3. Vérifier que les balises area, qui possèdent un attribut href, possèdent un attribut alt.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Faire un clic droit sur la page et choisir « Inspecter ».
  2. Rechercher map.
  3. Vérifier que les balises area, qui possèdent un attribut href, possèdent un attribut alt.
  4. Si c'est le cas, le test est validé.
Avec le validateur
  1. Valider le code.
  2. Vérifier que le validateur ne remonte aucune erreur due à l'absence d'un attribut alt sur une balise area qui possède un attribut href. (Exemple : Element area is missing required attribute alt.)
  3. Si c'est le cas, le test est validé.

Test 1.1.4

Avec la WAT
  1. Dans le menu « Images », activer l'option « Show image maps new window ».
  2. Une nouvelle fenêtre s'ouvre et liste toutes les images maps de la page.
  3. Vérifier la présence de balise img possédant un attribut ismap.
  4. Si c'est le cas, dans la page, vérifier la présence de liens pemettant d'accéder aux mêmes ressources que les zones cliquables de l'image.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit sur la page et choisir « Examiner l'élément ».
  2. Rechercher map.
  3. Vérifier la présence de balise img possédant un attribut ismap.
  4. Si c'est le cas, dans la page, vérifier la présence de liens permettant d'accéder aux mêmes ressources que les zones cliquables de l'image.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Faire un clic droit sur la page et choisir « Inspecter ».
  2. Rechercher map.
  3. Vérifier la présence de balise img possédant un attribut ismap.
  4. Si c'est le cas, dans la page, vérifier la présence de liens permettant d'accéder aux mêmes ressources que les zones cliquables de l'image.
  5. Si c'est le cas, le test est validé.

Critère 1.2 [A] Pour chaque image de décoration ayant une alternative textuelle, cette alternative est-elle vide ?

Test 1.2.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Images », activer l'option « Show images ».
  3. Dans le menu « Doc info », activer l'option « Show titles ».
  4. Pour chaque image possédant un attribut alt dépourvue de légende, vérifier :
    1. que les images de décoration ont une alternative vide (alt="") ;
    2. que les images sont dépourvues de title.
    3. que les images sont dépourvues de rôle, propriété ou état ARIA visant à les labelliser (aria-label, aria-describedby, aria-labelledby par exemple).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Images », activer l'option « Afficher les attributs alt ».
  3. Dans le menu « Infos », activer l'option « "Afficher les attributs title ».
  4. Pour chaque image dépourvue de légende, possédant un attribut alt, vérifier :
    1. que les images de décoration ont une alternative vide (alt="") ;
    2. que les images sont dépourvues de title.
    3. que les images sont dépourvues de rôle, propriété ou état ARIA visant à les labelliser (aria-label, aria-describedby, aria-labelledby par exemple).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Images », activer l'option « Display alt attributes ».
  3. Dans le menu « Information », activer l'option « Display title attributes ».
  4. Pour chaque image dépourvue de légende, possédant un attribut alt, vérifier :
    1. que les images de décoration ont une alternative vide (alt="") ;
    2. que les images sont dépourvues de title.
    3. que les images sont dépourvues de rôle, propriété ou état ARIA visant à les labelliser (aria-label, aria-describedby, aria-labelledby par exemple).
  5. Si c'est le cas, le test est validé.

Note : à la souris, il est possible de ne pas afficher les title pour améliorer l'affichage et de survoler l'image pour vérifier la présence d'un title.

Test 1.2.2

Avec la WAT
  1. Dans le menu « Images », activer l'option « Show image maps new window ».
  2. Une nouvelle fenêtre s'ouvre et liste toutes les images maps de la page.
  3. Pour chaque zone cliquable de décoration (balise area sans attribut href), vérifier :
    • que la balise area possède un attribut alt vide (alt="").
    • que la balise area est dépourvue d'attribut title.
    • que la balise area est dépourvue de rôle, propriété ou état ARIA visant à les labelliser (aria-label, aria-describedby, aria-labelledby par exemple).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir map.
  3. Repérer dans la page, les images maps, faire un clic droit et choisir « Examiner l'élément ».
  4. Pour chaque zone cliquable de décoration (balise area sans attribut href), vérifier :
    • que la balise area possède un attribut alt vide (alt="").
    • que la balise area est dépourvue d'attribut title.
    • que la balise area est dépourvue de rôle, propriété ou état ARIA visant à les labelliser (aria-label, aria-describedby, aria-labelledby par exemple).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Faire un clic droit sur la page et choisir « Inspecter ».
  3. Dans le champ de recherche, saisir area.
  4. Pour chaque zone cliquable de décoration (balise area sans attribut href), vérifier :
    • que la balise area possède un attribut alt vide (alt="").
    • que la balise area est dépourvue d'attribut title.
    • que la balise area est dépourvue de rôle, propriété ou état ARIA visant à les labelliser (aria-label, aria-describedby, aria-labelledby par exemple).
  5. Si c'est le cas, le test est validé.

Test 1.2.3

Avec la WAT
  1. Faire un clic droit sur la page et choisir « Inspecter l'élément ».
  2. Rechercher object.
  3. Pour chaque balise <object> avec l'attribut type="image" dépourvue de légende, vérifier :
    • la présence de la propriété aria-hidden="true" sur la balise <object> ;
    • l'absence de contenus textuels entre <object> et </object>;
    • l'absence d'attribut title sur la balise <object> ou l’un des ses enfants  ;
    • l'absence de rôle, propriété ou état ARIA visant à labelliser l’image (aria-label, aria-describedby, aria-labelledby par exemple) sur la balise <object> ou l’un des ses enfants.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit sur la page et choisir « Examiner l'élément ».
  2. Rechercher object.
  3. Pour chaque balise <object> avec l'attribut type="image" dépourvue de légende, vérifier :
    • la présence de la propriété aria-hidden="true" sur la balise <object> ;
    • l'absence de contenus textuels entre <object> et </object>;
    • l'absence d'attribut title sur la balise <object> ou l’un des ses enfants  ;
    • l'absence de rôle, propriété ou état ARIA visant à labelliser l’image (aria-label, aria-describedby, aria-labelledby par exemple) sur la balise <object> ou l’un des ses enfants.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Faire un clic droit sur la page et choisir « Inspecter ».
  2. Rechercher object.
  3. Pour chaque balise <object> avec l'attribut type="image" dépourvue de légende, vérifier :
    • la présence de la propriété aria-hidden="true" sur la balise <object> ;
    • l'absence de contenus textuels entre <object> et </object>;
    • l'absence d'attribut title sur la balise <object> ou l’un des ses enfants  ;
    • l'absence de rôle, propriété ou état ARIA visant à labelliser l’image (aria-label, aria-describedby, aria-labelledby par exemple) sur la balise <object> ou l’un des ses enfants.
  4. Si c'est le cas, le test est validé.

Test 1.2.4

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir svg.
  3. Repérer les balises svg servant à insérer une image de décoration.
  4. Faire un clic droit sur l'élément et choisir « Inspecter l'élément ».
  5. Vérifier :
    1. la présence de la propriété ARIA aria-hidden="true" sur la balise svg ;
    2. l'absence de propriété ARIA (aria-label, aria-describedby, aria-labelledby…) servant à labelliser l'image sur la balise svg ou l'un de ses enfants ;
    3. que les balises title ou desc sont absentes du corps de la balise svg ou vides ;
    4. l'absence d'attribut title sur la balise svg ou l'un de ses enfants.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir svg.
  3. Repérer les balises svg servant à insérer une image de décoration.
  4. Faire un clic droit sur l'élément et choisir « Examiner l'élément ».
  5. Vérifier :
    1. la présence de la propriété aria-hidden="true" sur la balise svg ;
    2. l'absence de propriété ARIA (aria-label, aria-describedby, aria-labelledby…) servant à labelliser l'image sur la balise svg ou l'un de ses enfants ;
    3. que les balises title ou desc sont absentes du corps de la balise svg ou vides ;
    4. l'absence d'attribut title sur la balise svg ou l'un de ses enfants.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Faire un clic droit sur la page et choisir « Inspecter ».
  3. Dans le champ de recherche, saisir svg.
  4. Repérer les balises svg servant à insérer une image de décoration et vérifier :
    1. la présence de la propriété aria-hidden="true" sur la balise svg ;
    2. l'absence de propriété ARIA (aria-label, aria-describedby, aria-labelledby…) servant à labelliser l'image sur la balise svg ou l'un de ses enfants ;
    3. que les balises title ou desc sont absentes du corps de la balise svg ou vides ;
    4. l'absence d'attribut title sur la balise svg ou l'un de ses enfants.
  5. Si c'est le cas, le test est validé.

Test 1.2.5

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir canvas.
  3. Repérer les balises <canvas> dépourvues de légende, servant à insérer une image de décoration.
  4. Faire un clic droit sur l'élément et choisir « Inspecter l'élément ».
  5. Vérifier :
    • la présence de la propriété aria-hidden="true" sur la balise <canvas> ;
    • l'absence de contenus textuels entre les balises <canvas> et </canvas> ;
    • l'absence d'attribut title sur la balise <canvas> ou l’un des ses enfants ;
    • l'absence de propriété ARIA (aria-label, aria-describedby, aria-labelledby…) servant à labelliser l'image sur la balise <canvas> ou l'un de ses enfants ;
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir canvas.
  3. Repérer les balises <canvas> dépourvues de légende, servant à insérer une image de décoration.
  4. Faire un clic droit sur l'élément et choisir « Examiner l'élément ».
  5. Vérifier :
    • la présence de la propriété aria-hidden="true" sur la balise <canvas> ;
    • l'absence de contenus textuels entre les balises <canvas> et </canvas> ;
    • l'absence d'attribut title sur la balise <canvas> ou l’un des ses enfants ;
    • l'absence de propriété ARIA (aria-label, aria-describedby, aria-labelledby…) servant à labelliser l'image sur la balise <canvas> ou l'un de ses enfants ;
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles »
  2. Faire un clic droit sur la page et choisir « Inspecter ».
  3. Dans le champ de recherche, saisir canvas.
  4. Repérer les balises <canvas> dépourvues de légende, servant à insérer une image de décoration et vérifier :
    • la présence de la propriété aria-hidden="true" sur la balise <canvas> ;
    • l'absence de contenus textuels entre les balises <canvas> et </canvas> ;
    • l'absence d'attribut title sur la balise <canvas> ou l’un des ses enfants ;
    • l'absence de propriété ARIA (aria-label, aria-describedby, aria-labelledby…) servant à labelliser l'image sur la balise <canvas> ou l'un de ses enfants ;
  5. Si c'est le cas, le test est validé.

Test 1.2.6

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir embed.
  3. Repérer les balises <embed> avec l'attribut type="image/..." dépourvues de légende, servant à insérer une image de décoration.
  4. Faire un clic droit sur l'élément et choisir « Inspecter l'élément ».
  5. Vérifier :
    • la présence de la propriété ARIA aria-hidden="true" sur la balise <embed> ;
    • l'absence d'attribut title sur la balise <embed> ou l’un des ses enfants ;
    • l'absence de propriété ARIA (aria-label, aria-describedby, aria-labelledby…) servant à labelliser l'image sur la balise <embed> ou l'un de ses enfants.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir embed.
  3. Repérer les balises <embed> avec l'attribut type="image/..." dépourvues de légende, servant à insérer une image de décoration.
  4. Faire un clic droit sur l'élément et choisir « Examiner l'élément ».
  5. Vérifier :
    • la présence de la propriété aria-hidden="true" sur la balise <embed> ;
    • l'absence d'attribut title sur la balise <embed> ou l’un des ses enfants ;
    • l'absence de propriété ARIA (aria-label, aria-describedby, aria-labelledby…) servant à labelliser l'image sur la balise <embed> ou l'un de ses enfants.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Faire un clic droit sur la page et choisir « Inspecter ».
  3. Dans le champ de recherche, saisir embed.
  4. Repérer les balises <embed> avec l'attribut type="image/..." dépourvues de légende, servant à insérer une image de décoration et vérifier :
    • la présence de la propriété aria-hidden="true" sur la balise <embed> ;
    • l'absence d'attribut title sur la balise <embed> ou l’un des ses enfants ;
    • l'absence de propriété ARIA (aria-label, aria-describedby, aria-labelledby…) servant à labelliser l'image sur la balise <embed> ou l'un de ses enfants.
  5. Si c'est le cas, le test est validé.

Note technique au sujet du role="presentation"

Critère 1.3 [A] Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?

Tests 1.3.1, 1.3.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Images », activer les options « Show images » et Active images.
  3. Dans le menu « Doc info », activer l'option « Show titles ».
  4. Dans le menu « Structure », activer l'option « Show other element(s) », saisir a.
  5. Pour chaque image qui n'est pas un lien (non entourée), ou bouton associé à une image (input type="image") possédant un attribut alt, porteur d'information, vérifier :
    1. que l'attribut alt est pertinent ;
    2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
    3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
    4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique à l'attribut alt.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Images », activer l'option « Afficher les attributs alt ».
  3. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  4. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir a.
  5. Pour chaque image qui n'est pas un lien (non entourée) ou bouton associé à une image (input type="image") possédant un attribut alt, porteur d'information, vérifier :
    1. que l'attribut alt est pertinent ;
    2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
    3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
    4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique à l'attribut alt.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Images », activer l'option « Display alt attributes ».
  3. Dans le menu « Information », activer l'option « Display title attributes ».
  4. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir a,input{border:2px solid red}
  5. Pour chaque image qui n'est pas un lien (non entourée) ou bouton associé à une image (input type="image") possédant un attribut alt, porteur d'information, vérifier :
    1. que l'attribut alt est pertinent ;
    2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
    3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
    4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique à l'attribut alt.
  6. Si c'est le cas, le test est validé.

Test 1.3.2

Avec la WAT
  1. Dans le menu « Images », activer l'option « Show image maps new window ».
  2. Une nouvelle fenêtre s'ouvre et liste toutes les images maps de la page.
  3. Pour chaque zone cliquable porteuse d'information, balise area avec un attribut href, vérifier :
    1. que l'attribut alt est pertinent ;
    2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
    3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
    4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique à l'attribut alt.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir map.
  3. Repérer dans la page, les images maps, faire un clic droit et choisir « Examiner l'élément ».
  4. Pour chaque zone cliquable porteuse d'information, balise area avec un attribut href, vérifier :
    1. que l'attribut alt est pertinent ;
    2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
    3. que la propriété aria-label , s'il est présent, est identique à l'attribut alt ;
    4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique à l'attribut alt.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Faire un clic droit sur la page et choisir « Inspecter ».
  3. Dans le champ de recherche, saisir area.
  4. Repérer les zones cliquables, balise area avec un attribut href, porteuses d'information.
  5. Vérifier :
    1. que l'attribut alt est pertinent ;
    2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
    3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
    4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique à l'attribut alt.
  6. Si c'est le cas, le test est validé.

Test 1.3.4, 1.3.5

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir object.
  3. Repérer les balises object servant à insérer une image porteuse d'information.
  4. Faire un clic droit sur un élément juste avant ou juste après la balise <object> repérée et choisir « Inspecter l'élément », trouver la balise <object> dans le code.
  5. Si la balise possède un attribut type="image", vérifier :
    • que la balise <object> est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
    • ou qu'un mécanisme permet à l'utilisateur de remplacer l'image objet par un texte alternatif pertinent ou une image avec une alternative pertinente.
    • Si la balise possède un attribut title, vérifier :
      • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
      • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir object.
  3. Repérer les balises object servant à insérer une image porteuse d'information.
  4. Faire un clic droit sur un élément juste avant ou juste après la balise <object> repérée et choisir « Examiner l'élément », trouver la balise <object> dans le code.
  5. Si la balise possède un attribut type="image", vérifier :
    • que l'image est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
    • ou qu'un mécanisme permet à l'utilisateur de remplacer l'image objet par un texte alternatif pertinent ou une image avec une alternative pertinente.
    • Si la balise possède un attribut title, vérifier :
      • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
      • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Faire un clic droit sur la page et choisir « Inspecter ».
  3. Dans le champ de recherche, saisir object.
  4. Repérer les balises object servant à insérer une image porteuse d'information.
  5. Si la balise possède un attribut type="image", vérifier :
    • que l'image est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
    • ou qu'un mécanisme permet à l'utilisateur de remplacer l'image objet par un texte alternatif pertinent ou une image avec une alternative pertinente.
    • Si la balise possède un attribut title, vérifier :
      • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
      • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
  6. Si c'est le cas, le test est validé.

Tests 1.3.6, 1.3.7

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir embed.
  3. Repérer les balises <embed> servant à insérer une image porteuse d'information.
  4. Faire un clic droit sur un élément juste avant ou juste après la balise <embed> repérée et choisir « Inspecter l'élément », trouver la balise <embed> dans le code.
  5. Si la balise possède un attribut type="image", vérifier :
    • que la balise <embed> est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
    • ou qu'un mécanisme permet à l'utilisateur de remplacer l'image embarquée par un texte alternatif pertinent ou une image avec une alternative pertinente.
  6. Si la balise possède un attribut title, vérifier :
    • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
    • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir embed.
  3. Repérer les balises <embed> servant à insérer une image porteuse d'information.
  4. Faire un clic droit sur un élément juste avant ou juste après la balise <embed> repérée et choisir « Examiner l'élément », trouver la balise <embed> dans le code.
  5. Si la balise possède un attribut type="image", vérifier :
    • que l'image est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
    • ou qu'un mécanisme permet à l'utilisateur de remplacer l'image embarquée par un texte alternatif pertinent ou une image avec une alternative pertinente.
  6. Si la balise possède un attribut title, vérifier :
    • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
    • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Faire un clic droit sur la page et choisir « Inspecter ».
  3. Dans le champ de recherche, saisir embed .
  4. Repérer les balises <embed> servant à insérer une image porteuse d'information.
  5. Si la balise possède un attribut type="image", vérifier :
    • que l'image est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
    • ou qu'un mécanisme permet à l'utilisateur de remplacer l'image embarquée par un texte alternatif pertinent ou une image avec une alternative pertinente.
  6. Si la balise possède un attribut title, vérifier :
    • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
    • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
  7. Si c'est le cas, le test est validé.

Test 1.3.8

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir svg.
  3. Repérer les balises svg servant à insérer une image porteuse d'information.
  4. Faire un clic droit sur l'élément et choisir « Inspecter l'élément ».
  5. Vérifier :
    • la présence de la propriété ARIA role="img" sur la balise svg et :
      1. la présence d'une propriété aria-label, identique à l'attribut title s'il est présent, dont le contenu permet d'identifier la nature et la fonction de l'image ;
      2. la présence d'une balise <title>, identique à l'attribut title s'il est présent, dont le contenu permet d'identifier la nature et la fonction de l'image.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir svg.
  3. Repérer les balises svg servant à insérer une image porteuse d'information.
  4. Faire un clic droit sur un élément et choisir « Examiner l'élément ».
  5. Vérifier :
    • la présence d'un rôle img sur la balise svg et :
      1. la présence d'une propriété aria-label, identique à l'attribut title s'il est présent, dont le contenu permet d'identifier la nature et la fonction de l'image ;
      2. la présence d'une balise <title>, identique à l'attribut title s'il est présent, dont le contenu permet d'identifier la nature et la fonction de l'image.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Faire un clic droit sur la page et choisir « Inspecter ».
  3. Dans le champ de recherche, saisir svg.
  4. Repérer les balises svg servant à insérer une image porteuse d'information et vérfifier :
    • la présence d'un rôle img sur la balise svg et :
      1. la présence d'une propriété aria-label, identique à l'attribut title s'il est présent, dont le contenu permet d'identifier la nature et la fonction de l'image ;
      2. la présence d'une balise <title>, identique à l'attribut title s'il est présent, dont le contenu permet d'identifier la nature et la fonction de l'image.
  5. Si c'est le cas, le test est validé.

Test 1.3.9

Avec la WAT
  1. Dans le menu « Structure », activer l'option « Show other element(s) », saisir svg.
  2. Repérer les balises svg servant à insérer une image porteuse d'information.
  3. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir svg.
  2. Repérer les balises svg servant à insérer une image porteuse d'information.
  3. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir svg{border:2px solid red}
  2. Repérer les balises svg servant à insérer une image porteuse d'information.
  3. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  4. Si c'est le cas, le test est validé.

Tests 1.3.10, 1.3.11

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image porteuse d'information.
  4. Faire un clic droit sur l'élément et choisir « Inspecter l'élément ».
  5. Vérifier :
    • que l'alternative présente dans le corps de la balise <canvas> est pertinente ;
    • ou que l'image est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
    • ou qu'un mécanisme permet à l'utilisateur de remplacer l'image par un texte alternatif pertinent ou une image avec une alternative pertinente.
  6. Si la balise possède un attribut title, vérifier :
    • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
    • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image porteuse d'information.
  4. Faire un clic droit sur l'élément et choisir « Examiner l'élément ».
  5. Vérifier :
    • que l'alternative présente dans le corps de la balise <canvas> est pertinente ;
    • ou que l'image est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
    • ou qu'un mécanisme permet à l'utilisateur de remplacer l'image par un texte alternatif pertinent ou une image avec une alternative pertinente.
  6. Si la balise possède un attribut title, vérifier :
    • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
    • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Faire un clic droit sur la page et choisir « Inspecter ».
  3. Dans le champ de recherche, saisir canvas.
  4. Repérer les balises <canvas> servant à insérer une image porteuse d'information et vérifier :
    • que l'alternative présente dans le corps de la balise <canvas> est pertinente ;
    • ou que l'image est immédiatement suivie d'un lien adjacent permettant d'afficher une page ou un passage de texte contenant une alternative pertinente ;
    • ou qu'un mécanisme permet à l'utilisateur de remplacer l'image par un texte alternatif pertinent ou une image avec une alternative pertinente.
  5. Si la balise possède un attribut title, vérifier :
    • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
    • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
  6. Si c'est le cas, le test est validé.

Test 1.3.12

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image porteuse d'information.
  4. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image porteuse d'information.
  4. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir canvas{border:2px solid red}
  3. Repérer les balises <canvas> servant à insérer une image porteuse d'information.
  4. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  5. Si c'est le cas, le test est validé.

Test 1.3.13

Pour tous
  1. Vérifier que les alternatives détectées via les tests précédents sont courtes et concises.
  2. Si c'est le cas, le test est validé.

Note technique au sujet de l'attribut title pour des images - Note technique au sujet des balises <title> dans les images vectorielles

Critère 1.4 [A] Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?

Tests 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.4.5, 1.4.6, 1.4.7, 1.4.8

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Repérer les images utilisées comme captcha.
  3. Faire clic droit sur l'élément et activer l'option « Inspecter l'élément ».
    • Si l'élément est une image (balise img) ou bouton associé à une image (input type="image") possédant un attribut alt, vérifier :
      1. que l'attribut (alt) permet d'identifier la nature et la fonction de l'image ;
      2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
      3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
      4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique au contenu de l'attribut alt.
    • Si l'élément est une image map (balise map), pour chaque zone cliquable utilisée comme captcha, balise area avec un attribut href, vérifier :
      1. que l'attribut alt permet d'identifier la nature et la fonction de l'image ;
      2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
      3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
      4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique au contenu de l'attribut alt.
    • Si l'élément est une balise <object> ou une balise <embed>, possédant un attribut type="image", vérifier :
      1. que la balise est immédiatement suivie d’un lien adjacent permettant d’afficher une page ou un passage de texte contenant une alternative permettant de comprendre la nature et la fonction de l’image ;
      2. ou qu'un mécanisme permet à l'utilisateur de remplacer l'image objet ou embarquée par un texte alternatif ou une image avec une alternative permettant de comprendre la nature et la fonction de l’image.
      3. Si l'élément possède un attribut title, vérifier :
        • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
        • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
    • Si l'élément est une balise svg, vérifier :
      1. la présence de la propriété role="img" sur la balise svg ;
      2. la présence d'une propriété aria-label dont le contenu permet d'identifier la nature et la fonction de l'image est identique à l'attribut title s'il est présent ;
      3. la présence d'une balise <title> dont le contenu permet d'identifier la nature et la fonction de l'image est identique à l'attribut title s'il est présent.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Repérer les images utilisées comme captcha.
  3. Faire clic droit sur l'élément et activer l'option « Examiner l'élément ».
    • Si l'élément est une image (balise img) ou bouton associé à une image (input type="image") possédant un attribut alt, vérifier :
      1. que l'attribut (alt) permet d'identifier la nature et la fonction de l'image ;
      2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
      3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
      4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique au contenu de l'attribut alt.
    • Si l'élément est une image map (balise map), pour chaque zone cliquable utilisée comme captcha, balise area avec un attribut href, vérifier :
      1. que l'attribut alt permet d'identifier la nature et la fonction de l'image ;
      2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
      3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
      4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique au contenu de l'attribut alt.
    • Si l'élément est une balise <object> ou une balise <embed>, possédant un attribut type="image", vérifier :
      1. que la balise est immédiatement suivie d’un lien adjacent permettant d’afficher une page ou un passage de texte contenant une alternative permettant de comprendre la nature et la fonction de l’image ;
      2. ou qu'un mécanisme permet à l'utilisateur de remplacer l'image objet ou embarquée par un texte alternatif ou une image avec une alternative permettant de comprendre la nature et la fonction de l’image.
      3. Si l'élément possède un attribut title, vérifier :
        • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
        • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
    • Si l'élément est une balise svg, vérifier :
      1. la présence de la propriété role="img" sur la balise svg ;
      2. la présence d'une propriété aria-label dont le contenu permet d'identifier la nature et la fonction de l'image est identique à l'attribut title s'il est présent ;
      3. la présence d'une balise <title> dont le contenu permet d'identifier la nature et la fonction de l'image est identique à l'attribut title s'il est présent.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Repérer les images utilisées comme captcha.
  3. Faire clic droit sur l'élément et activer l'option « Inspecter ».
    • Si l'élément est une image (balise img) ou bouton associé à une image (input type="image") possédant un attribut alt, vérifier :
      1. que l'attribut (alt) permet d'identifier la nature et la fonction de l'image ;
      2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
      3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
      4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique au contenu de l'attribut alt.
    • Si l'élément est une image map (balise map), pour chaque zone cliquable utilisée comme captcha, balise area avec un attribut href, vérifier :
      1. que l'attribut alt permet d'identifier la nature et la fonction de l'image ;
      2. que l'attribut title, s'il est présent, est identique à l'attribut alt ;
      3. que la propriété aria-label, s'il est présent, est identique à l'attribut alt ;
      4. que le contenu du passage de texte lié via la propriété aria-labelledby, s'il est présent, est identique au contenu de l'attribut alt.
    • Si l'élément est une balise <object> ou une balise <embed>, possédant un attribut type="image", vérifier :
      1. que la balise est immédiatement suivie d’un lien adjacent permettant d’afficher une page ou un passage de texte contenant une alternative permettant de comprendre la nature et la fonction de l’image ;
      2. ou qu'un mécanisme permet à l'utilisateur de remplacer l'image objet ou embarquée par un texte alternatif ou une image avec une alternative permettant de comprendre la nature et la fonction de l’image.
      3. Si l'élément possède un attribut title, vérifier :
        • que la propriété aria-label, s'il est présent, est identique à l'attribut title ;
        • que le passage de texte référencé par la propriété aria-labelledby, si elle est présente, est identique à l'attribut title.
    • Si l'élément est une balise svg, vérifier :
      1. la présence de la propriété role="img" sur la balise svg ;
      2. la présence d'une propriété aria-label dont le contenu permet d'identifier la nature et la fonction de l'image est identique à l'attribut title s'il est présent ;
      3. la présence d'une balise <title> dont le contenu permet d'identifier la nature et la fonction de l'image est identique à l'attribut title s'il est présent.
  4. Si c'est le cas, le test est validé.

Test 1.4.9

Avec la WAT
  1. Dans le menu « Structure », activer l'option « Show other element(s) », saisir svg.
  2. Repérer les balises svg servant à insérer une image utilisée comme captcha.
  3. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir svg.
  2. Repérer les balises svg servant à insérer une image utilisée comme captcha.
  3. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir svg{border:2px solid red}
  2. Repérer les balises svg servant à insérer une image utilisée comme captcha.
  3. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  4. Si c'est le cas, le test est validé.

Test 1.4.10

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image utilisée comme captcha.
  4. Faire un clic droit sur l'élément et choisir « Inspecter l'élément » et vérifier :
    • que l'alternative présente dans le corps de la balise <canvas> permet d'identifier la nature et la fonction de l'image ;
    • ou que la balise <canvas> est immédiatement suivie d’un lien adjacent permettant d’afficher une page ou un passage de texte contenant une alternative permettant de comprendre la nature et la fonction de l’image ;
    • ou qu'un mécanisme permet à l’utilisateur de remplacer l’image contenue dans la balise <canvas> par un texte alternatif permettant de comprendre la nature et la fonction de l’image ;
    • ou qu'un mécanisme permet à l’utilisateur de remplacer l’image contenue dans la balise <canvas> par une image possédant une alternative permettant de comprendre la nature et la fonction de l’image.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image utilisée comme captcha.
  4. Faire un clic droit sur l'élément et choisir « Examiner l'élément » et vérifier :
    • que l'alternative présente dans le corps de la balise <canvas> permet d'identifier la nature et la fonction de l'image ;
    • ou que la balise <canvas> est immédiatement suivie d’un lien adjacent permettant d’afficher une page ou un passage de texte contenant une alternative permettant de comprendre la nature et la fonction de l’image ;
    • ou qu'un mécanisme permet à l’utilisateur de remplacer l’image contenue dans la balise <canvas> par un texte alternatif permettant de comprendre la nature et la fonction de l’image ;
    • ou qu'un mécanisme permet à l’utilisateur de remplacer l’image contenue dans la balise <canvas> par une image possédant une alternative permettant de comprendre la nature et la fonction de l’image.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles »
  2. Faire un clic droit sur la page et choisir « Inspecter »
  3. Dans le champ de recherche, saisir canvas.
  4. Repérer les balises <canvas> servant à insérer une image utilisée comme captcha.
  5. Pour chacune, vérifier :
    • que l'alternative présente dans le corps de la balise <canvas> permet d'identifier la nature et la fonction de l'image ;
    • ou que la balise <canvas> est immédiatement suivie d’un lien adjacent permettant d’afficher une page ou un passage de texte contenant une alternative permettant de comprendre la nature et la fonction de l’image ;
    • ou qu'un mécanisme permet à l’utilisateur de remplacer l’image contenue dans la balise <canvas> par un texte alternatif permettant de comprendre la nature et la fonction de l’image ;
    • ou qu'un mécanisme permet à l’utilisateur de remplacer l’image contenue dans la balise <canvas> par une image possédant une alternative permettant de comprendre la nature et la fonction de l’image.
  6. Si c'est le cas, le test est validé.

Test 1.4.11

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image utilisée comme captcha
  4. Si la balise possède une propriété aria-label, vérifier que le contenu de l’attribut title est identique au contenu de la propriété aria-label
  5. Si la balise possède une propriété aria-labelledby, vérifier que le contenu de l’attribut title est identique au contenu de la propriété aria-labelledby
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image utilisée comme captcha
  4. Si la balise possède une propriété aria-label, vérifier que le contenu de l’attribut title est identique au contenu de la propriété aria-label
  5. Si la balise possède une propriété aria-labelledby, vérifier que le contenu de l’attribut title est identique au contenu de la propriété aria-labelledby
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Faire un clic droit sur la page et choisir « Inspecter »
  3. Dans le champ de recherche, saisir canvas.
  4. Repérer les balises <canvas> servant à insérer une image utilisée comme captcha.
  5. Si la balise possède une propriété aria-label, vérifier que le contenu de l’attribut title est identique au contenu de la propriété aria-label.
  6. Si la balise possède une propriété aria-labelledby, vérifier que le contenu de l’attribut title est identique au contenu de la propriété aria-labelledby.
  7. Si c'est le cas, le test est validé.

Test 1.4.12

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image utilisée comme captcha.
  4. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir canvas.
  3. Repérer les balises <canvas> servant à insérer une image utilisée comme captcha.
  4. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir canvas{border:2px solid red}
  3. Repérer les balises <canvas> servant à insérer une image utilisée comme captcha.
  4. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que l'alternative est correctement restituée.
  5. Si c'est le cas, le test est validé.

Critère 1.5 [A] Pour chaque image utilisée comme CAPTCHA, une solution d’accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?

Tests 1.5.1, 1.5.2

Pour tous
  1. Pour chaque image (balises img, area, object, <embed>, svg, <canvas>) ou bouton associé à une image (type="image") utilisé comme captcha, vérifier :
    • la présence d'une alternative non graphique à l'image captcha ;
    • ou la présence d'un moyen alternatif qui permet d'accéder à la fonctionnalité sécurisée par le captcha.
  2. Si c'est le cas, le test est validé.

Critère 1.6 [A] Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?

Tests 1.6.1, 1.6.2, 1.6.3, 1.6.4, 1.6.5, 1.6.6, 1.6.8

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Repérer les images qui nécessitent une description détaillée.
  3. Faire clic droit sur l'élément et activer l'option « Inspecter l'élément ».
    • Si l'image est insérée avec une balise img, vérifier :
      • la présence d'un attribut (longdesc) qui donne l'adresse (URL) d'une page contenant la description détaillée ;
      • ou que l'attribut alt contient la référence à une description détaillée adjacente à l'image ;
      • ou qu'il existe un lien adjacent (via une URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
    • Si l'image est un bouton associé à une image (input type="image", vérifier :
      • que l'attribut alt contient la référence à une description détaillée adjacente à l'image ;
      • ou la présence d'une propriété aria-describedby référençant un passage de texte faisant office de description détaillée (sélectionner le champ et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte est unique et qu'il correspond à la propriété aria-describedby de l'image) ;
      • ou qu'il existe un lien adjacent (via une URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
    • Si l'image est une balise <object> ou <embed>, possédant l'attribut type="image", vérifier :
      • qu'il existe un lien adjacent (via une URL ou une ancre) permettant d'accéder au contenu de la description détaillée ;
      • ou qu'existe une description détaillée clairement identifiable adjacente à l'image objet.
    • Si l'image est une image vectorielle balise svg, vérifier :
      • la présence d'une propriété aria-label contenant une référence à une description détaillée adjacente à l'image vectorielle ;
      • ou la présence d'une balise <title> contenant une référence à une description détaillée adjacente à l'image vectorielle ;
      • ou la présence d'une balise desc contenant une description détaillée ;
      • ou qu'il existe un lien adjacent (via une balise URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
    • Si l'image est une image bitmap balise <canvas>, vérifier :
      • la présence d'un passage de texte, dans le corps de la balise <canvas> contenant une référence à une description détaillée adjacente à l'image bitmap ;
      • ou qu'il existe un contenu textuel, dans le corps de la balise <canvas> faisant office de description détaillée ;
      • ou qu'il existe un lien adjacent (via une balise URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Repérer les images qui nécessitent une description détaillée.
  3. Faire clic droit sur l'élément et activer l'option « Examiner l'élément » :
    • Si l'image est une image (balise img), vérifier :
      • la présence d'un attribut (longdesc) qui donne l'adresse (URL) d'une page contenant la description détaillée ;
      • ou que l'attribut alt contient la référence à une description détaillée adjacente à l'image ;
      • ou qu'il existe un lien adjacent (via une URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
    • Si l'image est un bouton associé à une image (input type="image", vérifier :
      • que l'attribut alt contient la référence à une description détaillée adjacente à l'image ;
      • ou la présence d'une propriété aria-describedby référençant un passage de texte faisant office de description détaillée (sélectionner l'image, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte est unique et qu'il correspond à la propriété aria-describedby de l'image) ;
      • ou qu'il existe un lien adjacent (via une URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
    • Si l'image est une balise <object> ou <embed>, possédant l'attribut type="image", vérifier :
      • qu'il existe un lien adjacent (via une URL ou une ancre) permettant d'accéder au contenu de la description détaillée ;
      • ou qu'existe une description détaillée clairement identifiable adjacente à l'image objet.
    • Si l'image est une image vectorielle balise svg, vérifier :
      • la présence d'une propriété aria-label contenant une référence à une description détaillée adjacente à l'image vectorielle ;
      • ou la présence d'une balise <title> contenant une référence à une description détaillée adjacente à l'image vectorielle ;
      • ou la présence d'une balise desc contenant une description détaillée ;
      • ou qu'il existe un lien adjacent (via une balise URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
    • Si l'image est une image bitmap balise <canvas>, vérifier :
      • la présence d'un passage de texte, dans le corps de la balise <canvas> contenant une référence à une description détaillée adjacente à l'image bitmap ;
      • ou qu'il existe un contenu textuel, dans le corps de la balise <canvas> faisant office de description détaillée ;
      • ou qu'il existe un lien adjacent (via une balise URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Repérer les images qui nécessitent une description détaillée.
  3. Faire clic droit sur l'élément et activer l'option « Inspecter » :
    • Si l'image est une image (balise img), vérifier :
      • la présence d'un attribut (longdesc) qui donne l'adresse (URL) d'une page contenant la description détaillée ;
      • ou que l'attribut alt contient la référence à une description détaillée adjacente à l'image ;
      • ou qu'il existe un lien adjacent (via une URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
    • Si l'image est un bouton associé à une image (input type="image", vérifier :
      • que l'attribut alt contient la référence à une description détaillée adjacente à l'image ;
      • ou la présence d'une propriété aria-describedby référençant un passage de texte faisant office de description détaillée (sélectionner l'image, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte est unique et qu'il correspond à la propriété aria-describedby de l'image)
      • ou qu'il existe un lien adjacent (via une URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
    • Si l'image est une balise <object> ou <embed>, possédant l'attribut type="image", vérifier :
      • qu'il existe un lien adjacent (via une URL ou une ancre) permettant d'accéder au contenu de la description détaillée ;
      • ou qu'existe une description détaillée clairement identifiable adjacente à l'image objet.
    • Si l'image est une image vectorielle balise svg, vérifier :
      • la présence d'une propriété aria-label contenant une référence à une description détaillée adjacente à l'image vectorielle ;
      • ou la présence d'une balise <title> contenant une référence à une description détaillée adjacente à l'image vectorielle ;
      • ou la présence d'une balise desc contenant une description détaillée ;
      • ou qu'il existe un lien adjacent (via une balise URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
    • Si l'image est une image bitmap balise <canvas>, vérifier :
      • la présence d'un passage de texte, dans le corps de la balise <canvas> contenant une référence à une description détaillée adjacente à l'image bitmap ;
      • ou qu'il existe un contenu textuel, dans le corps de la balise <canvas> faisant office de description détaillée ;
      • ou qu'il existe un lien adjacent (via une balise URL ou une ancre) permettant d'accéder au contenu de la description détaillée.
  4. Si c'est le cas, le test est validé.

Test 1.6.7

Avec la WAT
  1. Dans le menu « Structure », activer l'option « Show other element(s) », saisir svg.
  2. Repérer les balises svg qui implémentent une référence à une description détaillée adjacente via une propriété aria-label ou une balise desc.
  3. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que la référence à une description détaillée adjacente est correctement restituée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir svg.
  2. Repérer les balises svg qui implémentent une référence à une description détaillée adjacente via une propriété aria-label ou une balise desc.
  3. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que la référence à une description détaillée adjacente est correctement restituée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir svg{border:2px solid red}
  2. Repérer les balises svg qui implémentent une référence à une description détaillée adjacente via une propriété aria-label ou une balise desc.
  3. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que la référence à une description détaillée adjacente est correctement restituée.
  4. Si c'est le cas, le test est validé.

Test 1.6.9

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir canvas.
  3. Repérer les balises <canvas> qui implémentent une référence à une description détaillée adjacente.
  4. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que la référence à une description détaillée adjacente est correctement restituée.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir canvas.
  3. Repérer les balises <canvas> qui implémentent une référence à une description détaillée adjacente.
  4. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que la référence à une description détaillée adjacente est correctement restituée.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir canvas{border:2px solid red}
  3. Repérer les balises <canvas> qui implémentent une référence à une description détaillée adjacente.
  4. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier que la référence à une description détaillée adjacente est correctement restituée.
  5. Si c'est le cas, le test est validé.

Note technique au sujet des images vectorielles et de l’utilisation de la propriété aria-describedby.

Critère 1.7 [A] Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente 

Tests 1.7.1, 1.7.2, 1.7.3, 1.7.4, 1.7.5, 1.7.7

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Repérer les images qui nécessitent une description détaillée.
  3. Faire clic droit sur l'élément et activer l'option « Inspecter l'élément » :
    • Si l'image est une image (balise img), vérifier :
      • si l'attribut longdesc est présent, que la description détaillée accessible via l'adresse référencée dans l'attribut est pertinente ;
      • si une description détaillée dans la page est signalée dans l'attribut alt, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
    • Si l'image est un bouton associé à une image (input type="image"), vérifier :
      • si une description détaillée dans la page est signalée dans l'attribut alt, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
    • Si l'image est une balise <object> ou <embed>, possédant l'attribut type="image", vérifier :
      • si une description détaillée est adjacente à l'image objet, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
      • si la propriété aria-describedby référence une description détaillée, que la description détaillée est pertinente.
    • Si l'image est une image vectorielle balise svg, vérifier :
      • si une description détaillée est adjacente à l'image vectorielle, que la description détaillée est pertinente ;
      • si la balise desc contient une description détaillée, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
    • Si l'image est une image bitmap balise <canvas>, vérifier :
      • si une description détaillée est adjacente à l'image, que la description détaillée est pertinente ;
      • si une description détaillée est contenue dans le corps de la balise <canvas>, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Repérer les images qui nécessitent une description détaillée.
  3. Faire clic droit sur l'élément et activer l'option « Examiner l'élément » :
    • Si l'image est une image (balise img), vérifier :
      • si l'attribut longdesc est présent, que la description détaillée accessible via l'adresse référencée dans l'attribut est pertinente ;
      • si une description détaillée dans la page est signalée dans l'attribut alt, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
    • Si l'image est un bouton associé à une image (input type="image"), vérifier :
      • si une description détaillée dans la page est signalée dans l'attribut alt, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
    • Si l'image est une balise <object> ou <embed>, possédant l'attribut type="image", vérifier :
      • si une description détaillée est adjacente à l'image objet, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
      • si la propriété aria-describedby référence une description détaillée, que la description détaillée est pertinente.
    • Si l'image est une image vectorielle balise svg, vérifier :
      • si une description détaillée est adjacente à l'image vectorielle, que la description détaillée est pertinente ;
      • si la balise desc contient une description détaillée, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
    • Si l'image est une image bitmap balise <canvas>, vérifier :
      • si une description détaillée est adjacente à l'image, que la description détaillée est pertinente ;
      • si une description détaillée est contenue dans le corps de la balise <canvas>, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Repérer les images qui nécessitent une description détaillée.
  3. Faire clic droit sur l'élément et activer l'option « Inspecter » :
    • Si l'image est une image (balise img), vérifier :
      • si l'attribut longdesc est présent, que la description détaillée accessible via l'adresse référencée dans l'attribut est pertinente ;
      • si une description détaillée dans la page est signalée dans l'attribut alt, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
    • Si l'image est un bouton associé à une image (input type="image"), vérifier :
      • si une description détaillée dans la page est signalée dans l'attribut alt, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
    • Si l'image est une balise <object> ou <embed>, possédant l'attribut type="image", vérifier :
      • si une description détaillée est adjacente à l'image objet, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
      • si la propriété aria-describedby référence une description détaillée, que la description détaillée est pertinente.
    • Si l'image est une image vectorielle balise svg, vérifier :
      • si une description détaillée est adjacente à l'image vectorielle, que la description détaillée est pertinente ;
      • si la balise desc contient une description détaillée, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
    • Si l'image est une image bitmap balise <canvas>, vérifier :
      • si une description détaillée est adjacente à l'image, que la description détaillée est pertinente ;
      • si une description détaillée est contenue dans le corps de la balise <canvas>, que la description détaillée est pertinente ;
      • si une description détaillée est consultable via un lien adjacent, que la description détaillée est pertinente.
  4. Si c'est le cas, le test est validé.

Tests 1.7.6, 1.7.8

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Repérer les images qui possèdent une description détaillée (voir méthode décrite ci-avant sur la présence des descriptions détaillées).
  3. Faire clic droit sur l'élément et activer l'option « Inspecter l'élément ».
  4. Si l'image est une image vectorielle (balise svg ou image bitmap <canvas>), avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier : que l'alternative est correctement restituée.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Repérer les images qui possèdent une description détaillée (voir méthode décrite ci-avant sur la présence des descriptions détaillées).
  3. Faire clic droit sur l'élément et activer l'option « Examiner l'élément ».
  4. Si l'image est une image vectorielle (balise svg ou image bitmap <canvas>), avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier : que l'alternative est correctement restituée.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Repérer les images qui possèdent une description détaillée (voir méthode décrite ci-avant sur la présence des descriptions détaillées).
  3. Faire clic droit sur l'élément et activer l'option « Inspecter ».
  4. Si l'image est une image vectorielle (balise svg ou image bitmap <canvas>), avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'à l'image et vérifier : que l'alternative est correctement restituée.
  5. Si c'est le cas, le test est validé.

Critère 1.8 [AA] Chaque image texte porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?

Tests 1.8.1, 1.8.2, 1.8.3, 1.8.4, 1.8.5

Pour tous
  1. Pour toutes les images textes (img, input type="image", img ou object avec l'attribut usemap, object type="image", embed type="image", <canvas>) vérifier :
    • qu'il existe un mécanisme de remplacement ;
    • ou que l'image contient un texte qui fait appel à un effet graphique qui ne peut pas être reproduit en CSS.
  2. Si c'est le cas, le test est validé.

Note technique au sujet des images vectorielles de type texte

Critère 1.9 [AAA] Chaque image texte porteuse d’information, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?

Tests 1.9.1, 1.9.2, 1.9.3, 1.9.4, 1.9.5

Pour tous
  1. Pour toutes les images textes (img, input type="image", img ou object avec l'attribut usemap, object type="image", embed type="image", <canvas>) vérifier :
    • que l'image contient un texte qui fait appel à un effet graphique qui ne peut pas être reproduit en CSS.
  2. Si c'est le cas, le test est validé.

Note technique au sujet des images vectorielles de type texte

Critère 1.10 [A] Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?

Tests 1.10.1, 1.10.2, 1.10.3, 1.10.4, 1.10.5

Pour tous
  1. Pour chaque image associée à un texte adjacent faisant office de légende.
  2. Si le texte associé :
    • contient des informations sur l'image (par exemple un copyright, une date, un auteur…) ;
    • ou est destiné à compléter les informations apportées par l'image (par exemple un texte associé à une image dans une galerie d'images).
  3. Faire clic droit sur l'élément et activer l'option « Inspecter l'élément » :
    • Si l'élément qui contient l'image est une balise img, un champ input type="image", ou un élément embed type="image", vérifier :
      1. que l'image et sa légende sont contenues dans une balise figure ;
      2. que la balise figure possède une propriété ARIA role="group" ;
      3. que le contenu de l'attribut alt contient une référence à la légende adjacente (c'est-à-dire une portion de texte que l'on retrouve également dans la légende et qui peut être un terme générique comme photo, schéma, dessin, exemple…) ;
    • Si l'élément qui contient l'image est une balise <object>, vérifier :
      1. que l'image et sa légende sont contenues dans une balise figure ;
      2. que la balise figure possède une propriété ARIA role="group".
    • Si l'élément est une image vectorielle, balise svg, vérifier :
      1. que l'image et sa légende sont contenues dans une balise figure ;
      2. que la balise figure possède une propriété ARIA role="group" ;
      3. que le contenu de la propriété aria-label ou de la balise desc contient une référence à la légende adjacente (un terme générique comme photo, schéma, dessin, exemple…) ;
    • Si l'élément est une image embarquée, balise <embed>, vérifier :
      1. que l'image et sa légende sont contenues dans une balise figure ;
      2. que la balise figure possède une propriété ARIA role="group" ;
      3. que l’alternative contient une référence à la légende adjacente.
    • Si l'élément est une image bitmap, balise <canvas>, vérifier :
      1. que l'image et sa légende sont contenues dans une balise figure.
      2. que la balise figure possède une propriété ARIA role="group".
      3. que le contenu de la balise <canvas> de l'image bitmap contient une référence à la légende adjacente.
  4. Si c'est le cas, le test est validé.

Note technique au sujet des légendes d’images

Cadres

Critère 2.1 [A] Chaque cadre en ligne a-t-il un titre de cadre ?

Test 2.1.1

Avec la WAT
  1. Dans le menu « Frames », activer l'option « Frames name/title ».
  2. Dans la page qui s'affiche vérifier que chaque cadre en ligne (balise iframe) possède un attribut title.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  3. Dans le menu « Outline », activer l'option « Éléments personnalisés… », saisir iframe.
  4. Vérifier que tous les cadres en ligne ont un attribut title.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer l'option « Display title attributes ».
  3. Dans le menu « Outline », activer l'option Outline frames.
  4. Vérifier que tous les cadres en ligne ont un attribut title.
  5. Si c'est le cas, le test est validé.

Critère 2.2 [A] Pour chaque cadre en ligne ayant un titre de cadre, ce titre de cadre est-il pertinent ?

Test 2.2.1

Avec la WAT
  1. Dans le menu « Frames », activer l'option « Frames name/title ».
  2. Dans la page qui s'affiche, vérifier que le titre (attribut title) de chaque cadre en ligne (balise iframe) est pertinent.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  3. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir iframe.
  4. Vérifier que le titre (attribut title) de chaque cadre en ligne (balise iframe) est pertinent.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer l'option « Display title attributes ».
  3. Dans le menu « Outline », activer l'option Outline frames.
  4. Vérifier que le titre (attribut title) de chaque cadre en ligne (balise iframe) est pertinent.
  5. Si c'est le cas, le test est validé.

Couleurs

Critère 3.1 [A] Dans chaque page Web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

Tests 3.1.1, 3.1.2, 3.1.3, 3.1.4, 3.1.5, 3.1.6

Pour tous
  1. Dans la page, repérer les informations donnée par la couleur dans un texte, une image, un média temporel ou non temporel.
  2. Pour chacune d'elles, 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, le test est validé.

Critère 3.2 [A] Dans chaque page Web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle implémentée de façon pertinente ?

Tests 3.2.1, 3.2.2, 3.2.3, 3.2.4, 3.2.5, 3.2.6

Pour tous
  1. Dans la page, repérer les informations donnée par la couleur dans un texte, une image, un média temporel ou non temporel.
  2. Pour chaque information donnée par la couleur associée à un autre moyen de la récupérer, vérifier que cet autre moyen 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, le test est validé.

Critère 3.3 [AA] Dans chaque page Web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?

Tests 3.3.1, 3.3.2

Avec la WAT
  1. Dans le menu « Color », activer l'option « Contrast Analyser ».
  2. Repérer dans la page, les textes et les textes en image de taille agrandie (cf. note) qui pourraient poser des problèmes de contraste.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 4.5, au moins.
  5. Sinon, vérifier qu'il existe un mécanisme dans la page, qui permette à l'utilisateur d'afficher le texte avec un rapport de contraste de 4,5:1 au moins.
  6. Si c'est le cas, le test est validé.

Note : La taille de police agrandie concerne les textes dont la taille est de 120% en gras ou 150% de la taille de police par défaut.

Avec la WebDev (Firefox)
  1. Dans le menu « Outils » du navigateur, activer l'outil WCAG Contrast Checker.
  2. Repérer dans la page, les textes et les textes en image de taille agrandie (cf. note) qui pourraient poser des problèmes de contraste.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 4.5, au moins.
  5. Sinon, vérifier qu'il existe un mécanisme dans la page, qui permette à l'utilisateur d'afficher le texte avec un rapport de contraste de 4,5:1 au moins.
  6. Si c'est le cas, le test est validé.

Note : La taille de police agrandie concerne les textes dont la taille est de 120% en gras ou 150% de la taille de police par défaut.

Avec la WebDev (Chrome)
  1. Lancer l'outil Colour Contrast Analyser.
  2. Repérer dans la page, les textes et les textes en image de taille agrandie (cf. note) qui pourraient poser des problèmes de contraste.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 4.5, au moins.
  5. Sinon, vérifier qu'il existe un mécanisme dans la page, qui permette à l'utilisateur d'afficher le texte avec un rapport de contraste de 4,5:1 au moins.
  6. Si c'est le cas, le test est validé.

Note : La taille de police agrandie concerne les textes dont la taille est de 120% en gras ou 150% de la taille de police par défaut.

Tests 3.3.3, 3.3.4

Avec la WAT
  1. Dans le menu « Color » activer l'option « Contrast Analyser ».
  2. Repérer dans la page, les textes et les textes en image (textes en image et textes dans des images en propriété de fond CSS) de taille agrandie (cf. note) qui pourraient poser des problèmes de contraste.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 3, au moins.
  5. Si c'est le cas, le test est validé.

Note : La taille de police agrandie concerne les textes dont la taille est de 120% en gras ou 150% de la taille de police par défaut.

Avec la WebDev (Firefox)
  1. Dans le menu « Outils » du navigateur, activer l'outil WCAG Contrast Checker.
  2. Repérer dans la page, les textes et les textes en image de taille agrandie (cf. note) qui pourraient poser des problèmes de contraste.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 3, au moins.
  5. Si c'est le cas, le test est validé.

Note : La taille de police agrandie concerne les textes dont la taille est de 120% en gras ou 150% de la taille de police par défaut.

Avec la WebDev (Chrome)
  1. Lancer l'outil Colour Contrast Analyser.
  2. Repérer dans la page, les textes et les textes en image (textes en image et textes dans des images en propriété de fond CSS) de taille agrandie (cf. note) qui pourraient poser des problèmes de contraste.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 3, au moins.
  5. Si c'est le cas, le test est validé.

Note : La taille de police agrandie concerne les textes dont la taille est de 120% en gras ou 150% de la taille de police par défaut.

Test 3.3.5

Avec la WAT
  1. Dans le menu « Color » activer l'option « Contrast Analyser ».
  2. Repérer dans la page le mécanisme qui permet d'afficher le texte avec un rapport de contraste conforme.
  3. Si l'intitulé du mécanisme est constitué d'un texte visible uniquement, alors son contraste s'évalue avec les tests 3.3.1, 3.3.2, 3.3.3 et 3.3.4.
  4. Pour tous les autres cas, avec l'outil « Contrast Analyser », capturer les couleurs d'avant-plan et d'arrière-plan.
  5. Vérifier que la valeur de contraste est de 4.5, au moins.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « Outils » du navigateur, activer l'outil WCAG Contrast Checker.
  2. Repérer dans la page le mécanisme qui permet d'afficher le texte avec un rapport de contraste conforme.
  3. Si l'intitulé du mécanisme est constitué d'un texte visible uniquement, alors son contraste s'évalue avec les tests 3.3.1, 3.3.2, 3.3.3 et 3.3.4.
  4. Pour tous les autres cas, avec l'outil WCAG Contrast Checker, capturer les couleurs d'avant-plan et d'arrière-plan.
  5. Vérifier que la valeur de contraste est de 4.5, au moins.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Lancer l'outil Colour Contrast Analyser.
  2. Repérer dans la page le mécanisme qui permet d'afficher le texte avec un rapport de contraste conforme.
  3. Si l'intitulé du mécanisme est constitué d'un texte visible uniquement, alors son contraste s'évalue avec les tests 3.3.1, 3.3.2, 3.3.3 et 3.3.4.
  4. Pour tous les autres cas, avec l'outil Colour Contrast Analyser, capturer les couleurs d'avant-plan et d'arrière-plan.
  5. Vérifier que la valeur de contraste est de 4.5, au moins.
  6. Si c'est le cas, le test est validé.

Critère 3.4 [AAA] Dans chaque page Web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il amélioré (hors cas particuliers) ?

Tests 3.4.1, 3.4.2

Avec la WAT
  1. Dans le menu « Color » activer l'option « Contrast Analyser ».
  2. Repérer dans la page, les textes et les textes en image de taille normale (cf. note) qui pourraient poser des problèmes de contrastes.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 7, au moins.
  5. Si c'est le cas, le test est validé.

Note : La taille de police agrandie concerne les textes dont la taille est de 120% en gras ou 150% de la taille de police par défaut.

Avec la WebDev (Firefox)
  1. Dans le menu « Outils » du navigateur, activer l'outil WCAG Contrast Checker.
  2. Repérer dans la page, les textes et les textes en image de taille normale (cf. note) qui pourraient poser des problèmes de contrastes.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 7, au moins.
  5. Si c'est le cas, le test est validé.

Note : La taille de police par défaut est la taille définie par l'auteur pour le document ou, en son absence, la taille par défaut utilisée par l'agent utilisateur (ie le navigateur).

Tests 3.4.3, 3.4.4

Avec la WAT
  1. Dans le menu « Color » activer l'option « Contrast Analyser ».
  2. Repérer dans la page, les textes et les textes en image de taille agrandie (cf. note) qui pourraient poser des problèmes de contrastes.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 4.5, au moins.
  5. Si c'est le cas, le test est validé.

Note : La taille de police agrandie concerne les textes dont la taille est de 120% en gras ou 150% de la taille de police par défaut.

Avec la WebDev (Firefox)
  1. Dans le menu « Outils » du navigateur, activer l'outil WCAG Contrast Checker.
  2. Repérer dans la page, les textes et les textes en image de taille agrandie (cf. note) qui pourraient poser des problèmes de contrastes.
  3. Avec l'outil, capturer les couleurs d'avant-plan et d'arrière-plan.
  4. Vérifier que la valeur de contraste est de 4.5, au moins.
  5. Si c'est le cas, le test est validé.

Note : La taille de police agrandie concerne les textes dont la taille est de 120% en gras ou 150% de la taille de police par défaut.

Test 3.4.5

Avec la WAT
  1. Dans le menu « Color » activer l'option « Contrast Analyser ».
  2. Repérer dans la page le mécanisme qui permet d'afficher le texte avec un rapport de contraste conforme.
  3. Si l'intitulé du mécanisme est constitué d'un texte visible uniquement, alors son contraste s'évalue avec les tests 3.4.1, 3.4.2, 3.4.3 et 3.4.4.
  4. Pour tous les autres cas, avec l'outil « Contrast Analyser », capturer les couleurs d'avant-plan et d'arrière-plan.
  5. Vérifier que la valeur de contraste est de 7, au moins.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « Outils » du navigateur, activer l'outil WCAG Contrast Checker.
  2. Repérer dans la page le mécanisme qui permet d'afficher le texte avec un rapport de contraste conforme.
  3. Si l'intitulé du mécanisme est constitué d'un texte visible uniquement, alors son contraste s'évalue avec les tests 3.4.1, 3.4.2, 3.4.3 et 3.4.4.
  4. Pour tous les autres cas, avec l'outil WCAG Contrast Checker, capturer les couleurs d'avant-plan et d'arrière-plan.
  5. Vérifier que la valeur de contraste est de 7, au moins.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Lancer l'outil Colour Contrast Analyser.
  2. Repérer dans la page le mécanisme qui permet d'afficher le texte avec un rapport de contraste conforme.
  3. Si l'intitulé du mécanisme est constitué d'un texte visible uniquement, alors son contraste s'évalue avec les tests 3.4.1, 3.4.2, 3.4.3 et 3.4.4.
  4. Pour tous les autres cas, avec l'outil Colour Contrast Analyser, capturer les couleurs d'avant-plan et d'arrière-plan.
  5. Vérifier que la valeur de contraste est de 7, au moins.
  6. Si c'est le cas, le test est validé.

Multimédia

Critère 4.1 [A] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription (hors cas particuliers) ?

Test 4.1.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels (balises audio ou object) seulement audio qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une transcription textuelle accessible via un lien adjacent (une URL ou ancre).
    • ou la présence d'une transcription textuelle adjacente clairement identifiable.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels (balises audio ou object) seulement audio qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une transcription textuelle accessible via un lien adjacent (une URL ou ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels (balises audio ou object) seulement audio qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une transcription textuelle accessible via un lien adjacent (une URL ou ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable.
  4. Si c'est le cas, le test est validé.

Test 4.1.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels (balises video ou object) seulement vidéo qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une version alternative audio seulement accessible via un lien adjacent (une URL ou une ancre) ;
    • ou la présence d'une version alternative audio seulement adjacente ;
    • ou la présence d'une transcription textuelle adjacente (via une URL ou une ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable ;
    • ou la présence d'une audiodescription synchronisée ;
    • ou la présence une version alternative avec une audiodescription synchronisée accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels (balises video ou object) seulement vidéo qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une version alternative audio seulement accessible via un lien adjacent (une URL ou une ancre) ;
    • ou la présence d'une version alternative audio seulement adjacente ;
    • ou la présence d'une transcription textuelle adjacente (via une URL ou une ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable ;
    • ou la présence d'une audiodescription synchronisée ;
    • ou la présence une version alternative avec une audiodescription synchronisée accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels (balises video ou object) seulement vidéo qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une version alternative audio seulement accessible via un lien adjacent (une URL ou une ancre) ;
    • ou la présence d'une version alternative audio seulement adjacente ;
    • ou la présence d'une transcription textuelle adjacente (via une URL ou une ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable ;
    • ou la présence d'une audiodescription synchronisée ;
    • ou la présence une version alternative avec une audiodescription synchronisée accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.

Test 4.1.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels (balises video ou object) synchronisés qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une transcription textuelle accessible via un lien adjacent (une URL ou une ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable ;
    • ou la présence d'une audiodescription synchronisée ;
    • ou la présence une version alternative avec une audiodescription synchronisée accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels (balises video ou object) synchronisés qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une transcription textuelle accessible via un lien adjacent (une URL ou une ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable ;
    • ou la présence d'une audiodescription synchronisée ;
    • ou la présence une version alternative avec une audiodescription synchronisée accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels (balises video ou object) synchronisés qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une transcription textuelle accessible via un lien adjacent (une URL ou une ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable ;
    • ou la présence d'une audiodescription synchronisée ;
    • ou la présence une version alternative avec une audiodescription synchronisée accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.

Critère 4.2 [A] Pour chaque média temporel pré-enregistré ayant une transcription textuelle ou une audiodescription synchronisée, celles-ci sont-elles pertinentes (hors cas particuliers) ?

Tests 4.2.1, 4.2.2, 4.2.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les transcriptions textuelles, les versions alternatives audio seulement, les audiodescriptions synchronisées, les versions alternatives avec une audiodescription synchronisée.
  3. Vérifier :
    • que la transcription textuelle est pertinente (toutes les informations sonores ou visuelles importantes sont présentes, les dialogues et les textes incrustés notamment) ;
    • ou que la version alternative audio seulement est pertinente (toutes les informations sonores ou visuelles importantes sont présentes, les dialogues et les textes incrustés notamment) ;
    • ou que l'audiodescription synchronisée est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les transcriptions textuelles, les versions alternative audio seulement, les audiodescription synchronisées, les versions alternatives avec une audiodescription synchronisée (voir méthodologie de tests du critère 4.1).
  3. Vérifier :
    • que la transcription textuelle est pertinente (toutes les informations sonores ou visuelles importantes sont présentes, les dialogues et les textes incrustés notamment) ;
    • ou que la version alternative audio seulement est pertinente (toutes les informations sonores ou visuelles importantes sont présentes, les dialogues et les textes incrustés notamment) ;
    • ou que l'audiodescription synchronisée est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les transcriptions textuelles, les versions alternative audio seulement, les audiodescription synchronisées, les versions alternatives avec une audiodescription synchronisée (voir méthodologie de tests du critère 4.1).
  3. Vérifier :
    • que la transcription textuelle est pertinente (toutes les informations sonores ou visuelles importantes sont présentes, les dialogues et les textes incrustés notamment) ;
    • ou que la version alternative audio seulement est pertinente (toutes les informations sonores ou visuelles importantes sont présentes, les dialogues et les textes incrustés notamment) ;
    • ou que l'audiodescription synchronisée est pertinente.
  4. Si c'est le cas, le test est validé.

Critère 4.3 [A] Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ?

Test 4.3.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels synchronisés (voir méthodologie de tests du critère 4.1).
  3. Vérifier :
    • qu'il existe des sous-titres synchronisés ;
    • ou qu'il existe une version alternative possédant des sous-titres synchronisés accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels synchronisés (voir méthodologie de tests du critère 4.1).
  3. Vérifier :
    • qu'il existe des sous-titres synchronisés ;
    • ou qu'il existe une version alternative possédant des sous-titres synchronisés accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels synchronisés (voir méthodologie de tests du critère 4.1).
  3. Vérifier :
    • qu'il existe des sous-titres synchronisés ;
    • ou qu'il existe une version alternative possédant des sous-titres synchronisés accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.

Test 4.3.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir video.
  3. Dans la page, repérer les médias temporels synchronisés possédant des sous-titres synchronisés, faire un clic droit et activer l'option « Inspecter l'élément ».
  4. Vérifier que la balise track possède un attribut kind="caption".
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir video.
  3. Dans la page, repérer les médias temporels synchronisés possédant des sous-titres synchronisés, faire un clic droit et activer l'option « Examiner l'élément ».
  4. Vérifier que la balise track possède un attribut kind="caption".
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir video{border:2px solid red}
  3. Dans la page, repérer les médias temporels synchronisés possédant des sous-titres synchronisés, faire un clic droit et activer l'option « Inspecter ».
  4. Vérifier que la balise track possède un attribut kind="caption".
  5. Si c'est le cas, le test est validé.

Critère 4.4 [A] Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, ces sous-titres sont-ils pertinents ?

Test 4.4.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels synchronisés possédant des sous-titres synchronisés.
  3. Vérifier que les sous-titres sont :
    1. pertinents (toutes les informations sonores importantes sont présentes, les dialogues notamment) ;
    2. et correctement synchronisés.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels synchronisés possédant des sous-titres synchronisés.
  3. Vérifier que les sous-titres sont :
    1. pertinents (toutes les informations sonores importantes sont présentes, les dialogues notamment) ;
    2. et correctement synchronisés.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels synchronisés possédant des sous-titres synchronisés.
  3. Vérifier que les sous-titres sont :
    1. pertinents (toutes les informations sonores importantes sont présentes, les dialogues notamment) ;
    2. et correctement synchronisés.
  4. Si c'est le cas, le test est validé.

Critère 4.5 [AA] Chaque média temporel en direct a-t-il, si nécessaire, des sous-titres synchronisés ou une transcription textuelle (hors cas particuliers) ?

Tests 4.5.1, 4.5.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels, seulement audio et synchronisé, en direct qui nécessitent des sous-titres synchronisés.
  3. Vérifier :
    • qu'il existe des sous-titres synchronisés ;
    • ou qu'il existe une version alternative possédant des sous-titres synchronisés accessible via un lien adjacent (une URL ou une ancre) ;
    • ou qu'il existe une transcription textuelle accessible via un lien adjacent (une URL ou une ancre) ;
    • ou qu'il existe une transcription textuelle adjacente clairement identifiable.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisé en direct qui nécessitent des sous-titres synchronisés.
  3. Vérifier :
    • qu'il existe des sous-titres synchronisés ;
    • ou qu'il existe une version alternative possédant des sous-titres synchronisés accessible via un lien adjacent (une URL ou une ancre) ;
    • ou qu'il existe une transcription textuelle accessible via un lien adjacent (une URL ou une ancre) ;
    • ou qu'il existe une transcription textuelle adjacente clairement identifiable.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisé en direct qui nécessitent des sous-titres synchronisés.
  3. Vérifier :
    • qu'il existe des sous-titres synchronisés ;
    • ou qu'il existe une version alternative possédant des sous-titres synchronisés accessible via un lien adjacent (une URL ou une ancre) ;
    • ou qu'il existe une transcription textuelle accessible via un lien adjacent (une URL ou une ancre) ;
    • ou qu'il existe une transcription textuelle adjacente clairement identifiable.
  4. Si c'est le cas, le test est validé.

Critère 4.6 [AA] Pour chaque média temporel en direct ayant des sous-titres synchronisés ou une transcription textuelle, ceux-ci sont-ils pertinents ?

Tests 4.6.1, 4.6.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisés en direct possédant des sous-titres synchronisés.
  3. Vérifier :
    • que les sous-titres sont pertinents (toutes les informations sonores importantes sont présentes, les dialogues notamment) et correctement synchronisés ;
    • ou que la transcription textuelle est pertinente (toutes les informations sonores et visuelles sont présentes, les dialogues et les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisés en direct possédant des sous-titres synchronisés.
  3. Vérifier :
    • que les sous-titres sont pertinents (toutes les informations sonores importantes sont présentes, les dialogues notamment) et correctement synchronisés ;
    • ou que la transcription textuelle est pertinente (toutes les informations sonores et visuelles sont présentes, les dialogues et les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisés en direct possédant des sous-titres synchronisés.
  3. Vérifier :
    • que les sous-titres sont pertinents (toutes les informations sonores importantes sont présentes, les dialogues notamment) et correctement synchronisés ;
    • ou que la transcription textuelle est pertinente (toutes les informations sonores et visuelles sont présentes, les dialogues et les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.

Critère 4.7 [AA] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audiodescription synchronisée (hors cas particuliers) ?

Tests 4.7.1, 4.7.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui nécessitent une audiodescription.
  3. Vérifier :
    • la présence d'une audiodescription synchronisée ;
    • ou la présence d'une version alternative avec une audiodescription synchronisée accessible.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui nécessitent une audiodescription.
  3. Vérifier :
    • la présence d'une audiodescription synchronisée ;
    • ou la présence d'une version alternative avec une audiodescription synchronisée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui nécessitent une audiodescription.
  3. Vérifier :
    • la présence d'une audiodescription synchronisée ;
    • ou la présence d'une version alternative avec une audiodescription synchronisée.
  4. Si c'est le cas, le test est validé.

Critère 4.8 [AA] Pour chaque média temporel pré-enregistré ayant une audiodescription synchronisée, celle-ci est-elle pertinente ?

Tests 4.8.1, 4.8.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui possèdent une audiodescription.
  3. Vérifier que l'audiodescription synchronisée est pertinente (toutes les informations visuelles qu'il est possible de vocaliser dans les blancs de la bande son principale sont présentes, les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui possèdent une audiodescription.
  3. Vérifier que l'audiodescription synchronisée est pertinente (toutes les informations visuelles qu'il est possible de vocaliser dans les blancs de la bande son principale sont présentes, les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui possèdent une audiodescription.
  3. Vérifier que l'audiodescription synchronisée est pertinente (toutes les informations visuelles qu'il est possible de vocaliser dans les blancs de la bande son principale sont présentes, les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.

Critère 4.9 [AAA] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une interprétation en langue des signes (hors cas particuliers) ?

Tests 4.9.1, 4.9.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisés qui nécessitent une interprétation en langue des signes.
  3. Vérifier :
    1. la présence d'une interprétation en langue des signes accessible via un lien adjacent (une URL ou une ancre) ;
    2. que la langue des signes est adaptée à la langue du média.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisés qui nécessitent une interprétation en langue des signes.
  3. Vérifier :
    1. la présence d'une interprétation en langue des signes ;
    2. que la langue des signes est adaptée à la langue du média.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisés qui nécessitent une interprétation en langue des signes.
  3. Vérifier :
    1. la présence d'une interprétation en langue des signes ;
    2. que la langue des signes est adaptée à la langue du média.
  4. Si c'est le cas, le test est validé.

Critère 4.10 [AAA] Pour chaque média temporel pré-enregistré ayant une interprétation en langue des signes, celle-ci est-elle pertinente ?

Tests 4.10.1, 4.10.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisés qui possèdent une interprétation en langue des signes.
  3. Vérifier que l'interprétation en langue des signes est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisés qui possèdent une interprétation en langue des signes.
  3. Vérifier que l'interprétation en langue des signes est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement audio et synchronisés qui possèdent une interprétation en langue des signes.
  3. Vérifier que l'interprétation en langue des signes est pertinente.
  4. Si c'est le cas, le test est validé.

Critère 4.11 [AAA] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audiodescription étendue synchronisée (hors cas particuliers) ?

Tests 4.11.1, 4.11.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui nécessitent une audiodescription étendue.
  3. Vérifier :
    • la présence d'une audiodescription étendue synchronisée ;
    • ou la présence d'une version alternative avec une audiodescription étendue synchronisée accessible via un lien adjacent (une URL ou une ancre).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui nécessitent une audiodescription.
  3. Vérifier :
    • la présence d'une audiodescription étendue synchronisée ;
    • ou la présence d'une version alternative avec une audiodescription étendue synchronisée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui nécessitent une audiodescription.
  3. Vérifier :
    • la présence d'une audiodescription étendue synchronisée ;
    • ou la présence d'une version alternative avec une audiodescription étendue synchronisée.
  4. Si c'est le cas, le test est validé.

Critère 4.12 [AAA] Pour chaque média temporel pré-enregistré ayant une audiodescription étendue synchronisée, celle-ci est-elle pertinente ?

Tests 4.12.1, 4.12.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui possèdent une audiodescription étendue.
  3. Vérifier que l'audiodescription étendue est pertinente (toutes les informations visuelles essentielles sont présentes, les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui possèdent une audiodescription étendue.
  3. Vérifier que l'audiodescription étendue est pertinente (toutes les informations visuelles essentielles sont présentes, les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo et synchronisés qui possèdent une audiodescription étendue.
  3. Vérifier que l'audiodescription étendue est pertinente (toutes les informations visuelles essentielles sont présentes, les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.

Critère 4.13 [AAA] Chaque média temporel synchronisé ou seulement vidéo a-t-il, si nécessaire, une transcription textuelle (hors cas particuliers) ?

Tests 4.13.1, 4.13.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement vidéo ou synchronisés qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une transcription textuelle accessible via un lien adjacent (une URL ou une ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo ou synchronisés qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une transcription textuelle accessible via un lien adjacent (une URL ou une ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo ou synchronisés qui nécessitent une transcription textuelle.
  3. Pour chacun d'eux, vérifier :
    • la présence d'une transcription textuelle accessible via un lien adjacent (une URL ou une ancre) ;
    • ou la présence d'une transcription textuelle adjacente clairement identifiable.
  4. Si c'est le cas, le test est validé.

Critère 4.14 [AAA] Pour chaque média temporel synchronisé ou seulement vidéo, ayant une transcription textuelle, celle-ci est-elle pertinente ?

Tests 4.14.1, 4.14.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement vidéo ou synchronisés qui possèdent une transcription textuelle.
  3. Pour chacun d'eux, vérifier que la transcription textuelle est pertinente (toutes les informations sonores ou visuelles importantes sont présentes, les dialogues et les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo ou synchronisés qui possèdent une transcription textuelle.
  3. Pour chacun d'eux, vérifier que la transcription textuelle est pertinente (toutes les informations sonores ou visuelles importantes sont présentes, les dialogues et les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo ou synchronisés qui possèdent une transcription textuelle.
  3. Pour chacun d'eux, vérifier que la transcription textuelle est pertinente (toutes les informations sonores ou visuelles importantes sont présentes, les dialogues et les textes incrustés notamment).
  4. Si c'est le cas, le test est validé.

Critère 4.15 [A] Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?

Tests 4.15.1, 4.15.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels seulement vidéo, audio ou synchronisés, pré-enregistrés ou en direct.
  3. Pour chacun d'eux, vérifier :
    1. qu'un passage de texte (un titre ou un paragraphe par exemple), permettant d'identifier le média temporel, le précède ou le suit immédiatement.
    2. que le passage de texte est situé à l'extérieur du lecteur de contenu multimédia si ce dernier fait appel à la technologie Flash.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo, audio ou synchronisés, pré-enregistrés ou en direct.
  3. Pour chacun d'eux, vérifier :
    1. qu'un passage de texte (un titre ou un paragraphe par exemple), permettant d'identifier le média temporel, le précède ou le suit immédiatement ;
    2. que le passage de texte est situé à l'extérieur du lecteur de contenu multimédia si ce dernier fait appel à la technologie Flash.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels seulement vidéo, audio ou synchronisés, pré-enregistrés ou en direct.
  3. Pour chacun d'eux, vérifier :
    1. qu'un passage de texte (un titre ou un paragraphe par exemple), permettant d'identifier le média temporel, le précède ou le suit immédiatement ;
    2. que le passage de texte est situé à l'extérieur du lecteur de contenu multimédia si ce dernier fait appel à la technologie Flash.
  4. Si c'est le cas, le test est validé.

Critère 4.16 [A] Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas particuliers

Tests 4.16.1, 4.16.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir object.
  3. Dans la page, repérer les médias non temporels.
  4. Pour chacun d'eux, vérifier :
    1. la présence d'un lien adjacent clairement identifiable (par exemple « alternative textuelle »), permettant d'accéder à une alternative (via une URL ou une ancre) ;
    2. que le lien est fonctionnel ;
    3. que la page ou l'alternative dans la page est accessible.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir object.
  3. Dans la page, repérer les médias non temporels.
  4. Pour chacun d'eux, vérifier :
    1. la présence d'un lien adjacent clairement identifiable (par exemple « alternative textuelle »), permettant d'accéder à une alternative (via une URL ou une ancre) ;
    2. que le lien est fonctionnel ;
    3. que la page ou l'alternative dans la page est accessible.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir object{border:2px solid red}
  3. Dans la page, repérer les médias non temporels.
  4. Pour chacun d'eux, vérifier :
    1. la présence d'un lien adjacent clairement identifiable (par exemple « alternative textuelle »), permettant d'accéder à une alternative (via une URL ou une ancre) ;
    2. que le lien est fonctionnel ;
    3. que la page ou l'alternative dans la page est accessible.
  5. Si c'est le cas, le test est validé.

Critère 4.17 [A] Pour chaque média non temporel ayant une alternative, cette alternative est-elle pertinente ?

Test 4.17.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir object.
  3. Dans la page, repérer les médias non temporels.
  4. Pour chacun d'eux, vérifier que l'alternative est pertinente (elle permet d'accéder au même contenu et à des fonctionnalités similaires).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir object.
  3. Dans la page, repérer les médias non temporels.
  4. Pour chacun d'eux, vérifier que l'alternative est pertinente (elle permet d'accéder au même contenu et à des fonctionnalités similaires).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir object{border:2px solid red}
  3. Dans la page, repérer les médias non temporels.
  4. Pour chacun d'eux, vérifier que l'alternative est pertinente (elle permet d'accéder au même contenu et à des fonctionnalités similaires).
  5. Si c'est le cas, le test est validé.

Critère 4.18 [A] Chaque son déclenché automatiquement est-il contrôlable par l’utilisateur ?

Test 4.18.1

Pour tous
  1. Au chargement de la page, si un son se déclenche automatiquement, vérifier :
    • que la séquence sonore a une durée inférieure ou égale à 3 secondes ;
    • ou qu'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 ;
    • ou que 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 : une balise audio, video, object, <embed>, bgsound ou un code JavaScript.

Critère 4.19 [AAA] Pour chaque média temporel seulement audio pré-enregistré, les dialogues sont-ils suffisamment audibles (hors cas particuliers) ?

Test 4.19.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les fichiers sons proposés au téléchargement ou via un lecteur (balises object, audio, video, <embed> ou bgsound).
  3. Pour chaque fichier son, vérifier que :
    • l'arrière-plan sonore peut être désactivé ;
    • ou que les pistes de dialogues sont 20 décibels plus élevées que l'arrière-plan sonore :
      • Enregistrer le fichier son.
      • Ouvrir le fichier son à analyser avec Audacity.
      • Les pistes s'affichent sous la forme d'un train d'onde.
      • Dans le menu déroulant (à gauche de l'affichage des pistes), activer l'option « séparer stéréo vers mono ».
      • Dans la visualisation graphique du train d'onde, sélectionner la zone à analyser.
      • Dans le menu « Analyse », activer l'option « Contraste ».
      • Dans le fenêtre qui s'ouvre, cliquer sur « Mesurer la sélection », le résultat s'affiche dans la colonne « Volume ».
      • Vérifier que le résultat est supérieur ou égal à 20 décibels au moins.
    • ou qu'il existe une version alternative pour laquelle l'arrière-plan sonore peut être désactivé, accessible directement ou via un lien adjacent (URL ou ancre) ;
    • ou qu'il existe une version alternative pour laquelle la ou les pistes de dialogues sont 20 décibels plus élevées que l'arrière-plan sonore (contrôler le niveau avec la méthode décrite ci-avant).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les fichiers sons proposés au téléchargement ou via un lecteur (balises object, audio, video, <embed> ou bgsound).
  3. Pour chaque fichier son, vérifier que :
    • l'arrière-plan sonore peut être désactivé ;
    • ou que les pistes de dialogues sont 20 décibels plus élevées que l'arrière-plan sonore :
      • Enregistrer le fichier son.
      • Ouvrir le fichier son à analyser avec Audacity.
      • Les pistes s'affichent sous la forme d'un train d'onde.
      • Dans le menu déroulant (à gauche de l'affichage des pistes), activer l'option « séparer stéréo vers mono ».
      • Dans la visualisation graphique du train d'onde, sélectionner la zone à analyser.
      • Dans le menu « Analyse », activer l'option « Contraste ».
      • Dans le fenêtre qui s'ouvre, cliquer sur « Mesurer la sélection », le résultat s'affiche dans la colonne « Volume ».
      • Vérifier que le résultat est supérieur ou égal à 20 décibels au moins.
    • ou qu'il existe une version alternative pour laquelle l'arrière-plan sonore peut être désactivé, accessible directement ou via un lien adjacent (URL ou ancre) ;
    • ou qu'il existe une version alternative pour laquelle la ou les pistes de dialogues sont 20 décibels plus élevées que l'arrière-plan sonore (contrôler le niveau avec la méthode décrite ci-avant).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les fichiers sons proposés au téléchargement ou via un lecteur (balises object, audio, video, <embed> ou bgsound).
  3. Pour chaque fichier son, vérifier que :
    • l'arrière-plan sonore peut être désactivé ;
    • ou que les pistes de dialogues sont 20 décibels plus élevées que l'arrière-plan sonore :
      • Enregistrer le fichier son.
      • Ouvrir le fichier son à analyser avec Audacity.
      • Les pistes s'affichent sous la forme d'un train d'onde.
      • Dans le menu déroulant (à gauche de l'affichage des pistes), activer l'option « séparer stéréo vers mono ».
      • Dans la visualisation graphique du train d'onde, sélectionner la zone à analyser.
      • Dans le menu « Analyse », activer l'option « Contraste ».
      • Dans le fenêtre qui s'ouvre, cliquer sur « Mesurer la sélection », le résultat s'affiche dans la colonne « Volume ».
      • Vérifier que le résultat est supérieur ou égal à 20 décibels au moins.
    • ou qu'il existe une version alternative pour laquelle l'arrière-plan sonore peut être désactivé, accessible directement ou via un lien adjacent (URL ou ancre) ;
    • ou qu'il existe une version alternative pour laquelle la ou les pistes de dialogues sont 20 décibels plus élevées que l'arrière-plan sonore (contrôler le niveau avec la méthode décrite ci-avant).
  4. Si c'est le cas, le test est validé.

Critère 4.20 [A] La consultation de chaque média temporel est-elle, si nécessaire, contrôlable par le clavier et la souris ?

Tests 4.20.1, 4.20.2, 4.20.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels (balises object, video ou audio)
  3. Vérifier :
    1. que tous les contrôles (bouton ou zone cliquable) sont atteignables avec la touche de tabulation (tab) ;
    2. que les contrôles simples (bouton et zone cliquable) sont activables au clavier avec la touche entrée (Entrée) ;
    3. que les contrôles complexes (contrôle de volume par exemple) sont utilisables avec le clavier (généralement avec les touches de direction) ;
    4. que tous les contrôles sont utilisables à la souris ;
    5. que le lecteur possède les fonctionnalités de contrôles obligatoires.
  4. Si ce n'est pas le cas, vérifier la présence dans la page, d'une fonctionnalité accessible par le clavier et la souris permettant de réaliser la même action.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels (balises object, video ou audio).
  3. Vérifier :
    1. que tous les contrôles (bouton ou zone cliquable) sont atteignables avec la touche de tabulation (tab) ;
    2. que les contrôles simples (bouton et zone cliquable) sont activables au clavier avec la touche entrée (Entrée) ;
    3. que les contrôles complexes (contrôle de volume par exemple) sont utilisables avec le clavier (généralement avec les touches de direction) ;
    4. que tous les contrôles sont utilisables à la souris ;
    5. que le lecteur possède les fonctionnalités de contrôles obligatoires.
  4. Si ce n'est pas le cas, vérifier la présence dans la page, d'une fonctionnalité accessible par le clavier et la souris permettant de réaliser la même action.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels (balises object, video ou audio).
  3. Vérifier :
    1. que tous les contrôles (bouton ou zone cliquable) sont atteignables avec la touche de tabulation (tab) ;
    2. que les contrôles simples (bouton et zone cliquable) sont activables au clavier avec la touche entrée (Entrée) ;
    3. que les contrôles complexes (contrôle de volume par exemple) sont utilisables avec le clavier (généralement avec les touches de direction) ;
    4. que tous les contrôles sont utilisables à la souris ;
    5. que le lecteur possède les fonctionnalités de contrôles obligatoires.
  4. Si ce n'est pas le cas, vérifier la présence dans la page, d'une fonctionnalité accessible par le clavier et la souris permettant de réaliser la même action.
  5. Si c'est le cas, le test est validé.

Critère 4.21 [A] La consultation de chaque média non temporel est-elle contrôlable par le clavier et la souris ?

Tests 4.21.1, 4.21.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias non temporels (balises object).
  3. Vérifier :
    1. que tous les contrôles (bouton ou zone cliquable) sont atteignables avec la touche de tabulation (tab) ;
    2. que les contrôles simples (bouton et zone cliquable) sont activables au clavier avec la touche entrée (Entrée) ;
    3. que les contrôles complexes (slider par exemple) sont utilisables avec le clavier (généralement avec les touches de direction) ;
    4. que tous les contrôles sont utilisables à la souris.
  4. Si ce n'est pas le cas, vérifier la présence dans la page, d'une fonctionnalité accessible par le clavier et la souris permettant de réaliser la même action.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias non temporels (balises object).
  3. Vérifier :
    1. que tous les contrôles (bouton ou zone cliquable) sont atteignables avec la touche de tabulation (tab).
    2. que les contrôles simples (bouton et zone cliquable) sont activables au clavier avec la touche entrée (Entrée).
    3. que les contrôles complexes (slider par exemple) sont utilisables avec le clavier (généralement avec les touches de direction).
    4. que tous les contrôles sont utilisables à la souris.
  4. Si ce n'est pas le cas, vérifier la présence dans la page, d'une fonctionnalité accessible par le clavier et la souris permettant de réaliser la même action.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias non temporels (balises object).
  3. Vérifier :
    1. que tous les contrôles (bouton ou zone cliquable) sont atteignables avec la touche de tabulation (tab).
    2. que les contrôles simples (bouton et zone cliquable) sont activables au clavier avec la touche entrée (Entrée).
    3. que les contrôles complexes (slider par exemple) sont utilisables avec le clavier (généralement avec les touches de direction).
    4. que tous les contrôles sont utilisables à la souris.
  4. Si ce n'est pas le cas, vérifier la présence dans la page, d'une fonctionnalité accessible par le clavier et la souris permettant de réaliser la même action.
  5. Si c'est le cas, le test est validé.

Critère 4.22 [A] Chaque média temporel et non temporel est-il compatible avec les technologies d’assistance (hors cas particuliers) ?

Tests 4.22.1, 4.22.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans la page, repérer les médias temporels et non temporels.
  3. Vérifier :
    1. que tous les contrôles (bouton ou zone cliquable) ont un nom pertinent ;
    2. que les contrôles à états multiples (comme un bouton lecture/pause) ont un nom cohérent avec l'état de la fonctionnalité qu'ils contrôlent ;
    3. que les zones mises à jour dynamiquement (par exemple le timecode) dans un lecteur vidéo sont correctement restituées.
  4. Si ce n'est pas le cas, vérifier :
    • la présence d'une alternative compatible avec une API d'accessibilité qui permet d'accéder aux mêmes fonctionnalités, adjacente au média ou accessible via un lien adjacent (une ancre ou une URL) ;
    • ou la présence d'un mécanisme (un bouton par exemple) permettant de remplacer le média temporel ou non temporel par sa version alternative compatible.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans la page, repérer les médias temporels et non temporels.
  3. Vérifier :
    1. que tous les contrôles (bouton ou zone cliquable) ont un nom pertinent ;
    2. que les contrôles à états multiples (comme un bouton lecture/pause) ont un nom cohérent avec l'état de la fonctionnalité qu'ils contrôlent ;
    3. que les zones mises à jour dynamiquement (par exemple le time code) dans un lecteur vidéo sont correctement restituées.
  4. Si ce n'est pas le cas, vérifier :
    • la présence d'une alternative compatible avec une API d'accessibilité qui permet d'accéder aux mêmes fonctionnalités, adjacente au média ou accessible via un lien adjacent (une ancre ou une URL) ;
    • ou la présence d'un mécanisme (un bouton par exemple) permettant de remplacer le média temporel ou non temporel par sa version alternative compatible.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans la page, repérer les médias temporels et non temporels.
  3. Vérifier :
    1. que tous les contrôles (bouton ou zone cliquable) ont un nom pertinent ;
    2. que les contrôles à états multiples (comme un bouton lecture/pause) ont un nom cohérent avec l'état de la fonctionnalité qu'ils contrôlent ;
    3. que les zones mises à jour dynamiquement (par exemple le time code) dans un lecteur vidéo sont correctement restituées.
  4. Si ce n'est pas le cas, vérifier :
    • la présence d'une alternative compatible avec une API d'accessibilité qui permet d'accéder aux mêmes fonctionnalités, adjacente au média ou accessible via un lien adjacent (une ancre ou une URL) ;
    • ou la présence d'un mécanisme (un bouton par exemple) permettant de remplacer le média temporel ou non temporel par sa version alternative compatible.
  5. Si c'est le cas, le test est validé.

Note importante : ce test réclame soit d'avoir accès aux sources du média temporel ou non temporel, soit d'utiliser un outil spécialisé qui permet d'afficher les propriétés systèmes des éléments de l'interface. Sur Windows vous pouvez utiliser l'outil Inspect qui fait partie du SDK de Windows.

Les autres systèmes d'exploitation proposent des outils similaires.

Vous pouvez également faire le test via un lecteur d'écran en notant, toutefois, que certains d'entre eux peuvent procéder à des tentatives de correction automatique qui peuvent fausser les résultats.

Tableaux

Critère 5.1 [A] Chaque tableau de données complexe a-t-il un résumé ?

Critère 5.2 [A] Pour chaque tableau de données complexe ayant un résumé, celui-ci est-il pertinent ?

Tests 5.1.1, 5.2.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Tables », activer l'option « Show data tables ».
  3. Repérer dans la page, les tableaux de données complexes.
  4. Vérifier la présence d'un passage de texte dans la balise caption permettant de comprendre la nature et la structure du tableau.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Tableaux » puis activer l'option « Tableaux » et « Légendes de tableau (Caption) ».
  3. Repérer dans la page, les tableaux de données complexes.
  4. Vérifier la présence d'un passage de texte dans la balise caption permettant de comprendre la nature et la structure du tableau.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Outline », activer l'option « Outline tables » puis activer l'option « Outline table captions ».
  3. Repérer dans la page, les tableaux de données complexes.
  4. Vérifier la présence d'un passage de texte dans la balise caption permettant de comprendre la nature et la structure du tableau.
  5. Si c'est le cas, le test est validé.

Critère 5.3 [A] Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible (hors cas particuliers) ?

Test 5.3.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Tables », activer l'option « Table cell order ».
  3. Repérer dans la page, les tableaux de mise en forme.
  4. Vérifier :
    1. que l'ordre d'accès aux cellules est cohérent avec le contenu ;
    2. la présence (faire un clic droit et choisir « Inspecter l'élément »), sur la balise table, de la propriété ARIA role="presentation".
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Tableaux » puis sélectionner l'option « Cellules de tableau ».
  3. Repérer dans la page, les tableaux de mise en forme.
  4. Vérifier :
    1. que l'ordre d'accès aux cellules est cohérent avec le contenu ;
    2. la présence (faire un clic droit et choisir « Examiner l'élément »), sur la balise table, de la propriété ARIA role="presentation".
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Outline », activer l'option « Outline table cells ».
  3. Repérer dans la page, les tableaux de mise en forme.
  4. Vérifier :
    1. que l'ordre d'accès aux cellules est cohérent avec le contenu ;
    2. la présence (faire un clic droit et choisir « Inspecter »), sur la balise table, de la propriété ARIA role="presentation".
  5. Si c'est le cas, le test est validé.

Critère 5.4 [A] Chaque tableau de données a-t-il un titre ?

Critère 5.5 [A] Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ?

Tests 5.4.1, 5.5.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Tables », activer l'option « Show data tables ».
  3. Repérer dans la page, les tableaux de données.
  4. Vérifier la présence d'une balise caption pertinente (elle contient au moins le titre du tableau).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Tableaux » puis activer l'option « Tableaux » et « Légendes de tableau (Caption) ».
  3. Repérer dans la page, les tableaux de données.
  4. Vérifier la présence d'une balise caption pertinente (elle contient au moins le titre du tableau).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Outline », activer l'option « Outline tables » puis l'option « Outline table captions ».
  3. Repérer dans la page, les tableaux de données.
  4. Vérifier la présence d'une balise caption pertinente (elle contient au moins le titre du tableau).
  5. Si c'est le cas, le test est validé.

Critère 5.6 [A] Pour chaque tableau de données, chaque en-tête de colonnes et chaque en-tête de lignes sont-ils correctement déclarés ?

Tests 5.6.1, 5.6.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Tables », activer l'option « Show data tables ».
  3. Repérer dans la page, les tableaux de données.
  4. Vérifier que les en-têtes utilisent une balise th.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir th et table.
  3. Repérer dans la page, les tableaux de données.
  4. Vérifier que les en-têtes utilisent une balise th.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Outline », activer l'option « Outline tables ».
  3. Repérer dans la page, les tableaux de données.
  4. Repérer les cellules faisant office d'en-têtes.
  5. Faire clic droit et choisir « Inspecter » pour vérifier que les en-têtes utilisent une balise th.
  6. Si c'est le cas, le test est validé.

Critère 5.7 [A] Pour chaque tableau de données, la technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée ?

Tests 5.7.1, 5.7.2, 5.7.3, 5.7.4

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Tables », activer l'option « Show data tables ».
  3. Repérer dans la page les tableaux de données.
  4. Vérifier :
    1. que les en-têtes (balise th) valables pour toute une ligne ou une colonne ont un attribut id ou scope ;
    2. que les en-têtes (balise th) qui ne sont pas valables pour toute une ligne ou une colonne ont un attribut id et sont dépourvues d'attribut scope ;
    3. que pour les en-têtes, valables pour toute une ligne, possédant un attribut scope, celui-ci à la valeur row ;
    4. que pour les en-têtes, valables pour toute une colonne, possédant un attribut scope, celui-ci à la valeur col ;
    5. que les cellules de données, liées à une ou plusieurs en-têtes possédant un attribut id, possèdent un attribut headers dont la valeur reprend le(s) id de(s) en-tête(s) liée(s).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir table.
  3. Repérer dans la page, les tableaux de données.
  4. Faire un clic droit et activer l'option « Examiner l'élément ».
  5. Vérifier :
    1. que les en-têtes (balise th) valables pour toute une ligne ou une colonne ont un attribut id ou scope ;
    2. que les en-têtes (balise th) qui ne sont pas valables pour toute une ligne ou une colonne ont un attribut id et sont dépourvues d'attribut scope ;
    3. que pour les en-têtes, valables pour toute une ligne, possédant un attribut scope, celui-ci à la valeur row ;
    4. que pour les en-têtes, valables pour toute une colonne, possédant un attribut scope, celui-ci à la valeur col ;
    5. que les cellules de données, liées à une ou plusieurs en-têtes possédant un attribut id, possèdent un attribut headers dont la valeur reprend le(s) id de(s) en-tête(s) liée(s).
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Outline », activer l'option « Outline tables ».
  3. Repérer dans la page, les tableaux de données.
  4. Faire un clic droit et activer l'option « Inspecter ».
  5. Vérifier :
    1. que les en-têtes (balise th) valables pour toute une ligne ou une colonne ont un attribut id ou scope ;
    2. que les en-têtes (balise th) qui ne sont pas valables pour toute une ligne ou une colonne ont un attribut id et sont dépourvues d'attribut scope ;
    3. que pour les en-têtes, valables pour toute une ligne, possédant un attribut scope, celui-ci à la valeur row ;
    4. que pour les en-têtes, valables pour toute une colonne, possédant un attribut scope, celui-ci à la valeur col ;
    5. que les cellules de données, liées à une ou plusieurs en-têtes possédant un attribut id, possèdent un attribut headers dont la valeur reprend le(s) id de(s) en-tête(s) liée(s).
  6. Si c'est le cas, le test est validé.

Critère 5.8 [A] Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux tableaux de données. Cette règle est-elle respectée ?

Test 5.8.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Repérer dans la page, les tableaux de mise en forme, faire un clic droit et activer l'option « Inspecter l'élément ».
  3. Vérifier :
    1. que la balise table ne possède pas de balise enfant caption, thead, th, tfoot et colgroup ;
    2. que les cellules de données td ne possèdent pas d'attribut scope, headers et axis.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Tableaux » puis l'option « Tableaux ».
  3. Repérer dans la page, les tableaux de mise en forme, faire un clic droit et activer l'option « Examiner l'élément ».
  4. Vérifier :
    1. que la balise table ne possède pas de balise enfant caption, thead, th, tfoot et colgroup ;
    2. que les cellules de données td ne possèdent pas d'attribut scope, headers et axis.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Outline », activer l'option « Outline tables ».
  3. Repérer dans la page, les tableaux de mise en forme, faire un clic droit et activer l'option « Inspecter ».
  4. Vérifier :
    1. que la balise table ne possède pas de balise enfant caption, thead, th, tfoot et colgroup ;
    2. que les cellules de données td ne possèdent pas d'attribut scope, headers et axis.
  5. Si c'est le cas, le test est validé.

Liens

Critère 6.1 [A] Chaque lien est-il explicite (hors cas particuliers) ?

Tests 6.1.1, 6.1.2, 6.1.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir a. Recommencer en saisissant svg
  3. Dans le menu « Images », activer l'option « Show images ».
  4. Dans le menu « Doc info », activer l'option « Show titles ».
  5. Pour chaque lien texte, vérifier :
    • que l'intitulé du lien seul permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  6. Pour chaque lien image (balise img ou area), vérifier :
    • que l'alternative contenue dans l'attribut alt permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  7. Pour chaque lien image object, embed ou canvas, vérifier :
    • que l'alternative contenue entre les balises (faire un clic droit et activer l'option « Inspecter l'élément ») permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  8. Pour chaque lien contenant une image vectorielle (balise svg), vérifier :
    • que la propriété aria-label ou la balise title permet de comprendre la fonction et la destination du lien (faire un clic droit et activer l'option « Inspecter l'élément ») ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  9. Pour chaque et lien composite, vérifier :
    • que l'association du texte et de l'alternative de l'image permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  10. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir a et svg.
  3. Dans le menu « Images », activer l'option « Afficher les attributs alt ».
  4. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  5. Pour chaque lien texte, vérifier :
    • que l'intitulé du lien seul permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  6. Pour chaque lien image (balise img ou area), vérifier :
    • que l'alternative contenue dans l'attribut alt permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  7. Pour chaque lien image object, embed ou canvas, vérifier :
    • que l'alternative contenue entre les balises (faire un clic droit et activer l'option « Examnier l'élément ») permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  8. Pour chaque lien contenant une image vectorielle (balise svg), vérifier :
    • que la propriété aria-label ou la balise title permet de comprendre la fonction et la destination du lien (faire un clic droit et activer l'option « Examiner l'élément ») ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  9. Pour chaque et lien composite, vérifier :
    • que l'association du texte et de l'alternative de l'image permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  10. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir a{border:2px solid red}svg{border:2px dotted green}
  3. Dans le menu « Images », activer l'option « Display alt attributes »  ».
  4. Dans le menu « Information », activer l'option « Display title attributes ».
  5. Pour chaque lien texte, vérifier :
    • que l'intitulé du lien seul permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  6. Pour chaque lien image (balise img ou area), vérifier :
    • que l'alternative contenue dans l'attribut alt permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  7. Pour chaque lien image object, embed ou canvas, vérifier :
    • que l'alternative contenue entre les balises (faire un clic droit et activer l'option « Inspecter ») permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  8. Pour chaque lien contenant une image vectorielle (balise svg), vérifier :
    • que la propriété aria-label ou la balise title permet de comprendre la fonction et la destination du lien (faire un clic droit et activer l'option « Inspecter ») ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  9. Pour chaque et lien composite, vérifier :
    • que l'association du texte et de l'alternative de l'image permet de comprendre la fonction et la destination du lien ;
    • ou que le contexte du lien permet de comprendre la fonction et la destination du lien.
  10. Si c'est le cas, le test est validé.

Note 1 : le test requiert également de vérifier les liens images, insérés via une balise <object> et les liens contenant une image insérée via la balise <canvas>. Ces types de lien sont particulièrement rares mais doivent être vérifiés, dans les mêmes conditions de test. Dans ce cas, la vérification se fait au niveau du code lui-même.

Critère 6.2 [A] Pour chaque lien ayant un titre de lien, celui-ci est-il pertinent ?

Tests 6.2.1, 6.2.2, 6.2.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir a. Recommencer en saisissant svg.
  3. Dans le menu « Images », activer l'option « Show images ».
  4. Dans le menu « Doc info », activer l'option « Show titles ».
  5. Sur la page, pour chaque lien, lien image et lien composite, vérifier que le title :
    1. n'est pas vide ;
    2. reprend l'intitulé du lien ;
    3. apporte des informations complémentaires, à l'exception des liens images sur lequel il est possible de maintenir un title strictement identique à l'intitulé.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir a et svg.
  3. Dans le menu « Images », activer l'option « Afficher les attributs alt ».
  4. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  5. Sur la page, pour chaque lien, lien image et lien composite, vérifier que le title :
    1. n'est pas vide ;
    2. reprend l'intitulé du lien ;
    3. apporte des informations complémentaires, à l'exception des liens images sur lequel il est possible de maintenir un title strictement identique à l'intitulé.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir a{border:2px solid red}svg{border:2px dotted green}
  3. Dans le menu « Images », activer l'option « Display alt attributes ».
  4. Dans le menu « Information », activer l'option « Display title attributes ».
  5. Sur la page, pour chaque lien, lien image et lien composite, vérifier que le title :
    1. n'est pas vide ;
    2. reprend l'intitulé du lien ;
    3. apporte des informations complémentaires, à l'exception des liens images sur lequel il est possible de maintenir un title strictement identique à l'intitulé.
  6. Si c'est le cas, le test est validé.

Critère 6.3 [AAA] Chaque intitulé de lien seul est-il explicite hors contexte (hors cas particuliers) ?

Tests 6.3.1, 6.3.2, 6.3.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir a.
  3. Dans le menu « Images », activer l'option « Show images ».
  4. Dans le menu « Doc info », activer l'option « Show titles ».
  5. Pour chaque lien texte, lien image (balise img ou area) et lien composite, vérifier :
    • que l'intitulé du lien seul (texte, attribut alt ou l'association des deux pour les liens composites) permet de comprendre la fonction et la destination du lien ;
    • ou la présence d'un title, sur la balise a, qui permet de comprendre la fonction et la destination du lien hors contexte ;
    • ou la présence d'un mécanisme qui permet d'obtenir un lien explicite hors contexte.
  6. Pour chaque lien contenant une image vectorielle (balise svg), faire un clic droit et activer l'option « Inspecter l'élément ». Vérifier :
    • que la propriété aria-label permet de comprendre la fonction et la destination du lien ;
    • ou la présence d'un title, sur la balise a, qui permet de comprendre la fonction et la destination du lien hors contexte ;
    • ou la présence d'un mécanisme qui permet d'obtenir un lien explicite hors contexte.
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir a et svg.
  3. Dans le menu « Images », activer l'option « Afficher les attributs alt ».
  4. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  5. Pour chaque lien texte, lien image (balise img ou area) et lien composite, vérifier :
    • que l'intitulé du lien seul (texte, attribut alt ou l'association des deux pour les liens composites) permet de comprendre la fonction et la destination du lien ;
    • ou la présence d'un title, sur la balise a, qui permet de comprendre la fonction et la destination du lien hors contexte ;
    • ou la présence d'un mécanisme qui permet d'obtenir un lien explicite hors contexte.
  6. Pour chaque lien contenant une image vectorielle (balise svg), faire un clic droit et activer l'option « Examiner L'élément ». Vérifier :
    • que la propriété aria-label permet de comprendre la fonction et la destination du lien ;
    • ou la présence d'un title, sur la balise a, qui permet de comprendre la fonction et la destination du lien hors contexte ;
    • ou la présence d'un mécanisme qui permet d'obtenir un lien explicite hors contexte.
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir a{border:2px solid red}svg{border:2px dotted green}
  3. Dans le menu « Images », activer l'option « Display alt attributes ».
  4. Dans le menu « Infos », activer l'option « Display title attributes ».
  5. Pour chaque lien texte, lien image (balise img ou area) et lien composite, vérifier :
    • que l'intitulé du lien seul (texte, attribut alt ou l'association des deux pour les liens composites) permet de comprendre la fonction et la destination du lien ;
    • ou la présence d'un title, sur la balise a, qui permet de comprendre la fonction et la destination du lien hors contexte ;
    • ou la présence d'un mécanisme qui permet d'obtenir un lien explicite hors contexte.
  6. Pour chaque lien contenant une image vectorielle (balise svg), faire un clic droit et activer l'option « Inspecter ». Vérifier :
    • que la propriété aria-label permet de comprendre la fonction et la destination du lien ;
    • ou la présence d'un title, sur la balise a, qui permet de comprendre la fonction et la destination du lien hors contexte ;
    • ou la présence d'un mécanisme qui permet d'obtenir un lien explicite hors contexte.
  7. Si c'est le cas, le test est validé.

Note 1 : le test requiert également de vérifier les liens images insérés via une balise <object> et les liens contenant une image insérée via la balise <canvas>. Ces types de liens sont particulièrement rares mais doivent être vérifiés, dans les mêmes conditions de test. Dans ce cas, la vérification se fait au niveau du code lui-même.

Critère 6.4 [A] Pour chaque page Web, chaque lien identique a-t-il les mêmes fonction et destination ?

Tests 6.4.1, 6.4.2, 6.4.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir a.
  3. Dans le menu « Images », activer l'option « Show images ».
  4. Dans le menu « Doc info », activer l'option « Show titles ».
  5. Sur la page, pour chaque lien, lien image et lien composite, vérifier que s'il existe un lien identique (intitulé + contexte), les deux liens mènent vers la même destination.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir a.
  3. Dans le menu « Images », activer l'option « Afficher les attributs alt ».
  4. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  5. Sur la page, pour chaque lien, lien image et lien composite, vérifier que s'il existe un lien identique (intitulé + contexte), les deux liens mènent vers la même destination.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir a{border:2px solid red}
  3. Dans le menu « Images », activer l'option « Display alt attributes ».
  4. Dans le menu « Information », activer l'option « Display title attributes ».
  5. Sur la page, pour chaque lien, lien image et lien composite, vérifier que s'il existe un lien identique (intitulé + contexte), les deux liens mènent vers la même destination.
  6. Si c'est le cas, le test est validé.

Note 1 : le test requiert également de vérifier les liens images insérés via une balise <object> et les liens contenant une image insérée via la balise <canvas>. Ces types de liens sont particulièrement rares mais doivent être vérifiés, dans les mêmes conditions de test. Dans ce cas, la vérification se fait au niveau du code lui-même.

Critère 6.5 [A] Dans chaque page Web, chaque lien, à l’exception des ancres, a-t-il un intitulé ?

Test 6.5.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Show other element(s) », saisir a.
  3. Dans le menu « Images », activer l'option « Show images ».
  4. Sur la page, pour chaque lien, lien-image et lien composite, vérifier que le lien contient un intitulé (texte ou alternative).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir a.
  3. Dans le menu « Images », activer l'option « Afficher les attributs alt ».
  4. Sur la page, pour chaque lien, lien-image et lien composite, vérifier que le lien contient un intitulé (texte ou alternative).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir a{border:2px solid red}
  3. Dans le menu « Images », activer l'option « Display alt attributes ».
  4. Sur la page, pour chaque lien, lien-image et lien composite, vérifier que le lien contient un intitulé (texte ou alternative).
  5. Si c'est le cas, le test est validé.

Note : Attention, un lien-image possédant un title sera considéré comme un lien vide si l'alternative de l'image n'est pas renseignée.

Scripts

Note technique au sujet des alternatives à JavaScript

Critère 7.1 [A] Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?

Test 7.1.1

Pour tous
  1. Repérer dans la page, tous les dispositifs JavaScript qui génèrent ou contrôlent un composant d'interface et qui ne font pas appel à un rôle ARIA correspondant à un motif de conception.
  2. Vérifier :
    1. que le composant possède un rôle cohérent avec son usage (généralement un bouton ou un lien) ;
    2. que le composant possède un nom explicite ;
    3. que le nom du composant est cohérent avec l'état de la fonctionnalité ou des contenus contrôlés (par exemple pour une fonctionnalité permettant d'afficher ou de masquer une zone de contenu).
  3. Sinon, vérifier :
    • la présence d'un composant d'interface accessible permettant d'accéder aux mêmes fonctionnalités ;
    • ou la présence d'une alternative accessible permettant d'accéder aux mêmes fonctionnalités.
  4. Si c'est le cas, le test est validé.

Test 7.1.2

Pour tous
  1. Repérer dans la page, toutes les fonctionnalités JavaScript qui insèrent un contenu.
  2. Vérifier que les méthodes utilisées pour l'insertion de contenu sont conformes à la spécification du DOM (par exemple que document.write n'est pas utilisé).
  3. Si c'est le cas, le test est validé.

Test 7.1.3

Pour tous
  1. Repérer dans la page, tous les dispositifs JavaScript qui génèrent, mettent à jour ou contrôlent un composant d'interface en faisant appel à un rôle ARIA correspondant à un motif de conception.
  2. Vérifier :
    • que le composant d'interface est conforme au motif de conception défini par l'API ARIA :
      1. les propriétés ARIA sont présentes et fonctionnelles ;
      2. la structure est correctement implémentée ;
      3. le comportement est correctement implémenté.
    • ou que la présence d'un composant d'interface, conforme au motif de conception défini par l'API ARIA, permet d'accéder aux mêmes fonctionnalités ;
    • ou que la présence d'un composant d'interface, adaptant un motif de conception défini par l'API ARIA, permet d'accéder aux mêmes fonctionnalités ;
    • ou que la présence d'une alternative accessible permet d'accéder aux mêmes fonctionnalités.
  3. Si c'est le cas, le test est validé.

Test 7.1.4

Avec la WAT
  1. Faire un clic droit sur la page et activer l'option « Inspecter l'élément ».
  2. Dans le champ de recherche, saisir role.
  3. Pour chaque occurrence trouvée, vérifier que l'utilisation du rôle est autorisé pour l'élément concerné, conformément aux règles définies pour la modification du rôle natif.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit sur la page et activer l'option « Examiner l'élément ».
  2. Dans le champ de recherche, saisir [role].
  3. Pour chaque occurrence trouvée, vérifier que l'utilisation du rôle est autorisé pour l'élément concerné, conformément aux règles définies pour la modification du rôle natif.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Faire un clic droit sur la page et activer l'option « Inspecter ».
  2. Dans le champ de recherche, saisir [role].
  3. Pour chaque occurrence trouvée, vérifier que l'utilisation du rôle est autorisé pour l'élément concerné, conformément aux règles définies pour la modification du rôle natif.
  4. Si c'est le cas, le test est validé.

Test 7.1.5

Pour tous
  1. Repérer dans la page tous les dispositifs JavaScript qui génèrent, mettent à jour ou contrôlent un composant d'interface.
  2. Avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'au composant et vérifier :
  3. Si c'est le cas, le test est validé.

Test 7.1.6

Avec la WAT
  1. Faire un clic droit sur la page et activer l'option « Inspecter l'élément ».
  2. Dans le champ de recherche, saisir role="application".
  3. Pour chaque occurrence trouvée, si l'élément sur lequel est implémenté le role="application" est un composant d'interface ou fait partie d'un composant d'interface, avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'au composant et vérifier que le composant est correctement restitué.
  4. Sinon, vérifier qu'une alternative accessible est présente.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit sur la page et activer l'option « Examiner l'élément ».
  2. Dans le champ de recherche, saisir [role="application"].
  3. Pour chaque occurrence trouvée, si l'élément sur lequel est implémenté le role="application" est un composant d'interface ou fait partie d'un composant d'interface, avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'au composant et vérifier que le composant est correctement restitué.
  4. Sinon, vérifier qu'une alternative accessible est présente.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Faire un clic droit sur la page et activer l'option « Inspecter ».
  2. Dans le champ de recherche, saisir [role="application"].
  3. Pour chaque occurrence trouvée, si l'élément sur lequel est implémenté le role="application" est un composant d'interface ou fait partie d'un composant d'interface, avec chacun des lecteurs d'écrans présents dans la base de référence choisie, naviguer jusqu'au composant et vérifier que le composant est correctement restitué.
  4. Sinon, vérifier qu'une alternative accessible est présente.
  5. Si c'est le cas, le test est validé.

Test 7.1.7

Pour tous
  1. Repérer dans la page, tous les dispositifs JavaScript qui génèrent ou contrôlent un composant d'interface.
  2. Pour chacun, vérifier :
    1. que le composant possède un rôle pertinent (généralement un bouton ou un lien) ;
    2. que le composant possède un nom pertinent.
  3. Si c'est le cas, le test est validé.

Critère 7.2 [A] Pour chaque script ayant une alternative, cette alternative est-elle pertinente ?

Test 7.2.1

Avec la WAT
  1. Repérer les alternatives aux fonctionnalités JavaScript :
    1. Chercher dans la page, les alternatives à un composant ou une fonctionnalité JavaScript mises à disposition.
    2. Dans le menu IE(s), activer l'option « Toggle JavaScript » et repérer dans la page, les alternatives proposées lorsque JavaScript est désactivé.
  2. Pour chacune d'elles, vérifier que l'alternative permet d'accéder aux mêmes contenus et à des fonctionnalités similaires.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Repérer les alternatives aux fonctionnalités JavaScript :
    1. Chercher dans la page, les alternatives à un composant ou une fonctionnalité JavaScript mises à disposition.
    2. Dans le menu « Désactiver », activer l'option « Désactiver JavaScript » puis activer l'option « Tout le JavaScript » et repérer dans la page les alternatives proposées lorsque JavaScript est désactivé.
  2. Pour chacune d'elles, vérifier que l'alternative permet d'accéder aux mêmes contenus et à des fonctionnalités similaires.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Repérer les alternatives aux fonctionnalités JavaScript :
    1. Chercher dans la page, les alternatives à un composant ou une fonctionnalité JavaScript mises à disposition.
    2. Dans le menu Disable, activer l'option Disable JavaScript et repérer dans la page les alternatives proposées lorsque JavaScript est désactivé.
  2. Pour chacune d'elles, vérifier que l'alternative permet d'accéder aux mêmes contenus et à des fonctionnalités similaires.
  3. Si c'est le cas, le test est validé.

Test 7.2.2

Pour tous
  1. Repérer dans la page, tous les éléments non textuels mis à jour par une fonctionnalité JavaScript.
  2. Si l'élément non textuel a une alternative, vérifier :
    1. que l'alternative est mise à jour lorsque le contenu non textuel est mis à jour ;
    2. que l'alternative mise à jour est pertinente.
  3. Si c'est le cas, le test est validé.

Critère 7.3 [A] Chaque script est-il contrôlable par le clavier et la souris (hors cas particuliers) ?

Selon la nature des composants interactifs à tester, il peut être nécessaire de faire des tests de restitution complémentaires. Pour cela, voir la note technique au sujet des interactions au clavier via l’API ARIA

Tests 7.3.1

Pour tous
  1. Repérer dans la page, tous les éléments sur lesquels est implémenté un gestionnaire d'événements JavaScript (par exemple click, focus, hover, blur, keydown, keyup…).
  2. Vérifier :
    • que l'élément est accessible par le clavier et la souris :
      1. il est atteignable avec la touche de tabulation (tab) ;
      2. si l'élément gère une action simple, il est activable au clavier avec la touche entrée (Entrée) ;
      3. si l'élément gère une action complexe, il est utilisable avec le clavier (généralement avec les touches de direction) ;
      4. l'élément est utilisable à la souris.
  3. Sinon, vérifier qu'un élément accessible par le clavier et la souris permettant de réaliser la même action est présent dans la page.
  4. Si c'est le cas, le test est validé.

Note : Avec Firefox, il est possible de repérer les éléments sur lesquels est implémenté un événement JavaScript. Via l'inspecteur : faire un clic droit sur la page et choisir « Examiner l'élément », déplier complètement le DOM, les événements sont repérés via un drapeau ev.

Test 7.3.2

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

Test 7.3.3

Pour tous
  1. Repérer dans la page, tous les dispositifs JavaScript qui génèrent, mettent à jour ou contrôlent un composant d'interface en faisant appel à un rôle ARIA correspondant à un motif de conception.
  2. Vérifier :
    • que les interactions au clavier sont correctement implémentées pour les touches Echap, tabulation, barre d'espace et les touches de direction au moins ;
    • ou la présence d'un composant d'interface, permettant de réaliser la même action, pour lequel les interactions au clavier sont correctement implémentées pour les touches Echap, tabulation, barre d'espace et les touches de direction au moins ;
    • ou la présence d'une alternative, contrôlable par le clavier et à la souris, permettant d'accéder aux mêmes fonctionnalités.
  3. Si c'est le cas, le test est validé.

Critère 7.4 [A] Pour chaque script qui initie un changement de contexte, l’utilisateur est-il averti ou en a-t-il le contrôle ?

Test 7.4.1

Pour tous
  1. Repérer dans la page, tous les événements JavaScript qui initient un changement de contexte, par exemple :
    • une mise à jour dynamique de champs de formulaire ;
    • l'ouverture d'une nouvelle page sur la sélection d'une entrée de liste select ;
    • la mise à jour, via un procédé AJAX d'une partie essentielle de la page ;
    • le lancement automatique d'un lecteur vidéo sur la sélection d'une playlist ;
    • la manipulation du focus ayant pour résultat de modifier la position courante de l'utilisateur dans la page.
  2. Vérifier :
    • que l'utilisateur est averti par un texte de l'action du script et du type de changement avant son déclenchement ;
    • ou que le changement de contexte est initié par un bouton (input de type submit, button ou image ou la balise button) explicite ;
    • ou que le changement de contexte est initié par un lien explicite.
  3. Si c'est le cas, le test est validé.

Critère 7.5 [AAA] Chaque script qui provoque une alerte non sollicitée est-il contrôlable par l’utilisateur (hors cas particuliers) ?

Test 7.5.1

Pour tous
  1. Repérer les alertes non sollicitées, par exemple l'apparition d'une fenêtre d'alerte JavaScript ou tout autre dispositif similaire.
  2. Si l'alerte ne concerne pas un cas d'urgence, un événement ou une situation soudaine et imprévue qui exige une action immédiate afin de préserver la santé, la sécurité ou la propriété, vérifier :
    1. la présence d'un mécanisme permettant à l'utilisateur de ne plus afficher l'alerte non sollicitée ;
    2. la présence d'un mécanisme permettant à l'utilisateur de réafficher l'alerte non sollicitée.
  3. Si c'est le cas, le test est validé.

Éléments obligatoires

Critère 8.1 [A] Chaque page Web est-elle définie par un type de document ?

Tests 8.1.1, 8.1.2, 8.1.3

Avec la WAT
  1. Faire un clic droit et activer l'option « Afficher la source ».
  2. Vérifier :
    1. la présence d'une balise !DOCTYPE (par exemple <!DOCTYPE html>) ;
    2. que le type de document est valide ;
    3. que la balise !DOCTYPE est placée avant la balise html.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit et activer l'option « Code source de la page ».
  2. Vérifier :
    1. la présence d'une balise !DOCTYPE (par exemple <!DOCTYPE html>).
    2. que le type de document est valide.
    3. que la balise !DOCTYPE est placée avant la balise html.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Faire un clic droit et activer l'option « Afficher le code source de la page ».
  2. Vérifier :
    1. la présence d'une balise !DOCTYPE (par exemple <!DOCTYPE html>).
    2. que le type de document est valide.
    3. que la balise !DOCTYPE est placée avant la balise html.
  3. Si c'est le cas, le test est validé.

Critère 8.2 [A] Pour chaque page Web, le code source est-il valide selon le type de document spécifié (hors cas particuliers) ?

Tests 8.2.1, 8.2.2

Avec la WAT
  1. Dans le menu « Check », activer l'option « W3C Nu markup checker (all frames) ».
  2. Dans la page de résultats, vérifier :
    1. que les balises respectent les règles d'écriture ;
    2. que l'imbrication des balises est conforme ;
    3. que l'ouverture et la fermeture des balises sont conformes ;
    4. que les attributs respectent les règles d'écriture ;
    5. que les valeurs des attributs respectent les règles d'écriture ;
    6. l'absence d'éléments obsolètes (hors cas particuliers).
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « Outils », activer l'option « Valider HTML ».
  2. Dans la page de résultat, vérifier :
    1. que les balises respectent les règles d'écriture ;
    2. que l'imbrication des balises est conforme ;
    3. que l'ouverture et la fermeture des balises sont conformes ;
    4. que les attributs respectent les règles d'écriture ;
    5. que les valeurs des attributs respectent les règles d'écriture ;
    6. l'absence d'éléments obsolètes, hors cas particuliers.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu Tools, activer l'option Validate HTML.
  2. Dans la page de résultat, vérifier :
    1. que les balises respectent les règles d'écriture ;
    2. que l'imbrication des balises est conforme ;
    3. que l'ouverture et la fermeture des balises sont conformes ;
    4. que les attributs respectent les règles d'écriture ;
    5. que les valeurs des attributs respectent les règles d'écriture ;
    6. l'absence d'éléments obsolètes, hors cas particuliers.
  3. Si c'est le cas, le test est validé.

Critère 8.3 [A] Dans chaque page Web, la langue par défaut est-elle présente ?

Critère 8.4 [A] Pour chaque page Web ayant une langue par défaut, le code de langue est-il pertinent ?

Tests 8.3.1, 8.4.1

Avec la WAT
  1. Faire un clic droit et activer l'option « Inspecter l'élément ».
  2. Vérifier :
    1. la présence d'une indication de langue :
      • via l'attribut lang sur la balise html si le code est du HTML5 ou du HTML4 ;
      • ou via les attributs lang et xml:lang sur la balise html si le code est du XHTML 1.0 ;
      • ou via l'attribut xml:lang sur la balise html si le code est du XHTML 1.1 ;
      • ou la présence d'une indication de langue sur chaque élément de texte ou l'un de ses parents.
    2. la présence d'un code de langue valide (conforme à la norme ISO 639-1 ou ISO 639-2 et suivantes) ;
    3. la présence d'un code de langue pertinent (qui indique la langue principale du document).
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit et activer l'option « Examiner l'élément ».
  2. Vérifier :
    1. la présence d'une indication de langue :
      • via l'attribut lang sur la balise html si le code est du HTML5 ou du HTML4 ;
      • ou via les attributs lang et xml:lang sur la balise html si le code est du XHTML 1.0 ;
      • ou via l'attribut xml:lang sur la balise html si le code est du XHTML 1.1 ;
      • ou la présence d'une indication de langue sur chaque élément de texte ou l'un de ses parents.
    2. la présence d'un code de langue valide (conforme à la norme ISO 639-1 ou ISO 639-2 et suivantes) ;
    3. la présence d'un code de langue pertinent (qui indique la langue principale du document).
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Faire un clic droit et activer l'option « Inspecter ».
  2. Vérifier :
    1. la présence d'une indication de langue :
      • via l'attribut lang sur la balise html si le code est du HTML5 ou du HTML4 ;
      • ou via les attributs lang et xml:lang sur la balise html si le code est du XHTML 1.0 ;
      • ou via l'attribut xml:lang sur la balise html si le code est du XHTML 1.1 ;
      • ou la présence d'une indication de langue sur chaque élément de texte ou l'un de ses parents.
    2. la présence d'un code de langue valide (conforme à la norme ISO 639-1 ou ISO 639-2 et suivantes) ;
    3. la présence d'un code de langue pertinent (qui indique la langue principale du document).
  3. Si c'est le cas, le test est validé.

Critère 8.5 [A] Chaque page Web a-t-elle un titre de page ?

Critère 8.6 [A] Pour chaque page Web ayant un titre de page, ce titre est-il pertinent ?

Tests 8.5.1, 8.6.1

Avec la WAT
  1. Faire un clic droit et activer l'option « Inspecter l'élément ».
  2. Vérifier :
    1. la présence d'une balise title ;
    2. la présence d'un titre de page (contenu de la balise title) 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é.
Avec la WebDev (Firefox)
  1. Faire un clic droit et activer l'option « Examiner l'élément ».
  2. Vérifier :
    1. la présence d'une balise title ;
    2. la présence d'un titre de page (contenu de la balise title) 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é.
Avec la WebDev (Chrome)
  1. Faire un clic droit et activer l'option « Inspecter ».
  2. Vérifier :
    1. la présence d'une balise title ;
    2. la présence d'un titre de page (contenu de la balise title) 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é.

Critère 8.7 [AA] Dans chaque page Web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?

Test 8.7.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « DocInfo », activer l'option « Show lang attributes ».
  3. Chercher les passage de texte en langue étrangère, à l'exception des :
    1. noms propres ;
    2. mots d'origine étrangère, présents dans le dictionnaire de la langue du document ;
    3. mots d'origine étrangère et d'usage courant dont la prononciation ne provoque pas d'incompréhension.
  4. Vérifier que les passages de texte possèdent une indication de langue (attribut lang et/ou xml:lang sur l'élément lui-même ou l'un de ses parents).
  5. Si c'est le cas, le test est validé.

Attention : l'option « Show lang attributes » traite également les attributs hreflang ce qui peut porter à confusion. Dans le cas des liens, il est préférable de vérifier l'attribut lang par le code source (faire un clic droit et choisir « Inspecter l'élément »).

Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis activer l'option « Tous les styles ».
  2. Chercher les passages de texte en langue étrangère, à l'exception des :
    1. noms propres ;
    2. mots d'origine étrangère, présents dans le dictionnaire de la langue du document ;
    3. mots d'origine étrangère et d'usage courant dont la prononciation ne provoque pas d'incompréhension.
  3. Faire un clic droit et activer l'option « Examiner l'élément » et vérifier que les passages de textes possèdent une indication de langue (attribut lang et/ou xml:lang sur l'élément lui-même ou l'un de ses parents).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Chercher les passages de texte en langue étrangère, à l'exception des :
    1. noms propres ;
    2. mots d'origine étrangère, présents dans le dictionnaire de la langue du document ;
    3. mots d'origine étrangère et d'usage courant dont la prononciation ne provoque pas d'incompréhension.
  3. Faire un clic droit et activer l'option « Inspecter » et vérifier que les passages de textes possèdent une indication de langue (attribut lang et/ou xml:lang sur l'élément lui-même ou l'un de ses parents).
  4. Si c'est le cas, le test est validé.

Critère 8.8 [AA] Dans chaque page Web, chaque changement de langue est-il pertinent ?

Tests 8.8.1, 8.8.2

Avec la WAT
  1. Faire un clic droit et activer l'option « Inspecter l'élément ».
  2. Dans le champ de recherche, saisir [lang].
  3. Pour chaque occurrence trouvée, vérifier :
    1. que l'indication de langue est valide ;
    2. que l'indication de langue est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit et activer l'option « Examiner l'élément ».
  2. Dans le champ de recherche, saisir [lang].
  3. Pour chaque occurrence trouvée, vérifier :
    1. que l'indication de langue est valide ;
    2. que l'indication de langue est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Faire un clic droit et activer l'option « Inspecter ».
  2. Dans le champ de recherche, saisir [lang].
  3. Pour chaque occurrence trouvée, vérifier :
    1. que l'indication de langue est valide ;
    2. que l'indication de langue est pertinente.
  4. Si c'est le cas, le test est validé.

Critère 8.9 [A] Dans chaque page Web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?

Test 8.9.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer les options Paragraphs, Q/blockquotes et Headings.
  3. Vérifier dans la page :
    • l'absence d'éléments dont l'usage est détourné pour créer un effet de présentation (cf. note) ;
    • ou (faire un clic droit et activer l'option « Inspecter l'élément ») qu'un élément utilisé uniquement à des fins de présentation possède un role="presentation" dont l'utilisation est justifiée (cf. note).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis activer l'option « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option : « Titres (H1-H6) »
  3. Dans le menu « Entourer », activer l'option : « Éléments personnalisés » et saisir p, blockquote.
  4. Vérifier dans la page :
    • l'absence d'éléments dont l'usage est détourné pour créer un effet de présentation (cf. note) ;
    • ou (faire un clic droit et activer l'option « Examiner l'élément ») qu'un élément utilisé uniquement à des fins de présentation possède un role="presentation" dont l'utilisation est justifiée (cf. note).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir p,blockquote{border:2px solid red}.
  3. Vérifier dans la page :
    • l'absence d'éléments dont l'usage est détourné pour créer un effet de présentation (cf. note) ;
    • ou (faire un clic droit et activer l'option « Inspecter ») qu'un élément utilisé uniquement à des fins de présentation possède un role="presentation" dont l'utilisation est justifiée (cf. note).
  4. Si c'est le cas, le test est validé.

Quelques exemples, non exhaustifs de détournement de balisage : un div utilisé comme paragraphe, un titre utilisé comme légende, un blockquote, des paragraphes vides, des espaces utilisés pour créer des effets de marges.

L'utilisation d'un role="presentation" est formellement déconseillée, mais peut toutefois se justifier dans de rares cas. Cela peut être acceptable sur un élément blockquote ou un paragraphe vide, mais sera considéré comme non-conforme sur un titre.

Critère 8.10 [A] Dans chaque page Web, les changements du sens de lecture sont-ils signalés ?

Test 8.10.1

Avec la WAT
  1. Repérer dans la page, les passages de textes qui utilisent une langue qui se lit dans le sens inverse de la langue du document (comme l'arabe ou l'hébreu pour le français par exemple).
  2. Faire un clic droit et activer l'option « Inspecter l'élément ».
  3. Vérifier que le passage de texte est contenu dans une balise qui possède un attribut dir.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Repérer dans la page, les passages de textes qui utilisent une langue qui se lit dans le sens inverse de la langue du document (comme l'arabe ou l'hébreu pour le français par exemple).
  2. Faire un clic droit et activer l'option « Examiner l'élément ».
  3. Vérifier que le passage de texte est contenu dans une balise qui possède un attribut dir.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Repérer dans la page, les passages de textes qui utilisent une langue qui se lit dans le sens inverse de la langue du document (comme l'arabe ou l'hébreu pour le français par exemple).
  2. Faire un clic droit et activer l'option « Inspecter ».
  3. Vérifier que le passage de texte est contenu dans une balise qui possède un attribut dir.
  4. Si c'est le cas, le test est validé.

Test 8.10.2

Avec la WAT
  1. Faire un clic droit et activer l'option « Inspecter l'élément ».
  2. Dans le champ de recherche, saisir [dir].
  3. Pour chaque occurrence trouvée, vérifier :
    • que l'indication de sens de lecture est conforme (ltr, pour le sens « de gauche à droite » et rtl pour le sens « de droite à gauche ») ;
    • que l'indication de sens de lecture est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit et activer l'option « Examiner l'élément ».
  2. Dans le champ de recherche, saisir [dir].
  3. Pour chaque occurrence trouvée, vérifier :
    • que l'indication de sens de lecture est conforme (ltr, pour le sens « de gauche à droite » et rtl pour le sens « de droite à gauche ») ;
    • que l'indication de sens de lecture est pertinente.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Faire un clic droit et activer l'option « Inspecter ».
  2. Dans le champ de recherche, saisir [dir].
  3. Pour chaque occurrence trouvée, vérifier :
    • que l'indication de sens de lecture est conforme (ltr, pour le sens « de gauche à droite » et rtl pour le sens « de droite à gauche ») ;
    • que l'indication de sens de lecture est pertinente.
  4. Si c'est le cas, le test est validé.

Structuration de l'information

Critère 9.1 [A] Dans chaque page Web, l’information est-elle structurée par l’utilisation appropriée de titres ?

Tests 9.1.1, 9.1.2, 9.1.4

Avec la WAT
  1. Dans le menu « Structure », activer l'option « Heading structure ».
  2. Dans la page qui s'affiche, vérifier :
    1. la présence d'au moins un titre h1 ;
    2. que la hiérarchie est cohérente (pas de rupture de niveau hiérarchique) ;
    3. que le titre (contenu de la balise hn) et son niveau hiérarchique sont pertinents.
  3. Sinon, sur la page :
    • Dans le menu « CSS », activer l'option « Disable CSS ».
    • Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
    • Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-heading.css.
    • Les titres hn et les éléments possédant une propriété aria-level et un rôle heading sont indiqués dans la page avec l'indication du niveau de titrage (cf. note).
    • Vérifier :
      1. la présence d'au moins un titre h1 ;
      2. que la hiérarchie est cohérente (pas de rupture de niveau hiérarchique) ;
      3. que le titre (contenu de la balise hn) et son niveau hiérarchique sont pertinents.
  4. Si c'est le cas, le test est validé.

Ne pas oublier de décocher l'utilisation de CSS utilisateur après les tests.

Avec la WebDev (Firefox)
  1. Dans le menu « Infos », activer l'option « Plan du document ».
  2. Dans la page qui s'affiche, vérifier :
    1. la présence d'au moins un titre h1 ;
    2. que la hiérarchie est cohérente (pas de rupture de niveau hiérarchique) ;
    3. que le titre (contenu de la balise hn) et son niveau hiérarchique sont pertinents.
  3. Sinon, sur la page :
    • Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles CSS ».
    • Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
    • Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-heading.css.
    • Les titres hn et les éléments possédant une propriété aria-level et un rôle heading sont indiqués dans la page avec l'indication du niveau de titrage (cf. note).
    • Vérifier :
      1. la présence d'au moins un titre h1 ;
      2. que la hiérarchie est cohérente (pas de rupture de niveau hiérarchique) ;
      3. que le titre (contenu de la balise hn) et son niveau hiérarchique sont pertinents.
  4. Si c'est le cas, le test est validé.

Ne pas oublier de décocher l'utilisation de CSS utilisateur après les tests.

Avec la WebDev (Chrome)
  1. Dans le menu « Information », activer l'option « View document outline ».
  2. Dans la page qui s'affiche, vérifier :
    1. la présence d'au moins un titre h1 ;
    2. que la hiérarchie est cohérente (pas de rupture de niveau hiérarchique) ;
    3. que le titre (contenu de la balise hn) et son niveau hiérarchique sont pertinents.
  3. Sinon, sur la page :
    • Dans le menu « CSS », activer l'option « Disable all styles ».
    • Dans le menu, activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir h1,h2,h3,h4,h5,h6,[aria-level]{display:block!important;font-size:100%!important;}h1,h2,h3,h4,h5,h6{ border:1px solid green;}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before,*[role="heading"][aria-level]:before{ background:#whitesmoke; font-weight:bold!important; padding:0 5px;}h1:before{ content:"<h1>";}h2:before{ content:"<h2>";}h3:before{ content:"<h3>";}h4:before{ content:"<h4>";}h5:before{ content:"<h5>";}h6:before{ content:"<h6>";}*[role="heading"][aria-level]{ border:1px solid red;}*[role="heading"][aria-level]:before{ content:"role '<h"attr(aria-level)">'";}
    • Les titres hn et les éléments possédant une propriété aria-level et un rôle heading sont indiqués dans la page avec l'indication du niveau de titrage (cf. note).
    • Vérifier :
      1. la présence d'au moins un titre h1 ;
      2. que la hiérarchie est cohérente (pas de rupture de niveau hiérarchique) ;
      3. que le titre (contenu de la balise hn) et son niveau hiérarchique sont pertinents.
  4. Si c'est le cas, le test est validé.

Ne pas oublier de décocher l'utilisation de CSS utilisateur après les tests.

Tests 9.1.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  3. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-heading.css.
  4. Les titres hn et les éléments possédant une propriété aria-level sont indiqués dans la page avec l'indication du niveau de titrage.
  5. Vérifier que les passages de textes jouant le rôle de titre sont bien implémentés via une balise de titre hn ou via les propriétés ARIA : role="heading" et aria-level="(x)" (cf. note).
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis, « Tous les styles ».
  2. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  3. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-heading.css.
  4. Les titres hn et les éléments possédant une propriété aria-level sont indiqués dans la page avec l'indication du niveau de titrage.
  5. Vérifier que les passages de textes jouant le rôle de titre sont bien implémentés via une balise de titre hn ou via les propriétés ARIA : role="heading" et aria-level="(x)" (cf. note).
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir h1,h2,h3,h4,h5,h6,[aria-level]{ display:block!important; font-size:100%!important; } h1,h2,h3,h4,h5,h6{ border:1px solid green; } h1:before, h2:before, h3:before, h4:before, h5:before, h6:before, *[role="heading"][aria-level]:before{ background:#whitesmoke; font-weight:bold!important; padding:0 5px; } h1:before{ content:"<h1>";} h2:before{ content:"<h2>";} h3:before{ content:"<h3>";} h4:before{ content:"<h4>";} h5:before{ content:"<h5>";} h6:before{ content:"<h6>";} *[role="heading"][aria-level]{ border:1px solid red; } *[role="heading"][aria-level]:before{ content:"role '<h"attr(aria-level)">'"; }
  3. Les titres hn et les éléments possédant une propriété aria-level sont indiqués dans la page avec l'indication du niveau de titrage.
  4. Vérifier que les passages de textes jouant le rôle de titre sont bien implémentés via une balise de titre hn ou avec les propriétés ARIA : role="heading" et aria-level="(x)" (cf. note).
  5. Si c'est le cas, le test est validé.

Note : attention, mal maîtrisé, ce test peut amener à surtitrer le document en multipliant les titres. Le but recherché est de s'assurer que les titres nécessaires à la navigation, dans la structure du document, sont présents. La validation de ce test doit être envisagé en prenant en compte cet objectif.

Note technique au sujet du rôle ARIA heading et l’utilisation des titres h1.

Critère 9.2 [A] Dans chaque page Web, la structure du document est-elle cohérente ?

Test 9.2.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  3. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-structure.css.
  4. Les éléments de structure HTML5 sont mis en avant avec l'indication de la balise utilisée.
  5. Vérifier la présence d'une balise header sur l'en-tête de la page.
  6. Vérifier :
    1. la présence de balise(s)nav sur le menu de navigation principal, au moins et les éventuelles zones de navigation secondaires (menu secondaire, fil d'Ariane, liens de pagination…) ;
    2. que la/les balise(s) nav sont réservée(s) au menu de navigation principal et aux zones de navigation secondaires.
  7. Vérifier :
    1. la présence d'une balise main sur la zone de contenu principal de la page ;
    2. que la balise main est unique dans la page.
  8. Vérifier la présence d'une balise footer sur le pied de page (zone contenant des informations sur le document, comme les liens de mentions légales, etc.) de la page.
  9. Si c'est le cas, le test est validé.

Ne pas oublier de décocher l'utilisation de css utilisateur après les tests.

Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  3. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-structure.css.
  4. Les éléments de structure HTML5 sont mis en avant avec l'indication de la balise utilisée.
  5. Vérifier la présence d'une balise header sur l'en-tête de la page.
  6. Vérifier :
    1. la présence de balise(s)nav sur le menu de navigation principal, au moins et les éventuelles zones de navigation secondaires (menu secondaire, fil d'Ariane, liens de pagination…) ;
    2. que la/les balise(s) nav sont réservée(s) au menu de navigation principal et aux zones de navigation secondaires.
  7. Vérifier :
    1. la présence d'une balise main sur la zone de contenu principal de la page ;
    2. que la balise main est unique dans la page.
  8. Vérifier la présence d'une balise footer sur le pied de page (zone contenant des informations sur le document, comme les liens de mentions légales, etc.) de la page.
  9. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir *:before, *:after{ display:block; background:#f2f2f2; font-weight:bold; font-size:100%; font-size:1rem; color:red; font-weight:bold; } header, nav, main, footer{ display:block!important; margin-bottom:3px!important; border:2px solid red; padding:3px!important; } header:before{ content:'header role="'attr(role)'"'; } nav:before{ content:'nav role="'attr(role)'"'; } main:before{ content:'main role="'attr(role)'"'; } footer:before{ content:'footer role="'attr(role)'"'; }
  3. Les éléments de structure HTML5 sont mis en avant avec l'indication de la balise utilisée.
  4. Vérifier la présence d'une balise header sur l'en-tête de la page.
  5. Vérifier :
    1. la présence de balise(s)nav sur le menu de navigation principal, au moins et les éventuelles zones de navigation secondaires (menu secondaire, fil d'Ariane, liens de pagination…) ;
    2. que la/les balise(s) nav sont réservée(s) au menu de navigation principal et aux zones de navigation secondaires.
  6. Vérifier :
    1. la présence d'une balise main sur la zone de contenu principal de la page ;
    2. que la balise main est unique dans la page.
  7. Vérifier la présence d'une balise footer sur le pied de page (zone contenant des informations sur le document, comme les liens de mentions légales, etc.) de la page.
  8. Si c'est le cas, le test est validé.

Test 9.2.2

Important : ce test n'est pas réalisable de manière appropriée avec "Internet Explorer".

  1. Avec Firefox ou Chrome.
  2. Dans le menu « Outils », activer l'extension « HeadingsMap », activer l'onglet « HTML5 outline ».
  3. Vérifier que l'arborescence du document est cohérente (cf. note 1), c'est-à-dire qu'elle est représentative de la structure des zones de contenus telles que la navigation, la structure des contenus principaux et secondaires.
  4. Si c'est le cas, le test est validé (cf. note 2).
  5. Si ce n'est pas le cas : évaluer la charge de travail nécessaire pour réparer l'arborescence, si celle-ci est manifestement démesurée, le test est « Non Applicable » par exception (cf. note 2).

Note 1 : l'outil HeadingsMap considère comme une erreur l'absence de titrage des éléments sectionnants, noté no head element, cette erreur peut être ignorée.

Note 2 : consulter la note technique au sujet de la structure du document et de l'outline.

Critère 9.3 [A] Dans chaque page Web, chaque liste est-elle correctement structurée ?

Tests 9.3.1, 9.3.2, 9.3.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  3. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-list.css.
  4. Les éléments de liste (balise li, dt, dd et rôles ARIA list et listitem) sont mis en avant avec l'indication de la balise utilisée.
  5. Vérifier que chaque contenu qui se présente sous forme de liste utilise un format de liste appropriée :
    1. balises ul et li ou rôles ARIA role="list" et role="listitem" pour les listes non-ordonnées ;
    2. balises ol et li ou rôles ARIA role="list" et role="listitem" pour les listes ordonnées ;
    3. balises dl, dt et dd pour les listes « de définition ».
  6. Si c'est le cas, le test est validé.

Ne pas oublier de décocher l'utilisation de css utilisateur après les tests.

Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  3. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-list.css.
  4. Les éléments de liste (balise li et rôles ARIA list et listitem) sont mis en avant avec l'indication de la balise utilisée.
  5. Vérifier que chaque contenu qui se présente sous forme de liste utilise un format de liste appropriée :
    1. balises ul et li ou rôles ARIA role="list" et role="listitem" pour les listes non-ordonnées ;
    2. balises ol et li ou rôles ARIA role="list" et role="listitem" pour les listes ordonnées ;
    3. balises dl, dt et dd pour les listes « de définition ».
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir *{ box-sizing:border-box;}*:before,*:after{ display:block; background:#f2f2f2; font-weight:bold; font-size:100%; font-size:1rem;}ul,ol,dl,dt,dd,li,[role="list"],[role="list"] [role="listitem"] { border: 2px solid green;}ul:before,ol:before,li:before,dl:before,dd:before,dt:before,[role="list"]:before,[role="list"] [role="listitem"]:before { color: green!important;}/ul:before { content: 'ul'; }ol:before { content: 'ol'; }li:before { content: 'li'; }dl:before { content: 'dl'; }dt:before { content: 'dt'; }dd:before { content: 'dd'; }[role="list"]:before { content: 'role="list"'; }ul[role="list"]:before { content: 'ul role="list"'; }ol[role="list"]:before { content: 'ol role="list"'; }[role="listitem"]:before { content: 'role="listitem"'; }li[role="listitem"]:before { content: 'li role="listitem"'; }
  3. Les éléments de liste (balise li et rôles ARIA list et listitem) sont mis en avant avec l'indication de la balise utilisée.
  4. Vérifier que chaque contenu qui se présente sous forme de liste utilise un format de liste appropriée :
    1. balises ul et li ou rôles ARIA role="list" et role="listitem" pour les listes non-ordonnées ;
    2. balises ol et li ou rôles ARIA role="list" et role="listitem" pour les listes ordonnées ;
    3. balises dl, dt et dd pour les listes « de définition ».
  5. Si c'est le cas, le test est validé.

Note technique au sujet des rôles list et listitem

Critère 9.4 [AAA] Dans chaque page Web, la première occurrence de chaque abréviation permet-elle d’en connaître la signification ?

Critère 9.5 [AAA] Dans chaque page Web, la signification de chaque abréviation est-elle pertinente ?

Tests 9.4.1, 9.5.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure » activer l'option « Acronym/Abbreviation ».
  3. Dans le menu Doc info activer l'option « Show titles ».
  4. Repérer dans la page, la première occurrence de chaque abréviation et vérifier :
    1. que la signification de l'abréviation est donnée :
      • dans le contexte adjacent ;
      • ou avec un lien référençant une page ou un emplacement dans la page qui permet d'en connaître la signification ;
      • ou dans un glossaire présent sur le site ;
      • ou lorsque l'abréviation fait partie d'un lien possédant un attribut title qui permet d'en connaître la signification ;
      • ou lorsque l'abréviation est implémentée avec une balise abbr possédant un attribut title qui permet d'en connaître la signification.
    2. que la signification de l'abréviation est pertinente.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Infos », activer l'option « Afficher les abréviations ».
  3. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  4. Repérer dans la page, la première occurrence de chaque abréviation et vérifier :
    1. que la signification de l'abréviation est donnée :
      • dans le contexte adjacent ;
      • ou avec un lien référençant une page ou un emplacement dans la page qui permet d'en connaître la signification ;
      • ou dans un glossaire présent sur le site ;
      • ou lorsque l'abréviation fait partie d'un lien possédant un attribut title qui permet d'en connaître la signification ;
      • ou lorsque l'abréviation est implémentée avec une balise abbr possédant un attribut title qui permet d'en connaître la signification.
    2. que la signification de l'abréviation est pertinente.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer l'option « Display abbreviations ».
  3. Dans le menu « Information », activer l'option « Display title attributes ».
  4. Repérer dans la page, la première occurrence de chaque abréviation et vérifier :
    1. que la signification de l'abréviation est donnée :
      • dans le contexte adjacent ;
      • ou avec un lien référençant une page ou un emplacement dans la page qui permet d'en connaître la signification ;
      • ou dans un glossaire présent sur le site ;
      • ou lorsque l'abréviation fait partie d'un lien possédant un attribut title qui permet d'en connaître la signification ;
      • ou lorsque l'abréviation est implémentée avec une balise abbr possédant un attribut title qui permet d'en connaître la signification.
    2. que la signification de l'abréviation est pertinente.
  5. Si c'est le cas, le test est validé.

Critère 9.6 [A] Dans chaque page Web, chaque citation est-elle correctement indiquée ?

Tests 9.6.1, 9.6.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Q/blockquote ».
  3. Vérifier :
    1. que les citations en ligne sont implémentées via une balise q.
    2. que les blocs de citation sont implémentés via une balise blockquote.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option : « Éléments personnalisés » et saisir q et blockquote.
  3. Vérifier :
    1. que les citations en ligne sont implémentées via une balise q ;
    2. que les blocs de citation sont implémentés via une balise blockquote.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir q,blockquote{border:2px solid red}
  3. Vérifier :
    1. que les citations en ligne sont implémentées via une balise q ;
    2. que les blocs de citation sont implémentés via une balise blockquote.
  4. Si c'est le cas, le test est validé.

Présentation

Critère 10.1 [A] Dans le site Web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?

Tests 10.1.1, 10.1.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  3. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-presentation.css.
  4. Les balises ou attributs de présentation sont affichés sur la page.
  5. Vérifier l'absence de toute balise ou attribut de présentation.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  3. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-presentation.css.
  4. Les balises ou attributs de présentation sont affichés sur la page.
  5. Vérifier l'absence de toute balise ou attribut de présentation.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir basefont,blink,center, font, marquee, s, strike, tt, u,[align], [alink], [background], [basefont], [bgcolor], [border], [color], [link], [text], [vlink],[cellpadding],[cellspacing],:not(img)[width],:not(img)[height],:not(img)[width][height]{ border: 2px solid red;}
  3. Les balises ou attributs de présentation sont affichés sur la page.
  4. Vérifier l'absence de toute balise ou attribut de présentation.
  5. Si c'est le cas, le test est validé.

Test 10.1.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Vérifier :
    1. l'absence de mots ayant une espace entre chaque lettre ;
    2. l'absence d'espaces destinées à créer des effets de marges ou d'alignement ;
    3. l'absence d'espaces destinées à simuler des tableaux ou des colonnes.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Vérifier :
    1. l'absence de mots ayant une espace entre chaque lettre ;
    2. l'absence d'espaces destinées à créer des effets de marges ou d'alignement ;
    3. l'absence d'espaces destinées à simuler des tableaux ou des colonnes.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Vérifier :
    1. l'absence de mots ayant une espace entre chaque lettre ;
    2. l'absence d'espaces destinées à créer des effets de marges ou d'alignement ;
    3. l'absence d'espaces destinées à simuler des tableaux ou des colonnes.
  3. Si c'est le cas, le test est validé.

Critère 10.2 [A] Dans chaque page Web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?

Tests 10.2.1

Avec la WAT
  1. Ouvrir la page sur deux onglets différents.
  2. Sur l'un des onglets, Dans le menu « CSS », activer l'option « Disable CSS ».
  3. Sur l'onglet affichant la page avec CSS, dans le menu « Images », activer l'option « Remove CSS images ».
  4. Si des images porteuses d'information disparaissent (i.e. elles sont insérées via une propriété CSS), vérifier dans la page affichée sans CSS, la présence d'un texte apportant la même information.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Ouvrir la page sur deux onglets différents.
  2. Sur l'un des onglets, dans le menu « CSS », activer l'option « Désactiver les CSS » puis activer l'option « Tous les styles ».
  3. Sur l'onglet affichant la page avec CSS, dans le menu « Images », activer l'option « Cacher les images d'arrière-plan ».
  4. Si des images porteuses d'information disparaissent (i.e. elles sont insérées via une propriété CSS), vérifier dans la page affichée sans CSS, la présence d'un texte apportant la même information.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Ouvrir la page sur deux onglets différents.
  2. Sur l'un des onglets, dans le menu le menu CSS, activer l'option « Disable all styles ».
  3. Sur l'onglet affichant la page avec CSS, dans le menu « Images », activer l'option « Hide background images ».
  4. Si des images porteuses d'information disparaissent (i.e. elles sont insérées via une propriété CSS), vérifier dans la page affichée sans CSS, la présence d'un texte apportant la même information.
  5. Si c'est le cas, le test est validé.

Critère 10.3 [A] Dans chaque page Web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?

Test 10.3.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Vérifier que l'ordre dans lequel les contenus sont implémentés ne pose pas de problème de compréhension.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Vérifier que l'ordre dans lequel les contenus sont implémentés ne pose pas de problème de compréhension.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Vérifier que l'ordre dans lequel les contenus sont implémentés ne pose pas de problème de compréhension.
  3. Si c'est le cas, le test est validé.

Critère 10.4 [AA] Dans chaque page Web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu’à 200%, au moins (hors cas particuliers) ?

Test 10.4.1

Ce test ne peut pas être réalisé avec Internet Explorer.

  1. Avec Firefox ou Chrome, Dans le menu « CSS » de la Web Developper, activer l'option « Voir les CSS ».
  2. Dans la page qui s'affiche, rechercher (Ctrl ou Cmd + F), pt, pc, mm, cm, in, pour les types de média screen, tv, handheld, projection.
  3. Si aucun résultat n'est trouvé, le test est validé.

Test 10.4.2

Ce test ne peut pas être réalisé avec Internet Explorer.

  1. Avec Firefox ou Chrome, Dans le menu « CSS » de la Web Developper, activer l'option « Voir les CSS ».
  2. Dans la page qui s'affiche, rechercher (Ctrl ou Cmd + F), font-size.
  3. Vérifier que la taille de police est exprimée uniquement avec des unités relatives (%, em, rem, vw, vh, vmin, vmax) ou des mots clés (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) pour les types de média screen, tv, handheld, projection.
  4. Si c'est le cas, le test est validé.

Test 10.4.3

Ce test ne peut pas être réalisé avec Internet Explorer ou Chrome.

  1. Avec Firefox, dans le menu « Affichage », activer l'option « Zoom » et cocher l'option « Zoom texte seulement ».
  2. Augmenter la taille de 200% (touches Ctrl ou Cmd et + 6 fois).
  3. Vérifier que tous les contenus demeurent lisibles.
  4. Si c'est le cas, le test est validé.

Critère 10.5 [AA] Dans chaque page Web, les déclarations CSS de couleurs de fond d’élément et de police sont-elles correctement utilisées ?

Tests 10.5.1, 10.5.2

Avec la WAT
  1. Repérer dans la page, les textes mis en couleur, à l'exception des couleurs par défaut (par exemple les liens, etc.).
  2. Pour chacun d'eux, faire un clic droit et choisir « Inspecter l'élément ».
  3. Dans le panneau « Styles », activer l'onglet « Calculé ».
  4. Vérifier la présence d'une propriété background-color sur l'élément lui-même ou l'un de ses parents.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Repérer dans la page, les textes mis en couleur, à l'exception des couleurs par défaut (par exemple les liens, etc.).
  2. Pour chacun d'eux, faire un clic droit et choisir « Examiner l'élément ».
  3. Dans le panneau « Styles », activer l'onglet « Calculé ».
  4. Vérifier la présence d'une propriété background-color sur l'élément lui-même ou l'un de ses parents.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Repérer dans la page, les textes mis en couleur, à l'exception des couleurs par défaut (par exemple les liens, etc.).
  2. Pour chacun d'eux, faire un clic droit et choisir « Inspecter ».
  3. Dans le panneau « Styles », activer l'onglet Computed.
  4. Vérifier la présence d'une propriété background-color sur l'élément lui-même ou l'un de ses parents.
  5. Si c'est le cas, le test est validé.

Test 10.5.3

Avec la WAT
  1. Repérer dans la page, les éléments possédant un fond de couleur.
  2. Dans le menu « Images », activer l'option « Remove CSS images ».
  3. Vérifier l'absence de fond de couleur qui disparaisse (e.g ils sont insérés via une image en propriété de fond CSS).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Repérer dans la page, les éléments possédant un fond de couleur.
  2. Dans le menu « Images », activer l'option « Cacher les images d'arrière-plan ».
  3. Vérifier l'absence de fond de couleur qui disparaisse (e.g ils sont insérés via une image en propriété de fond CSS).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Repérer dans la page, les éléments possédant un fond de couleur.
  2. Dans le menu « Images », activer l'option Hide background images.
  3. Vérifier l'absence de fond de couleur qui disparaisse (e.g ils sont insérés via une image en propriété de fond CSS).
  4. Si c'est le cas, le test est validé.

Critère 10.6 [A] Dans chaque page Web, chaque lien dont la nature n’est pas évidente est-il visible par rapport au texte environnant ?

Test 10.6.1

Avec la WAT
  1. Dans le menu « Structure », activer l'option « Show others elements », saisir a.
  2. Dans la page, repérer les liens texte, dans un environnement de texte, dont la nature n'est pas évidente (par exemple un lien sur un nom, etc.).
  3. Dans le menu « Color », activer l'option Contrast Analyzer.
  4. Vérifier que le contraste entre la couleur de police du lien et la couleur de police du texte environnant est de 3:1, au moins.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir a.
  2. Dans la page, repérer les liens texte, dans un environnement de texte, dont la nature n'est pas évidente (par exemple un lien sur un nom, etc.).
  3. Sur la page faire clic droit et activer WCAG Contrast Checker.
  4. Vérifier que le contraste entre la couleur de police du lien et la couleur de police du texte environnant est de 3:1, au moins.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir a{border:2px solid red}
  2. Dans la page, repérer les liens texte, dans un environnement de texte, dont la nature n'est pas évidente (par exemple un lien sur un nom, etc.).
  3. Lancer l'outil Colour Contrast Analyser.
  4. Vérifier que le contraste entre la couleur de police du lien et la couleur de police du texte environnant est de 3:1, au moins.
  5. Si c'est le cas, le test est validé.

Critère 10.7 [A] Dans chaque page Web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?

Tests 10.7.1, 10.7.2

Ce test ne peut pas être réalisé de manière satisfaisante avec Internet Explorer.

  1. Avec Firefox ou Chrome, Dans le menu « CSS », activer l'option « Voir les CSS ».
  2. Dans la page qui s'affiche, rechercher (Ctrl ou Cmd + F), outline.
  3. Vérifier que l'indication visuelle de la prise de focus (propriétés outline, outline-width, outline-style, outline-color) n'est ni supprimée (exemple : outline:none;outline:0) ni dégradée pour la rendre moins visible.
  4. Si c'est le cas, le test est validé.

Test 10.7.3

Avec la WAT
  1. Dans le menu « Structure », activer l'option « Show others elements », saisir a.
  2. Dans la page, repérer les liens texte, dans un environnement de texte, signalés uniquement par la couleur.
  3. Vérifier que la prise de focus est signalée autrement que par la couleur (par exemple un soulignement ou une bordure) à la tabulation et au survol de la souris.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir a.
  2. Dans la page, repérer les liens texte dans un environnement de texte signalés uniquement par la couleur.
  3. Vérifier que la prise de focus est signalée autrement que par la couleur (par exemple un soulignement ou une bordure) à la tabulation et au survol de la souris.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir a{border:2px solid red}
  2. Dans la page, repérer les liens texte dans un environnement de texte signalés uniquement par la couleur.
  3. Vérifier que la prise de focus est signalée autrement que par la couleur (par exemple un soulignement ou une bordure) à la tabulation et au survol de la souris.
  4. Si c'est le cas, le test est validé.

Critère 10.8 [AAA] Dans chaque page Web, le choix de la couleur de fond et de police du texte est-il contrôlable par l’utilisateur ?

Tests 10.8.1, 10.8.2, 10.8.3, 10.8.4

Pour tous
  1. Chercher dans la page la présence d'un mécanisme permettant de modifier les couleurs de police et de fond.
  2. Si c'est le cas, vérifier que :
    1. la couleur de police des textes dans le contenu HTML et les contenus embarqués (balises object, embed, svg, canvas) est bien personnalisable ;
    2. que la couleur de fond d'un élément contenant du texte, dans le contenu HTML et les contenus embarqués (balises object, embed, svg, canvas) est bien personnalisable.
  3. Si c'est le cas, le test est validé.

Critère 10.9 [AAA] Pour chaque page Web, le texte ne doit pas être justifié. Cette règle est-elle respectée ?

Test 10.9.1

Pour tous
  1. Si du texte est justifié, chercher dans la page la présence d'un mécanisme permettant de supprimer la justification.
  2. Si c'est le cas, le test est validé.

Critère 10.10 [AAA] Pour chaque page Web, en affichage plein écran et avec une taille de police à 200%, chaque bloc de texte reste-t-il lisible sans l’utilisation de la barre de défilement horizontal ?

Test 10.10.1

Ce test ne peut pas être réalisé avec Internet Explorer ou Chrome.

  1. Avec Firefox, dans le menu « Affichage », activer l'option « Zoom » et cocher l'option « Zoom texte seulement ».
  2. Augmenter la taille du de 200% (touches Ctrl ou Cmd et + 6 fois).
  3. Vérifier :
    1. que les blocs de texte (par exemple les paragraphes) restent lisibles sans utilisation de la barre de défilement horizontale ;
    2. ou qu'un mécanismes permette de rendre les blocs de texte lisibles sans utilisation de la barre de défilement horizontale.
  4. Si c'est le cas, le test est validé.

Critère 10.11 [AAA] Pour chaque page Web, les blocs de texte ont-ils une largeur inférieure ou égale à 80 caractères (hors cas particuliers) ?

Test 10.11.1

Pour tous
  1. Vérifier :
    • que les blocs de texte ont une largeur maximum de 80 caractères ;
    • ou qu'il est possible de réduire la largeur des blocs de texte à 80 caractères en réduisant la largeur de la fenêtre d'affichage.
  2. Si c'est le cas, le test est validé.

Critère 10.12 [AAA] Pour chaque page Web, l’espace entre les lignes et les paragraphes est-il suffisant ?

Tests 10.12.1, 10.12.2

Avec la WAT
  1. Pour chaque bloc de texte : faire un clic droit et activer l'option « Inspecter l'élément ».
  2. Dans le panneau CSS, activer l'onglet « Calculé ».
  3. Vérifier :
    1. la présence d'une propriété line-height avec une valeur supérieure ou égale à 1.5 em ;
    2. la présence d'une marge calculée (propriétés margin-top, margin-bottom, padding-top, padding-bottom ou équivalentes) supérieure ou égale à 1.5em.
  4. Si ce n'est pas la cas, vérifier la présence d'un mécanisme permettant d'obtenir ces valeurs pour l'interlignage et la marge entre les paragraphes.
  5. Si c'est le cas, le test est validé.

Note : « marge calculée » fait référence à la marge effectivement appliquée par le navigateur comme la fusion ou non des marges selon le mode de restitution choisi (box-sizing) pour le modèle de boîte par exemple.

Avec la WebDev (Firefox)
  1. Pour chaque bloc de texte : faire un clic droit et activer l'option « Examiner l'élément ».
  2. Dans le panneau CSS, activer l'onglet « Calculé ».
  3. Vérifier :
    1. la présence d'une propriété line-height avec une valeur supérieure ou égale à 1.5 em ;
    2. la présence d'une marge calculée (propriétés margin-top, margin-bottom, padding-top, padding-bottom ou équivalentes) supérieure ou égale à 1.5em.
  4. Si ce n'est pas la cas, vérifier la présence d'un mécanisme permettant d'obtenir ces valeurs pour l'interlignage et la marge entre les paragraphes.
  5. Si c'est le cas, le test est validé.

Note : « marge calculée » fait référence à la marge effectivement appliquée par le navigateur comme la fusion ou non des marges selon le mode de restitution choisi (box-sizing) pour le modèle de boîte par exemple.

Avec la WebDev (Chrome)
  1. Pour chaque bloc de texte : faire un clic droit et activer l'option « Inspecter ».
  2. Dans le panneau CSS, activer l'onglet Computed.
  3. Vérifier :
    1. la présence d'une propriété line-height avec une valeur supérieure ou égale à 1.5 em ;
    2. la présence d'une marge calculée (propriétés margin-top, margin-bottom, padding-top, padding-bottom ou équivalentes) supérieure ou égale à 1.5em.
  4. Si ce n'est pas la cas, vérifier la présence d'un mécanisme permettant d'obtenir ces valeurs pour l'interlignage et la marge entre les paragraphes.
  5. Si c'est le cas, le test est validé.

Note : « marge calculée » fait référence à la marge effectivement appliquée par le navigateur comme la fusion ou non des marges selon le mode de restitution choisi (box-sizing) pour le modèle de boîte par exemple.

Critère 10.13 [A] Pour chaque page Web, les textes cachés sont-ils correctement affichés pour être restitués par les technologies d’assistance ?

Tests 10.13.1

Avec la WAT
  1. Ouvrir la page sur deux onglets différents.
  2. Sur l'un des onglets :
    1. Dans le menu « CSS » activer l'option « Disable CSS » ;
    2. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options » ;
    3. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-hidden-content.css.
  3. En comparant les contenus des deux onglets, repérer les textes cachés et vérifier :
      • que le texte caché n'a pas vocation à être restitué (un élément statistique de visites par exemple) ;
      • ou que le dispositif qui permet de rendre le contenu visible est situé avant le contenu caché ;
      • ou que le contenu caché fait partir d'un composant d'interface ARIA qui gère le contenu caché (par exemple dans un système d'onglet).
    1. Si le texte caché fait appel à la propriété aria-hidden ou hidden (repéré via l'utilisation de la feuille de style importée), vérifier que l'état de l'attribut est cohérent avec l'état masqué ou affiché du contenu.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Ouvrir la page sur deux onglets différents.
  2. Sur l'un des onglets :
    1. Faire un clic droit dans la page et activer l'option « Examiner l'élément » ;
    2. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-hidden-content.css.
  3. En comparant les contenus des deux onglets, repérer les textes cachés et vérifier :
      • que le texte caché n'a pas vocation à être restitué (un élément statistique de visites par exemple) ;
      • ou que le dispositif qui permet de rendre le contenu visible est situé avant le contenu caché ;
      • ou que le contenu caché fait partir d'un composant d'interface ARIA qui gère le contenu caché (par exemple dans un système d'onglet).
    1. si le texte caché fait appel à la propriété aria-hidden ou hidden (repéré via l'utilisation de la feuille de style importée), vérifier que l'état de l'attribut est cohérent avec l'état masqué ou affiché du contenu.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Ouvrir la page sur deux onglets différents.
  2. Sur l'un des onglets dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir *:before,*:after{ display:block; background:#f2f2f2; font-weight:bold; font-size:100%; font-size:1rem; color:red; font-weight:bold;}[hidden]{ content: "[hidden]";}[aria-hidden]{ content: "[attr:aria-hidden]";}[role]{ content: "[role: "attr(role)"]";}
  3. En comparant les contenus des deux onglets, repérer les textes cachés et vérifier :
      • que le texte caché n'a pas vocation à être restitué (un élément statistique de visites par exemple) ;
      • ou que le dispositif qui permet de rendre le contenu visible est situé avant le contenu caché ;
      • ou que le contenu caché fait partir d'un composant d'interface ARIA qui gère le contenu caché (par exemple dans un système d'onglet).
    1. si le texte caché fait appel à la propriété aria-hidden ou hidden (repéré via l'utilisation de la feuille de style importée), vérifier que l'état de l'attribut est cohérent avec l'état masqué ou affiché du contenu.
  4. Si c'est le cas, le test est validé.

Consulter la note technique au sujet de la propriété aria-hidden et de l'attribut hidden.

Critère 10.14 [A] Dans chaque page Web, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?

Critère 10.15 [A] Dans chaque page Web, l’information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ?

Tests 10.14.1, 10.14.2, 10.14.3, 10.14.4, 10.15.1, 10.15.2, 10.15.3, 10.15.4

Pour tous
  1. Dans la page, repérer les informations données par la forme, la taille ou la position dans un texte, une image, un média temporel ou non temporel.
  2. Pour chaque information donnée par la forme, la taille ou la position, vérifier :
    1. qu'il existe un autre moyen de récupérer cette information ;
    2. que cet autre moyen 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, le test est validé.

Formulaires

Critère 11.1 [A] Chaque champ de formulaire a-t-il une étiquette 

Critère 11.2 [A] Chaque étiquette associée à un champ de formulaire est-elle pertinente ?

Tests 11.1.1, 11.1.2, 11.1.3, 11.1.4, 11.1.5, 11.2.1, 11.2.2, 11.2.3, 11.2.4

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Fieldset / Labels ».
  3. Dans le menu « IE », activer l'option « Show titles ».
  4. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  5. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-label-IE.css :
    • Les étiquettes (balise label) sont entourées en vert.
    • Les champs possédant une propriété aria-label sont entourés de tirets bleus.
    • les champs possédant une propriété aria-labelledby sont entourés de points rouges.
  6. Pour chaque champ de formulaire (balises input, select, textarea), vérifier :
    • que le champ possède une étiquette pertinente et correctement reliée (la valeur de l'attribut for de la balise label est égale à la valeur de l'attribut id du champ) ;
    • ou que le champ possède un attribut title pertinent et identique à l'attribut placeholder s'il est présent ;
    • ou que le champ possède une propriété aria-label pertinente (faire clic droit sur l'élément et choisir « Inspecter l'élément »), accompagnée si nécessaire d’un passage de texte visible et accolé au champ permettant de comprendre la nature de la saisie attendue ;
    • ou que le champ possède une étiquette (un passage de texte possédant un attribut id) pertinente, liée via la propriété aria-labelledby="[id]" accompagnée si nécessaire d'un passage de texte visible et accolé au champ permettant de comprendre la nature de la saisie attendue (faire un clic droit sur l'élément et choisir « Inspecter l'élément ». À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants).
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS », puis « Tous les styles ».
  2. Dans le menu « Infos », activer les options « Afficher les détails des id & class », « Afficher les informations de l'élément », « Afficher les attributs title ».
  3. Faire un clic droit et choisir « Examiner l'élément », dans l'onglet « Éditeur de style » activer l'option « Importer », choisir check-label.css :
    • Les étiquettes (balise label) sont entourées en vert.
    • Les champs possédant une propriété aria-label sont entourés de tirets bleus.
    • les champs possédant une propriété aria-labelledby sont entourés de points rouges.
  4. Vérifier pour chaque champ de formulaire (balises input, select, textarea) :
    • que le champ possède une étiquette pertinente et correctement reliée (la valeur de l'attribut for de la balise label est égale à la valeur de l'attribut id du champ) ;
    • ou que le champ possède un attribut title pertinent et identique à l'attribut placeholder s'il est présent ;
    • ou que le champ possède une propriété aria-label pertinente (faire clic droit sur l'élément et choisir « Examiner l'élément »), accompagnée si nécessaire d’un passage de texte visible et accolé au champ permettant de comprendre la nature de la saisie attendue ;
    • ou que le champ possède une étiquette (un passage de texte possédant un attribut id) pertinente, liée via la propriété aria-labelledby="[id]" accompagnée si nécessaire d'un passage de texte visible et accolé au champ permettant de comprendre la nature de la saisie attendue (faire un clic droit sur l'élément et choisir « Examiner l'élément ». À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer les options Display Id & Class details, Display element information », « Display title attributes ».
  3. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir input, select, textarea{border:2px solid red}
  4. Vérifier pour chaque champ de formulaire (balises input, select, textarea) :
    • que le champ possède une étiquette pertinente et correctement reliée (la valeur de l'attribut for de la balise label est égale à la valeur de l'attribut id du champ) ;
    • ou que le champ possède un attribut title pertinent et identique à l'attribut placeholder s'il est présent ;
    • ou que le champ possède une propriété aria-label pertinente (faire clic droit sur l'élément et choisir « Inspecter »), accompagnée si nécessaire d’un passage de texte visible et accolé au champ permettant de comprendre la nature de la saisie attendue ;
    • ou que le champ possède une étiquette (un passage de texte possédant un attribut id) pertinente, liée via la propriété aria-labelledby="[id]" accompagnée si nécessaire d'un passage de texte visible et accolé au champ permettant de comprendre la nature de la saisie attendue (faire un clic droit sur l'élément et choisir « Inspecter ». À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants).
  5. Si c'est le cas, le test est validé.

Critère 11.3 [AA] Dans chaque formulaire, chaque étiquette associée à un champ de formulaire ayant la même fonction et répété plusieurs fois dans une même page ou dans un ensemble de pages est-elle cohérente ?

Tests 11.3.1, 11.3.2

Pour tous
  1. Repérer dans la page, les champs de formulaire ayant une même fonction (par exemple plusieurs champs d'adresse).
  2. Vérifier que les étiquettes sont cohérentes (elles permettent de comprendre qu'il s'agit de saisies de natures identiques).
  3. Repérer les champs susceptibles d'être répétés sur un ensemble de pages (par exemple le champ de saisie d'un moteur de recherche ou le champ de saisie d'inscription à une newsletter).
  4. Vérifier que sur l'ensemble des pages consultées, ces champs ont une étiquette cohérente.
  5. Si c'est le cas, le test est validé.

Critère 11.4 [A] Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés ?

Test 11.4.1

Pour tous
  1. Vérifier que les étiquettes visibles (par exemple les balises label) sont accolées au champ avec lequel elles sont liées.
  2. Si c'est le cas, le test est validé.

Critère 11.5 [A] Dans chaque formulaire, les informations de même nature sont-elles regroupées, si nécessaire ?

Critère 11.6 [A] Dans chaque formulaire, chaque regroupement de champs de formulaire a-t-il une légende ?

Critère 11.7 [A] Dans chaque formulaire, chaque légende associée à un groupement de champs de formulaire est-elle pertinente ?

Tests 11.5.1, 11.6.1, 11.7.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Fieldset / Labels ».
  3. Dans le menu « Doc info », activer l'option « Show titles ».
  4. Vérifier que :
    1. les champs 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…) sont regroupés dans une balise fieldset ;
    2. la balise fieldset possède une balise legend ;
    3. la balise legend est pertinente (elle permet de comprendre la nature du regroupement).
  5. Sinon vérifier que :
    1. les champs 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…) sont regroupés dans un même élément possédant la propriété role="group" (faire un clic droit sur l'élément et choisir « Inspecter l'élément ») ;
    2. l'élément contenant les champs de même nature possède une propriété aria-label ou aria-labelledby (faire un clic droit sur l'élément et choisir « Inspecter l'élément ») ;
    3. si l'élément contenant les champs possède une proriété aria-labelledby, le passage de texte relié est pertinent (il permet de comprendre la nature du regroupement) ;
    4. si l'élément contenant les champs possède un propriété aria-label, le contenu de la propriété est pertinent (il permet de comprendre la nature du regroupement).
  6. Sinon, vérifier pour chacun des champs de même nature :
    1. la présence d'un attribut title qui possède une indication permettant de déterminer l'appartenance du champ au groupement de champ ;
    2. ou la présence d'une propriété aria-describedby qui référence un passage de texte qui possède une indication permettant de déterminer l'appartenance du champ au groupement de champ (faire un clic droit sur l'élément et choisir « Inspecter l'élément »).
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Entourer », activer l'option « Éléments personnalisés… », saisir fieldset et legend.
  3. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  4. Vérifier que :
    1. les champs 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…) sont regroupés dans une balise fieldset ;
    2. la balise fieldset possède une balise legend ;
    3. la balise legend est pertinente (elle permet de comprendre la nature du regroupement).
  5. Sinon vérifier que :
    1. les champs 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…) sont regroupés dans un même élément possédant la propriété role="group" (faire un clic droit sur l'élément et choisir « Examiner l'élément ») ;
    2. l'élément contenant les champs de même nature possède une propriété aria-label ou aria-labelledby (faire un clic droit sur l'élément et choisir « Examiner l'élément ») ;
    3. si l'élément contenant les champs possède une proriété aria-labelledby, le passage de texte relié est pertinent (il permet de comprendre la nature du regroupement) ;
    4. si l'élément contenant les champs possède un propriété aria-label, le contenu de la propriété est pertinent (il permet de comprendre la nature du regroupement).
  6. Sinon, vérifier pour chacun des champs de même nature :
    1. la présence d'un attribut title qui possède une indication permettant de déterminer l'appartenance du champ au groupement de champ ;
    2. ou la présence d'une propriété aria-describedby qui référence un passage de texte qui possède une indication permettant de déterminer l'appartenance du champ au groupement de champ (faire un clic droit sur l'élément et choisir « Examiner l'élément »).
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir fieldset,legend{border:2px solid red}
  3. Dans le menu « Information », activer l'option « Display title attributes ».
  4. Vérifier que :
    1. les champs 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…) sont regroupés dans une balise fieldset ;
    2. la balise fieldset possède une balise legend ;
    3. la balise legend est pertinente (elle permet de comprendre la nature du regroupement).
  5. Sinon vérifier que :
    1. les champs 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…) sont regroupés dans un même élément possédant la propriété role="group" (faire un clic droit sur l'élément et choisir « Inspecter ») ;
    2. l'élément contenant les champs de même nature possède une propriété aria-label ou aria-labelledby (faire un clic droit sur l'élément et choisir « Inspecter ») ;
    3. si l'élément contenant les champs possède une proriété aria-labelledby, le passage de texte relié est pertinent (il permet de comprendre la nature du regroupement) ;
    4. si l'élément contenant les champs possède un propriété aria-label, le contenu de la propriété est pertinent (il permet de comprendre la nature du regroupement).
  6. Sinon, vérifier pour chacun des champs de même nature :
    1. la présence d'un attribut title qui possède une indication permettant de déterminer l'appartenance du champ au groupement de champ ;
    2. ou la présence d'une propriété aria-describedby qui référence un passage de texte qui possède une indication permettant de déterminer l'appartenance du champ au groupement de champ (faire un clic droit sur l'élément et choisir « Inspecter »).
  7. Si c'est le cas, le test est validé.

Critère 11.8 [A] Dans chaque formulaire, chaque liste de choix est-elle structurée de manière pertinente ?

Tests 11.8.1, 11.8.2, 11.8.3

Avec la WAT
  1. Repérer les listes déroulantes select.
  2. Faire un clic droit sur l'élément et choisir « Inspecter l'élément ».
  3. Pour chaque liste qui nécessite une structure (par exemple, les items peuvent être regroupés par thématique), vérifier que :
    1. les regroupements d'items utilisent des balises optgroup ;
    2. chaque regroupement possède un attribut label ;
    3. le label est pertinent.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Repérer les listes déroulantes select.
  2. Faire un clic droit sur l'élément et choisir « Examiner l'élément ».
  3. Pour chaque liste qui nécessite une structure (les items peuvent être regroupés par thématique), vérifier que :
    1. les regroupements d'items utilisent des balises optgroup ;
    2. chaque regroupement possède un attribut label ;
    3. le label est pertinent.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Repérer les listes déroulantes select.
  2. Faire un clic droit sur l'élément et choisir « Inspecter ».
  3. Pour chaque liste qui nécessite une structure (les items peuvent être regroupés par thématique), vérifier que :
    1. les regroupements d'items utilisent des balises optgroup ;
    2. chaque regroupement possède un attribut label ;
    3. le label est pertinent.
  4. Si c'est le cas, le test est validé.

Critère 11.9 [A] Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent ?

Tests 11.9.1, 11.9.2

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Structure », activer l'option « Fieldset / Labels ».
  3. Dans le menu « Doc info », activer l'option « Show titles ».
  4. Repérer les boutons de formulaire.
  5. Vérifier :
    • que les boutons de type submit ou reset ont un intitulé (attribut value ou intitulé pour les balises button) pertinent ;
    • s'il est présent, que le contenu de l'attribut title est pertinent ;
    • si elle est présente, que le contenu de la propriété aria-label est pertinente (faire un clic droit et choisir « Inspecter l'élément ») ;
    • si elle présente, que la propriété aria-labelledby référence un passage de texte pertinent, identifié par un attribut id (sélectionner le bouton et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte correspond à la valeur de la propriété aria-labelledby du bouton. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants).
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Infos », activer les options « Afficher les informations de l'élément », « Afficher les attributs title ».
  3. Repérer les boutons de formulaire.
  4. Vérifier :
    • que les boutons de type submit ou reset ont un intitulé (attribut value ou intitulé pour les balises button) pertinent ;
    • s'il est présent, que le contenu de l'attribut title est pertinent ;
    • si elle est présente, que le contenu de la propriété aria-label est pertinente (faire un clic droit et choisir « Examiner l'élément ») ;
    • si elle présente, que la propriété aria-labelledby référence un passage de texte pertinent, identifié par un attribut id (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-labelledby du bouton. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants).
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer les options « Display element information », « Display title attributes ».
  3. Repérer les boutons de formulaire.
  4. Vérifier :
    • que les boutons de type submit ou reset ont un intitulé (attribut value ou intitulé pour les balises button) pertinent ;
    • s'il est présent, que le contenu de l'attribut title est pertinent ;
    • si elle est présente, que le contenu de la propriété aria-label est pertinente (faire un clic droit et choisir « Examiner l'élément ») ;
    • si elle présente, que la propriété aria-labelledby référence un passage de texte pertinent, identifié par un attribut id (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-labelledby du bouton. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants).
  5. Si c'est le cas, le test est validé.

Critère 11.10 [A] Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ?

Tests 11.10.1, 11.10.2, 11.10.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE » activer l'option « Show titles ».
  3. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  4. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-indication-obligatoire.css :
    • Les labels sont entourés d'une bordure simple grise.
    • Les champs possédant une propriété aria-label apparaissent en pointillé (tirets) bleu.
    • Les champs possédant une propriété aria-labelledby en pointillé (points) rouge.
    • Les champs avec un attribut required avec une bordure gauche orange.
    • Les champs avec une propriété aria-required avec une bordure gauche bleue.
    • Les champs avec une propriété aria-describedby avec une bordure de bouton enfoncé violette.
  5. Pour chaque indication de champ obligatoire, vérifier :
      • que l'indication est donnée par un texte précédant ;
      • ou que l'indication est donnée dans le label ;
      • ou que l'indication est donnée dans le title ;
      • ou que l'indication est donnée dans la propriété aria-label (sélectionner le champ, dans le menu « Doc info », activer l'option « View partial source ») ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte correspond à la valeur de la propriété aria-labelledby du champ. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte correspond à la valeur de la propriété aria-describedby du champ. À noter que plusieurs étiquettes sont recevables et que aria-describedby peut donc recevoir plusieurs identifiants).
    1. Pour chaque indication de champ obligatoire qui utilise une propriété aria-label, aria-required ou un attribut required, vérifier qu'une indication visuelle explicite est donnée dans le label, ou via un passage de texte lié par la propriété aria-labelledby ou aria-describedby.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Infos », activer les options « Afficher les informations de l'élément », « Afficher les title », « Afficher les détails des id & class ».
  3. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  4. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-indication-obligatoire.css :
    • Les labels sont entourés d'une bordure simple grise.
    • Les champs possédant une propriété aria-label apparaissent en pointillé (tirets) bleu.
    • les champs possédant une propriété aria-labelledby en pointillé (points) rouge.
    • Les champs avec un attribut required avec une bordure gauche orange.
    • Les champs avec une propriété aria-required avec une bordure gauche bleue.
    • Les champs avec une propriété aria-describedby avec une bordure de bouton enfoncé violette.
  5. Pour chaque indication de champ obligatoire, vérifier :
      • que l'indication est donnée par un texte précédant ;
      • ou que l'indication est donnée dans le label ;
      • ou que l'indication est donnée dans le title ;
      • ou que l'indication est donnée dans la propriété aria-label (sélectionner le champ et vérifier dans le bloc « DOM » de l'inspecteur d'élément) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la valeur de la propriété aria-labelledby du champ) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la valeur de la propriété aria-describedby du champ).
    1. Pour chaque indication de champ obligatoire qui utilise une propriété aria-label, aria-required ou un attribut required, vérifier qu'une indication visuelle explicite est donnée dans le label, ou via un passage de texte lié par la propriété aria-labelledby ou aria-describedby.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer les options « Display element information », « Display title attributes », « Display Id & Class details ».
  3. Pour chaque indication de champ obligatoire, vérifier :
      • que l'indication est donnée par un texte précédant ;
      • ou que l'indication est donnée dans le label ;
      • ou que l'indication est donnée dans le title ;
      • ou que l'indication est donnée dans la propriété aria-label (sélectionner le champ et vérifier dans le bloc « DOM » de l'inspecteur d'élément) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la valeur de la propriété aria-labelledby du champ) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la valeur de la propriété aria-describedby du champ).
    1. Pour chaque indication de champ obligatoire qui utilise une propriété aria-label, aria-required ou un attribut required, vérifier qu'une indication visuelle explicite est donnée dans le label, ou via un passage de texte lié par la propriété aria-labelledby ou aria-describedby.
  4. Si c'est le cas, le test est validé.

Tests 11.10.4, 11.10.5, 11.10.6

Avec la WAT
  1. Remplir les champs de formulaire avec des valeurs susceptibles de provoquer des erreurs de saisies (par exemple laisser vide un champ obligatoire, entrer une adresse e-mail mal formée, etc.).
  2. Sur la page de résultat :
    1. Dans le menu « CSS », activer l'option « Disable CSS ».
    2. Dans le menu « IE », activer l'option « Show titles ».
    3. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
    4. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-indication-erreur.css :
      • Les labels sont entourés d'une bordure simple grise.
      • Les champs possédant une propriété aria-label apparaissent en tirets bleus.
      • Les champs possédant une propriété aria-labelledby en pointillé (points) rouge.
      • Les champs avec un attribut required avec une bordure gauche orange.
      • Les champs avec une propriété aria-required avec une bordure gauche bleue.
      • Les champs avec une propriété aria-describedby avec une bordure de bouton enfoncé violette.
      • Les champs avec une propriété aria-invalid avec une bordure de bouton relâché noire.
  3. Pour chaque message d'erreur, vérifier :
      • que l'erreur est signalée par un texte précédant le champ concerné ;
      • ou que l'erreur est signalée dans le label ;
      • ou que l'erreur est signalée dans le title ;
      • ou que l'erreur est signalée dans la propriété aria-label (sélectionner le champ, dans le menu « Doc info », activer l'option « View partial source ») ;
      • ou que l'erreur est signalée par un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte correspond à la propriété aria-labelledby du champ. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants) ;
      • ou que l'erreur est signalée par un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte correspond à la propriété aria-describedby du champ. À noter que plusieurs étiquettes sont recevables et que aria-describedby peut donc recevoir plusieurs identifiants) ;
      • ou que le champ possède un attribut required ou un type (type de champs HTML5 comme e-mail, etc.) qui génère automatiquement une erreur (sélectionner le champ, dans le menu « Doc info », activer l'option « View partial source ») ;
      • ou que l'erreur est signalée par une propriété aria-invalid="true" (sélectionner le champ, dans le menu « Doc info », activer l'option « View partial source »).
    1. Pour chaque erreur signalée, qui utilise une propriété aria-label ou aria-invalid, vérifier qu'une indication visuelle explicite est donnée dans le label, ou via un passage de texte lié par la propriété aria-labelledby ou aria-describedby.
    2. Si les erreurs s'affichent après un rechargement de page, vérifier la présence, dans le titre de la page de l'expression « erreur sur le formulaire ».
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Remplir les champs de formulaire avec des valeurs susceptibles de provoquer des erreurs de saisies (par exemple laisser vide un champ obligatoire, entrer une adresse e-mail mal formée, etc.).
  2. Sur la page de résultat :
    1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
    2. Dans le menu « Infos », activer les options « Afficher les informations de l'élément », « Afficher les title », « Afficher les détails des id & class ».
    3. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
    4. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-indication-erreur.css :
      • Les labels sont entourés d'une bordure simple grise.
      • Les champs possédant une propriété aria-label apparaissent en tirets bleus.
      • Les champs possédant une propriété aria-labelledby en pointillé (points) rouge.
      • Les champs avec un attribut required avec une bordure gauche orange.
      • Les champs avec une propriété aria-required avec une bordure gauche bleue.
      • Les champs avec une propriété aria-describedby avec une bordure de bouton enfoncé violette.
      • Les champs avec une propriété aria-invalid avec une bordure de bouton relâché noire.
  3. Pour chaque message d'erreur, vérifier :
      • que l'erreur est signalée par un texte précédant le champ concerné ;
      • ou que l'erreur est signalée dans le label ;
      • ou que l'erreur est signalée dans le title ;
      • ou que l'erreur est signalée dans la propriété aria-label (sélectionner le champ et vérifier dans le bloc « DOM » de l'inspecteur d'élément) ;
      • ou que l'erreur est signalée par un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-labelledby du champ. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants) ;
      • ou que l'erreur est signalée par un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-describedby du champ. À noter que plusieurs étiquettes sont recevables et que aria-describedby peut donc recevoir plusieurs identifiants) ;
      • ou que le champ possède un attribut required ou un type (type de champs HTML5 comme e-mail, etc.) qui génère automatiquement une erreur (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément) ;
      • ou que l'erreur est signalée par une propriété aria-invalid="true" (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément).
    1. pour chaque erreur signalée, qui utilise une propriété aria-label ou aria-invalid, vérifier qu'une indication visuelle explicite est donnée dans le label, ou via un passage de texte lié par la propriété aria-labelledby ou aria-describedby.
    2. si les erreurs s'affichent après un rechargement de page, vérifier la présence, dans le titre de la page de l'expression « erreur sur le formulaire »
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Remplir les champs de formulaire avec des valeurs susceptibles de provoquer des erreurs de saisies (par exemple laisser vide un champ obligatoire, entrer une adresse e-mail mal formée, etc.).
  2. Sur la page de résultat :
    1. Dans le menu « CSS », activer l'option « Disable all styles ».
    2. Dans le menu « Information », activer les options « Display element information », « Display title attributes », « Display Id & Class details ».
  3. Pour chaque message d'erreur, vérifier :
      • que l'erreur est signalée par un texte précédant le champ concerné ;
      • ou que l'erreur est signalée dans le label ;
      • ou que l'erreur est signalée dans le title ;
      • ou que l'erreur est signalée dans la propriété aria-label (sélectionner le champ et vérifier dans le bloc « DOM » de l'inspecteur d'élément) ;
      • ou que l'erreur est signalée par un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-labelledby du champ. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants) ;
      • ou que l'erreur est signalée par un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-describedby du champ. À noter que plusieurs étiquettes sont recevables et que aria-describedby peut donc recevoir plusieurs identifiants) ;
      • ou que le champ possède un attribut required ou un type (type de champs HTML5 comme e-mail, etc.) qui génère automatiquement une erreur (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément) ;
      • ou que l'erreur est signalée par une propriété aria-invalid="true" (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément).
    1. pour chaque erreur signalée, qui utilise une propriété aria-label ou aria-invalid, vérifier qu'une indication visuelle explicite est donnée dans le label, ou via un passage de texte lié par la propriété aria-labelledby ou aria-describedby.
    2. si les erreurs s'affichent après un rechargement de page, vérifier la présence, dans le titre de la page de l'expression « erreur sur le formulaire »
  4. Si c'est le cas, le test est validé.

Tests 11.10.7, 11.10.8, 11.10.9, 11.10.10

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE » activer l'option « Show titles ».
  3. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  4. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-indication-obligatoire.css :
    • Les labels sont entourés d'une bordure simple grise.
    • Les champs possédant une propriété aria-label apparaissent en pointillé (tirets) bleu.
    • Les champs possédant une propriété aria-labelledby en pointillé (points) rouge.
    • Les champs avec un attribut required avec une bordure gauche orange.
    • Les champs avec une propriété aria-required avec une bordure gauche bleue.
    • Les champs avec une propriété aria-describedby avec une bordure de bouton enfoncé violette.
  5. Pour chaque champ obligatoire qui nécessite une indication de type ou de format de saisie (format d'adresse e-mail par exemple), vérifier :
      • que l'indication est donnée par un texte précédant ;
      • ou que l'indication est donnée dans le label ;
      • ou que l'indication est donnée dans le title, identique à l'attribut placeholder s'il est présent ;
      • ou que l'indication est donnée dans la propriété aria-label (sélectionner le champ, dans le menu « Doc info », activer l'option « View partial source ») ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte correspond à la propriété aria-labelledby du champ. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte correspond à la propriété aria-describedby du champ. À noter que plusieurs étiquettes sont recevables et que aria-describedby peut donc recevoir plusieurs identifiants).
    1. Pour chaque indication de type ou de format qui utilise une propriété aria-label, vérifier qu'une indication visuelle explicite est donnée dans le label, ou via un passage de texte lié par la propriété aria-labelledby ou aria-describedby.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Infos », activer les options « Afficher les informations de l'élément », « Afficher les title », « Afficher les détails des id & class ».
  3. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  4. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-indication-obligatoire.css :
    • Les labels sont entourés d'une bordure simple grise.
    • Les champs possédant une propriété aria-label apparaissent en pointillé (tirets) bleu.
    • Les champs possédant une propriété aria-labelledby en pointillé (points) rouge.
    • Les champs avec un attribut required avec une bordure gauche orange.
    • Les champs avec une propriété aria-required avec une bordure gauche bleue.
    • Les champs avec une propriété aria-describedby avec une bordure de bouton enfoncé violette.
  5. Pour chaque champ obligatoire qui nécessite une indication de type ou de format de saisie (format d'adresse e-mail par exemple), vérifier :
      • que l'indication est donnée par un texte précédant ;
      • ou que l'indication est donnée dans le label ;
      • ou que l'indication est donnée dans le title, identique à l'attribut placeholder s'il est présent ;
      • ou que l'indication est donnée dans la propriété aria-label (sélectionner le champ et vérifier dans le bloc « DOM » de l'inspecteur d'élément) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-labelledby du champ. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-describedby du champ. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants).
    1. Pour chaque indication de champ obligatoire qui utilise une propriété aria-label, vérifier qu'une indication visuelle explicite est donnée dans le label, ou via un passage de texte lié par la propriété aria-labelledby ou aria-describedby.
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer les options « Display element information », « Display title attributes », « Display Id & Class details ».
  3. Pour chaque champ obligatoire qui nécessite une indication de type ou de format de saisie (format d'adresse e-mail par exemple), vérifier :
      • que l'indication est donnée par un texte précédant ;
      • ou que l'indication est donnée dans le label ;
      • ou que l'indication est donnée dans le title, identique à l'attribut placeholder s'il est présent ;
      • ou que l'indication est donnée dans la propriété aria-label (sélectionner le champ et vérifier dans le bloc « DOM » de l'inspecteur d'élément) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-labelledby du champ. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants) ;
      • ou que l'indication est donnée par un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ, puis le passage de texte et vérifier dans le bloc « DOM » de l'inspecteur d'élément que l'attribut id du passage de texte correspond à la propriété aria-describedby du champ. À noter que plusieurs étiquettes sont recevables et que aria-labelledby peut donc recevoir plusieurs identifiants).
    1. Pour chaque indication de champ obligatoire qui utilise une propriété aria-label, vérifier qu'une indication visuelle explicite est donnée dans le label, ou via un passage de texte lié par la propriété aria-labelledby ou aria-describedby.
  4. Si c'est le cas, le test est validé.

Critère 11.11 [AA] Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?

Tests 11.11.1, 11.11.2

Avec la WAT
  1. Remplir les champs de formulaire avec des valeurs susceptibles de provoquer des erreurs de saisies (par exemple laisser vide un champ obligatoire, entrer une adresse e-mail mal formée, etc.).
  2. Sur la page de résultat :
    1. Dans le menu « CSS », activer l'option « Disable CSS ».
    2. Dans le menu « IE » activer l'option « Show titles ».
    3. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
    4. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-indication-erreur-AA.css :
      • Les labels sont entourés d'une bordure simple grise.
      • Les champs possédant une propriété aria-label apparaissent en pointillé (tirets) bleu. Pour savoir s'ils contiennent un message d'erreur, sélectionner le champ et dans le menu « Doc info », activer l'option « View partial source » pour accéder au contenu.
  3. Pour chaque message d'erreur, vérifier :
    1. la présence d'une indication de type ou de format de donnée ;
    2. la présence d'un exemple de saisie réelle.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Remplir les champs de formulaire avec des valeurs susceptibles de provoquer des erreurs de saisies (par exemple laisser vide un champ obligatoire, entrer une adresse e-mail mal formée, etc.).
  2. Sur la page de résultat :
    1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
    2. Dans le menu « Infos », activer les options « Afficher les informations de l'élément », « Afficher les title ».
    3. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
    4. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-indication-erreur-AA.css :
      • Les labels sont entourés d'une bordure simple grise.
      • Les champs possédant une propriété aria-label apparaissent en pointillé (tirets) bleu. Pour savoir s'ils contiennent un message d'erreur, sélectionner le champ et vérifier dans le bloc « DOM » de l'inspecteur d'élément pour accéder au contenu.
  3. Pour chaque message d'erreur, vérifier :
    1. la présence d'une indication de type ou de format de donnée ;
    2. la présence d'un exemple de saisie réelle.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Remplir les champs de formulaire avec des valeurs susceptibles de provoquer des erreurs de saisies (par exemple laisser vide un champ obligatoire, entrer une adresse e-mail mal formée, etc.).
  2. Sur la page de résultat :
    1. Dans le menu « CSS », activer l'option « Disable all styles ».
    2. Dans le menu « Information », activer les options « Display element information » et « Display title attributes ».
    3. Dans le menu « CSS », activer l'option Edit CSS, et dans le champ en bas de la fenêtre, saisir *{ box-sizing:border-box;}*:before,*:after{ display:block; background:#f2f2f2; font-weight:bold; font-size:100%; font-size:1rem;}input,select,textarea{ display:block; margin-bottom:5px;}input[aria-label],select[aria-label],textarea[aria-label]{ border: 2px dashed blue;}
      • Les labels sont entourés d'une bordure simple grise.
      • Les champs possédant une propriété aria-label apparaissent en pointillé (tirets) bleu. Pour savoir s'ils contiennent un message d'erreur, sélectionner le champ et vérifier dans le bloc « DOM » de l'inspecteur d'élément pour accéder au contenu.
    4. Pour chaque message d'erreur, vérifier :
      1. la présence d'une indication de type ou de format de donnée ;
      2. la présence d'un exemple de saisie réelle.
    5. Si c'est le cas, le test est validé.

Note technique au sujet des contrôles automatiques de format HTML5.

Critère 11.12 [AA] Pour chaque formulaire, les données à caractère financier, juridique ou personnel peuvent-elles être modifiées, mises à jour ou récupérées par l’utilisateur ?

Tests 11.12.1, 11.12.2

Pour tous
  1. Remplir le formulaire.
  2. Vérifier que pour chaque donnée à caractère financier (par exemple une indication de revenu), juridique (par exemple une référence d'acte administratif) ou personnelle (par exemple un numéro de téléphone), l'utilisateur peut :
      • modifier ou annuler les données et les actions effectuées sur ces données en cours de saisie (par exemple la saisie du champ et la fonctionnalité d'annulation d'édition du navigateur ne sont pas désactivées) ;
      • ou confirmer, de manière explicite, l'envoi de ces données via un mécanisme dédié (par exemple un champ de formulaire ou une étape supplémentaire) ;
      • récupérer les données supprimées en cours de saisie ;
      • ou confirmer, de manière explicite, la suppression de ces données via un mécanisme dédié (par exemple un champ de formulaire ou une étape supplémentaire).
  3. Si c'est le cas, le test est validé.

Critère 11.13 [AAA] Pour chaque formulaire, toutes les données peuvent-elles être modifiées, mises à jour ou récupérées par l’utilisateur ?

Tests 11.13.1, 11.13.2

Pour tous
  1. Remplir le formulaire.
  2. Vérifier que pour chaque donnée, l'utilisateur peut :
      • modifier ou annuler les données et les actions effectuées sur ces données en cours de saisie (par exemple la saisie du champ et la fonctionnalité d'annulation d'édition du navigateur ne sont pas désactivées) ;
      • ou confirmer, de manière explicite, l'envoi de ces données via un mécanisme dédié (par exemple un champ de formulaire ou une étape supplémentaire) ;
      • récupérer les données supprimées en cours de saisie ;
      • ou confirmer, de manière explicite, la suppression de ces données via un mécanisme dédié (par exemple un champ de formulaire ou une étape supplémentaire).
  3. Si c'est le cas, le test est validé.

Critère 11.14 [AAA] Pour chaque formulaire, des aides à la saisie sont-elles présentes ?

Critère 11.15 [AAA] Pour chaque formulaire, chaque aide à la saisie est-elle pertinente ?

Tests 11.14.1, 11.14.2, 11.14.3, 11.14.4, 11.14.5, 11.14.6, 11.15.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE » activer l'option « Show titles ».
  3. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  4. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-aide-saisie.css :
    • Les labels sont entourés d'une bordure simple grise.
    • Les champs possédant une propriété aria-label apparaissent en pointillé (tirets) bleu.
    • Les champs possédant une propriété aria-labelledby en pointillé (points) rouge.
    • Les champs avec une propriété aria-describedby avec une bordure de bouton enfoncé violette.
  5. Vérifier que des aides à la saisie (par exemple des indications explicites, des exemples etc.) :
      • sont présentes avant le formulaire ;
      • ou sont accessibles via un lien menant vers une page d'aide ;
      • ou sont présentes avant les champs ;
      • ou sont présentes dans le label ;
      • ou sont présentes dans le title ;
      • ou sont présentes dans la propriété aria-label (sélectionner le champ, dans le menu « Doc info », activer l'option « View partial source ») ;
      • ou sont présentes dans un passage de texte lié au champ par la propriété aria-labelledby (sélectionner le champ et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte correspond à la propriété aria-labelledby du champ) ;
      • ou sont présentes dans un passage de texte lié au champ par la propriété aria-describedby (sélectionner le champ et le passage de texte, dans le menu « Doc info », activer l'option « View partial source » et vérifier que l'attribut id du passage de texte correspond à la propriété aria-describedby du champ) ;
      • ou qu'un système d'assistance (par exemple un assistant virtuel, un canal de chat, une assistance téléphonique…) est présent (ce cas peut nécessiter de recourir à la page CSS activé).
    1. pour chaque aide à la saisie qui utilise une propriété aria-label, vérifier qu'une indication visuelle équivalente, explicite, est fournie ;
    2. pour chaque aide à la saisie, vérifier que celle-ci est pertinente (elle permet de lever les blocages significatifs pour des utilisateurs en situation de handicap mental, cognitif ou psychique, notamment).
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Infos », activer les options « Afficher les informations de l'élément », « Afficher les title », « Afficher les détails des id & class ».
  3. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  4. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-aide-saisie.css :
    • Les labels sont entourés d'une bordure simple grise.
    • Les champs possédant une propriété aria-label apparaissent en pointillé (tirets) bleu.
    • Les champs possédant une propriété aria-labelledby en pointillé (points) rouge.
    • Les champs avec une propriété aria-describedby avec une bordure de bouton enfoncé violette.
  5. Vérifier que des aides à la saisie (par exemple des indications explicites, des exemples, etc.) :
      • sont présentes avant le formulaire ;
      • ou sont accessibles via un lien menant vers une page d'aide ;
      • ou sont présentes avant les champs ;
      • ou sont présentes dans le label ;
      • ou sont présentes dans le title ;
      • ou sont présentes dans la propriété aria-label (faire un clic droit sur le champ et choisir «  Examiner l'élément  ») ;
      • ou sont présentes dans un passage de texte lié au champ par la propriété aria-labelledby (Faire un clic droit sur le champ et choisir « Examiner l'élément ». Vérifier que l'attribut id du passage de texte correspond à la propriété aria-labelledby du champ) ;
      • ou sont présentes dans un passage de texte lié au champ par la propriété aria-describedby (Faire un clic droit sur le champ et choisir « Examiner l'élément ». Vérifier que l'attribut id du passage de texte correspond à la propriété aria-describedby du champ) ;
      • ou qu'un système d'assistance (par exemple un assistant virtuel, un canal de chat, une assistance téléphonique…) est présent (ce cas peut nécessiter de recourir à la page CSS activé).
    1. pour chaque aide à la saisie qui utilise une propriété aria-label, vérifier qu'une indication visuelle équivalente, explicite, est fournie.
    2. pour chaque aide à la saisie, vérifier que celle-ci est pertinente (elle permet de lever les blocages significatifs pour des utilisateurs en situation de handicap mental, cognitif ou psychique, notamment).
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer les options « Display element information », « Display title attributes », « Display Id & Class details ».
  3. Vérifier que des aides à la saisie (par exemple des indications explicites, des exemples, etc.) :
      • sont présentes avant le formulaire ;
      • ou sont accessibles via un lien menant vers une page d'aide ;
      • ou sont présentes avant les champs ;
      • ou sont présentes dans le label ;
      • ou sont présentes dans le title ;
      • ou sont présentes dans la propriété aria-label (faire un clic droit sur le champ et choisir « Inspecter ») ;
      • ou sont présentes dans un passage de texte lié au champ par la propriété aria-labelledby (Faire un clic droit sur le champ et choisir « Inspecter ». Vérifier que l'attribut id du passage de texte correspond à la propriété aria-labelledby du champ) ;
      • ou sont présentes dans un passage de texte lié au champ par la propriété aria-describedby (Faire un clic droit sur le champ et choisir « Inspecter ». Vérifier que l'attribut id du passage de texte correspond à la propriété aria-describedby du champ) ;
      • ou qu'un système d'assistance (par exemple un assistant virtuel, un canal de chat, une assistance téléphonique…) est présent (ce cas peut nécessiter de recourir à la page CSS activé).
    1. pour chaque aide à la saisie qui utilise une propriété aria-label, vérifier qu'une indication visuelle équivalente, explicite, est fournie.
    2. pour chaque aide à la saisie, vérifier que celle-ci est pertinente (elle permet de lever les blocages significatifs pour des utilisateurs en situation de handicap mental, cognitif ou psychique, notamment).
  4. Si c'est le cas, le test est validé.

Critère 12.1 [AA] Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents, au moins (hors cas particuliers) ?

Test 12.1.1

Pour tous
  1. Pour chaque ensemble de pages du site, vérifier :
    • la présence d'un menu de navigation et d'un plan du site ;
    • ou la présence d'un menu de navigation et d'un moteur de recherche (cf. note) ;
    • ou la présence d'un plan du site et d'un moteur de recherche.
  2. Si c'est le cas, le test est validé.

Note : pour qu'un moteur de recherche puisse être considéré comme un système de navigation, il doit permettre d'accéder à tous les contenus du site web et pas seulement à une partie de ceux-ci. Un moteur de recherche, limité à un catalogue, par exemple, n'est pas considéré comme un système de navigation.

Critère 12.2 [AA] Dans chaque ensemble de pages, le menu et les barres de navigation sont-ils toujours à la même place (hors cas particuliers) ?

Tests 12.2.1, 12.2.2

Avec la WAT
  1. Choisir une page de l'échantillon appartenant au même ensemble que la page en cours d'audit.
  2. Pour chacune des deux pages, les ouvrir sur deux onglets différents.
  3. Pour chacune des pages, sur l'un des onglets, Dans le menu « CSS », activer l'option « Disable CSS ».
  4. Vérifier :
    1. sur les pages « CSS désactivées » :
      1. que le menu de navigation est toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple, il est toujours avant le contenu) ;
      2. que les barres de navigation (par exemple un fil d'Ariane, des liens de navigation dans une collection de pages…) sont toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple, le fil d'Ariane est toujours entre le menu et le contenu…).
    2. sur les pages « CSS activées » :
      1. que le menu de navigation est toujours, visuellement, à la même place ;
      2. que les barres de navigation (par exemple un fil d'Ariane, des liens de navigations dans une collection de pages…) sont toujours, visuellement, à la même place.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Choisir une page de l'échantillon appartenant au même ensemble que la page en cours d'audit.
  2. Pour chacune des deux pages, les ouvrir sur deux onglets différents.
  3. Pour chacune des pages, sur l'un des onglets, Dans le menu « CSS », activer l'option « Désactiver les CSS » puis activer l'option « Tous les styles ».
  4. Vérifier :
    1. sur les pages « CSS désactivées » :
      1. que le menu de navigation est toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple, il est toujours avant le contenu) ;
      2. que les barres de navigation (par exemple un fil d'Ariane, des liens de navigation dans une collection de pages…) sont toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple, le fil d'Ariane est toujours entre le menu et le contenu…).
    2. sur les pages « CSS activées » :
      1. que le menu de navigation est toujours, visuellement, à la même place ;
      2. que les barres de navigation (par exemple un fil d'Ariane, des liens de navigations dans une collection de pages…) sont toujours, visuellement, à la même place.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Choisir une page de l'échantillon appartenant au même ensemble que la page en cours d'audit.
  2. Pour chacune des deux pages, les ouvrir sur deux onglets différents.
  3. Pour chacune des pages, sur l'un des onglets, Dans le menu « CSS », activer l'option « Disable all styles ».
  4. Vérifier :
    1. sur les pages « CSS désactivées » :
      1. que le menu de navigation est toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple, il est toujours avant le contenu) ;
      2. que les barres de navigation (par exemple un fil d'Ariane, des liens de navigation dans une collection de pages…) sont toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple, le fil d'Ariane est toujours entre le menu et le contenu…).
    2. sur les pages « CSS activées » :
      1. que le menu de navigation est toujours, visuellement, à la même place ;
      2. que les barres de navigation (par exemple un fil d'Ariane, des liens de navigations dans une collection de pages…) sont toujours, visuellement, à la même place.
  5. Si c'est le cas, le test est validé.

Critère 12.3 [AA] Dans chaque ensemble de pages, le menu et les barres de navigation ont-ils une présentation cohérente (hors cas particuliers) ?

Tests 12.3.1, 12.3.2

Pour tous
  1. Pour chaque ensemble de pages, vérifier :
    1. que le menu de navigation a une présentation visuellement cohérente (les jeux de couleurs, les indications de page active, le comportement visuel est identique, par exemple) ;
    2. que les barres de navigation (par exemple un fil d'Ariane, des liens de navigations dans une collection de pages…) ont une présentation cohérente (les jeux de couleurs, les indications de page active, le comportement visuel est identique, par exemple).
  2. Si c'est le cas, le test est validé.

Critère 12.4 [AA] La page "plan du site" est-elle pertinente ?

Tests 12.4.1, 12.4.3

Pour tous
  1. Vérifier que le plan du site est représentatif de l'architecture générale du site (cf. note).
  2. Repérer dans la liste des pages du plan du site, les intitulés de lien pouvant prêter à confusion ou susceptibles de mener à des pages obsolètes par exemple. Activer le lien et vérifier que la page cible est bien celle attendue.
  3. Si c'est le cas, le test est validé.

Note : Un plan du site trop complexe ou trop profond n'est pas recommandé pour aider à la navigation. Il n'est pas obligatoire que toutes les pages soient présentes dans le plan du site si elles peuvent être atteintes, par exemple, à partir de la page d'accueil d'une rubrique ou d'un catalogue.

Test 12.4.2

Avec la WAT
  1. Dans le menu « Check » activer l'option « W3C link checker ».
  2. Vérifier que tous les liens sont fonctionnels.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « Outils », activer l'option « Validation des liens ».
  2. Vérifier que tous les liens sont fonctionnels.
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu Tools, activer l'option Validate links.
  2. Vérifier que tous les liens sont fonctionnels.
  3. Si c'est le cas, le test est validé.

Critère 12.5 [AA] Dans chaque ensemble de pages, la page "plan du site" est-elle atteignable de manière identique ?

Tests 12.5.1, 12.5.2, 12.5.3

Avec la WAT
  1. Choisir une page de l'échantillon appartenant au même ensemble que la page en cours d'audit.
  2. Pour chacune des deux pages, les ouvrir sur deux onglets différents.
  3. Pour chacune des pages, sur l'un des onglets, Dans le menu « CSS », activer l'option « Disable CSS ».
  4. Vérifier :
    1. sur les pages « CSS désactivées », que le moyen d'accès au plan du site est toujours le même (un lien ou un bouton par exemple) ;
    2. sur les pages « CSS désactivées », que le moyen d'accès au plan du site est toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple il est toujours en haut de page) ;
    3. sur les pages « CSS activées », que le moyen d'accès au plan du site est toujours, visuellement, à la même place.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Choisir une page de l'échantillon appartenant au même ensemble que la page en cours d'audit.
  2. Pour chacune des deux pages, les ouvrir sur deux onglets différents.
  3. Pour chacune des pages, sur l'un des onglets, Dans le menu « CSS », activer l'option « Désactiver les CSS » puis activer l'option « Tous les styles ».
  4. Vérifier :
    1. sur les pages « CSS désactivées », que le moyen d'accès au plan du site est toujours le même (un lien ou un bouton par exemple) ;
    2. sur les pages « CSS désactivées », que le moyen d'accès au plan du site est toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple il est toujours en haut de page) ;
    3. sur les pages « CSS activées », que le moyen d'accès au plan du site est toujours, visuellement, à la même place.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Choisir une page de l'échantillon appartenant au même ensemble que la page en cours d'audit.
  2. Pour chacune des deux pages, les ouvrir sur deux onglets différents.
  3. Pour chacune des pages, sur l'un des onglets, Dans le menu « CSS », activer l'option « Disable all styles ».
  4. Vérifier :
    1. sur les pages « CSS désactivées », que le moyen d'accès au plan du site est toujours le même (un lien ou un bouton par exemple) ;
    2. sur les pages « CSS désactivées », que le moyen d'accès au plan du site est toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple il est toujours en haut de page) ;
    3. sur les pages « CSS activées », que le moyen d'accès au plan du site est toujours, visuellement, à la même place.
  5. Si c'est le cas, le test est validé.

Critère 12.6 [AA] Dans chaque ensemble de pages, le moteur de recherche est-il atteignable de manière identique ?

Tests 12.6.1, 12.6.2, 12.6.3

Avec la WAT
  1. Choisir une page de l'échantillon appartenant au même ensemble que la page en cours d'audit.
  2. Pour chacune des deux pages, les ouvrir sur deux onglets différents.
  3. Pour chacune des pages, sur l'un des onglets, Dans le menu « CSS », activer l'option « Disable CSS ».
  4. Vérifier :
    1. sur les pages « CSS désactivées », que la fonctionnalité du moteur de recherche est toujours la même (un champ de formulaire par exemple) ;
    2. sur les pages « CSS désactivées », que le moteur de recherche est toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple il est toujours en haut de page) ;
    3. sur les pages « CSS activées », que le moteur de recherche est toujours, visuellement, à la même place.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Choisir une page de l'échantillon appartenant au même ensemble que la page en cours d'audit.
  2. Pour chacune des deux pages, les ouvrir sur deux onglets différents.
  3. Pour chacune des pages, sur l'un des onglets, activer l'option « Désactiver les CSS » puis activer l'option « Tous les styles ».
  4. Vérifier :
    1. sur les pages « CSS désactivées », que la fonctionnalité du moteur de recherche est toujours la même (un champ de formulaire par exemple) ;
    2. sur les pages « CSS désactivées », que le moteur de recherche est toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple il est toujours en haut de page) ;
    3. sur les pages « CSS activées », que le moteur de recherche est toujours, visuellement, à la même place.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Choisir une page de l'échantillon appartenant au même ensemble que la page en cours d'audit.
  2. Pour chacune des deux pages, les ouvrir sur deux onglets différents.
  3. Pour chacune des pages, sur l'un des onglets, Dans le menu « CSS », activer l'option « Disable all styles ».
  4. Vérifier :
    1. sur les pages « CSS désactivées », que la fonctionnalité du moteur de recherche est toujours la même (un champ de formulaire par exemple) ;
    2. sur les pages « CSS désactivées », que le moteur de recherche est toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple il est toujours en haut de page) ;
    3. sur les pages « CSS activées », que le moteur de recherche est toujours, visuellement, à la même place.
  5. Si c'est le cas, le test est validé.

Critère 12.7 [AA] Dans chaque page d’une collection de pages, des liens facilitant la navigation sont-ils présents ?

Tests 12.7.1

Pour tous
  1. Pour chaque collection de pages, vérifier :
    1. la présence d'un lien permettant d'accéder à la page précédente ;
    2. la présence d'un lien permettant d'accéder à la page suivante ;
    3. La présence d'une méthode permettant d'accéder à une page quelconque de la collection : liens groupés par dizaine, liste de navigation (balise select), champ de formulaire, par exemple.
  2. Si c'est le cas, le test est validé.

Critère 12.8 [AAA] Dans chaque page Web, un fil d’Ariane est-il présent (hors cas particuliers) ?

Critère 12.9 [AAA] Dans chaque page Web, le fil d’Ariane est-il pertinent ?

Tests 12.8.1, 12.9.1

Pour tous
  1. Vérifier :
    1. la présence d'un fil d'Ariane ;
    2. que le fil d'Ariane est représentatif de la position de la page dans l'arborescence du site.
  2. Si c'est le cas, le test est validé.

Critère 12.10 [A] Dans chaque page Web, les groupes de liens importants (menu, barre de navigation…) et la zone de contenu sont-ils identifiés ?

Test 12.10.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  3. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-landmark-aria.css.
  4. Les zones possédant un rôle landmark sont entourées d'une bordure verte.
  5. vérifier :
    1. que la zone d'en-tête possède un rôle banner. En HTML5, vérifier que le rôle banner est implémenté sur une balise header (faire un clic droit et choisir « Inspecter l'élément »)) ;
    2. que le menu de navigation principal possède un rôle navigation. En HTML5, vérifier que le rôle navigation est implémenté sur une balise nav (faire un clic droit et choisir « Inspecter l'élément »)) ;
    3. que la zone de recherche possède un rôle search ;
    4. que la zone de contenu principal possède un rôle main. En HTML5, vérifier que le role main est implémenté sur une balise main (faire un clic droit et choisir « Inspecter l'élément »)).
    5. que la zone de pied de page possède un rôle contentinfo. En HTML5, vérifier que le role contentinfo est implémenté sur une balise footer (faire un clic droit et choisir « Inspecter l'élément »)) ;
    6. que les rôles banner,search, main, contentinfo sont uniques dans la page ;
    7. que le rôle navigation est réservé aux zones de navigation principale et secondaire (menu de navigation principal, menu de rubrique, fil d'Ariane, liens de navigation de collection de pages…).
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Infos », activer l'option « Afficher les informations de l'élément ».
  3. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  4. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-landmark-aria.css.
  5. Les zones possédant un rôle landmark sont entourées d'une bordure verte.
  6. Vérifier :
    1. que la zone d'en-tête possède un rôle banner. En HTML5, vérifier que le role banner est implémenté sur une balise header (cliquer sur l'élément et vérifier dans le bloc « DOM ») ;
    2. que le menu de navigation principal possède un rôle navigation. En HTML5, vérifier que le rôle navigation est implémenté sur une balise nav (cliquer sur l'élément et vérifier dans le bloc « DOM ») ;
    3. que la zone de recherche possède un rôle search ;
    4. que la zone de contenu principal possède un rôle main. En HTML5, vérifier que le rôle main est implémenté sur une balise main (cliquer sur l'élément et vérifier dans le bloc « DOM ») ;
    5. que la zone de pied de page possède un rôle contentinfo. En HTML5, vérifier que le rôle contentinfo est implémenté sur une balise footer (cliquer sur l'élément et vérifier dans le bloc « DOM ») ;
    6. que les rôles banner, search, main, contentinfo sont uniques dans la page ;
    7. que le rôle navigation est réservé aux zones de navigation principale et secondaire (menu de navigation principal, menu de rubrique, fil d'Ariane, liens de navigation de collection de pages…).
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer l'option « Display element information ».
  3. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir *:before, *:after { display: block; background: #f2f2f2; font-weight: bold; font-size: 100%; font-size: 1rem; } main, [role="banner"], [role="navigation"], [role="contentinfo"], [role="main"], [role="search"], header[role="banner"], nav[role="navigation"], footer[role="contentinfo"], main[role="main"], input[role="search"], form[role="search"] { display: block; width: 100%; margin: 0.5em 0; padding: 0 0.5em; } header[role="banner"], nav[role="navigation"], footer[role="contentinfo"], main[role="main"], [role="search"] { border: 2px solid green; } header[role="banner"]:before { content: '[role="banner"]'; } nav[role="navigation"]:before { content: '[role="navigation"]'; } footer[role="contentinfo"]:before { content: '[role="contentinfo"]'; } main[role="main"]:before { content: '[role="main"]'; } nav[role="navigation"]:before { content: '[role="navigation"]'; } [role="search"]:before { content: '[role="search"]'; }
  4. Les zones possédant un rôle landmark sont entourées d'une bordure verte.
  5. Vérifier :
    1. que la zone d'en-tête possède un rôle banner. En HTML5, vérifier que le role banner est implémenté sur une balise header (cliquer sur l'élément et vérifier dans le bloc « DOM ») ;
    2. que le menu de navigation principal possède un rôle navigation. En HTML5, vérifier que le rôle navigation est implémenté sur une balise nav (cliquer sur l'élément et vérifier dans le bloc « DOM ») ;
    3. que la zone de recherche possède un rôle search ;
    4. que la zone de contenu principal possède un rôle main. En HTML5, vérifier que le rôle main est implémenté sur une balise main (cliquer sur l'élément et vérifier dans le bloc « DOM ») ;
    5. que la zone de pied de page possède un rôle contentinfo. En HTML5, vérifier que le rôle contentinfo est implémenté sur une balise footer (cliquer sur l'élément et vérifier dans le bloc « DOM ») ;
    6. que les rôles banner, search, main, contentinfo sont uniques dans la page ;
    7. que le rôle navigation est réservé aux zones de navigation principale et secondaire (menu de navigation principal, menu de rubrique, fil d'Ariane, liens de navigation de collection de pages…).
  6. Si c'est le cas, le test est validé.

Note : Consulter la note technique au sujet des rôles landmark et des liens d'évitement.

Critère 12.11 [A] Dans chaque page Web, des liens d’évitement ou d’accès rapide aux groupes de liens importants et à la zone de contenu sont-ils présents (hors cas particuliers) ?

Tests 12.11.1, 12.11.2, 12.11.3, 12.11.4

Avec la WAT
  1. Ouvrir la page sur deux onglets différents.
  2. Sur l'un des onglets, Dans le menu « CSS », activer l'option « Disable CSS ».
  3. Sur la page « CSS désactivées », vérifier :
    1. la présence, si nécessaire (cf. note), d'un lien permettant d'accéder directement au menu de navigation principal ;
    2. la présence, si nécessaire (cf. note), d'un lien permettant d'accéder directement à la zone de contenu principal ;
    3. que les liens sont fonctionnels ;
    4. que les liens sont toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple il sont toujours en haut de page), sur chaque ensemble de pages.
  4. Sur la page « CSS activées », vérifier :
    1. que les liens sont toujours, visuellement, à la même place dans chaque ensemble de pages ;
    2. que les liens apparaissent à la prise de focus lors d'une tabulation, au moins.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Ouvrir la page sur deux onglets différents.
  2. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  3. Sur la page « CSS désactivées », vérifier :
    1. la présence, si nécessaire (cf. note), d'un lien permettant d'accéder directement au menu de navigation principal ;
    2. la présence, si nécessaire (cf. note), d'un lien permettant d'accéder directement à la zone de contenu principale ;
    3. que les liens sont fonctionnels ;
    4. que les liens sont toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple il sont toujours en haut de page), sur chaque ensemble de pages.
  4. Sur la page « CSS activées », vérifier :
    1. que les liens sont toujours, visuellement, à la même place dans chaque ensemble de pages ;
    2. que les liens apparaissent à la prise de focus lors d'une tabulation, au moins.
  5. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Ouvrir la page sur deux onglets différents.
  2. Dans le menu « CSS », activer l'option « Disable all styles ».
  3. Sur la page « CSS désactivées », vérifier :
    1. la présence, si nécessaire (cf. note), d'un lien permettant d'accéder directement au menu de navigation principal ;
    2. la présence, si nécessaire (cf. note), d'un lien permettant d'accéder directement à la zone de contenu principale ;
    3. que les liens sont fonctionnels ;
    4. que les liens sont toujours à la même place (par rapport à l'ordre relatif des éléments de la page, par exemple il sont toujours en haut de page), sur chaque ensemble de pages.
  4. Sur la page « CSS activées », vérifier :
    1. que les liens sont toujours, visuellement, à la même place dans chaque ensemble de pages ;
    2. que les liens apparaissent à la prise de focus lors d'une tabulation, au moins.
  5. Si c'est le cas, le test est validé.

Note : il n'est pas obligatoire que tous les liens d'accès rapide soient systématiquement proposés, généralement le lien d'accès au contenu est toujours présent pour éviter le menu de navigation, en revanche les liens d'accès au menu ou à la recherche sont inutiles si ces éléments sont situés immédiatement en haut de page par exemple.

Critère 12.12 [AAA] Dans chaque page Web, la page en cours de consultation est-elle indiquée dans le menu de navigation ?

Test 12.12.1

Pour tous
  1. Vérifier que la page active est signalée dans le menu de navigation principal ou les menus de navigation secondaire pour les pages d'une sous-rubrique par exemple.
  2. Si c'est le cas, le test est validé.

Critère 12.13 [A] Dans chaque page Web, l’ordre de tabulation est-il cohérent ?

Critère 12.14 [A] Dans chaque page Web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?

Tests 12.13.1, 12.13.2, 12.14.1

Avec la WAT
  1. Dans le menu « Structure », activer l'option « Visually show focus ».
  2. Tabuler sur l'ensemble des contenus de la page et vérifier que l'ordre de tabulation reste cohérent (cf. note).
  3. Repérer les éléments (lien ou bouton) qui mettent à jour un contenu via un script (affichage d'élément masqués, mise à jour de contenus via AJAX par exemple).
  4. Positionner la tabulation sur l'élément déclencheur et l'activer.
  5. Après l'affichage du contenu mis à jour, vérifier que la tabulation reste cohérente.
  6. Vérifier qu'il n'existe pas de piège au clavier (cf. note) :
    • à partir de la position courante, l'élément focusable suivant ou précédent (SHIFT + TAB) est atteignable avec la touche de tabulation ;
    • l'élément possédant actuellement le focus de tabulation propose une méthode utilisable au clavier (par exemple un raccourci clavier) permettant d'atteindre l'élément suivant ou précédent.
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  2. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-focus.css.
  3. Tabuler sur l'ensemble des contenus de la page et vérifier que l'ordre de tabulation reste cohérent (cf. note).
  4. Repérer les éléments (lien ou bouton) qui mettent à jour un contenu via un script (affichage d'élément masqués, mise jour de contenu via AJAX par exemple).
  5. Positionner la tabulation sur l'élément déclencheur et l'activer.
  6. Après l'affichage du contenu mis à jour, vérifier que la tabulation reste cohérente.
  7. Vérifier qu'il n'existe pas de piège au clavier (cf. note) :
    • à partir de la position courante, l'élément focusable suivant ou précédent (Maj + TAB) est atteignable avec la touche de tabulation ;
    • ou l'élément possédant actuellement le focus de tabulation propose une méthode utilisable au clavier (par exemple un raccourci clavier) permettant d'atteindre l'élément suivant ou précédent.
  8. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir *:focus{border:2px solid red!important;}
  2. Tabuler sur l'ensemble des contenus de la page et vérifier que l'ordre de tabulation reste cohérent (cf. note).
  3. Repérer les éléments (lien ou bouton) qui mettent à jour un contenu via un script (affichage d'élément masqués, mise jour de contenu via AJAX par exemple).
  4. Positionner la tabulation sur l'élément déclencheur et l'activer.
  5. Après l'affichage du contenu mis à jour, vérifier que la tabulation reste cohérente.
  6. Vérifier qu'il n'existe pas de piège au clavier (cf. note) :
    • à partir de la position courante, l'élément focusable suivant ou précédent (Maj + TAB) est atteignable avec la touche de tabulation ;
    • ou l'élément possédant actuellement le focus de tabulation propose une méthode utilisable au clavier (par exemple un raccourci clavier) permettant d'atteindre l'élément suivant ou précédent.
  7. Si c'est le cas, le test est validé.

Note 1 : 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.

Note 2 : certains éléments complexes, comme un groupe de bouton radio, une liste select et tous les composants développés avec 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 bouton radio les options sont naviguables 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 3 : sur certains navigateurs, par exemple Firefox, un bug d'implémentation de la balise <object> empêche l'utilisateur d'y accéder avec la touche de tabulation. Ce comportement n'est pas considéré comme une non-conformité (le développeur n'a pas de solution à ce problème).

Consultation

Critère 13.1 [A] Pour chaque page Web, l’utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ?

Test 13.1.1

Pour tous
  1. Repérer dans la page, les rafraîchissements initiés dans le contenu d'une balise <object>, <embed>,svg ou <canvas> et par une balise <meta http-equiv="refresh" content="[compteur]"> (dans le head de la page).
  2. Vérifier pour chaque rafraîchissement :
    • la présence d'un mécanisme permettant à l'utilisateur de stopper et relancer le rafraîchissement ;
    • ou la présence d'un mécanisme permettant à l'utilisateur d'augmenter la limite de temps entre deux rafraîchissements de dix fois, au moins ;
    • ou 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 ;
    • ou que 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 tous
  1. Repérer dans la page, les redirections automatiques initiées par une balise <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 tous
  1. Repérer dans la page, les redirections automatiques initiées par un script (sous la forme d'un décompte par exemple).
  2. Vérifier :
    • la présence d'un mécanisme permettant à l'utilisateur de stopper et relancer la redirection ;
    • ou la présence d'un mécanisme permettant à l'utilisateur d'augmenter la limite de temps avant le rafraîchissement de dix fois, au moins ;
    • ou 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 ;
    • ou que 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 tous
  1. Repérer dans la page, les procédés limitant le temps d'une session (par exemple après une authentification).
  2. Vérifier :
    • la présence d'un mécanisme permettant à l'utilisateur de supprimer la limite de temps ;
    • ou la présence d'un mécanisme permettant à l'utilisateur d'augmenter la limite de temps ;
    • ou que la limite de temps est de vingt heures, au moins.
  3. Si c'est le cas, le test est validé.

Critère 13.2 [A] Dans chaque page Web, pour chaque ouverture de nouvelle fenêtre, l’utilisateur est-il averti ?

Tests 13.2.1, 13.2.2, 13.2.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  3. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-target-new-windows.css.
  4. Les liens possédant un attribut target, les balises object, <embed> et les éléments de formulaires sont entourés d'une bordure verte.
  5. Pour les liens (balises a) qui possèdent l'attribut target avec une valeur différente de _self, _top ou _parent, vérifier que ces liens possèdent une indication explicite dans l'intitulé ou dans le contexte du lien.
  6. Repérer les éléments object, <embed> ou les contrôles de formulaire susceptibles de s'ouvrir dans une nouvelle fenêtre.
  7. Pour les éléments qui s'ouvrent dans une nouvelle fenêtre, vérifier qu'une indication explicite est fournie à l'utilisateur avant le déclenchement de l'action d'ouverture (par exemple via l'intitulé ou le title d'un bouton…).
  8. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  3. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-target-new-windows.css.
  4. Les liens possédant un attribut target, les balises object, <embed> et les éléments de formulaires sont entourés d'une bordure verte.
  5. Pour les liens (balises a) qui possèdent l'attribut target avec une valeur différente de _self, _top ou _parent, vérifier que ces liens possèdent une indication explicite dans l'intitulé ou dans le contexte du lien.
  6. Repérer les éléments object, <embed> ou les contrôles de formulaire susceptibles de s'ouvrir dans une nouvelle fenêtre.
  7. Pour les éléments qui s'ouvrent dans une nouvelle fenêtre, vérifier qu'une indication explicite est fournie à l'utilisateur avant le déclenchement de l'action d'ouverture (par exemple via l'intitulé ou le title d'un bouton…).
  8. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir *:before, *:after{ display:block; background:#f2f2f2; font-weight:bold; font-size:100%; font-size:1rem; } a[target], object, embed, input, select, textarea, button{ display:block; margin-bottom:3px; border: 2px solid green; } a[target]:before{ content: "target="attr(target)""; }
  3. Les liens possédant un attribut target, les balises object, <embed> et les éléments de formulaires sont entourés d'une bordure verte.
  4. Pour les liens (balises a) qui possèdent l'attribut target avec une valeur différente de _self, _top ou _parent, vérifier que ces liens possèdent une indication explicite dans l'intitulé ou dans le contexte du lien.
  5. Repérer les éléments object, <embed> ou les contrôles de formulaire susceptibles de s'ouvrir dans une nouvelle fenêtre.
  6. Pour les éléments qui s'ouvrent dans une nouvelle fenêtre, vérifier qu'une indication explicite est fournie à l'utilisateur avant le déclenchement de l'action d'ouverture (par exemple via l'intitulé ou le title d'un bouton…).
  7. Si c'est le cas, le test est validé.

Critère 13.3 [A] Dans chaque page Web, l’ouverture d’une nouvelle fenêtre ne doit pas être déclenchée sans action de l’utilisateur. Cette règle est-elle respectée ?

Test 13.3.1

Pour tous
  1. Vérifier qu'à l'ouverture de la page, aucune nouvelle fenêtre (pop-up ou pop-under par exemple) n'est ouverte.
  2. Si c'est le cas, le test est validé.

Critère 13.4 [AAA] Dans chaque page Web, une tâche ne doit pas requérir de limite de temps pour être réalisée, sauf si elle se déroule en temps réel ou si cette limite de temps est essentielle. Cette règle est-elle respectée ?

Test 13.4.1

Pour tous
  1. Pour chaque tâche qui nécessite une limite de temps, vérifier :
    • que la tâche se déroule en temps réel ;
    • ou que la limite de temps est essentielle au bon fonctionnement de la tâche.
  2. Si c'est le cas, le test est validé.

Critère 13.5 [AAA] Dans chaque page Web, lors d’une interruption de session authentifiée, les données saisies par l’utilisateur sont-elles récupérées après ré-authentification ?

Test 13.5.1

Pour tous
  1. Repérer dans la page, une tâche nécessitant l'ouverture d'une session authentifiée (par exemple un accès à un compte client).
  2. Se connecter et repérer un formulaire à remplir.
  3. Remplir le formulaire et se déconnecter avant l'envoi du formulaire.
  4. Se reconnecter et vérifier que toutes les données préalablement saisies sont présentes.
  5. Si c'est le cas, le test est validé.

Critère 13.6 [A] Dans chaque page Web, pour chaque fichier en téléchargement, des informations relatives à sa consultation sont-elles présentes (hors cas particuliers) ?

Tests 13.6.1, 13.6.2, 13.6.3

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Repérer les liens et les contrôles de formulaire (un bouton de formulaire ou un formulaire de téléchargement par exemple) permettant de télécharger un fichier.
  3. Pour chaque fichier proposé au téléchargement, vérifier :
    1. la présence d'une indication de format (par exemple .odt) dans l'intitulé du lien, le contexte du lien ou préalablement à l'action de téléchargement pour les contrôles de formulaire ;
    2. la présence d'une indication de poids dans l'intitulé du lien, le contexte du lien ou préalablement à l'action de téléchargement pour les contrôles de formulaire ;
    3. la présence, pour les documents dans une langue différente de celle de la page, d'une indication de langue (par exemple « en anglais ») dans l'intitulé du lien, le contexte du lien ou préalablement à l'action de téléchargement pour les contrôles de formulaire.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS ».
  2. Repérer les liens et les contrôles de formulaire (un bouton de formulaire ou un formulaire de téléchargement par exemple) permettant de télécharger un fichier.
  3. Pour chaque fichier proposé au téléchargement, vérifier :
    1. la présence d'une indication de format (par exemple odt) dans l'intitulé du lien, le contexte du lien ou préalablement à l'action de téléchargement pour les contrôles de formulaire ;
    2. la présence d'une indication de poids dans l'intitulé du lien, le contexte du lien ou préalablement à l'action de téléchargement pour les contrôles de formulaire ;
    3. la présence, pour les documents dans une langue différente de celle de la page, d'une indication de langue (par exemple « en anglais ») dans l'intitulé du lien, le contexte du lien ou préalablement à l'action de téléchargement pour les contrôles de formulaire.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Repérer les liens et les contrôles de formulaire (un bouton de formulaire ou un formulaire de téléchargement par exemple) permettant de télécharger un fichier.
  3. Pour chaque fichier proposé au téléchargement, vérifier :
    1. la présence d'une indication de format (par exemple odt) dans l'intitulé du lien, le contexte du lien ou préalablement à l'action de téléchargement pour les contrôles de formulaire ;
    2. la présence d'une indication de poids dans l'intitulé du lien, le contexte du lien ou préalablement à l'action de téléchargement pour les contrôles de formulaire ;
    3. la présence, pour les documents dans une langue différente de celle de la page, d'une indication de langue (par exemple « en anglais ») dans l'intitulé du lien, le contexte du lien ou préalablement à l'action de téléchargement pour les contrôles de formulaire.
  4. Si c'est le cas, le test est validé.

Critère 13.7 [A] Dans chaque page Web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible ?

Critère 13.8 [A] Pour chaque document bureautique ayant une version accessible, cette version offre-t-elle la même information ?

Tests 13.7.1, 13.8.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Repérer les liens et les contrôles de formulaire (un bouton de formulaire ou un formulaire de téléchargement par exemple) permettant de télécharger un fichier au format bureautique.
  3. Pour chaque fichier proposé au téléchargement, dans un format bureautique, vérifier la présence d'une version alternative présentée comme accessible.
  4. Si l'alternative est proposée dans un format texte enrichi (pdf, odt, doc, docx, EPUB/DAISY), télécharger le fichier de l'alternative proposée :
    1. Pour les documents au format .pdf, analyser le fichier avec l'outil PAC (PDF Accessibility Checker) et vérifier l'absence d'erreur d'accessibilité dans le document (cf. note).
    2. Pour les documents au format .doc ou .docx, analyser le fichier avec l'outil de vérification d'accessibilité de Microsoft Office (à partir de la version 2010) et vérifier l'absence d'erreur d'accessibilité (cf. note).
    3. Pour les documents au format .odt, analyser le document avec l'éditeur OpenOffice et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement » (cf. note pour une méthode alternative).
    4. Pour les documents au format EPUB/DAISY, analyser le document avec un éditeur EPUB/DAISY et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement ».
    5. Ouvrir les deux documents (le document d'origine et le document accessible) et vérifier que les deux documents apportent la même information.
  5. Si l'alternative est proposée au format html, vérifier :
    1. que le contenu atteint le niveau RGAA déclaré pour le site, au moins ;
    2. que les deux documents (le document d'origine et la version accessible au format html) offrent la même information.
  6. Si ce n'est pas le cas, pour les fichiers au format texte enrichi (pdf, odt, doc, docx, EPUB/DAISY), télécharger le fichier :
    1. Pour les documents au format .pdf, analyser le fichier avec l'outil (PDF Accessibility Checker) et vérifier l'absence d'erreur d'accessibilité dans le document (cf. note).
    2. Pour les documents au format .doc ou .docx, analyser le fichier avec l'outil de vérification d'accessibilité de Microsoft Office (à partir de la version 2010) et vérifier l'absence d'erreur d'accessibilité (cf. note).
    3. Pour les documents .odt, analyser le document avec l'éditeur Open office et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement » (cf. note pour une méthode alternative).
    4. Pour les documents EPUB/DAISY, analyser le document avec un éditeur EPUB/DAISY et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement ».
  7. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Repérer les liens et les contrôles de formulaire (un bouton de formulaire ou un formulaire de téléchargement par exemple) permettant de télécharger un fichier au format bureautique.
  3. Repérer les liens et les contrôles de formulaire (un bouton de formulaire ou un formulaire de téléchargement par exemple) permettant de télécharger un fichier.
  4. Pour chaque fichier proposé au téléchargement, dans un format bureautique, vérifier la présence d'une version alternative présentée comme accessible.
  5. Si l'alternative est proposée dans un format texte enrichi (pdf, odt, doc, docx, EPUB/DAISY), télécharger le fichier de l'alternative proposée :
    1. Pour les documents au format .pdf, analyser le fichier avec l'outil PAC (PDF Accessibility Checker) et vérifier l'absence d'erreur d'accessibilité dans le document (cf. note).
    2. Pour les documents au format .doc ou .docx, analyser le fichier avec l'outil de vérification d'accessibilité de Microsoft Office (à partir de la version 2010) et vérifier l'absence d'erreur d'accessibilité (cf. note).
    3. Pour les documents au format .odt, analyser le document avec l'éditeur OpenOffice et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement » (cf. note pour une méthode alternative).
    4. Pour les documents au format EPUB/DAISY, analyser le document avec un éditeur EPUB/DAISY et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement ».
    5. Ouvrir les deux documents (le document d'origine et le document accessible) et vérifier que les deux documents apportent la même information.
  6. Si l'alternative est proposée au format html, vérifier :
    1. que le contenu atteint le niveau RGAA déclaré pour le site, au moins ;
    2. que les deux documents (le document d'origine et la version accessible au format html) offrent la même information.
  7. Si ce n'est pas le cas, pour les fichiers au format texte enrichi (pdf, odt, doc, docx, EPUB/DAISY), télécharger le fichier :
    1. Pour les documents au format .pdf, analyser le fichier avec l'outil (PDF Accessibility Checker) et vérifier l'absence d'erreur d'accessibilité dans le document (cf. note).
    2. Pour les documents au format .doc ou .docx, analyser le fichier avec l'outil de vérification d'accessibilité de Microsoft Office (à partir de la version 2010) et vérifier l'absence d'erreur d'accessibilité (cf. note).
    3. Pour les documents .odt, analyser le document avec l'éditeur Open office et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement » (cf. note pour une méthode alternative).
    4. Pour les documents EPUB/DAISY, analyser le document avec un éditeur EPUB/DAISY et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement ».
  8. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Repérer les liens et les contrôles de formulaire (un bouton de formulaire ou un formulaire de téléchargement par exemple) permettant de télécharger un fichier au format bureautique.
  3. Repérer les liens et les contrôles de formulaire (un bouton de formulaire ou un formulaire de téléchargement par exemple) permettant de télécharger un fichier.
  4. Pour chaque fichier proposé au téléchargement, dans un format bureautique, vérifier la présence d'une version alternative présentée comme accessible.
  5. Si l'alternative est proposée dans un format texte enrichi (pdf, odt, doc, docx, EPUB/DAISY), télécharger le fichier de l'alternative proposée :
    1. Pour les documents au format .pdf, analyser le fichier avec l'outil PAC (PDF Accessibility Checker) et vérifier l'absence d'erreur d'accessibilité dans le document (cf. note).
    2. Pour les documents au format .doc ou .docx, analyser le fichier avec l'outil de vérification d'accessibilité de Microsoft Office (à partir de la version 2010) et vérifier l'absence d'erreur d'accessibilité (cf. note).
    3. Pour les documents au format .odt, analyser le document avec l'éditeur OpenOffice et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement » (cf. note pour une méthode alternative).
    4. Pour les documents au format EPUB/DAISY, analyser le document avec un éditeur EPUB/DAISY et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement ».
    5. Ouvrir les deux documents (le document d'origine et le document accessible) et vérifier que les deux documents apportent la même information.
  6. Si l'alternative est proposée au format html, vérifier :
    1. que le contenu atteint le niveau RGAA déclaré pour le site, au moins ;
    2. que les deux documents (le document d'origine et la version accessible au format html) offrent la même information.
  7. Si ce n'est pas le cas, pour les fichiers au format texte enrichi (pdf, odt, doc, docx, EPUB/DAISY), télécharger le fichier :
    1. Pour les documents au format .pdf, analyser le fichier avec l'outil (PDF Accessibility Checker) et vérifier l'absence d'erreur d'accessibilité dans le document (cf. note).
    2. Pour les documents au format .doc ou .docx, analyser le fichier avec l'outil de vérification d'accessibilité de Microsoft Office (à partir de la version 2010) et vérifier l'absence d'erreur d'accessibilité (cf. note).
    3. Pour les documents .odt, analyser le document avec l'éditeur Open office et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement » (cf. note pour une méthode alternative).
    4. Pour les documents EPUB/DAISY, analyser le document avec un éditeur EPUB/DAISY et vérifier que l'ensemble des contenus est conforme avec la liste des critères « Liste document bureautique en téléchargement ».
  8. Si c'est le cas, le test est validé.

Note au sujet de l'outil PAC : l'outil analyse le document PDF du point de vue de l'accessibilité mais également de critères de qualité (par exemple la norme PDF/UA). Seules les erreurs relatives à des critères présents dans la listes des critères « Liste document bureautique en téléchargement » rendent le critère « Non conforme ». Par ailleurs, cet outil ne fonctionne que sur la plateforme Windows. Sur Mac, le contrôle doit se faire manuellement.

Note au sujet Microsoft Office : le logiciel offre un vérificateur d'accessibilité en standard, (accessible via le menu « Fichier > Informations > Vérifier la présence de problèmes > Vérifier l'accessibilité »). Ce vérificateur peut être considérablement amélioré via le plugin Word Accessibility Plug-in (voir dans la section Outils). Ce plugin ne fonctionne que sur Windows. Sur Mac, le contrôle doit se faire manuellement.

Note au sujet des documents au format .odt : OpenOffice et LibreOffice ne possèdent pas de vérificateur d'accessibilité. Une méthode plus rapide qu'une analyse manuelle peut consister à enregistrer le document au format .docx et le vérifier via le vérificateur d'accessibilité de Microsoft Office 2010. Attention cependant : cette méthode rapide est à réserver aux documents très simples car certaines informations liées à l'accessibilité ne sont pas correctement transcodées. C'est le cas des indications de langue, de certaines alternatives d'images ou d'en-têtes fusionnées sur les tableaux par exemple.

Note au sujet du format EPUB : il n'existe pas, actuellement, d'éditeur libre permettant de vérifier facilement le code au format EPUB 3.

  • L'éditeur Blue Griffon Epub Edition peut être utilisé, mais il nécessite l'achat d'une licence.
  • Une autre solution consiste à utiliser un éditeur XML qui supporte le format EPUB. Par exemple, l'éditeur oXygen possède, entre autre, un validateur de code EPUB, mais nécessite également l'achat d'une licence.
  • Une dernière solution consiste à désarchiver le fichier EPUB, ce qui donne accès à l'ensemble des fichiers au format XHTML ainsi qu'à ses dépendances. Un simple éditeur HTML suffit pour inspecter le code. Néanmoins la structure complexe d'un fichier EPUB rends l'opération très laborieuse.

Note au sujet des documents dérogés : le référentiel propose un statut de dérogation dans certains cas (cf. guide d'accompagnement). Dans ce cas, les tests ne sont pas à réaliser, la version accessible étant fournie sur demande de l'utilisateur.

Critère 13.9 [AAA] Dans chaque page Web, les expressions inhabituelles, les expressions idiomatiques ou le jargon sont-ils explicités ?

Critère 13.10 [AAA] Dans chaque page Web, pour chaque expression inhabituelle ou limitée, idiomatique ou de jargon ayant une définition, cette définition est-elle pertinente ?

Tests 13.9.1, 13.10.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « IE », activer l'option « Internet Explorer Accessibility Options ».
  3. Dans la fenêtre de configuration, cocher la case « Mettre les documents en forme en utilisant ma feuille de style » et choisir la feuille de style check-jargon.css.
  4. Les balises dfn et les listes de définition (balises dl, dt, dd) sont entourées d'une bordure verte.
  5. Pour chaque expression inhabituelle, idiomatique ou de jargon, vérifier :
      • que l'élément est contenu dans une balise dfn et qu'une définition est donnée dans le contexte adjacent (immédiatement avant ou après) ;
      • ou qu'une définition est donnée via une liste de définition (balise dl : le terme à définir est implémenté via une balise dt et la définition via une balise dd) ;
      • ou qu'il existe une définition dans la page ;
      • ou que le terme à définir fait partie d'un lien qui donne accès à sa définition.
    1. que la définition est pertinente (elle permet de comprendre l'expression).
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles »..
  2. Faire un clic droit dans la page et activer l'option « Examiner l'élément ».
  3. Activer le menu « Éditeur de styles ». Dans la colonne de gauche, sélectionner « Importer » et choisir la feuille de style check-jargon.css.
  4. Les balises dfn et les listes de définition (balises dl, dt, dd) sont entourées d'une bordure verte.
  5. Pour chaque expression inhabituelle, idiomatique ou de jargon, vérifier :
      • que l'élément est contenu dans une balise dfn et qu'une définition est donnée dans le contexte adjacent (immédiatement avant ou après) ;
      • ou qu'une définition est donnée via une liste de définition (balise dl : le terme à définir est implémenté via une balise dt et la définition via une balise dd) ;
      • ou qu'il existe une définition dans la page ;
      • ou que le terme à définir fait partie d'un lien qui donne accès à sa définition.
    1. que la définition est pertinente (elle permet de comprendre l'expression).
  6. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « CSS », activer l'option « Edit CSS », et dans le champ en bas de la fenêtre, saisir dfn, dl, dt, dd{ border: 2px solid green; }
  3. Les balises dfn et les listes de définition (balises dl, dt, dd) sont entourées d'une bordure verte.
  4. Pour chaque expression inhabituelle, idiomatique ou de jargon, vérifier :
      • que l'élément est contenu dans une balise dfn et qu'une définition est donnée dans le contexte adjacent (immédiatement avant ou après) ;
      • ou qu'une définition est donnée via une liste de définition (balise dl : le terme à définir est implémenté via une balise dt et la définition via une balise dd) ;
      • ou qu'il existe une définition dans la page ;
      • ou que le terme à définir fait partie d'un lien qui donne accès à sa définition.
    1. que la définition est pertinente (elle permet de comprendre l'expression).
  5. Si c'est le cas, le test est validé.

Critère 13.11 [A] Dans chaque page Web, chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) a-t-il une alternative ?

Critère 13.12 [A] Dans chaque page Web, pour chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ?

Tests 13.11.1, 13.12.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Dans le menu « Doc info », activer l'option « Show titles ».
  3. Pour chaque contenu cryptique (art ascii, émoticône, syntaxe cryptique), vérifier :
      • qu'une définition est disponible via un attribut title, sur un lien, un contrôle de formulaire, une abréviation (balise abbr) par exemple ;
      • ou qu'une définition est donnée dans le contexte adjacent (immédiatement avant ou après).
    1. que la définition donnée est pertinente (elle permet de comprendre le contenu ou la fonction).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Dans le menu « Infos », activer l'option « Afficher les attributs title ».
  3. Pour chaque contenu cryptique (art ascii, émoticône, syntaxe cryptique), vérifier :
      • qu'une définition est disponible via un attribut title, sur un lien, un contrôle de formulaire, une abréviation (balise abbr) par exemple ;
      • ou qu'une définition est donnée dans le contexte adjacent (immédiatement avant ou après).
    1. que la définition donnée est pertinente (elle permet de comprendre le contenu ou la fonction).
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Dans le menu « Information », activer l'option « Display title attributes ».
  3. Pour chaque contenu cryptique (art ascii, émoticône, syntaxe cryptique), vérifier :
      • qu'une définition est disponible via un attribut title, sur un lien, un contrôle de formulaire, une abréviation (balise abbr) par exemple ;
      • ou qu'une définition est donnée dans le contexte adjacent (immédiatement avant ou après).
    1. que la définition donnée est pertinente (elle permet de comprendre le contenu ou la fonction).
  4. Si c'est le cas, le test est validé.

Critère 13.13 [AAA] Dans chaque page Web, pour chaque mot dont le sens ne peut être compris sans en connaître la prononciation, celle-ci est-elle indiquée ?

Tests 13.13.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Pour chaque mot dont le sens ne peut être compris sans en connaître la prononciation (cf. note), vérifier :
    1. que l'indication de la prononciation phonétique est donnée dans le contexte adjacent (immédiatement avant ou après) 
    2. que l'indication de la prononciation phonétique est donnée via un lien (vers une note ou un fichier son par exemple).
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Pour chaque mot dont le sens ne peut être compris sans en connaître la prononciation (cf. note), vérifier :
    1. que l'indication de la prononciation phonétique est donnée dans le contexte adjacent (immédiatement avant ou après).
    2. que l'indication de la prononciation phonétique est donnée via un lien (vers une note ou un fichier son par exemple).
  3. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Pour chaque mot dont le sens ne peut être compris sans en connaître la prononciation (cf. note), vérifier :
    1. que l'indication de la prononciation phonétique est donnée dans le contexte adjacent (immédiatement avant ou après).
    2. que l'indication de la prononciation phonétique est donnée via un lien (vers une note ou un fichier son par exemple).
  3. Si c'est le cas, le test est validé.

Note : des problèmes de prononciation peuvent apparaître lorsque deux mots s'écrivent de la même manière mais doivent, pour être compris, se prononcer différemment. Ainsi, dans l'expression  les poules du couvent couvent , une synthèse vocale ne pourra pas faire la distinction de prononciation entre les deux mots. Une solution consiste à préciser la prononciation dans le contexte adjacent, par exemple  les poules du couvent (prononcer « couvan ») couvent. . Une autre solution consiste à insérer un lien, par exemple  les poules du couvent (prononciation) couvent. .

Note : le mot se prononce « couvan ».

Critère 13.14 [AAA] Dans chaque page Web, chaque texte qui nécessite un niveau de lecture plus avancé que le premier cycle de l’enseignement secondaire a-t-il une version alternative ?

Tests 13.14.1

Avec la WAT
  1. Dans le menu « CSS », activer l'option « Disable CSS ».
  2. Évaluer la complexité de lecture du texte pour un utilisateur dont les performances de lecture sont égales à celles observées par un élève du premier cycle du secondaire (cf. note).
  3. Si le texte semble trop complexe à comprendre, vérifier :
    1. la présence de graphiques, icônes ou illustrations permettant d'expliciter le contenu ;
    2. ou la présence d'un résumé adapté au niveau de lecture recherché ;
    3. ou la présence d'une version en langue des signes à destination des sourds et malentendants ;
    4. ou la présence d'une version vocalisée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Firefox)
  1. Dans le menu « CSS », activer l'option « Désactiver les styles CSS » puis « Tous les styles ».
  2. Évaluer la complexité de lecture du texte pour un utilisateur dont les performances de lecture sont égales à celles observées par un élève du premier cycle du secondaire (cf. note).
  3. Si le texte semble trop complexe à comprendre, vérifier :
    1. la présence de graphiques, icônes ou illustrations permettant d'expliciter le contenu ;
    2. ou la présence d'un résumé adapté au niveau de lecture recherché ;
    3. ou la présence d'une version en langue des signes à destination des sourds et malentendants ;
    4. ou la présence d'une version vocalisée.
  4. Si c'est le cas, le test est validé.
Avec la WebDev (Chrome)
  1. Dans le menu « CSS », activer l'option « Disable all styles ».
  2. Évaluer la complexité de lecture du texte pour un utilisateur dont les performances de lecture sont égales à celles observées par un élève du premier cycle du secondaire (cf. note).
  3. Si le texte semble trop complexe à comprendre, vérifier :
    1. la présence de graphiques, icônes ou illustrations permettant d'expliciter le contenu ;
    2. ou la présence d'un résumé adapté au niveau de lecture recherché ;
    3. ou la présence d'une version en langue des signes à destination des sourds et malentendants ;
    4. ou la présence d'une version vocalisée.
  4. Si c'est le cas, le test est validé.

Note : l'évaluation de ce critère est particulièrement délicate. Une première approche consiste à mesurer la lisibilité du texte via des algorithmes statistiques (par exemple via cet outil : Readability Test). Les résultats doivent néanmoins être évalués soigneusement. Une seconde approche consiste à utiliser des méthodes adaptées à certains types d'utilisateurs, comme la langue des signes pour les sourds et malentendants, la vocalisation à destination des personnes souffrant d'illetrisme ou la méthode FALC (facile à lire et à comprendre) à destination de certains utilisateurs atteints de déficience mentale ou cognitive.

Critère 13.15 [A] Dans chaque page Web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ?

Tests 13.15.1, 13.15.2, 13.15.3

Pour tous
  1. Repérer dans la page, les contenus clignotants ou qui provoquent des effets de flash : image animée (balises img, svg, <canvas>, <embed> ou object), vidéo ou animation (balise <object>), effet de script ou de CSS (cf. note).
  2. Pour chaque contenu clignotant ou provoquant des effets de flash, vérifier :
    1. que la fréquence de l'effet est inférieur à 3 par seconde ;
    2. ou que la surface cumulée est inférieure à 21824 pixels.
  3. Si c'est le cas, le test est validé.

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

Critère 13.16 [AAA] Dans chaque page Web, les changements brusques de luminosité ou les effets de flash ont-ils une fréquence inférieure ou égale à 3 par seconde ?

Tests 13.16.1, 13.16.2, 13.16.3

Pour tous
  1. Repérer dans la page, les contenus clignotants ou qui provoquent des effets de flash : image, vidéo ou animations (balises <img>, <svg>, <embed>, <canvas> ou <object>), effets de script ou de CSS (cf. note).
  2. Pour chaque contenu clignotant ou provoquant des effets de flash, vérifier que la fréquence de l'effet est inférieur à 3 par seconde.
  3. Si c'est le cas, le test est validé.

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

Critère 13.17 [A] Dans chaque page Web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?

Tests 13.17.1, 13.17.2

Pour tous
  1. Repérer dans la page, les contenus en mouvement ou clignotants (via une image, un script ou un effet CSS) déclenchés automatiquement au chargement de la page ou lors de l'affichage d'un contenu (cf. note).
  2. Vérifier :
    • que la durée du mouvement ou du clignotement est inférieure à 5 secondes ;
    • ou la présence d'un mécanisme (un bouton par exemple) qui permet d'arrêter et de relancer le mouvement ou le clignotement ;
    • ou la présence d'un mécanisme (un bouton par exemple) qui permet de cacher et d'afficher à nouveau le contenu en mouvement ou clignotant ;
    • ou la présence d'un mécanisme (un bouton par exemple) qui permet d'afficher le contenu sans mouvement ou clignotement.
  3. Si c'est le cas, le test est validé.

Note : l'arrêt ou la mise en pause d'un contenu en mouvement ou clignotant via la prise de focus (e.g 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.