6. LES FORMULAIRES
Table des matières |
|---|
6.1 Intitulés et champs
6.1.1 Prévoir des intitulés clairs
Un intitulé explicite doit être prévu pour chaque champ de formulaire. Cet intitulé doit être positionné à proximité du champ auquel il est associé. Seuls quelques pixels doivent séparer un intitulé de son champ correspondant.
REMARQUES
S’assurer de l’uniformité des formulaires, autant dans le choix des intitulés que dans l’ordre de présentation des champs ou les champs utilisés, d’une plateforme à l’autre.
ASTUCES
Utiliser le champ est une bonne astuce pour indiquer le type d'information requise.
CAPTURES D'ÉCRAN
Un exemple de formulaire avec des intitulés clairs.
RESSOURCES
- Voir aussi : Intégrer les informations utiles à la saisie directement dans les balises <label> (HTML et CSS)
6.1.2 Regrouper et titrer les champs de même nature
Lorsque des champs de même nature sont présents dans les formulaires longs (par exemple, une liste de participants, avec une répétition de champs semblables, ex. Nom, prénom, adresse), ceux-ci doivent :
- Être visuellement regroupés entre eux.
- Titrés de façon claire et concise.
- Être présentés dans le même ordre.
CAPTURES D'ÉCRAN
Un exemple de formulaire avec des champs de même nature présentés à répétition.
6.1.3 Indiquer clairement les champs obligatoires
Sur chaque formulaire, les champs obligatoires doivent être clairement indiqués :
- Un signe distinctif (mention, symbole, pictogramme, etc.) doit être prévu dans l’intitulé de chaque champ obligatoire, au-dessus de chaque champ. Une mention expliquant le signe distinctif doit accompagner le formulaire
- Si tous les champs sont obligatoires, une mention doit apparaître au début du formulaire, positionnée en haut du premier champ, avec le symbole ou le pictogramme qui signale un champ obligatoire. Ce symbole apparaîtra au-dessus de chaque champ.
6.2 Boutons
6.2.1 Prévoir un bouton de soumission à la fin de chaque formulaire
Un bouton de soumission doit être prévu à la fin de chaque formulaire, positionné de manière accessible et intuitive.
REMARQUES
Dans certaines situations, il n’est pas nécessaire de prévoir un bouton. C’est le cas pour une liste déroulante (baladodiffusion, module de commentaires) qui permet de trier dynamiquement une liste de résultats, car l’action est déclenchée dynamiquement.
CAPTURES D'ÉCRAN
Un exemple de bouton de soumission positionné à la fin du module de commentaires. La liste déroulante, qui permet de trier les commentaires, ne requiert pas de bouton de soumission.
6.2.2 Utiliser des intitulés clairs pour chaque bouton
Un intitulé explicite doit être prévu pour chaque bouton de formulaire. C’est-à-dire que la fonction du bouton doit être parfaitement compréhensible à la lecture du seul intitulé, même si ce dernier est lu en dehors de son contexte.
Par exemple, les intitulés suivants sont à éviter :
OK
Valider
Confirmer
Et devraient être remplacés par un verbe d’action et son complément :
- S’inscrire
- Passer à l’étape 2
- Confirmer le paiement
6.2.3 Prévoir des zones réactives suffisamment grandes et espacées
IOS
La norme actuelle qui prévaut sur les applications de Radio-Canada est de 48 points x 48 points.
ANDROID
La norme actuelle qui prévaut sur les applications de Radio-Canada est de 48 dp x 48 dp.
6.3 Messages d'information
6.3.1 Identifier les formats de saisie spécifiques
Chaque fois qu’un format de saisie spécifique est attendu dans un champ de formulaire (par exemple, le poids maximum d’une image, le format accepté, le maximum de caractères, les tirets entre les chiffres d’un numéro de téléphone, l’omission des espaces entre les blocs de chiffres d’une carte de crédit, etc.), celui-ci doit être indiqué a priori à l’utilisateur.
ASTUCES
Des suggestions de saisie facilitent la complétion d’un formulaire ou d'une requête.
CAPTURES D'ÉCRAN
Exemples de formats de saisie (poids de l’image, longueur de texte).
Exemple de suggestion de saisie dans un moteur de recherche.
6.3.2 Prévoir des messages d'erreur explicites et des suggestions de correction
Chaque fois qu’un formulaire est susceptible de contenir des erreurs, les éléments suivants doivent être prévus :
- Des messages d’erreur explicites.
- Des suggestions de correction.
Ces éléments doivent être positionnés au-dessus de chaque champ concerné.
Les messages d’erreur doivent être clairs : à la lecture du seul message, la cause de l’erreur doit être compréhensible et le champ concerné identifiable.
Des suggestions de correction doivent être prévues dès qu’une erreur est due à un format de saisie incorrect.
ASTUCES
L'utilisation d'une couleur différente, rouge par exemple, appliqué au message, et un filet large entourant la boîte du champ, aide à identifier l'erreur pour qui perçoit la couleur.
CAPTURES D'ÉCRAN
Un exemple de champ qui comporte une erreur (maquette en développement).
6.3.3 Prévoir un message de confirmation
Chaque fois qu’un formulaire est validé avec succès, un message de confirmation doit être prévu. Ce message doit rappeler la nature de l’action effectuée.
REMARQUES
Dans certaines situations, le message de confirmation n’est pas nécessaire, car la page affichée après la soumission rend le résultat de l’action évident. Par exemple :
- Formulaire de connexion qui envoie vers une page de profil utilisateur.
- Bouton « Passer à l’étape suivante » utilisé dans un formulaire à étapes multiples, dont l'intitulé est en soi explicite.
CAPTURES D'ÉCRAN
Un exemple de message confirmant l’action effectuée.
6.4 Formulaires à étapes multiples
6.4.1 Indiquer clairement le nombre d'étapes
Pour chaque formulaire à étapes multiples, le nombre total d’étapes ainsi que l’étape en cours de consultation doivent être clairement indiqués, entre autres avec une couleur spécifique qui différencie l’onglet actif.
Un moyen de revenir aux étapes précédentes doit aussi être prévu. L’intitulé doit être explicite.
CAPTURES D'ÉCRAN
Un exemple où le nombre d’étapes est bien indiqué. L’étape en cours est distincte, et le retour à une étape précédente est possible (changement de couleur au survol).
6.4.2 Prévoir un récapitulatif des données
Pour chaque formulaire à étapes multiples, un récapitulatif de l’ensemble des données entrées doit être proposé à l’utilisateur avant la soumission finale du formulaire.
À partir de ce récapitulatif, il doit être possible de modifier directement une donnée ou l’ensemble des données, ou de revenir aux étapes précédentes, afin d’en certifier l’exactitude.
CAPTURES D'ÉCRAN
Un exemple où un récapitulatif des données se met à jour étape par étape dans le formulaire à étapes multiples.
6.5 CAPTCHA (système anti-spam)
6.5.1 Privilégier des tests de sécurité sous forme de tests logiques plutôt que sous forme de CAPTCHA
Les systèmes antispam (CAPTCHA) sont des systèmes conçus pour empêcher les « spammeurs » d’accéder à un site.
Pour valider un CAPTCHA, il faut renseigner le champ correspondant avec le code préalablement déchiffré visuellement ou écouté. Mais les CAPTCHA sont problématiques pour l’accessibilité car ils peuvent êtres très compliqués pour de nombreux utilisateurs. Notamment les personnes aveugles, malvoyantes ou encore dyslexiques.
Par conséquent, privilégier des tests de sécurité moins bloquants pour les utilisateurs comme les tests logiques, par exemple une question mathématique.
Question mathématique
Cette solution consiste à intégrer une question mathématique élémentaire dans le formulaire dans un champ de type texte. La réponse doit s’afficher en chiffres. Voici quelques exemples :
- Combien font 8 moins 2 ? (en chiffres)
- Quel est le nombre entre 45 et 47 ? (en chiffres)
ASTUCES
- Il est recommandé d’introduire ce test logique par une mention du type : « La question ci-après nous permet de vérifier que ce formulaire n’est pas rempli par un robot. ».
- Une bonne pratique d’accessibilité particulièrement intéressante pour les personnes déficientes cognitives consiste à prévoir une solution de rafraîchissement de la question simple ou mathématique.
ATTENTION
S’il n’est pas envisageable d’utiliser un test logique et qu'on préconise la solution du CAPTCHA, prévoir une alternative pour chaque CAPTCHA uniquement visuel ou sonore, de la même langue que la page (par exemple, en français sur radio-canada.ca).
CAPTURES D'ÉCRAN
Exemple de question mathématique
RESSOURCES
Voir aussi :