L'autre jour, je remplissais un formulaire d'inscription à un examen en ligne. On me demandait d'indiquer l'adresse de mon bureau, mon adresse personnelle, mon numéro de téléphone professionnel et mon numéro de téléphone personnel. J'ai renseigné ces informations sans aucun problème. Cependant, lorsque j'ai voulu vérifier si j'avais bien saisi toutes les informations dans les champs appropriés, le libellé « Adresse du bureau » et les autres libellés des champs avaient disparu. Je ne savais plus quoi faire. Dois-je ressaisir les données dans chaque champ pour m'assurer qu'elles sont correctes ? Malheureusement, c'était la seule façon de vérifier chaque champ, ce qui s'est avéré à la fois chronophage et frustrant.
L'attribut « placeholder » fournit de brèves instructions sur la valeur attendue pour un champ de saisie. Par exemple, le format d'une date (MM/JJ/AAAA) ou les critères à respecter pour un nouveau mot de passe.
Le champ de saisie affiche dans un premier temps les brèves instructions du texte de remplacement, mais celles-ci disparaissent dès que l'utilisateur commence à saisir du texte. La meilleure solution consiste à placer le libellé et les instructions en dehors du champ du formulaire, sous forme de texte sur la page, plutôt que d'utiliser le texte de remplacement dans le champ de saisie. Cette pratique garantit que l'utilisateur puisse toujours voir le libellé et les instructions du champ du formulaire.
L'attribut « placeholder » fonctionne avec les types de champs de saisie suivants :
- Texte
- Rechercher
- URL
- téléphone
- mot de passe
Le HTML5 a introduit l'attribut « placeholder », qui s'est depuis largement répandu. Les concepteurs et les développeurs préfèrent utiliser un « placeholder » dans les formulaires, car ils estiment qu'il est plus esthétique qu'une étiquette et des instructions visibles. En effet, il prend moins de place, en particulier sur les petits appareils et les écrans de petite taille.
Dans la première partie de cette série consacrée aux formulaires accessibles, nous verrons pourquoi l'utilisation d'un attribut « placeholder » n'est pas idéale du point de vue de l'accessibilité, et comment utiliser correctement cet attribut.
Évitez l'attribut « placeholder »
Selon une étude menée par Nielsen, l'utilisation de texte de remplacement dans un champ de formulaire nuit à l'expérience utilisateur. En effet, ce texte de remplacement sème la confusion chez de nombreux utilisateurs. Les personnes présentant des troubles cognitifs, en particulier, ont souvent du mal à comprendre ce texte, car elles pensent qu'il s'agit d'un texte prérempli et tentent de valider le formulaire sans saisir leurs propres informations.
Il est important de noter que tous les lecteurs d'écran ne lisent pas l'attribut « placeholder ». Si celui-ci n'est pas lu par un lecteur d'écran, l'utilisateur risque de passer à côté de cette information.
Les espaces réservés ne respectent pas les exigences de contraste des couleurs
La couleur par défaut d'un texte de remplacement dans un champ de formulaire est le gris clair, ce qui ne respecte souvent pas le critère de succès (SC) 1.4.3 des Directives pour l'accessibilité des contenus Web (WCAG). Conformément au critère de succès 1.4.3 des WCAG, la présentation visuelle du texte et des images représentant du texte doit présenter un rapport de contraste des couleurs d'au moins 4,5:1 ; or, la couleur de l'attribut « placeholder » est affichée différemment selon les navigateurs. Pour que l'attribut « placeholder » respecte les exigences en matière de contraste des couleurs, il convient d'utiliser un code CSS approprié :
Exemple de code CSS pour un élément « placeholder »
Exemples de code :
::-moz-placeholder {
color: #333;
opacity: 1;
}
::-webkit-input-placeholder {
color: #333;
}
Un espace réservé ne remplace pas les étiquettes visibles
La tendance consistant à utiliser des textes de remplissage pour afficher des libellés visibles dans les champs de formulaire nuit à l’expérience utilisateur et à l’accessibilité. Comme ces textes disparaissent dès que les utilisateurs saisissent leurs données dans les champs du formulaire, ceux-ci ne savent plus quel champ correspond à quel texte de remplissage. Cette disparition est particulièrement préjudiciable aux personnes souffrant de troubles de la mémoire à court terme, aux personnes ayant subi un traumatisme crânien, aux personnes autistes, aux personnes atteintes de TDAH et aux personnes malvoyantes.
De plus, les utilisateurs ne pourront pas vérifier s’ils ont saisi les bonnes données dans le champ approprié du formulaire si le texte de remplacement est utilisé comme libellé visible du champ. La nécessité de revérifier et de ressaisir les données représente une charge cognitive considérable pour tous les utilisateurs, y compris les personnes en situation de handicap.
Évitez de fournir des instructions à l'aide d'un attribut de remplacement
Les instructions aident les utilisateurs à valider correctement un formulaire. Cependant, si ces instructions sont fournies via l'attribut « placeholder », il se peut que l'utilisateur ne puisse pas en tirer pleinement parti. En effet, comme les valeurs par défaut disparaissent dès que l'utilisateur commence à remplir le formulaire, il risque de passer à côté d'informations essentielles. Par exemple, n'utilisez pas l'attribut « placeholder » pour fournir des instructions concernant un champ de mot de passe. Les utilisateurs doivent pouvoir consulter ces instructions à tout moment pour connaître les exigences relatives au mot de passe.
Exemple de syntaxe pour un espace réservé de mot de passe
<label for=”password1”>Password</label> <input type=”text” id=”password1” placeholder=”Password should be 8 characters with one number, one special character”>
Aperçu
Dans l'exemple ci-dessus, le mot de passe doit comporter un caractère spécial, un chiffre et comporter 8 caractères. Cependant, ces instructions disparaissent dès que l'utilisateur commence à saisir du texte dans le champ. La saisie d'un mot de passe peut s'avérer plus compliquée si elle nécessite davantage de contraintes.
Pour éviter toute confusion ou erreur de la part des utilisateurs, veillez à toujours fournir des instructions sous forme de texte cohérent et visible par les utilisateurs. Il est également recommandé d'associer ces instructions aux éléments du formulaire à l'aide de l'attribut `aria-describedby`, à l'intention des utilisateurs de lecteurs d'écran.
Exemple de syntaxe pour une indication statique
Exemple de code :
<label for=”password”>Password</label> <input type=”text” id=”password” placeholder="enter password" aria-describedby=”password-hint”> <span id=”password-hint”>Password should be 8characters long with a number & a special character</span>
Aperçu
Le mot de passe doit comporter 8 caractères, dont un chiffre et un caractère spécial.
Dans l'exemple ci-dessus, les instructions relatives au mot de passe restent inchangées même après que l'utilisateur a saisi des données dans le champ du mot de passe.
Remplacer l'espace réservé par une étiquette flottante
On observe une tendance croissante à utiliser le texte d'aide comme libellé visible d'un champ de formulaire, mais au lieu de disparaître lorsque l'utilisateur saisit des données, ce texte reste affiché au-dessus, en dessous ou à côté du contrôle du formulaire. On parle alors de « libellés flottants ». Bien que les avis des professionnels du design et de l'accessibilité divergent quant à ces libellés flottants, nous vous recommandons de les tester auprès de vos utilisateurs. Pour plus d'informations sur les libellés flottants, consultez les articles suivants :
- Les étiquettes flottantes posent problème
- Les étiquettes flottantes posent-elles vraiment autant de problèmes, au fond ?
- Les étiquettes flottantes, c'est toujours nul
À mon avis, utiliser le texte de remplacement conformément à la spécification HTML offre la meilleure expérience utilisateur pour tout le monde. Si vous choisissez d'utiliser un texte de remplacement, réservez-le exclusivement à de brèves instructions ou à des exemples de saisie.
Points à retenir
- Évitez autant que possible les espaces réservés
- Assurez-vous que la couleur du texte de remplacement respecte l'exigence WCAG SC 1.4.3 relative à un rapport de contraste de 4,5:1.
- Ne pas inclure d'instructions dans un attribut « placeholder »
- Afficher les instructions sous forme de texte à côté du champ du formulaire
- Associer des instructions à leur champ de formulaire correspondant à l'aide de l'attribut `aria-describedby`
- S'il n'y a pas d'autre solution que d'utiliser un espace réservé à la place d'une étiquette visible, utilisez l'une des méthodes d'étiquettes flottantes
