L’autocomplétion des formulaires est un élément de confort non négligeable. Le principe, c’est qu’en identifiant les champs de vos formulaires selon les standards, vous permettrez au navigateur de vos visiteurs de pré-remplir les champs du formulaire automatiquement.
Comment fonctionne l’autocomplétion des champs de formulaires ?
L’autocomplétion des formulaires repose sur l’attribut autocomplete, utilisé dans les champs de formulaires permettant d’identifier un individu.
Cet attribut permet d’indiquer le type de données attendues dans le champ, en utilisant des valeurs standardisées. Ces valeurs sont relativement nombreuses, et elles sont listées de manière exhaustive dans la spécification WCAG par le W3C 1.
Voici quelques exemples de valeurs couramment utilisées :
given-name: prénomfamily-name: nom de famillestreet-address: adresse postaletel: numéro de téléphone complet, y compris le code paysemail: adresse électroniqueorganization-title: fonction, intitulé de posteorganization: nom de l’organisation correspondant à la personneusername: nom d’utilisateur·icenew-password: nouveau mot de passe (par exemple, lors de la création d’un compte ou d’un changement de mot de passe)current-password: mot de passe actuel pour le compte identifié par le champusername(par exemple, lors d’une connexion)
L’implémentation HTML est assez simple. Si ‘lon prend l’exemple d’un champ « Prénom », on obtiendra le code HTML suivant :
<label for="prenom">Votre prénom</label>
<input type="text" name="prenom" autocomplete="given-name" />Avant de voir comment facilement implémenter l’autocomplétion en pratique avec l’extension WordPress Gravity Forms, prenons deux minutes pour parler règles et référentiels. Car oui, l’autocomplétion des formulaires est une obligation si l’on vise à se conformer aux standards… et tout simplement à la législation en vigueur.
L’autocomplétion des formulaires, un critère du RGAA et une règle Opquast
Au delà d’être une bonne pratique du web la mise en place de l’autocomplétion des champs de formulaires est un des critères du Référentiel Général d’Amélioration de l’Accessibilité (RGAA). Il s’agit du critère 11.13 :
La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?
Critère 11.13 du RGAA 2
La méthodologie de vérification indique clairement que l’attribut autocomplete doit être utilisé sur les champs concernés :
Chaque champ de formulaire dont l’objet se rapporte à une information concernant l’utilisateur vérifie-t-il ces conditions ?
Test 11.13.1 du critère 11.13 du RGAA 3
- Le champ de formulaire possède un attribut
autocomplete;- L’attribut
autocompleteest pourvu d’une valeur présente dans la liste des valeurs possibles pour l’attributautocompleteassociés à un champ de formulaire ;- La valeur indiquée pour l’attribut
autocompleteest pertinente au regard du type d’information attendu.
L’autocomplétion des formulaires est également une règle Opquast.
Il s’agit de la règle 97 :
Les champs permettant l’autocomplétion sont signalés dans le code source
Règle n°97 du référentiel Opquast 4
Implémenter facilement l’autocomplétion des champs de formulaires sur WordPress avec l’extension Gravity Forms
Gravity Forms est l’extension de gestion de formulaires pour WordPress la plus complète, et surtout la plus conforme aux critères d’accessibilité. Elle permet d’associer l’autocomplétion aux champs de vos formulaires très facilement.
Pour cela, dans l’écran d’édition de votre formulaire, sélectionnez simplement votre champ, puis dans le panneau de réglages du champ, dépliez le panneau « Avancé ».
Cochez ensuite l’option « Activer l’autocomplétion ». Un champ s’affichera alors pour vous permettre de saisir la valeur de l’attribut autocomplete.
Si vous avez un doute sur la bonne valeur à utiliser, un lien vers la documentation de Gravity Forms (en anglais) vous permet de retrouver la liste de toutes les valeurs disponibles.
Et voilà, ce n’est pas plus compliqué que ça !
Ci-dessous, une petite vidéo reprenant les étapes décrites précédemment :
- La liste complète des valeurs possibles de l’attribut
autocompleteest fournie dans la spécification WCAG 2.1 sur le site du W3C ↩︎ - Voir le critère 11.13 du RGAA ↩︎
- Voir le test 11.13.1 du RGAA ↩︎
- Voir la règle Opquast n°97 ↩︎
Laisser un commentaire