Étiquetage avec l’attribut title

Silktide vérifie les boutons et les liens de vos pages afin de détecter les contrôles qui dépendent de l’attribut title pour expliquer leur fonction. Les navigateurs n’affichent title que sous la forme d’une infobulle différée lorsqu’un pointeur de souris survole l’élément. La plupart des utilisateurs ne le voient donc jamais.

<!-- Problème : l’infobulle est le seul libellé -->
<button title="Fermer"><svg>…</svg></button>

<!-- Correction : donnez au contrôle un véritable nom accessible -->
<button aria-label="Fermer"><svg>…</svg></button>

Pourquoi est-ce important ?

Une infobulle title n’apparaît que pour les utilisateurs de souris, et uniquement après un délai. Les utilisateurs du clavier, les utilisateurs d’appareils tactiles et mobiles, ainsi que la plupart des utilisateurs de , ne la reçoivent jamais. Un contrôle étiqueté uniquement par son title est donc un bouton mystérieux pour une grande partie de vos visiteurs. Les lecteurs d’écran gèrent également title de manière incohérente : certains le lisent, d’autres l’ignorent. Cela le rend peu fiable, même pour les utilisateurs qu’il est censé aider.

Lorsqu’un contrôle possède à la fois un title et un différent, le problème est la cohérence : un utilisateur de souris voit brièvement une description, tandis qu’un utilisateur de technologie d’assistance en entend une autre. Ces deux descriptions s’éloignent davantage l’une de l’autre au fil de la maintenance de la page.

Comment corriger ce problème

Donnez au contrôle un libellé approprié : du texte visible lorsque c’est possible, ou un aria-label (ou un aria-labelledby pointant vers du texte existant) pour les contrôles composés uniquement d’une icône.
Si le contrôle possède à la fois un title et un aria-label qui ne correspondent pas, choisissez la formulation la plus utile et utilisez-la partout. En général, la solution la plus propre consiste à supprimer le title et à laisser aria-label fournir la description.
Conservez title uniquement pour des informations véritablement complémentaires. Il ne doit jamais être le seul moyen de savoir ce que fait un contrôle.

Comment Silktide effectue cette vérification

Recherchez les boutons, liens et contrôles d’affichage visibles sur chaque page, y compris les éléments possédant role="button" ou role="link".
Pour chaque contrôle ayant un attribut title non trivial, vérifiez s’il possède un autre étiquetage : texte visible, d’image, aria-label ou aria-labelledby.
Signalez les contrôles dont le seul libellé est l’attribut title.
Lorsqu’un contrôle possède à la fois un title et un aria-label ou aria-labelledby explicite, comparez les deux et signalez-les lorsqu’ils expriment des informations sensiblement différentes. Si l’un complète simplement l’autre (un title de « Rechercher » avec un nom de « Rechercher maintenant »), il n’est pas signalé.

Les champs de formulaire tels que <input> et <select> ne sont pas testés par cette vérification ; leur étiquetage est couvert par les libellés des contrôles de formulaire.

Dépannage

L’attribut title est obligatoire sur les iframes

C’est exact : title sur un <iframe> est la manière standard de le nommer, et cette vérification ne teste pas les iframes. Elle teste uniquement les contrôles interactifs tels que les boutons et les liens.

Mon infobulle ajoute des informations supplémentaires utiles

C’est une utilisation légitime, à condition que le contrôle possède également un véritable libellé. Cette vérification ne signale que les contrôles pour lesquels title est le seul libellé, ou lorsqu’il contredit le nom accessible.