Critère 1.6 Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
Texte officiel du RGAA 4.1.2. Voir aussi le critère 1.6 sur accessibilite.numerique.gouv.fr.
Tests
Test 1.6.1
Chaque image (balise <img>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?
- Il existe un attribut
longdescqui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la description détaillée ; - Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
- Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
Méthodologie du test 1.6.1
- Retrouver dans le document les images structurées au moyen d’un élément
<img>(ou d’un élément possédant l’attribut WAI-ARIArole="img") porteuses d’information qui nécessitent une description détaillée ; - Pour chaque image, vérifier qu’il existe :
- Soit un attribut longdesc qui donne l’adresse (url) d’une page ou d’un emplacement dans la page contenant la description détaillée ;
- Soit une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
- Soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
- Si c’est le cas pour chaque image, le test est validé.
Test 1.6.2
Chaque image objet (balise <object> avec l’attribut type="image/…") porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?
- Il existe un attribut
longdescqui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la description détaillée ; - Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
- Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
Méthodologie du test 1.6.2
- Retrouver dans le document les éléments
<object>pourvus de l’attributtype="image/…", porteurs d’information qui nécessitent une description détaillée ; - Pour chaque élément
<object>pourvu de l’attributtype="image/…", vérifier qu’il existe :- Soit une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
- Soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
- Si c’est le cas pour chaque élément
<object>pourvu de l’attributtype="image/…", le test est validé.
Test 1.6.3
Chaque image embarquée (balise <embed>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?
- Il existe un attribut
longdescqui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la description détaillée ; - Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
- Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
Méthodologie du test 1.6.3
- Retrouver dans le document les éléments
<embed>pourvus de l’attributtype="image/…", porteurs d’information qui nécessitent une description détaillée ; - Pour chaque élément
<embed>pourvu de l’attributtype="image/…", vérifier qu’il existe :- Soit une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
- Soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
- Si c’est le cas pour chaque élément
<embed>pourvu de l’attributtype="image/…", le test est validé.
Test 1.6.4
Chaque bouton de type image (balise <input> avec l’attribut type="image") porteur d’information, qui nécessite une description détaillée, vérifie-t-il une de ces conditions ?
- Il existe un attribut
longdescqui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la description détaillée ; - Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
- Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
Méthodologie du test 1.6.4
- Retrouver dans le document les éléments
<input>pourvus de l’attributtype="image", porteurs d’information qui nécessitent une description détaillée ; - Pour chaque élément
<input>pourvu de l’attributtype="image", vérifier qu’il existe :- Soit une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
- Soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée ;
- Soit un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée.
- Si c’est le cas pour chaque élément
<input>pourvu de l’attributtype="image", le test est validé.
Test 1.6.5
Chaque image vectorielle (balise <svg>) 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-labelcontenant l’alternative textuelle et une référence à une description détaillée adjacente ; - Il existe un attribut WAI-ARIA
aria-labelledbyassociant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ; - Il existe un attribut WAI-ARIA
aria-describedbyassociant un passage de texte faisant office de description détaillée ; - Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
Méthodologie du test 1.6.5
- Retrouver dans le document les éléments
<svg>porteurs d’information qui nécessitent une description détaillée ; - Pour chaque élément
<svg>, vérifier qu’il existe :- Soit un attribut WAI-ARIA
aria-labelcontenant l’alternative textuelle et une référence à une description détaillée adjacente ; - Soit un attribut WAI-ARIA
aria-labelledbyassociant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ; - Soit un attribut WAI-ARIA
aria-describedbyassociant un passage de texte faisant office de description détaillée ; - Soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
- Soit un attribut WAI-ARIA
- Si c’est le cas pour chaque élément
<svg>, le test est validé.
Test 1.6.6
Pour chaque image vectorielle (balise <svg>) porteuse d’information, ayant une description détaillée, la référence éventuelle à la description détaillée dans l’attribut WAI-ARIA aria-label et la description détaillée associée par l’attribut WAI-ARIA aria-labelledby ou aria-describedby sont-elles correctement restituées par les technologies d’assistance ?
Méthodologie du test 1.6.6
- Retrouver dans le document les éléments
<svg>porteurs d’information dont la description détaillée est fournie au moyen d’un attributaria-label,aria-labelledbyouaria-describedby; - Pour chaque élément
<svg>, vérifier que le contenu de la description détaillée est correctement restitué par les technologies d’assistance ; - Si c’est le cas pour chaque élément
<svg>, le test est validé.
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-labelcontenant l’alternative textuelle et une référence à une description détaillée adjacente ; - Il existe un attribut WAI-ARIA
aria-labelledbyassociant 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 du test 1.6.7
- Retrouver dans le document les éléments
<canvas>porteurs d’information qui nécessitent une description détaillée ; - 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.
- Si c’est le cas pour chaque élément
<canvas>, le test est validé.
Test 1.6.8
Pour chaque image bitmap (balise <canvas>) porteuse d’information, qui implémente une référence à une description détaillée adjacente, cette référence est-elle correctement restituée par les technologies d’assistance ?
Méthodologie du test 1.6.8
- Retrouver dans le document les éléments
<canvas>porteurs d’information dont la description détaillée est fournie au moyen d’un attributaria-label,aria-labelledbyouaria-describedby; - Pour chaque élément
<canvas>, vérifier que le contenu de la description détaillée est correctement restitué par les technologies d’assistance ; - Si c’est le cas pour chaque élément
<canvas>, le test est validé.
Test 1.6.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, qui est accompagnée d’une description détaillée et qui utilise un attribut WAI-ARIA aria-describedby, l’attribut WAI-ARIA aria-describedby associe-t-il la description détaillée ?
Méthodologie du test 1.6.9
- Retrouver dans le document les images (éléments
<img>,<input>avec l’attributtype="image",<area>,<object>,<embed>,<svg>,<canvas>ou possédant un attribut WAI-ARIArole="img") porteuses d’information dont la description détaillée utilise un attribut WAI-ARIAaria-describedby; - Pour chaque image, vérifier que le contenu de la description détaillée est correctement restitué par les technologies d’assistance ;
- Si c’est le cas pour chaque image, le test est validé.
Test 1.6.10
Chaque balise possédant un attribut WAI-ARIA role="img" 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-labelcontenant l’alternative textuelle et une référence à une description détaillée adjacente ; - Il existe un attribut WAI-ARIA
aria-labelledbyassociant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ; - Il existe un attribut WAI-ARIA
aria-describedbyassociant un passage de texte faisant office de description détaillée ; - Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
Méthodologie du test 1.6.10
- Retrouver dans le document les éléments pourvus d’un attribut WAI-ARIA
role="img"porteurs d’information qui nécessitent une description détaillée ; - Pour chaque élément
role="img", vérifier qu’il existe :- Soit un attribut WAI-ARIA
aria-labelcontenant l’alternative textuelle et une référence à une description détaillée adjacente ; - Soit un attribut WAI-ARIA
aria-labelledbyassociant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ; - Soit un attribut WAI-ARIA
aria-describedbyassociant un passage de texte faisant office de description détaillée ; - Soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
- Soit un attribut WAI-ARIA
- Si c’est le cas pour chaque élément
role="img", le test est validé.
Notes techniques
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.
Références WCAG 2.1
- 1.1.1 Non-text Content (niveau A)
Techniques WCAG : G92, G74, G73, H45, ARIA6
Ce que l’audit automatique peut détecter
Aucune règle d’axe-core 4.14.0 ne vérifie directement ce critère : vérification humaine indispensable, en suivant la méthodologie de chaque test.
Source : RGAA 4.1.2 (WCAG 2.1), © DINUM, publié dans le dépôt DISIC/accessibilite.numerique.gouv.fr (commit ca4019f), sous Licence Ouverte 2.0. Texte officiel reproduit sans modification de contenu ; certains attributs de mise en forme (liens ouverts dans une nouvelle fenêtre, lien mort) sont retirés. Seuls les encadrés « Explication Rampe — non normative » sont rédigés par Rampe.