img-alt-decorative
Les <img>/<canvas>/<svg> exclus doivent être décoratifs (revue manuelle)
Signale les éléments <img>, <canvas> et <svg> exclus de l’arbre d’accessibilité (aria-hidden, role="none"/"presentation", alt vide, ou svg/canvas sans libellé), pour qu’une personne vérifie qu’ils sont purement décoratifs.
Applicabilité. S’applique aux éléments <img>, <canvas> ou <svg> visibles exclus de l’arbre d’accessibilité par l’un des moyens suivants : un aria-hidden sur l’élément ou un ancêtre, un role="none"/"presentation" explicite non annulé par la focalisabilité, un <img alt=""> (le marqueur décoratif natif, avec la même annulation par focalisabilité ; seulement un alt littéralement vide, donc alt=" " n’en est pas un), un <svg> sans libellé dont le rôle implicite est graphics-document (sans reformulation de rôle img/graphics-symbol, nom ARIA, <title>/<desc> enfant direct contenant du texte, quelle que soit sa position parmi les enfants, ni focalisabilité), ou un <canvas> sans libellé et sans aucun rôle explicite. Un élément est ignoré lorsqu’un ancêtre dont le nom tient lieu de son contenu a un nom fourni par l’auteur (aria-label, aria-labelledby, title ou un <label> associé) : ce nom remplace ce que l’image aurait dit (le cas courant : un bouton à icône seule nommé par aria-label). Un tel ancêtre a un rôle dont le nom vient du contenu (link, button, heading, cell, option, tab, treeitem, menuitem...) ou dont les enfants sont présentationnels (img, slider, progressbar...). ACT e88epe ignore l’élément sous tout ancêtre nommé par l’auteur ; cette règle pose quand même la question sous un landmark, une figure, un group, une region, une boîte de dialogue ou un widget composite (listbox, menu, grid...) nommés, dont le nom étiquette un conteneur et ne dit rien de ce que montre une image qui s’y trouve : <figure aria-label="Photo: DR"> crédite une photo. Un lien ou un bouton nommé par son texte n’exempte pas non plus une image placée à côté du texte : une icône de type de fichier, de lien externe ou de notation peut dire ce que le texte ne dit pas, et ACT la maintient dans le périmètre. Un élément situé dans un sous-arbre [inert], ou derrière une boîte de dialogue modale ouverte, est laissé de côté comme les autres contenus masqués, comme le fait img-alt-present : il ne reçoit aucune interaction et aucune technologie d’assistance n’y accède.
Attendu. Une revue humaine est nécessaire pour confirmer que l’élément exclu est purement décoratif et ne transmet aucune information qui échapperait sinon à l’utilisateur.
Ce que rapporte un constat.
element:img,svgoucanvas.sameImageCount: combien de constats de ce résultat montrent la même image, celui-ci compris : un <img> ayant la même source courante (currentSrc, sinonsrc), ou un <svg> en ligne ayant les mêmes attributs racine qui modifient son rendu (viewBox, width, height, class, style, fill, stroke, color) et le même balisage. 1 pour un canvas, une image sans source ni balisage à comparer, ou un <img> à chargement différé dont l’espace réservédata:tient lieu d’undata-srcou d’undata-srcset.sameImageFirst: true sur le premier d’entre eux dans l’ordre du document, pour qu’une personne puisse examiner un exemplaire et compter les autres.reasonCode:IMAGE_ONLY_CONTROL_CONTENTlorsque l’image est le seul contenu d’un lien ou d’un bouton (sans texte ni autre image) : le contrôle ne tire alors d’elle aucun nom, qu’elle soit décorative ou non, etcontrolContentnomme le rôle du contrôle (linkoubutton).EXCLUDED_ELEMENT_REVIEWsinon.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<img src="quarterly-trend.png" alt="">
Marqué comme décoratif avec alt="", mais un nom de fichier comme « quarterly-trend » laisse penser qu’il s’agit en réalité d’un graphique informatif, pas d’une décoration.
<button aria-label="Close"><img src="x-icon.png" alt=""></button>
L’aria-label du bouton fournit déjà le nom accessible ; l’exclusion de l’icône ne pose pas ici de question de décoration à examiner.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
EXCLUDED_ELEMENT_REVIEW
- Repérez l’image, le svg ou le canvas indiqué par le rapport et regardez-le sur la page.
- Demandez-vous ce qui manquerait à l’utilisateur s’il était retiré : une information, un libellé, les données d’un graphique, ou rien.
- S’il transmet quelque chose, vérifiez si un texte visible voisin dit déjà la même chose.
Réussite. L’image est purement décorative (un espaceur, un séparateur, un ornement ou une illustration dont le texte donne déjà le contenu) : la masquer ne fait rien perdre.
Échec. L’image transmet une information que rien d’autre sur la page ne donne, et pourtant elle est masquée aux technologies d’assistance, ce qui ne respecte pas le critère WCAG 1.1.1.
IMAGE_ONLY_CONTROL_CONTENT
- Repérez le lien ou le bouton indiqué par le rapport ; son seul contenu est une image masquée.
- Lisez le nom calculé du contrôle dans le panneau Accessibilité, ou placez-vous dessus avec un lecteur d’écran et écoutez.
- Comparez ce qui est annoncé avec ce que fait le contrôle.
Réussite. Le contrôle est toujours annoncé avec un nom qui dit ce qu’il fait.
Échec. Le contrôle est annoncé sans nom, ou seulement avec son adresse, parce que son unique image est masquée, ce qui ne respecte pas le critère WCAG 1.1.1 (F89).