Concevoir un formulaire web accessible

• Placer les labels et les champs à remplir sur une seule colonne, afin de fluidifier le mouvement des yeux. Même si cela implique une page plus longue

• Un contraste suffisant entre la couleur du fond et la couleur du texte : ratio de 4,5 minimum pour le texte de petite taille, 3 pour les grands titres. Ce critère est valable pour l'ensemble du texte d'un service numérique.

• Des tailles appropriées : un texte avec une taille de 14 à 16 pixels minimum, une zone de saisie de 40 à 44 pixels minimum, un espace de 12 pixels minium entre deux zones cliquables.

• Ajouter une aide à la saisie : des précisions, des détails sur ce qui est attendu dans le champ. Par exemple, pour le champ "numéro de commande", indiquer : "retrouvez votre numéro de commande sur votre facture. Ce numéro comporte 8 chiffres."

• Privilégier un label extérieur au champ plutôt qu’à l’intérieur, pour distinguer facilement les champs vides des champs remplis. De plus, un label intérieur au champ n’est plus visible dès lors que l'utilisateur commence à écrire dans le champ.

• Donner un feedback à l'utilisateur : rendre les actions visibles (changement d'aspect lorsque l’on clique sur un champ...), soigner les messages d'erreurs (texte explicite, disposition et visibilité...), ajouter de la réassurance ("le message a été envoyé"...).

• Dans l’idéal, un formulaire court, synthétique : ne garder que l'essentiel pour réduire la charge de travail de l'utilisateur.

• Dans le cas d’un formulaire long, le découper en plusieurs étapes ou pages, et indiquer l'état de progression, avec un fil d’Ariane par exemple.

• Dans la mesure du possible, une alternative au formulaire web est proposée. La possibilité de remplir un document papier ou d’avoir une personne au téléphone par exemple.

En comparant le formulaire de contact de la Sterne à deux têtes avec ces critères, nous avons relevé plusieurs aspects problématiques.

Nous avons modifié :
 • L’alignement des éléments sur une seule colonne ;
 • Le placement du label au-dessus du champ plutôt que dedans ;
 • L’ajout d'aides à la saisie ;
 • L’amélioration des feedback visuels de navigation ;

Un rappel que l’accessibilité ne s’invente pas : des recherches sérieuses sont nécessaires, même pour les fonctions qui nous paraissent simples.

Au début de notre activité, nous démarrions la première étape du projet en demandant à notre client de remplir un long questionnaire en ligne pour mieux connaître ses attentes, son secteur d’activité, etc.

Malheureusement, le questionnaire était rarement retourné en temps et en heure, et encore moins complet, retardant ainsi le projet.

En nous mettant à la place du client, nous avons pris conscience des difficultés : remplir un long formulaire est laborieux ; cela peut être source de stress, de peur d’indiquer une “mauvaise réponse” qui aura une influence sur le résultat final du projet.

Finalement, nous avons remplacé ce formulaire par un appel avec le client, pour lui poser les questions en direct. Cette technique a réglé le problème de délai et, surtout, elle nous a permis de créer une relation de confiance avec nos clients.
De plus, les réponses obtenues sont également plus profondes et complètes. Le temps investi dans l’appel est ainsi largement rentabilisé.

En plus d’un questionnaire, nous demandons à nos client de nous fournir des références de logos ou de sites web qu’il ou elle apprécie (ou non !), afin de mieux connaître ses goûts, dégoûts et attentes.

Là aussi, la méconnaissance du sujet, la peur de “mal faire”, ou encore le fait ne pas savoir par où commencer pouvait être bloquants — et nous recevions peu de références, pourtant très utiles pour orienter le projet.

Afin d’accompagner nos clients qu’une recherche rebute, nous avons créé un formulaire en ligne. Il permet d’apprendre quelques bases sur les types de logos ou les couleurs, de sélectionner des références parmi un choix de logos varié et de qualité, et de commenter ces choix.

Le RGPD impose plusieurs règles clés pour la collecte de données via les formulaires : le consentement doit être explicite et libre (pas de cases pré-cochées), la collecte doit se limiter aux données strictement nécessaires, et l'utilisateur doit être clairement informé de l'utilisation de ses données.

Le formulaire doit inclure un lien vers la politique de confidentialité et permettre à l'utilisateur de gérer ses droits (accès, modification, suppression). Les données doivent être sécurisées via le chiffrement et le protocole HTTPS.

Il est nécessaire de documenter tous les traitements de données et de conserver les preuves de consentement. Chaque utilisation des données doit faire l'objet d'une case à cocher distincte.

La transparence et le respect de ces règles renforcent la confiance des utilisateurs envers votre service.