role-img-text-alternative-present
[role="img"/"graphics-symbol"/"graphics-document"] doit avoir une alternative textuelle accessible
Vérifie que les éléments avec role="img", "graphics-symbol" ou "graphics-document" fournissent une alternative textuelle accessible au moyen d’aria-label, d’aria-labelledby, d’un attribut title ou (pour les éléments SVG) d’un <title> enfant.
Applicabilité. S’applique aux éléments dont l’attribut role se résout en img, graphics-symbol ou graphics-document (le premier jeton de rôle connu de la liste de repli, sans tenir compte de la casse) inclus dans l’arbre d’accessibilité (l’exemption « masqué par programmation » d’ACT 23a2a8 : display:none/visibility:hidden/aria-hidden="true" sur l’élément ou un ancêtre, sans exception pour les éléments focalisables ou référencés par IDREF, que aria-hidden-focus et duplicate-id-aria traitent séparément). Selon ACT 7d6734, cela concerne tout élément portant l’un de ces rôles, pas seulement la racine <svg>, p. ex. un <circle role="graphics-symbol"> imbriqué dans un <svg> ordinaire. Chaque élément <svg> lui-même est laissé au traitement title/nom ARIA de svg-text-alternative-present (déjà conforme à ACT) : un <svg role="img"> sans nom est donc signalé une seule fois, là-bas ; la balise <img> est exclue ici car elle a sa propre règle dédiée. Un élément personnalisé auquel ses ElementInternals donnent l’un de ces rôles (this.attachInternals().role), sans attribut role qui en nomme un autre, est lui aussi dans le périmètre : c’est son rôle par défaut, et aucune autre règle ne le vérifie.
Attendu. Chaque élément applicable a une alternative textuelle accessible :
- aria-label avec une valeur non vide ; OU
- aria-labelledby faisant référence à au moins un élément existant qui fournit un texte non vide ; OU
- un attribut title non vide (source de nom accessible de dernier recours selon HTML-AAM) ; OU
- pour un élément de l’espace de noms SVG, un <title> non vide enfant direct, quelle que soit sa position parmi les enfants (le mécanisme de nommage propre à SVG-AAM, pas seulement pour la racine <svg>) ; c’est le premier qui compte.
Ce que rapporte un constat.
ariaLabel: l’aria-labelde l’élément sans espaces aux extrémités, ou null lorsqu’il n’en a pas.ariaLabelledby: la liste d’ids de l’aria-labelledbyde l’élément sans espaces aux extrémités, ou null lorsqu’il n’en a pas.accessibleNameInfo(nameNotResolved) : le nom accessible que reçoit finalement l’élément :present,value,mechanism(la provenance du nom, commearia-labelledby) etflags(des remarques sur ce qui n’a pas fonctionné, commeidref-missingpour une référence à un id qui n’existe pas). Null sur les autres constats.
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
<span role="img" aria-label="Notifications"></span>
aria-label fournit l’alternative textuelle.
<span role="img">notifications</span>
Le contenu textuel n’est pas une source de nom valide pour un élément doté d’un role="img" explicite.
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.
name_internals
- Inspectez l’image indiquée par le rapport, un élément personnalisé, et notez son rôle.
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et lisez le nom accessible de l’élément.
- Avec un lecteur d’écran, placez-vous sur l’élément et écoutez le nom annoncé.
Réussite. L’arbre d’accessibilité montre un nom pour l’image, défini par ses internals ou autrement, et le lecteur d’écran l’annonce.
Échec. L’image n’a pas de nom dans l’arbre d’accessibilité et le lecteur d’écran n’annonce que son rôle, ce qui ne respecte pas le critère WCAG 1.1.1.