control-name-title-only

Un bouton ou un lien ne devrait pas tirer son nom uniquement de son title

manualconfiance : mediumgravité : minoroperable

Signale, pour une revue manuelle, un bouton ou un lien dont le seul nom accessible est son attribut title, affiché uniquement au survol de la souris.

Applicabilité. Boutons et liens présents dans l’arbre d’accessibilité dotés d’un attribut title non vide : <a href>, <area href>, <button>, <input> de type button, submit, reset ou image, et éléments auxquels leur attribut role, ou leurs ElementInternals, donnent le rôle button ou link.

Attendu. Le calcul du nom accessible (Accessible Name Computation) ne prend un title comme nom que lorsque rien d’autre ne nomme l’élément : un nommage par l’auteur (aria-labelledby, aria-label), l’alt d’un bouton image, la value d’un bouton input ou, pour les boutons et les liens, leur contenu.

  • Autre chose que le title nomme le contrôle : pass. Le title est sa description, une infobulle.
  • Le title est son seul nom : cantTell (NAME_FROM_TITLE_ONLY).

Le nom est valide, le critère 4.1.2 est donc satisfait, mais un title n’est affiché qu’au survol de la souris : pas sur les écrans tactiles, pas lorsque le contrôle reçoit le focus au clavier, et pas sous la forme d’un texte qu’une personne qui utilise la commande vocale peut lire et prononcer. Vérifiez si le contrôle peut recevoir un texte visible, ou un aria-label lorsqu’il n’affiche qu’une icône, en conservant le title comme infobulle si on le souhaite.

Ce que rapporte un constat.

  • role : le rôle du contrôle, button ou link.

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

pass
<button title="Save the draft">Save</button>

Le texte du bouton le nomme ; le title est une infobulle.

can't tell
<button title="Close"><svg aria-hidden="true" width="12" height="12"></svg></button>

Le title est le seul nom du bouton, affiché uniquement au survol de la souris. Une personne vérifie s’il peut recevoir un texte visible, ou un aria-label.

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_FROM_TITLE_ONLY

  1. Regardez le bouton ou le lien indiqué par le rapport sans le survoler.
  2. Déterminez si ce qu’il affiche (du texte ou une icône) rend sa fonction claire.
  3. Atteignez-le au clavier avec Tab et notez que l’info-bulle du title n’apparaît pas.

Réussite. La fonction du contrôle est claire d’après ce qu’il affiche, ou il reçoit un texte visible ou un aria-label, le title étant conservé comme info-bulle.

Échec. La fonction n’est expliquée que par un title que les utilisateurs du clavier, du tactile et de la commande vocale ne voient jamais (bonne pratique, accname 1.2).

Voir le code source