Formulaire à étapes multiples

Les formulaires longs seront découpés en plusieurs formulaires plus petits, chacun repésentant une étape du formulaire complet. Cela permet de rendre les formulaires longs plus faciles à comprendre et d'alléger la charge cognitive liée à son remplissage, en particulier pour les personnes qui ont moins d'expérience en informatique ou qui ont divers troubles cognitifs.

Pour découper un formulaire en étapes multiples, chaque étape devra proposer les éléments présentés ci-après.

Titre de la page

Le titre de la page doit indiquer l’étape à laquelle se trouve l’utilisateur et reprendre le titre du formulaire.

Exemple

<head>
     <title>Étape 2 sur 3 - Paiement - Votre commande</title>
</head>

Titre du formulaire

L’utilisation d’un titre (h1, h2,…) dans la page de contenu est un bon moyen d’informer l’utilisateur.

<h2>Paiement (Étape 2 sur 3)</h2>

Mise en place d’un indicateur de progression

Un indicateur d’étapes aide les utilisateurs à s’orienter. Il peut prendre 2 formes :

une jauge de progression ;
une liste des différentes étapes à compléter.

Jauge de progression

L’élément de progression progress peut être utilisé pour informer les utilisateurs de leur progression dans le remplissage du formulaire. Cette façon de faire peut être particulièrement utile dans les situations où le nombre d’étapes dépend de l’entrée de l’utilisateur, comme dans une enquête où les étapes sont ignorées en fonction de la façon dont les questions ont été répondues.

Répondre à l'enquête <progress max="7" value="2">(Étape 2 sur 7)</progress>

L’élément progress est animé par défaut dans certains navigateurs ce qui est contraire à règle d’accessibilité qui demande à ce que l’utilisateur ait la maîtrise des animations. Pour éviter cette animation automatique, il faudra rajouter le code CSS suivant :

:root {
     --PROGRESS-color: #123456;
}
/* Microsoft IE */
progress {
  color: var(--PROGRESS-color);
}
/* Apple Safari and Google Chrome */
progress::-webkit-progress-bar {
	background-color: var(--PROGRESS-color);;
}
/* Mozilla Firefox */
progress::-moz-progress-bar {
	background-color: var(--PROGRESS-color);;
}

Liste d’étapes

Une liste d’étapes s’implémente de la manière suivante :

la liste d’étapes est incluse entre les balises <nav> et </nav>
la liste d’étapes est implémentée sous forme de liste ordonnée avec un élément de liste pour chaque étape ;
l’étape courante est identifée avec l’attribut aria-current="step"
si possible, un lien est posé vers les étapes déjà effectuées et dans ces cas, les données déjà saisies dans l’étape en cours doivent être enregistrées.

<nav aria-label="Étapes de votre commande">
	<ol>
		<li><a href="/info">Informations personnelles</a></li>
		<li aria-current="step">Paiement</li>
		<li>Livraison</li>
	</ol>
 </nav>