4.1.2 Les champs sans label sont décrits par un tooltip

Dans la directive précédente nous demandions de donner un label à chaque champ. Il n'est parfois pas possible ou pas souhaitable d'associer à chaque champ de formulaire un label visible. Nous décrirons ici les quelques exceptions. Dans les cas où aucun label n'est présent il est obligatoire de décrire le champ dans un tooltip.

Pourquoi?

Les tooltips sont lus par les lecteurs d'écran ou rendus en braille lorsque le champ reçoit le focus.

Les tooltips peuvent également être utiles pour les visiteurs qui peuvent voir l'écran: ils apparaissent juste à côté du champ lorsque vous passez dessus avec la souris et peuvent donc offrir une aide supplémentaire pour remplir un formulaire.

En pratique

Ajoutez un tooltip pour un champ de formulaire en utilisant l'attribut title.

Ci-dessous vous trouverez quelques exemples dans lesquels le tooltip est obligatoire

Exemple de zone d'options avec tooltip - donner un score

Score

Exemple de champ de saisie de texte avec tooltip

Numéro de compte

Exception

Lorsqu'un formulaire n'a qu'un seule champ, ce qui est souvent le cas pour le champ de recherche, alors il n'est pas obligatoire d'ajouter un label, ni un tooltip. Le bouton d'envoi peut faire office de label. Nous recommandons quand-même l'usage du tooltip.

Exemple de champ de recherche avec tooltip

Champ de recherche

Attention

  • Cette technique est uniquement permise lorsqu'il n'est pas possible ou souhaitable d'ajouter un intitulé visible. Ce n'est pas une alternative à l'utilisation de labels.
  • Il n'est pas permis d'utiliser l'attribut value à la place du label: <input type="text" value="Nom d'utilisateur"><input type="text" value="Mot de passe">
  • Il n'est pas permis non plus de cacher le label au moyen des CSS et de le répéter dans un autre élément html, comme <p> ou<span>

comment tester

  1. Recherchez les champs qui n'ont pas de label.
  2. Vérifiez ensuite que chacun de ces champs possède un tooltip significatif, et qu'il est obtenu par l'attribut title. Dans la plupart des navigateurs, les tooltips apparaissent lorsque l'on maintient le curseur de la souris sur un champ mais il est plus sûr d'inspecter le code HTML avec Firebug.