@uuv/a11y

{ "wcag": { "version": 2.1 }, "topics": [ { "topic": "Images", "number": 1, "criteria": [ { "criterium": { "number": 1, "title": "Chaque [image porteuse d’information](#image-porteuse-d-information) a-t-elle une [alternative textuelle](#alternative-textuelle-image) ?", "tests": { "1": [ "Chaque image (balise `<img>` ou balise possédant l’attribut WAI-ARIA `role=\"img\"`) [porteuse d’information](#image-porteuse-d-information) a-t-elle une [alternative textuelle](#alternative-textuelle-image) ?" ], "2": [ "Chaque [zone](#zone-d-une-image-reactive) d’une [image réactive](#image-reactive) (balise `<area>`) [porteuse d’information](#image-porteuse-d-information) a-t-elle une [alternative textuelle](#alternative-textuelle-image) ?" ], "3": [ "Chaque bouton de type `image` (balise `<input>` avec l’attribut `type=\"image\"`) a-t-il une [alternative textuelle](#alternative-textuelle-image) ?" ], "4": [ "Chaque [zone cliquable](#zone-cliquable) d’une image réactive côté serveur est-elle doublée d’un mécanisme utilisable quel que soit le dispositif de pointage utilisé et permettant d’accéder à la même destination ?" ], "5": [ "Chaque image vectorielle (balise `<svg>`) [porteuse d’information](#image-porteuse-d-information), vérifie-t-elle ces conditions ?", "La balise `<svg>` possède un attribut WAI-ARIA `role=\"img\"` ;", "La balise `<svg>` a une [alternative textuelle](#alternative-textuelle-image)." ], "6": [ "Chaque [image objet](#image-objet) (balise `<object>` avec l’attribut `type=\"image/…\"`) [porteuse d’information](#image-porteuse-d-information), vérifie-t-elle une de ces conditions ?", "La balise `<object>` possède une [alternative textuelle](#alternative-textuelle-image) et un attribut `role=\"img\"` ;", "L’élément `<object>` est immédiatement suivi d’un [lien ou bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à un [contenu alternatif](#contenu-alternatif) ;", "Un mécanisme permet à l’utilisateur de remplacer l’élément `<object>` par un [contenu alternatif](#contenu-alternatif)." ], "7": [ "Chaque image embarquée (balise `<embed>` avec l’attribut `type=\"image/…\"`) [porteuse d’information](#image-porteuse-d-information), vérifie-t-elle une de ces conditions ?", "La balise `<embed>` possède une [alternative textuelle](#alternative-textuelle-image) et un attribut `role=\"img\"` ;", "L’élément `<embed>` est immédiatement suivi d’un [lien ou bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à un [contenu alternatif](#contenu-alternatif) ;", "Un mécanisme permet à l’utilisateur de remplacer l’élément `<embed>` par un [contenu alternatif](#contenu-alternatif)." ], "8": [ "Chaque image bitmap (balise `<canvas>`) [porteuse d’information](#image-porteuse-d-information), vérifie-t-elle une de ces conditions ?", "La balise `<canvas>` possède une [alternative textuelle](#alternative-textuelle-image) et un attribut `role=\"img\"` ;", "Un [contenu alternatif](#contenu-alternatif) est présent entre les balises `<canvas>` et `</canvas>` ;", "L’élément `<canvas>` est immédiatement suivi d’un [lien ou bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à un [contenu alternatif](#contenu-alternatif) ;", "Un mécanisme permet à l’utilisateur de remplacer l’élément `<canvas>` par un [contenu alternatif](#contenu-alternatif)." ] }, "references": [ { "wcag": [ "1.1.1 Non-text Content (A)" ] }, { "techniques": [ "H36", "H37", "H53", "F65", "H24" ] } ] } }, { "criterium": { "number": 2, "title": "Chaque [image de décoration](#image-de-decoration) est-elle correctement ignorée par les technologies d’assistance ?", "tests": { "1": [ "Chaque image (balise `<img>`) [de décoration](#image-de-decoration), sans [légende](#legende-d-image), vérifie-t-elle une de ces conditions ?", "La balise `<img>` possède un attribut `alt` vide (`alt=\"\"`) et est dépourvue de tout autre attribut permettant de fournir une [alternative textuelle](#alternative-textuelle-image) ;", "La balise `<img>` possède un attribut WAI-ARIA `aria-hidden=\"true\"` ou `role=\"presentation\"`." ], "2": [ "Chaque [zone non cliquable](#zone-non-cliquable) (balise `<area>` sans attribut `href`) [de décoration](#image-de-decoration), vérifie-t-elle une de ces conditions ?", "La balise `<area>` possède un attribut `alt` vide (`alt=\"\"`) et est dépourvue de tout autre attribut permettant de fournir une [alternative textuelle](#alternative-textuelle-image) ;", "La balise `<area>` possède un attribut WAI-ARIA `aria-hidden=\"true\"` ou `role=\"presentation\"`." ], "3": [ "Chaque [image objet](#image-objet) (balise `<object>` avec l’attribut `type=\"image/…\"`) [de décoration](#image-de-decoration), sans [légende](#legende-d-image), vérifie-t-elle ces conditions ?", "La balise `<object>` possède un attribut WAI-ARIA `aria-hidden=\"true\"` ;", "La balise `<object>` est dépourvue d’alternative textuelle ;", "Il n’y a aucun texte faisant office d’alternative textuelle entre `<object>` et `</object>`." ], "4": [ "Chaque image vectorielle (balise `<svg>`) [de décoration](#image-de-decoration), sans [légende](#legende-d-image), vérifie-t-elle ces conditions ?", "La balise `<svg>` possède un attribut WAI-ARIA `aria-hidden=\"true\"` ;", "La balise `<svg>` et ses enfants sont dépourvus d’[alternative textuelle](#alternative-textuelle-image) ;", "Les balises `<title>` et `<desc>` sont absentes ou vides ;", "La balise `<svg>` et ses enfants sont dépourvus d’attribut `title`." ], "5": [ "Chaque image bitmap (balise `<canvas>`) [de décoration](#image-de-decoration), sans [légende](#legende-d-image), vérifie-t-elle ces conditions ?", "La balise `<canvas>` possède un attribut WAI-ARIA `aria-hidden=\"true\"` ;", "La balise `<canvas>` et ses enfants sont dépourvus d’[alternative textuelle](#alternative-textuelle-image) ;", "Il n’y a aucun texte faisant office d’[alternative textuelle](#alternative-textuelle-image) entre `<canvas>` et `</canvas>`." ], "6": [ "Chaque image embarquée (balise `<embed>` avec l’attribut `type=\"image/…\"`) [de décoration](#image-de-decoration), sans [légende](#legende-d-image), vérifie-t-elle ces conditions ?", "La balise `<embed>` possède un attribut WAI-ARIA `aria-hidden=\"true\"` ;", "La balise `<embed>` et ses enfants sont dépourvus d’[alternative textuelle](#alternative-textuelle-image)." ] }, "technicalNote": [ "Lorsqu'une image est associée à une [légende](#legende-d-image), la note technique WCAG recommande de prévoir systématiquement une [alternative textuelle](#alternative-textuelle-image) (cf. critère 1.9). Dans ce cas le critère 1.2 est non applicable.", "Dans le cas d'une image vectorielle (balise `<svg>`) de décoration qui serait affichée au travers d'un élément `<use href=\"…\">` enfant de l'élément `<svg>`, le test 1.2.4 s'appliquera également à l'élément `<svg>` associée par le biais de l'élément `<use>`.", "Un attribut WAI-ARIA `role=\"presentation\"` peut être utilisé sur les images de décoration et les zones non cliquables de décoration. Le rôle `\"none\"` introduit en ARIA 1.1 et synonyme du rôle `\"presentation\"` peut être aussi utilisé. Il reste préférable cependant d'utiliser le rôle `\"presentation\"` en attendant un support satisfaisant du rôle `\"none\"`." ], "references": [ { "wcag": [ "1.1.1 Non-text Content (A)", "4.1.2 Name, Role, Value (A)" ] }, { "techniques": [ "H67", "G196", "C9", "F39", "F38", "ARIA4", "ARIA10" ] } ] } }, { "criterium": { "number": 3, "title": "Pour chaque image [porteuse d’information](#image-porteuse-d-information) ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative est-elle pertinente (hors cas particuliers) ?", "tests": { "1": [ "Chaque image (balise `<img>` ou balise possédant l’attribut WAI-ARIA `role=\"img\"`) [porteuse d’information](#image-porteuse-d-information), ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative est-elle pertinente (hors cas particuliers) ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent." ], "2": [ "Pour chaque [zone](#zone-d-une-image-reactive) (balise `<area>`) d’une [image réactive](#image-reactive) [porteuse d’information](#image-porteuse-d-information), ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative est-elle pertinente (hors cas particuliers) ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent." ], "3": [ "Pour chaque [bouton](#bouton-formulaire) de type `image` (balise `<input>` avec l’attribut `type=\"image\"`), ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative est-elle pertinente (hors cas particuliers) ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent." ], "4": [ "Pour chaque [image objet](#image-objet) (balise `<object>` avec l’attribut `type=\"image/…\"`) [porteuse d’information](#image-porteuse-d-information), ayant une [alternative textuelle](#alternative-textuelle-image) ou un [contenu alternatif](#contenu-alternatif), cette alternative est-elle pertinente (hors cas particuliers) ?", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent ;", "S’il est présent le [contenu alternatif](#contenu-alternatif) est pertinent." ], "5": [ "Pour chaque image embarquée (balise `<embed>` avec l’attribut `type=\"image/…\"`) [porteuse d’information](#image-porteuse-d-information), ayant une [alternative textuelle](#alternative-textuelle-image) ou un [contenu alternatif](#contenu-alternatif), cette alternative est-elle pertinente (hors cas particuliers) ?", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent ;", "S’il est présent le [contenu alternatif](#contenu-alternatif) est pertinent." ], "6": [ "Pour chaque image vectorielle (balise `<svg>`) [porteuse d’information](#image-porteuse-d-information), ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative est-elle pertinente (hors cas particuliers) ?", "S’il est présent, le contenu de l'élément `<title>` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent." ], "7": [ "Pour chaque image bitmap (balise `<canvas>`) [porteuse d’information](#image-porteuse-d-information), ayant une [alternative textuelle](#alternative-textuelle-image) ou un [contenu alternatif](#contenu-alternatif), cette alternative est-elle pertinente (hors cas particuliers) ?", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent ;", "S’il est présent le [contenu alternatif](#contenu-alternatif) est pertinent." ], "8": [ "Pour chaque image bitmap (balise `<canvas>`) [porteuse d’information](#image-porteuse-d-information) et ayant un [contenu alternatif](#contenu-alternatif) entre `<canvas>` et `</canvas>`, ce [contenu alternatif](#contenu-alternatif) est-il [correctement restitué par les technologies d’assistance](#correctement-restitue-par-les-technologies-d-assistance) ?" ], "9": [ "Pour chaque image [porteuse d’information](#image-porteuse-d-information) et ayant une [alternative textuelle](#alternative-textuelle-image), l’[alternative textuelle](#alternative-textuelle-image) est-elle [courte et concise](#alternative-courte-et-concise) (hors cas particuliers) ?" ] }, "particularCases": [ "Il existe une gestion de cas particuliers lorsque l’image est utilisée comme [CAPTCHA](#captcha) ou comme [image-test](#image-test). Dans cette situation, où il n’est pas possible de donner une alternative pertinente sans détruire l’objet du CAPTCHA ou du test, le critère est non applicable.", "Note : le cas des CAPTCHA et des images-test est traité de manière spécifique par le critère 1.4." ], "references": [ { "wcag": [ "1.1.1 Non-text Content (A)", "4.1.2 Name, Role, Value (A)" ] }, { "techniques": [ "G94", "G95", "F30", "F71", "G196", "ARIA6", "ARIA9", "ARIA10" ] } ] } }, { "criterium": { "number": 4, "title": "Pour chaque image utilisée comme [CAPTCHA](#captcha) ou comme [image-test](#image-test), ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative permet-elle d’identifier la nature et la fonction de l’image ?", "tests": { "1": [ "Pour chaque image (balise `<img>`) utilisée comme [CAPTCHA](#captcha) ou comme [image-test](#image-test), ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative est-elle pertinente ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent." ], "2": [ "Pour chaque zone (balise `<area>`) d’une image réactive utilisée comme [CAPTCHA](#captcha) ou comme [image-test](#image-test), ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative est-elle pertinente ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent." ], "3": [ "Pour chaque [bouton](#bouton-formulaire) de type image (balise `<input>` avec l’attribut `type=\"image\"`) utilisé comme [CAPTCHA](#captcha) ou comme [image-test](#image-test), ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative est-elle pertinente ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent." ], "4": [ "Pour chaque [image objet](#image-objet) (balise `<object>` avec l’attribut `type=\"image/…\"`) utilisée comme [CAPTCHA](#captcha) ou comme [image-test](#image-test), ayant une [alternative textuelle](#alternative-textuelle-image) ou un [contenu alternatif](#contenu-alternatif), cette alternative est-elle pertinente ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent ;", "S’il est présent le [contenu alternatif](#contenu-alternatif) est pertinent." ], "5": [ "Pour chaque image embarquée (balise `<embed>` avec l’attribut `type=\"image/…\"`) utilisée comme [CAPTCHA](#captcha) ou comme [image-test](#image-test), ayant une [alternative textuelle](#alternative-textuelle-image) ou un [contenu alternatif](#contenu-alternatif), cette alternative est-elle pertinente ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent ;", "S’il est présent le [contenu alternatif](#contenu-alternatif) est pertinent." ], "6": [ "Pour chaque image vectorielle (balise `<svg>`) utilisée comme [CAPTCHA](#captcha) ou comme [image-test](#image-test), ayant une [alternative textuelle](#alternative-textuelle-image), cette alternative est-elle pertinente ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent." ], "7": [ "Pour chaque image bitmap (balise `<canvas>`) utilisée comme [CAPTCHA](#captcha) ou comme [image-test](#image-test), ayant une [alternative textuelle](#alternative-textuelle-image) ou un [contenu alternatif](#contenu-alternatif), cette alternative est-elle pertinente ?", "S’il est présent, le contenu de l’attribut `alt` est pertinent ;", "S’il est présent, le contenu de l’attribut `title` est pertinent ;", "S’il est présent, le contenu de l’attribut WAI-ARIA `aria-label` est pertinent ;", "S’il est présent, le [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) associé via l’attribut WAI-ARIA `aria-labelledby` est pertinent ;", "S’il est présent le [contenu alternatif](#contenu-alternatif) est pertinent." ] }, "references": [ { "wcag": [ "1.1.1 Non-text Content (A)" ] }, { "techniques": [ "G100", "G143" ] } ] } }, { "criterium": { "number": 5, "title": "Pour chaque image utilisée comme [CAPTCHA](#captcha), une solution d’accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?", "tests": { "1": [ "Chaque image (balises `<img>`, `<area>`, `<object>`, `<embed>`, `<svg>`, `<canvas>` ou possédant un attribut WAI-ARIA `role=\"img\"`) utilisée comme [CAPTCHA](#captcha) vérifie-t-elle une de ces conditions ?", "Il existe une autre forme de [CAPTCHA](#captcha) non graphique, au moins ;", "Il existe une autre solution d’accès à la fonctionnalité qui est sécurisée par le [CAPTCHA](#captcha)." ], "2": [ "Chaque bouton associé à une image (balise `input` avec l’attribut `type=\"image\"`) utilisée comme [CAPTCHA](#captcha) vérifie-t-il une de ces conditions ?", "Il existe une autre forme de [CAPTCHA](#captcha) non graphique, au moins ;", "Il existe une autre solution d’accès à la fonctionnalité sécurisée par le [CAPTCHA](#captcha)." ] }, "references": [ { "wcag": [ "1.1.1 Non-text Content (A)" ] }, { "techniques": [ "G144" ] } ] } }, { "criterium": { "number": 6, "title": "Chaque image [porteuse d’information](#image-porteuse-d-information) a-t-elle, si nécessaire, une [description détaillée](#description-detaillee-image) ?", "tests": { "1": [ "Chaque image (balise `<img>`) [porteuse d’information](#image-porteuse-d-information), qui nécessite une [description détaillée](#description-detaillee-image), vérifie-t-elle une de ces conditions ?", "Il existe un attribut `longdesc` qui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la [description détaillée](#description-detaillee-image) ;", "Il existe une [alternative textuelle](#alternative-textuelle-image) contenant la référence à une [description détaillée](#description-detaillee-image) adjacente à l’image ;", "Il existe un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à la [description détaillée](#description-detaillee-image)." ], "2": [ "Chaque [image objet](#image-objet) (balise `<object>` avec l’attribut `type=\"image/…\"`) [porteuse d’information](#image-porteuse-d-information), qui nécessite une [description détaillée](#description-detaillee-image), vérifie-t-elle une de ces conditions ?", "Il existe un attribut `longdesc` qui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la [description détaillée](#description-detaillee-image) ;", "Il existe une [alternative textuelle](#alternative-textuelle-image) contenant la référence à une [description détaillée](#description-detaillee-image) adjacente à l’image ;", "Il existe un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à la [description détaillée](#description-detaillee-image)." ], "3": [ "Chaque image embarquée (balise `<embed>`) [porteuse d’information](#image-porteuse-d-information), qui nécessite une [description détaillée](#description-detaillee-image), vérifie-t-elle une de ces conditions ?", "Il existe un attribut `longdesc` qui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la [description détaillée](#description-detaillee-image) ;", "Il existe une [alternative textuelle](#alternative-textuelle-image) contenant la référence à une [description détaillée](#description-detaillee-image) adjacente à l’image ;", "Il existe un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à la [description détaillée](#description-detaillee-image)." ], "4": [ "Chaque [bouton](#bouton-formulaire) de type image (balise `<input>` avec l’attribut `type=\"image\"`) [porteur d’information](#image-porteuse-d-information), qui nécessite une [description détaillée](#description-detaillee-image), vérifie-t-il une de ces conditions ?", "Il existe un attribut `longdesc` qui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la [description détaillée](#description-detaillee-image) ;", "Il existe une [alternative textuelle](#alternative-textuelle-image) contenant la référence à une [description détaillée](#description-detaillee-image) adjacente à l’image ;", "Il existe un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à la [description détaillée](#description-detaillee-image)." ], "5": [ "Chaque image vectorielle (balise `<svg>`) [porteuse d’information](#image-porteuse-d-information), qui nécessite une [description détaillée](#description-detaillee-image), vérifie-t-elle une de ces conditions ?", "Il existe un attribut WAI-ARIA `aria-label` contenant l’alternative textuelle et une référence à une [description détaillée](#description-detaillee-image) adjacente ;", "Il existe un attribut WAI-ARIA `aria-labelledby` associant un [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) faisant office d’alternative textuelle et un autre faisant office de [description détaillée](#description-detaillee-image) ;", "Il existe un attribut WAI-ARIA `aria-describedby` associant un [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) faisant office de [description détaillée](#description-detaillee-image) ;", "Il existe un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à la [description détaillée](#description-detaillee-image)." ], "6": [ "Pour chaque image vectorielle (balise `<svg>`) [porteuse d’information](#image-porteuse-d-information), ayant une [description détaillée](#description-detaillee-image), la référence éventuelle à la [description détaillée](#description-detaillee-image) dans l’attribut WAI-ARIA `aria-label` et la [description détaillée](#description-detaillee-image) associée par l’attribut WAI-ARIA `aria-labelledby` ou `aria-describedby` sont-elles correctement restituées par les technologies d’assistance ?" ], "7": [ "Chaque image bitmap (balise `<canvas>`), [porteuse d’information](#image-porteuse-d-information), qui nécessite une [description détaillée](#description-detaillee-image), vérifie-t-elle une de ces conditions ?", "Il existe un attribut WAI-ARIA `aria-label` contenant l’alternative textuelle et une référence à une [description détaillée](#description-detaillee-image) adjacente ;", "Il existe un attribut WAI-ARIA `aria-labelledby` associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de [description détaillée](#description-detaillee-image) ;", "Il existe un contenu textuel entre `<canvas>` et `</canvas>` faisant référence à une [description détaillée](#description-detaillee-image) adjacente à l’image bitmap ;", "Il existe un contenu textuel entre `<canvas>` et `</canvas>` faisant office de [description détaillée](#description-detaillee-image) ;", "Il existe un [lien ou bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à la [description détaillée](#description-detaillee-image)." ], "8": [ "Pour chaque image bitmap (balise `<canvas>`) [porteuse d’information](#image-porteuse-d-information), qui implémente une référence à une [description détaillée](#description-detaillee-image) adjacente, cette référence est-elle correctement restituée par les technologies d’assistance ?" ], "9": [ "Pour chaque image (balise `<img>`, `<input>` avec l’attribut `type=\"image\"`, `<area>`, `<object>`, `<embed>`, `<svg>`, `<canvas>`, ou possédant un attribut WAI-ARIA `role=\"img\"`) [porteuse d’information](#image-porteuse-d-information), qui est accompagnée d’une [description détaillée](#description-detaillee-image) et qui utilise un attribut WAI-ARIA `aria-describedby`, l’attribut WAI-ARIA `aria-describedby` associe-t-il la [description détaillée](#description-detaillee-image) ?" ], "10": [ "Chaque balise possédant un attribut WAI-ARIA `role=\"img\"` [porteuse d’information](#image-porteuse-d-information), qui nécessite une [description détaillée](#description-detaillee-image), vérifie-t-elle une de ces conditions ?", "Il existe un attribut WAI-ARIA `aria-label` contenant l’[alternative textuelle](#alternative-textuelle-image) et une référence à une [description détaillée](#description-detaillee-image) adjacente ;", "Il existe un attribut WAI-ARIA `aria-labelledby` associant un [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) faisant office d’[alternative textuelle](#alternative-textuelle-image) et un autre faisant office de [description détaillée](#description-detaillee-image) ;", "Il existe un attribut WAI-ARIA `aria-describedby` associant un [passage de texte](#passage-de-texte-lie-par-aria-labelledby-ou-aria-describedby) faisant office de [description détaillée](#description-detaillee-image) ;", "Il existe un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) permettant d’accéder à la [description détaillée](#description-detaillee-image)." ] }, "technicalNote": [ "Dans le cas du SVG, le manque de support de l’élément `<title>` et `<desc>` par les technologies d’assistance crée une difficulté dans le cas de l’implémentation de l’[alternative textuelle](#alternative-textuelle-image) de l’image et de sa [description détaillée](#description-detaillee-image). Dans ce cas, il est recommandé d’utiliser l’attribut WAI-ARIA `aria-label` pour implémenter à la fois l’[alternative textuelle](#alternative-textuelle-image) courte et la référence à la [description détaillée](#description-detaillee-image) adjacente ou l’attribut WAI-ARIA `aria-labelledby` pour associer les passages de texte faisant office d’alternative courte et de [description détaillée](#description-detaillee-image).", "L’utilisation de l’attribut WAI-ARIA aria-describedby n’est pas recommandée pour lier une image (`<img>`, `<object>`, `<embed>`, `<canvas>`) à sa [description détaillée](#description-detaillee-image), par manque de support des technologies d’assistance. Néanmoins, lorsqu’il est utilisé, l’attribut devra nécessairement faire référence à l’`id` de la zone contenant la [description détaillée](#description-detaillee-image).", "La [description détaillée](#description-detaillee-image) adjacente peut être implémentée via une balise `<figcaption>`, dans ce cas le critère 1.9 doit être vérifié (utilisation de `<figure>` et des attributs WAI-ARIA `role=\"figure\"` et `aria-label`, notamment).", "L'attribut `longdesc` qui constitue une des conditions du test 1.6.1 (et dont la pertinence est vérifiée avec le test 1.7.1) est désormais considéré comme obsolète par la spécification HTML en cours. La vérification de cet attribut ne sera donc requise que pour les versions de la spécification HTML antérieure à HTML 5." ], "references": [ { "wcag": [ "1.1.1 Non-text Content (A)" ] }, { "techniques": [ "G92", "G74", "G73", "H45", "ARIA6" ] } ] } }, { "criterium": { "number": 7, "title": "Pour chaque image [porteuse d’information](#image-porteuse-d-information) ayant une [description détaillée](#description-detaillee-image), cette description est-elle pertinente ?", "tests": { "1": [ "Chaque image (balise `<img>`) [porteuse d’information](#image-porteuse-d-information), ayant une [description détaillée](#description-detaillee-image), vérifie-t-elle ces conditions ?", "La [description détaillée](#description-detaillee-image) via l’adresse référencée dans l’attribut `longdesc` est pertinente ;", "La [description détaillée](#description-detaillee-image) dans la page et signalée par l’[alternative textuelle](#alternative-textuelle-image) est pertinente ;", "La [description détaillée](#description-detaillee-image) via un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) est pertinente ;", "Le passage de texte associé via l’attribut WAI-ARIA `aria-describedby` est pertinent." ], "2": [ "Chaque [bouton](#bouton-formulaire) de type image (balise `<input>` avec l’attribut `type=\"image\"`) [porteur d’information](#image-porteuse-d-information), ayant une [description détaillée](#description-detaillee-image), vérifie-t-il ces conditions ?", "La [description détaillée](#description-detaillee-image) dans la page et signalée par l’[alternative textuelle](#alternative-textuelle-image) est pertinente ;", "La [description détaillée](#description-detaillee-image) via un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) est pertinente ;", "Le passage de texte associé via l’attribut WAI-ARIA `aria-describedby` est pertinent." ], "3": [ "Chaque [image objet](#image-objet) (balise `<object>` avec l’attribut `type=\"image/…\"`) [porteuse d’information](#image-porteuse-d-information), ayant une [description détaillée](#description-detaillee-image), vérifie-t-elle ces conditions ?", "La [description détaillée](#description-detaillee-image) dans la page et signalée par l’[alternative textuelle](#alternative-textuelle-image) est pertinente ;", "La [description détaillée](#description-detaillee-image) adjacente à l’[image objet](#image-objet) est pertinente ;", "La [description détaillée](#description-detaillee-image) via un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) est pertinente ;", "Le passage de texte associé via l’attribut WAI-ARIA `aria-describedby` est pertinent." ], "4": [ "Chaque image embarquée (balise `<embed>` avec l’attribut `type=\"image/…\"`) [porteuse d’information](#image-porteuse-d-information), ayant une [description détaillée](#description-detaillee-image), vérifie-t-elle ces conditions ?", "La [description détaillée](#description-detaillee-image) dans la page et signalée par l’[alternative textuelle](#alternative-textuelle-image) est pertinente ;", "La [description détaillée](#description-detaillee-image) adjacente à l’image embarquée est pertinente ;", "La [description détaillée](#description-detaillee-image) via un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) est pertinente ;", "Le passage de texte associé via l’attribut WAI-ARIA `aria-describedby` est pertinent." ], "5": [ "Chaque image vectorielle (balise `<svg>`) [porteuse d’information](#image-porteuse-d-information), ayant une [description détaillée](#description-detaillee-image), vérifie-t-elle ces conditions ?", "La [description détaillée](#description-detaillee-image) dans la page et signalée par l’[alternative textuelle](#alternative-textuelle-image) est pertinente ;", "La [description détaillée](#description-detaillee-image) dans la page et signalée par le texte contenu dans la balise `<desc>` ou `<title>` est pertinente ;", "La [description détaillée](#description-detaillee-image) adjacente contenue dans la balise `<desc>` est pertinente ;", "La [description détaillée](#description-detaillee-image) via un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) est pertinente ;", "Le passage de texte associé via l’attribut WAI-ARIA `aria-describedby` est pertinent." ], "6": [ "Chaque image bitmap (balise `<canvas>`) [porteuse d’information](#image-porteuse-d-information), ayant une [description détaillée](#description-detaillee-image), vérifie-t-elle ces conditions ?", "La [description détaillée](#description-detaillee-image) dans la page et signalée par l’[alternative textuelle](#alternative-textuelle-image) est pertinente ;", "La [description détaillée](#description-detaillee-image) dans la page et signalée par le texte contenu entre `<canvas>` et `</canvas>` est pertinente ;", "La [description détaillée](#description-detaillee-image) contenue entre `<canvas>` et `</canvas>` est pertinente ;", "La [description détaillée](#description-detaillee-image) adjacente à l’image bitmap est pertinente ;", "La [description détaillée](#description-detaillee-image) via un [lien ou un bouton adjacent](#lien-ou-bouton-adjacent) est pertinente ;", "Le passage de texte associé via l’attribut WAI-ARIA `aria-describedby` est pertinent." ] }, "references": [ { "wcag": [ "1.1.1 Non-text Content (A)" ] }, { "techniques": [ "G92", "F67" ] } ] } }, { "criterium": { "number": 8, "title": "Chaque [image texte](#image-texte) [porteuse d’information](#image-porteuse-d-information), en l’absence d’un [mécanisme de remplacement](#mecanisme-de-remplacement), doit si possible être remplacée par du [texte stylé](#texte-style). Cette règle est-elle respectée (hors cas particuliers) ?", "tests": { "1": [ "Chaque [image texte](#image-texte) (balise `<img>` ou possédant un attribut WAI-ARIA `role=\"img\"`) [porteuse d’information](#image-porteuse-d-information), en l’absence d’un [mécanisme de remplacement](#mecanisme-de-remplacement), doit si possible être remplacée par du [texte stylé](#texte-style). Cette règle est-elle respectée (hors cas particuliers) ?" ], "2": [ "Chaque bouton « [image texte](#image-texte) » (balise `<input>` avec l’attribut `type=\"image\"`) [porteur d’information](#image-porteuse-d-information), en l’absence d’un [mécanisme de remplacement](#mecanisme-de-remplacement), doit si possible être remplacé par du [texte stylé](#texte-style). Cette règle est-elle respectée (hors cas particuliers) ?" ], "3": [ "Chaque [image texte](#image-texte) objet (balise `<objec