Test 1.6.10

Note technique du critère 1.6

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

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

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

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.

Définitions

Alternative textuelle (image)

« Nom accessible » restitué par les technologies d’assistance pour les éléments graphiques de type :

• Image (balise <img> ou balise ouvrante possédant un attribut WAI-ARIA role="img") ;
• Zone d’image réactive (balise <area>) ;
• Bouton de type image (balise <input> avec l’attribut type="image") ;
• Image objet (balise <object type="image/…">) ;
• Image vectorielle (balise <svg>) ;
• Image bitmap (balise <canvas>) ;
• Image embarquée (balise <embed>).

Dans le cas d’un élément graphique, le « nom accessible » est obtenu selon l’ordre suivant :

• Passage de texte associé via l’attribut WAI-ARIA aria-labelledby pour les balises :
  • <img> ;
  • <input type="image"> ;
  • <svg> ;
  • <object type="image/…"> ;
  • <embed type="image/…"> ;
  • <canvas> ;
  • balises possédant un attribut WAI-ARIA role="img".
• Sinon, contenu de l’attribut WAI-ARIA aria-label pour les éléments :
  • <img> ;
  • <area> ;
  • <input type="image"> ;
  • <svg> ;
  • <object type="image/…"> ;
  • <embed type="image/…"> ;
  • <canvas> ;
  • balises ouvrantes possédant un attribut WAI-ARIA role="img".
• Sinon, contenu de l’attribut alt pour les balises :
  • <img> ;
  • <area> ;
  • <input type="image">.
• Sinon, contenu de l’attribut title pour les balises :
  • <img> ;
  • <input type="image"> ;
  • <object type="image/…"> ;
  • <embed type="image/…">.

Cet ordre doit être utilisé pour déterminer ce qui constitue l’alternative textuelle.

Néanmoins, en cas de support partiel de l’algorithme de calcul du « nom accessible », c’est la valeur réellement restituée par les technologies d’assistance utilisées dans l’environnement de test (ou « base de référence ») qu’il faudra considérer comme alternative textuelle.

Par exemple :

• En cas de présence conjointe d’un attribut WAI-ARIA aria-label et d’un attribut WAI-ARIA aria-labelledby sur une balise <img>, c’est le passage de texte référencé par l’attribut WAI-ARIA aria-labelledby qui doit être considérée comme alternative textuelle si le contenu du passage de texte est réellement restitué par les technologies d’assistance utilisées dans l’environnement de test ;
• En cas de présence conjointe d’un attribut WAI-ARIA aria-label et d’un attribut alt sur une balise <img>, c’est le contenu de l’attribut WAI-ARIA aria-label qui doit être considéré comme alternative textuelle si le contenu de l’attribut WAI-ARIA aria-label est réellement restitué par les technologies d’assistance utilisées dans l’environnement de test.

Référence : Accessible name and description calculation.

RGAA considère trois types d’alternatives textuelles liées à la nature de l’image :

• Pour une image porteuse d’information, l’alternative textuelle apporte l’information nécessaire à la compréhension du contenu qu’elle véhicule ;
• Pour une image de décoration, aucune alternative textuelle ne doit être restituée ;
• Pour une image CAPTCHA ou une image-test, l’alternative textuelle décrit seulement la nature et la fonction de l’image. En effet, l’alternative textuelle ne peut apporter l’information véhiculée par l’image sans rendre la fonction associée inopérante.

Note 1 : pour une image CAPTCHA l’alternative peut être, par exemple : « Code de sécurité anti-spam » ou « code pour vérifier que vous êtes un humain » ou toute autre alternative permettant à l’utilisateur de comprendre la nature et la fonction de l’image.

Note 2 : pour un groupe d’images, par exemple un système de vote constitué de plusieurs images d’étoile, il est fortement conseillé d’utiliser soit la première image du groupe pour donner une alternative cohérente au groupe d’image (voir la technique WCAG2.1 G196), soit une balise conteneur pourvue d’un rôle WAI-ARIA img et d’une alternative textuelle. Dans le premier cas, les autres images du groupe sont considérées comme des images de décoration. Dans le second cas, toutes les images du groupe sont considérées comme des images de décoration.

Note 3 : pour les image-lien, l’alternative doit permettre de comprendre la fonction et la destination du lien ; ce cas est traité dans la thématique liens.

Note 4 : pour les images vectorielles (balise <svg>) l’alternative textuelle pourrait se trouver aussi présente dans une balise <title> ou dans une balise <text> que cette dernière balise soit ou non visible, même si ce n’est pas le rôle dévolu à cet élément en SVG.

Note 5 : l’utilisation de l’attribut alt étant la seule technique totalement supportée par les aides techniques il est recommandé de privilégier cette solution lors de la mise en œuvre d’une alternative à une balise <img>, <area> et <input type="image">.

Note 6 : bien que l’attribut title soit considéré comme une possibilité d’alternative textuelle à une image, son usage peut poser problème, notamment du fait qu’une image avec un attribut alt absent ou vide est considérée comme une image pourvue d’un role=“présentation” par WAI-ARIA : https://www.w3.org/TR/html-aam-1.0/#details-id-54. Il faut s’assurer que les assistances techniques présentes dans l’environnement de test retenu restituent correctement l’alternative proposée par l’attribut title.

CAPTCHA

Un CAPTCHA est un test utilisé pour distinguer un utilisateur humain d’un ordinateur. Le test utilise souvent des images contenant du texte déformé, mélangé avec d’autres formes ou utilisant des jeux de couleur altérées, que l’utilisateur est invité à retaper. D’autres formes de CAPTCHA peuvent être basées sur des questions logiques ou des extraits sonores.

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 :

• Un attribut longdesc qui contient l’adresse d’une page ou d’un emplacement dans la page contenant la description détaillée ;
• 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.

Note 2 : Pour assurer une compatibilité maximum avec les agents utilisateurs, notamment Internet Explorer 11, il est recommandé d’implémenter un tabindex="-1" sur les balises qui contiennent un passage de texte et qui ne sont pas des éléments interactifs (bouton, liens, éléments de formulaires, etc.).

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

Image-test

Image servant dans un test, captcha ou une image servant de test dans un quiz ou un jeu.

Exemple : une série d’images présente un détail issu de tableaux célèbres ; il faut reconnaître le titre et le peintre de chaque tableau. Dans cette situation, il n’est pas possible de donner une alternative pertinente (par exemple le nom du tableau et/ou du peintre) sans rendre le test inutilisable. L’alternative doit alors se contenter de donner la possibilité d’identifier l’image, par exemple “image 1 du test”.

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.

Passage de texte lié par `aria-labelledby` ou `aria-describedby`

Il s’agit d’un ou de plusieurs passages de texte identifiés par des id dont la valeur est unique dans la page et associés à un élément (champ de formulaire, bouton, etc.) par les attributs WAI-ARIA aria-labelledby ou aria-describedby sur le modèle suivant : aria-labelledby="ID1 ID2 ID3…" où la valeur de l’attribut utilisé est égale à la liste des valeurs d’attributs id des passages de texte à associer présents dans la page.

Note 1 : pour assurer une compatibilité maximum avec les agents utilisateurs, notamment Internet Explorer 11, il est recommandé d’implémenter un tabindex="-1" sur les passages de textes qui ne sont pas des éléments interactifs (bouton, liens, éléments de formulaires, etc.).

Note 2 : la valeur des attributs WAI-ARIA aria-labelledby ou aria-describedby ne doivent pas créer de référence récursive (A référence B qui référence A) ou traversante (A qui référence B qui référence C).