Méthodologie de test RGAA 3 2017

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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 :
   1. • 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).
   2. 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. 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 (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 (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 (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 (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 :
   1. • 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).
   2. 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. 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 :
   1. • 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).
   2. 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.
   3. 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. 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 :
   1. • 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).
   2. 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 (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 (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 (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é.