# Configurer un voyage sur mesure accessible dès la première étape
> Les étapes pour construire un configurateur multi-critères de destination, de dates et de budget qui annonce un résumé clair à chaque étape franchie.
- Auteur : WordPress Développement
- Publié le : 2024-02-05
- Mis à jour le : 2024-02-05
- Catégorie : Accessibilité
- URL : https://www.wpmoderne.fr/accessibilite/configurateur-voyage-sur-mesure-accessible/
## L’essentiel
- Un résumé annoncé à chaque étape franchie
- La barre d'étapes reste navigable au clavier
- Revenir en arrière ne perd aucune saisie
Combien d'étapes reste-t-il avant d'obtenir un devis ? C'est la première question que se pose un visiteur face à un configurateur de voyage sur mesure, et c'est la question à laquelle une agence de voyages spécialisée dans les circuits en petit groupe voulait répondre sans ambiguïté, y compris pour les utilisateurs de lecteur d'écran.
Le configurateur se découpait en quatre étapes : destination, dates de départ, budget approximatif, puis récapitulatif avant envoi de la demande. Le brief initial du client insistait sur un point précis : à chaque étape franchie, l'utilisateur doit entendre ou lire un résumé de ce qu'il a déjà choisi, sans avoir à revenir en arrière pour vérifier.
## Étape 1 : construire une barre d'étapes navigable
La barre d'étapes affichée en haut du configurateur utilise une liste ordonnée, chaque étape étant un élément cliquable une fois atteinte, et un texte simple pour les étapes futures non encore accessibles.
```
```
L'attribut `aria-current="step"` se déplace avec l'étape active, ce qui permet à un lecteur d'écran d'annoncer « étape actuelle » sans avoir besoin d'un texte supplémentaire répété sur chaque lien.
## Étape 2 : annoncer le résumé à chaque transition
Le cœur du dispositif repose sur une région `aria-live="polite"` placée juste après le titre de chaque étape, mise à jour dynamiquement dès que l'utilisateur valide un choix.
```
Destination choisie : Kirghizstan. Dates : à définir.
```
Ce résumé se met à jour en JavaScript au moment précis où l'utilisateur passe à l'étape suivante, jamais avant : une région live mise à jour trop tôt, avant que l'utilisateur ait terminé sa saisie, produit des annonces vocales incohérentes qui interrompent la lecture d'écran en plein milieu d'une interaction.
> L'essentiel à retenir : Un résumé annoncé à chaque étape franchie ; La barre d'étapes reste navigable au clavier ; Revenir en arrière ne perd aucune saisie
## Étape 3 : gérer le focus entre les étapes
Chaque changement d'étape déplace le focus vers le titre de la nouvelle étape, jamais vers le corps du formulaire directement. Ce choix donne un point de repère clair : l'utilisateur au clavier entend le titre « Étape 3 : votre budget » avant d'atteindre le premier champ, ce qui évite de perdre le contexte en cours de parcours.
```
function allerEtape(etape) {
afficherEtape(etape);
document.getElementById(`titre-${etape}`).setAttribute('tabindex', '-1');
document.getElementById(`titre-${etape}`).focus();
}
```
## Étape 4 : le retour en arrière sans perte de saisie
Revenir à l'étape « destination » depuis le récapitulatif ne doit jamais réinitialiser les dates ou le budget déjà saisis. Techniquement, chaque étape stocke sa valeur dans un objet JavaScript central plutôt que dans le DOM seul, ce qui garantit que masquer et réafficher une étape ne perd aucune donnée, y compris si l'utilisateur navigue plusieurs fois entre les étapes avant de valider.
- Les champs de dates utilisent un composant natif ``, plus fiable au clavier qu'un calendrier JavaScript personnalisé.
- Le champ de budget propose des tranches prédéfinies en boutons radio plutôt qu'un curseur seul, un curseur restant difficile à ajuster précisément au clavier ou en commande vocale.
- Le récapitulatif final liste chaque choix sous forme de liste de définitions, avec un lien « modifier » par section qui ramène directement à l'étape concernée.
### Ce que le configurateur ne traite pas
Le module de paiement, déclenché après validation du devis par un conseiller, reste hors du périmètre de ce configurateur : il s'agit d'un formulaire de demande de devis, pas d'une réservation directe, ce qui simplifie la logique globale mais impose une vigilance équivalente le jour où le paiement en ligne sera ajouté.
> Un résumé annoncé à la bonne étape vaut mieux qu'une barre de progression visuelle seule : la barre montre où l'on est, le résumé confirme ce que l'on a déjà décidé.
## En résumé
Quatre étapes, chacune associée à une région live qui résume les choix déjà faits, un déplacement de focus systématique vers le titre de l'étape suivante et une conservation des données en mémoire plutôt que dans le seul affichage visuel : ce sont les quatre décisions qui ont rendu ce configurateur de voyage utilisable au clavier et au lecteur d'écran, sans jamais recourir à une bibliothèque de formulaire multi-étapes toute faite.