Un placeholder n’est pas une étiquette

Il peut être tentant de placer un texte indicatif dans un champ et de faire l’impasse sur l’étiquette. Mais un espace réservé est un indice, pas un nom. ⚠️

Dès qu’une personne commence à saisir du texte, l’espace réservé disparaît. Il ne reste alors plus rien pour indiquer à quoi servait le champ.

Les utilisateurs qui ont des difficultés de mémoire ou d’attention doivent se souvenir de l’indication une fois qu’elle a disparu. Une étiquette persistante leur évite cette charge.

Le texte d’un espace réservé est généralement gris clair, ce qui ne respecte souvent pas les règles de contraste. Les personnes malvoyantes peuvent ne pas le lire du tout.

Un texte indicatif gris peut être interprété comme une valeur déjà saisie. Les utilisateurs ignorent alors le champ, puis sont surpris par l’erreur indiquant qu’il est obligatoire.

La prise en charge de l’espace réservé comme nom par les lecteurs d’écran est inégale et varie selon le navigateur. Vous ne pouvez pas compter sur son annonce.

Les espaces réservés conviennent comme indications supplémentaires, par exemple pour montrer un format. Associez-les à une véritable étiquette et ne les utilisez jamais seuls.

Un espace réservé est idéal pour un exemple de format, comme celui d’une date. L’étiquette conserve le véritable nom du champ.

Les étiquettes flottantes remontent lorsque vous saisissez du texte et gardent le nom visible. Il s’agit bien d’une étiquette, simplement animée, et elle est donc conforme.

Vérification rapide : saisissez du texte dans le champ. Si vous ne pouvez plus comprendre ce qu’il attend, l’espace réservé remplissait le rôle d’une étiquette.

Le critère Étiquettes ou instructions de WCAG exige un nom clair et persistant. Les champs qui utilisent uniquement un espace réservé échouent régulièrement aux audits.

Un espace réservé est une indication qui s’efface, pas un nom. Conservez une véritable étiquette et utilisez les espaces réservés uniquement pour fournir une aide supplémentaire sur le format. 💡