Un placeholder n'est pas un label

Nous observons de plus en plus souvent que l'attribut placeholder est utilisé à la place du label dans les formulaires.

Un placeholder n'est pas une alternative à part entière pour un label. Un label qui reste visible est indispensable.

Label, value et placeholder?

Quelles sont les différences entre label, value et placeholder?

Label

Le label est l'étiquette d'un champ et indique ce que doit contenir le champ (nom, prénom, ...).

Un lecteur d'écran vocalise le contenu du label lié au champ lorsque le curseur arrive dans celui-ci. S'il n'y a pas de label, le lecteur d'écran ne peut transmettre aucune information à l'utilisateur.

Avec la souris, quand l'utilisateur clique sur le label d'un champ, le curseur se place dans le champ relié. C'est surtout utile de pouvoir cliquer sur le label pour les champs de type bouton radio ou cases à cocher, car cela augmente fort la taille de la zone cliquable.

Voici un exemple de code qui relie le label à un champ de formulaire.

<label for="name">Nom:</label>
<input type="text" id="name"/>

Value

L'attribut value sert à attribuer une valeur initiale au champ. Avec un peu de javascript, cette valeur peut être effacée lorsque le champ reçoit le focus .

<label for="adresse">Adresse:</label>
<input type="text" id="adresse" value="Avenue des Arts, 24" onfocus="this.value=''"/>

Placeholder

L'attribut placeholder peut être ajouté à un champ, mais ne peut pas être considéré comme un substitut de l'élément label.

La spécification HTML5 dit littéralement:

The placeholder attribute should not be used as an alternative to a label.

Il communique à l'utilisateur un indice sur les données que l'utilisateur doit insérer. Par exemple, vous pouvez indiquer une adresse email factice dans l'attribut placeholder d'un champ de type mail.

Lorsque l'utilisateur commence à écrire dans le champ mail, le placeholder se vide.

Voici, un exemple de code.

<label for="e-mail">E-mail:</label>
<input type="text" id="e-mail" placeholder="info@anysurfer.be" />

Si vous ne voyez pas l'adresse email dans le champ sous le code, c'est que votre navigateur ne prend pas en charge l'attribut placeholder de HTML5.

Pourquoi un label visible est-il toujours requis?

Il est permis d'utiliser les attributs value et placeholder pour communiquer des informations complémentaires. Mais les labels restent obligatoires. Ils sont indispensables pour les lecteurs d'écrans, mais également utiles pour les personnes qui naviguent au clavier ainsi que pour les personnes souffrant de troubles déficitaires de l'attention:

• Le texte du placeholder disparaît lorsque le curseur est dans le champ de saisie. Ceci vous oblige à lire le placeholder avant d'entrer dans le champ et à le mémoriser. Ce qui n'est pas évident pour tous les utilisateurs.

• Les visiteurs qui utilisent la touche de tabulation pour naviguer entre les champs de saisie auront le même problème et devront faire shift-tab pour ressortir du champ afin de réafficher le placeholder. Ceci constitue une manœuvre complexe.

• L'affichage standard du placeholder a un faible taux de contraste (4,5: 1), ce qui le rend difficilement lisible.

Alternatives

Le grand avantage de placeholder est qu'il occupe peu d'espace ce qui pour certains formulaires est fort utile. Si pour conserver le design de votre formulaire vous souhaitez continuer d'utiliser placeholder, voici une alternative qui simule celui-ci mais qui utilise de vrais labels visibles: Sliding Labels

A lire aussi

Le Nielsen Norman grouve estime aussi que l'utilisation de placeholder est néfaste : Placeholders in Form Fields Are Harmful