Le placeholder n’est pas un label !

Avec la découverte de l’attribut placeholder, introduit dans HTML5, de plus en plus de formulaires affichent la consigne de saisie directement dans le champ. C’est une mauvaise pratique, pour plusieurs raisons, tant ergonomiques que techniques.

Mauvaise expérience utilisateur

Lorsqu’elle est ainsi affichée dans le champ, la consigne s’efface à la prise de focus. Cela déstabilise l’utilisateur, qui a intérêt à avoir mémorisé la consigne, sous peine de devoir vider le champ pour la faire réapparaître. Mauvaise UX !

En réalité, cette mauvaise pratique n’est pas nouvelle, puisque ce comportement a longtemps été réalisé en JavaScript, mais elle est facilitée par cet attribut nouveau et se répand donc.

Utilisation impossible sans label

Le pire est l’absence de label. En effet, la consigne de saisie doit être portée par l’élément <label>. Celui-ci s’affiche avant le champ correspondant, devant ou au dessus, mais idéalement en dehors et accolé au champ.

L’attribut placeholder ne remplace pas le label. Car c’est le label, et pas autre chose, qui sert à informer l’utilisateur de l’information attendue dans le champ. En son absence, certains, notamment non-voyants, ne peuvent remplir correctement le formulaire. Mauvaise accessibilité !

L’attribut placeholder est restitué, par les lecteurs d’écrans, pour ce qu’il est : un complément du label. Encore faut-il que le label existe… Le placeholder complète le label mais ne s’y substitue pas.

Le placeholder est un exemple

Si ça ne marche ergonomiquement pas… c’est parce que le placeholder ne sert pas à ça. Vous faites une erreur de code. Relisez la spec (4.10.5.3.10 The placeholder attribute) ! Elle dit explicitement : The placeholder attribute should not be used as an alternative to a label soit : l’attribut placeholder ne doit pas être utilisé à la place d’un label.

L’attribut placeholder permet de donner un indice, pour aider l’utilisateur à saisir, sous la forme d’un exemple, de valeur ou de format. Autrement dit : le label sert à indiquer quoi saisir et le placeholder précise comment saisir. Typiquement, ce sera pour préciser le format de saisie attendu pour les dates et les adresses courriel et URL :

Point trop n’en faut ! Le placeholder ne s’utilise que lorsqu’il est pertinent d’apporter un complément au label. Sinon, il est préférable de laisser le champ vide, pour mieux inviter à la saisie.

Ça ne marche pas partout

Mauvaise nouvelle, l’attribut placeholder, nouveau, n’est pas supporté par tous les navigateurs, en particulier pas par Internet Explorer, pas avant IE10. Pour pallier, il faut ajouter une rustine en JavaScript.

Mais en l’absence de JavaScript, il faut fournir l’indice complémentaire dans le label lui-même, à l’ancienne… sans utiliser placeholder, afin d’éviter la redondance d’affichage :

Comment gagner de la place ?

Le seul argument expliquant cet usage détourné du placeholder est « c’est joli, ça prend pas de place ». Passons la considération esthétique. Si vous êtes réellement contraint par la place, codez au moins de façon propre et accessible !

Le label est indispensable. Si vous n’avez pas d’autre choix, faute de place, que de le positionner sur le champ de saisie, bidouillez ça en JavaScript, à l’ancienne. Sans masquer le label via CSS, afin que celui-ci reste lisible lorsque JavaScript est désactivé.