Formulaires à étapes multiples

Conception de formulaires à plusieurs étapes

Il est préférable de diviser un formulaire long en une série de formulaires plus petits avec validation à chaque étape. Les formulaires à étapes multiples peuvent être moins intimidants et plus faciles à comprendre et à corriger qu’un formulaire long. Les formulaires à étapes multiples peuvent être conçus d’une page à l’autre ou sur une même page.

Suivez les pratiques exemplaires suivantes pour les formulaires à étapes multiples :

• Diviser le formulaire en fonction de ses groupes de commandes logiques (p. ex., coordonnées et questionnaire).
• Valider l’étape en cours avant d’exposer la suivante.
• Étiqueter les étapes facultatives et permettre aux utilisateurs de les sauter.
• S’assurer que la cible du clavier se déplace facilement d’une étape à l’autre, vers l’arrière et vers l’avant. À une nouvelle étape, cibler de préférence le prochain élément de formulaire pertinent, ou l’en-tête ou le conteneur pertinent (un en-tête ou un conteneur aurait besoin de l’attribut tabindex="-1" pour recevoir la cible par un programme).
• Éviter une limite de temps pour remplir le formulaire. Si une limite est requise, permettre à l’utilisateur de la modifier ou de la prolonger une limite.
• Si les étapes se trouvent sur plusieurs pages, répéter les instructions générales sur chaque page.
• Indiquer la progression dans le formulaire (« Étape x de y »).

Indiquer la progression dans un formulaire à étapes multiples

Chaque étape doit indiquer la progression de l’utilisateur. Les approches 1 et 2 s’appliquent uniquement aux formulaires multipages.

Approche 1 : Utilisation du titre de la page

Ajoutez une note indiquant la progression (p. ex., « Étape 2 de 4 : ») au début de l’élément <title>, avant le nom de l’étape ou tout avis d’erreur. L’élément <title> est la première chose déclarée aux utilisateurs du lecteur d’écran lors du chargement de la page et il fournit une rétroaction immédiate.

HTML

Début du code

<title>Étape 2 de 4 : Coordonnées – Sondage X – Entreprise Z</title>

Début du code

Approche 2 : Utilisation de l’en-tête principal

Ajoutez une note indiquant la progression (p. ex., « (Étape 2 de 4) » à la fin de l’en-tête principal de la page, ce qui rend l’information bien en vue et facilement repérable par balayage visuel.

HTML

Début du code

<h1>Coordonnées (Étape 2 de 4)</h1>

Fin du code

Approche 3 : Utilisation de l’élément de progression HTML5

Vous pouvez utiliser un élément de <progress> HTML5 pour informer les utilisateurs de leur progression, comme premier élément à chaque étape.

HTML

Début du code

Sondage <progress max="7" value="1">(Étape 1 de 7)</progress>

Fin du code

Certains systèmes d’exploitation animent l’élément <progress>, ce qui contrevient au critère de succès 2.2.2 des WCAG : Pause, Stop, Masquer. Vous pouvez arrêter l’animation en utilisant un style personnalisé avec les CSS spécifiques au navigateur, comme illustré ci-dessous.

CSS

Début du code

/* Microsoft IE */ 
progress {  
   color: #036;
}
/* Apple Safari et Google Chrome */ 
progress::-webkit-progress-bar {
   background-color: #036;
}
/* Mozilla Firefox */ 
progress::-moz-progress-bar {
   background-color: #036;
}

Fin du code

Approche 4 : Utilisation d’un indicateur étape par étape

Un indicateur étape par étape peut aider les utilisateurs à s’orienter dans un processus par étapes. Cet exemple utilise une liste ordonnée dont chaque étape est un élément de la liste. Le texte visuellement masqué, hors écran, mais encore rencontré par un technicien d’assistance, indique l’état actuel et l’état terminé des étapes (la classe WET .wb-inv masque visuellement le texte). Les étapes précédentes sont liées afin que les utilisateurs puissent les réviser. Toutes les données déjà entrées à l’étape en cours devraient être sauvegardées.

HTML

Début du code

<div class="tlwrapper">
   <ol class="timeline">
      <li class="timeline-past">
         <span class="wb-inv">Terminé :</span>
         <a href="billing.html">Adresse de facturation</a>
      </li>
      <li class="timeline-current">
         <span class="wb-inv">État actuel :</span>
         <span>Adresse de livraison</span>
      </li>
      <li><span>Vérification de la commande</span></li>
      <li><span>Paiement</span></li>
      <li><span>Terminer l’achat</span></li>
   </ol>
</div>

Fin du code

.wb-inv {
   clip: rect(1px,1px,1px,1px);
   height: 1px;
   margin: 0;
   overflow: hidden;
   position: absolute;
   width: 1px;
}
.box-content {
   font-size: .7em;
   overflow: auto;
   padding: .5em;
}
.tlwrapper {
   display: table;
   width: 100%;
}
.timeline {
   display: table-row;
   counter-reset: timeline;
}
.timeline li.timeline-past {
   background-color: #ccc;
}
.timeline li:first-child {
   padding-left: 0;
}
.timeline li {
   display: table-cell;
   width: 20%;
   counter-increment: timeline;
   list-style: none;
   text-align: center;
   padding: .25em .5em;
   overflow: hidden;
   position: relative;
   background-color: #fff;
   padding-left: 25px;
   white-space: nowrap;
}
.timeline li.timeline-current > span, 
.timeline li.timeline-current a {
   color: #036;
   font-weight: bold;
}
.timeline li a, .timeline li > span {
   z-index: 100;
   position: relative;
   display: block;
   color: #555;
}
.timeline li.timeline-current > span:before {
   color: #fff;
   background-color: #036;
   border-color: #036;
}
.timeline li a:before, 
.timeline li > span:before {
   display: inline-block;
   color: #555;
   content: counter(timeline);
   background-color: transparent;
   border: 3px solid #555;
   margin-right: .25em;
   border-radius: 5px;
   padding: 0 .25em;
}
.timeline li:after {
   left: 0;
   top: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-color: rgba(151, 204, 237, 0);
   border-left-color: #ccc;
   border-width: 20px;
   margin-top: -20px;
}

Autre approche : En utilisant aria-current="step"

Cette approche remplace le texte visuellement caché « Current » par un attribut aria-current="step" appliqué à l’élément parent <li>. Les lecteurs d’écran identifient l’étape courante (current step) en plus du texte de liste. Le soutien des agents utilisateurs pour aria-current (en anglais seulement) lorsqu’il est appliqué à un élément non ciblable comme <li> (par opposition aux contrôles) est une question non résolue. En revanche, le texte visuellement caché est universellement soutenu.

HTML

Début du code

[…]
   <li class="timeline-current" aria-current="step">
      <span>Shipping Address</span>
   </li>
[…]

Fin du code

Ressources WCAG connexes