+50 tips pour booster les conversions sur vos formulaires en ligne
N’attendez plus et télécharger notre guide pour optimiser vos formulaires en ligne !
Vous avez déjà rempli des formulaires en ligne ? Pourquoi parfois sont-ils complexes à remplir ? Alors imaginez qu’un non-voyant ou qu’une personne atteinte de cécité doive utiliser ce type de formulaire complexe ? Il existe donc un véritable point de frustration à dissiper pour permettre aux utilisateurs d’accéder à un maximum de formulaires possibles. Et pour cela, il existe une solution : faire de vos formulaires, des formulaires accessibles. En quête de toujours faire en sorte d’améliorer vos sites Web en faveur de l’accessibilité numérique, retrouvez quelques conseils pour vous aider à améliorer vos pages de formulaire.
Les formulaires sont partout en ligne. Et c’est normal, ils ont un rôle essentiel pour les sites Web, peu importe les secteurs. Leur fonction peut être multiple : se connecter, régler un paiement, s’inscrire sur un site, envoyer des messages etc. Ils sont donc partout et absolument nécessaire aux utilisateurs dans leurs interactions avec les sites et les entreprises derrière ces sites.
C’est pour cela que les normes en matière d’accessibilité incluent des règles relatives aux formulaires. Ces normes permettent de s’assurer que les sites sont compréhensibles, facilement utilisables, adaptés à chaque utilisateur qu’ils soient ou non en situation de handicap. Par accessible, on entend : compréhensibles, facilement utilisables, adaptés à chaque utilisateur en fonction de leur cécité si il y en a.
+50 tips pour booster les conversions sur vos formulaires en ligne
N’attendez plus et télécharger notre guide pour optimiser vos formulaires en ligne !
Le JavaScript utilisé dans certains formulaires permet de créer des interactions des interactions qui ne fonctionnent qu’avec une souris. Certains utilisateurs avec un handicap moteur ne peuvent pas utiliser la souris (si, si) et utilisent par conséquent le clavier comme moyen de navigation. Assurez-vous que les formulaires de votre site Web peuvent être compris et utilisés uniquement avec le clavier.
Le label (communément appelé l’étiquette du champ) correspond au texte définissant le contenu à renseigner ou à choisir d’un champ de formulaire: zone de texte, une case à cocher, un bouton radio, un menu…
Il doit toujours être visible. Les utilisateurs ne pouvant pas voir le formulaire auront malgré tout besoin de connaître la finalité de chaque champ.
C’est là qu’intervient l’ajout de <label>, un élément de code qui permet une connexion dans le code qui ne repose pas que sur la vision.
Attention à ne pas confondre la légende d’un groupe de champs (par exemple des cases à cocher) avec le label de ces champs : le label est l’étiquette, le nom du champ; la légende est le nom du groupe de champs.
En effet, les groupes de champs dits “de même nature”, comme des groupes de cases à cocher ou de boutons radio, devront être regroupés dans le code par un <fieldset>.
Ce <fieldset> devra comprendre obligatoirement une légende définissant la nature commune des champs, dans des balises <legend>.
Tous les champs obligatoires doivent être indiqués comme tel visuellement et dans le code par un attribut required. Si l’élément visuel permettant d’indiquer les champs obligatoires est une astérisque par ex, alors il faudra indiquer au début du formulaire (et pas à la fin!) la signification de l’étoile. Ex: “Les champs obligatoires sont marqués d’une astérisque (*).”
Les instructions et messages d’erreur doivent êtres présents à proximité du champ correspondant, idéalement entre le label et le champ, sinon, en dessous, mais proche, du champ. Il doivent également être reliés aux champs par un attribut aria-describedby présent sur le champ et renvoyant à l’id unique du texte correspondant.
Il est possible d’avoir plusieurs ids (ex.: l’id des instructions et l’id du message d’erreur) en valeur de l’attribut aria-describedby, séparés par une espace.
S’il n’est pas possible de mettre les instructions et messages d’erreur à proximité du champ correspondant, alors tu peux les mettre regroupés en haut du champ. Il faudra alors préciser pour chaque instruction ou message d’erreur, à quel champ il se rapporte.
Il vous faudra également donner un exemple d’instruction, notamment le format du champ attendu. Par exemple, pour un champ de date, il faudra indiquer le format de date attendu.
Lorsque des erreurs sont affichées après avoir cliqué sur le bouton de soumission du formulaire, il faut que le focus soit déplacé sur le premier champ en erreur.
+50 tips pour booster les conversions sur vos formulaires en ligne
N’attendez plus et télécharger notre guide pour optimiser vos formulaires en ligne !
Vous êtes prêts à optimiser vos formulaires pour qu’ils soient le plus accessibles possible. Et surtout en matière d’UX design, où le design a un rôle important à jouer en matière d’accessibilité. Voici quelques conseils que l’on peut vous donner :
Le texte de l’étiquette peut se déplacer depuis le milieu du champ, avant la saisie du texte, tel un texte de remplacement, jusqu’au-dessus du champ pour rester visible à tout moment.
Restons humbles
“Nous travaillons encore à l’accessibilité de nos formulaires. Un gros travail a déjà été fait d’un point de vue visuel sur nos formulaires et nous travaillons désormais avec notre fournisseur Hubspot pour améliorer l’accessibilité fonctionnelle des formulaires” – Natacha Madeuf – Experte Accessibilité, Contentsquare
+50 tips pour booster les conversions sur vos formulaires en ligne
N’attendez plus et télécharger notre guide pour optimiser vos formulaires en ligne !
4 minutes - Temps de lecture