svg-text-alternative-quality

L’alternative textuelle de <svg> doit être appropriée (revue manuelle)

manualWCAG 1.1.1 (A)confiance : mediumgravité : minorperceivable

Signale les graphiques <svg> applicables dont une alternative textuelle a été détectée, pour une revue humaine de sa pertinence.

Applicabilité. S’applique aux éléments <svg> en ligne qui portent déjà une alternative textuelle : un texte <title> ou <desc> non vide, un aria-label non vide ou un aria-labelledby qui se résout en texte non vide. <desc> compte ici comme un élément à examiner, même s’il ne contribue jamais au nom accessible : cette distinction relève de svg-text-alternative-present. L’élément doit être inclus dans l’arbre d’accessibilité, et role="presentation"/"none" le sort du périmètre, sauf s’il est focalisable, ce qui rétablit son rôle.

Attendu. Une revue humaine est nécessaire pour confirmer que l’alternative textuelle fournie est exacte et appropriée.

Ce que rapporte un constat.

hasNonEmptyTitle : true lorsque le premier <title> à l’intérieur du <svg> contient du texte.
hasNonEmptyDesc : true lorsque le premier <desc> à l’intérieur du <svg> contient du texte.
ariaLabel : la valeur aria-label, ou null lorsqu’il n’y en a pas.
ariaLabelledBy : la valeur aria-labelledby, les ids vers lesquels elle pointe, ou null lorsqu’il n’y en a pas.
ariaLabelledByText : le texte des éléments vers lesquels pointe aria-labelledby, jusqu’à 120 caractères. Recherché uniquement en l’absence d’aria-label ; null sinon, ou lorsqu’il ne se résout vers rien.
reasonCode : IMAGE_ONLY_CONTROL_CONTENT lorsque le <svg> est le seul contenu d’un lien ou d’un bouton (sans texte ni autre image), si bien que son alternative textuelle est le nom du contrôle, avec controlContent qui nomme le rôle du contrôle (link ou button) ; TEXT_ALTERNATIVE_REVIEW sinon.

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

can't tell

<svg role="img" viewBox="0 0 24 24"><title>Growth chart</title><path d="M0 0h24v24H0z"/></svg>

Un <title> est présent : il vaut la peine de vérifier que « Growth chart » décrit ce que montre réellement le graphique, et pas seulement qu’il s’agit d’un graphique.

n/a

<svg role="img" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>

Aucun texte <title>/<desc>, aria-label ou aria-labelledby résolu à examiner ; cela relève de l’échec de svg-text-alternative-present.

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.

`IMAGE_ONLY_CONTROL_CONTENT`

Repérez le lien ou le bouton indiqué par le rapport ; son seul contenu est ce svg.
Activez le contrôle et notez ce qu’il fait ou où il mène.
Lisez le nom du contrôle dans le panneau Accessibilité des outils de développement (il provient de l’équivalent textuel du svg), ou atteignez-le avec Tab avec un lecteur d’écran.
Comparez : le nom dit-il ce que fait le contrôle (« Rechercher », « Fermer le menu »), et pas seulement à quoi ressemble l’icône (« loupe ») ?

Réussite. Le nom du contrôle dit ce qu’il fait ou où il mène.

Échec. Le nom décrit l’image, est vague ou ne correspond pas à l’action, ce qui ne respecte pas le critère WCAG 1.1.1 (et laisse la fonction du contrôle peu claire).

`TEXT_ALTERNATIVE_REVIEW`

Regardez le graphique indiqué par le rapport et notez ce qu’il montre (une icône, un logo, un diagramme et ses données).
Lisez son équivalent textuel dans le rapport (title, desc, aria-label ou texte de aria-labelledby), ou dans le panneau Accessibilité des outils de développement.
Si l’équivalent textuel ne fait que nommer le graphique, comme c’est courant pour les graphiques et les schémas, les détails peuvent se trouver ailleurs : dans une légende, un texte ou un tableau à côté, ou dans un lien juste à côté. Cela ne compte que si un utilisateur de lecteur d’écran peut les trouver depuis le graphique et qu’ils donnent tout ce que montre le graphique.
Comparez : le texte dit-il ce que le graphique montre ou signifie ? Si le graphique est décoratif, il devrait plutôt être masqué (aria-hidden="true").

Réussite. L’équivalent textuel transmet ce que montre le graphique, ou le nomme et une description qu’un utilisateur de lecteur d’écran atteint depuis lui donne le reste, ou le graphique décoratif est masqué aux technologies d’assistance.

Échec. L’équivalent textuel est faux, vague (comme « image » ou « icône ») ou omet ce que transmet le graphique, et aucune description atteignable depuis lui ne le donne, ce qui ne respecte pas le critère WCAG 1.1.1.

Règles associées

Voir le code source