Test 1.6.7

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

Il existe un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente.

Il existe un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée.

Il existe un contenu textuel entre <canvas> et </canvas> faisant référence à une description détaillée adjacente à l’image bitmap.

Il existe un contenu textuel entre <canvas> et </canvas> faisant office de description détaillée.

Il existe un lien ou bouton adjacent permettant d’accéder à la description détaillée.

Méthodologie 1.6.7

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

Tests suivants et précédents au clavier

Test précédent : Maj + ←

Test suivant : Maj + →

Avec ces raccourcis clavier, atteindre

Éléments et attributs

</canvas> <canvas> aria-label aria-labelledby

Note technique du critère 1.6

Dans le cas du SVG, le manque de support de l’élément <desc> ne permet pas son utilisation pour l’implémentation d’une description détaillée.

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

La description détaillée adjacente peut être implémentée via une balise <figcaption>, dans ce cas le critère 1.9 doit être vérifié.

Définitions

Description détaillée (image)

Contenu associé à une image en complément de son alternative textuelle afin de décrire en totalité l’information véhiculée par l’image. La description détaillée peut être associée à l’image via :

  • Une référence à une description détaillée adjacente à l’image dans l’alternative textuelle ;
  • Un lien ou un bouton adjacent qui permet d’accéder à la description détaillée dans la page ou dans une autre page ;
  • Un ou plusieurs passages de texte identifiés par un id et liés par un attribut WAI-ARIA aria-describedby sur le modèle aria-describedby="ID1 ID2 ID3…".

Note 1 : Si le support de l’attribut aria-describedby fait défaut, il est possible d’utiliser un ou plusieurs passages de texte identifiés par un id et liés par un attribut WAI-ARIA aria-labelledby à la suite de l’alternative textuelle.

Image porteuse d’information

Image qui véhicule une information nécessaire à la compréhension du contenu auquel elle est associée.

Note 1 : lorsque l’image est le seul contenu d’un lien, son alternative est l’intitulé du lien. Dans ce cas, l’alternative de l’image devrait être évaluée avec la thématique « Liens ».

Note 2 : lorsqu’un bouton de formulaire, inséré avec l’élément <button>, ne contient qu’une image (balise <img>, <object>, <embed>, <canvas> ou <svg>), l’alternative de l’image est l’intitulé du bouton. Deux cas peuvent se présenter :

  • Le bouton est contrôlé par son type, par exemple, le type submit ou reset, et fait partie d’un formulaire. Dans ce cas, le bouton image doit être évalué avec la thématique « Formulaires » ;
  • Le bouton est contrôlé par un dispositif JavaScript. Dans ce cas, le bouton image doit être évalué avec la thématique « Scripts ».
Lien ou bouton adjacent

Lien ou bouton présenté de manière adjacente à un élément dans la page. Le lien ou bouton doit être adjacent visuellement dans la représentation graphique (CSS activé) et dans le code HTML. Dans le code HTML, le lien ou bouton doit se situer juste avant ou juste après l’élément auquel il est adjacent.