Étiquetage à l’aide de l’attribut title

Silktide vérifie les boutons et les liens de vos pages afin de repérer 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 gens ne le voient donc jamais.

<!-- Problème : l’infobulle est la seule étiquette -->
<button title="Fermer"><svg>…</svg></button>

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

Pourquoi c’est important

Une infobulle title ne s’affiche que pour les utilisateurs de souris, et seulement après un délai. Les utilisateurs du clavier, des appareils tactiles et des appareils mobiles, ainsi que la plupart des utilisateurs de , ne la reçoivent jamais. Un contrôle étiqueté uniquement par son attribut title est donc un bouton mystérieux pour une grande partie de vos visiteurs. Les lecteurs d’écran traitent aussi title de façon incohérente : certains le lisent, d’autres l’ignorent. Il n’est donc pas fiable, même pour les utilisateurs auxquels il est censé s’adresser.

Lorsqu’un contrôle a à 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, et les deux s’éloignent davantage l’une de l’autre au fil de la maintenance de la page.

Comment corriger le problème

Donnez au contrôle une étiquette appropriée : du texte visible lorsque 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 a à la fois un title et un aria-label qui ne correspondent pas, choisissez le libellé le plus utile et utilisez-le partout. Habituellement, la solution la plus simple consiste à supprimer le title et à laisser aria-label fournir la description.
Conservez title uniquement pour des renseignements réellement complémentaires. Il ne doit jamais être le seul moyen de savoir ce que fait un contrôle.

Comment Silktide effectue cette vérification

Repérez les boutons, les liens et les contrôles d’affichage/masquage visibles sur chaque page, y compris les éléments ayant role="button" ou role="link".
Pour chaque contrôle ayant un attribut title non trivial, vérifiez s’il possède une autre forme d’étiquetage : texte visible, d’image, aria-label ou aria-labelledby.
Signalez les contrôles dont la seule étiquette est l’attribut title.
Lorsqu’un contrôle a à la fois un title et un aria-label ou un aria-labelledby explicite, comparez les deux et signalez-les lorsqu’ils expriment des choses substantiellement différentes. Si l’un prolonge simplement l’autre (un title de « Search » et un nom de « Search now »), 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 étiquettes des contrôles de formulaire.

Dépannage

L’attribut title est obligatoire sur les iframes

C’est exact : title sur un <iframe> est la façon standard de le nommer, et cette vérification ne teste pas les iframes. Elle teste uniquement les contrôles interactifs, comme les boutons et les liens.

Mon infobulle ajoute des renseignements supplémentaires utiles

Il s’agit d’une utilisation légitime, à condition que le contrôle ait aussi une véritable étiquette. Cette vérification signale uniquement les contrôles pour lesquels title est la seule étiquette, ou lorsqu’il contredit le nom accessible.