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

Mise à jour du titre de la page HTML

Le titre de la page (balises <title>...</title> dans la partie head de la page HTML) sera mis à jour pour indiquer la page en cours.

Implémentation du processus par étape sous forme de liste ordonnée

Élement HTML nav
- Le processus par étape sera balisé avec les balises <nav>...</nav> ; l’attribut role="navigation est optionnel.
- L’attribut aria-label est ajouté à l’élément nav avec une valeur unique. Exemple : <nav role="navigation" aria-label="Étapes de la démarche">.
Liste ordonnée et liens
- Les différentes étapes du processus seront balisées par un liste ordonnée (l’ordre ayant de l’importance) <ol><li>...</li></ol>
- L’étape en cours sera identifiée avec l’attribut aria-current="step"
- Des liens (élément HTML a) vers les étapes précédant celle en cours seront proposés.

Exemple HTML

<html>
     <head>
          <title> Étape 2/3 - Formulaire d'inscription - Sofève-Concept</title>
          [...]
<body>
[...]
<nav role="navigation" aria-label="Étapes de votre démarche">
	<ol>
		<li><a href="path/to/pageIdentite">Identité</a></li>
		<li aria-current="step">Adresse</li>
		<li>Confirmation</li>
	</ol>
</nav>
[...]
</body>
</html>

astuce

Un exemple de processus par étape est disponible dans la rubrique Motifs de conception - Formulaires - Processus par étape.