Comment transformer un formulaire de réservation de table, avec sa date, son créneau horaire et son nombre de couverts, en un parcours réellement utilisable au clavier et au lecteur d’écran ? Ce tutoriel détaille cinq étapes concrètes, dans l’ordre de construction du formulaire, pour un thème de restaurant WordPress classique.
Étape 1 : structurer le formulaire en groupes de champs
Le formulaire de réservation rassemble plusieurs informations liées : la date, le créneau, le nombre de couverts, puis les coordonnées du client. Plutôt que d’aligner tous les champs dans un seul bloc, je les regroupe avec <fieldset> et <legend> pour donner un contexte clair à chaque section :
<fieldset>
<legend>Date et créneau souhaités</legend>
<label for="date-resa">Date</label>
<input type="date" id="date-resa" name="date_resa" required>
<label for="creneau-resa">Créneau horaire</label>
<select id="creneau-resa" name="creneau_resa" required>
<option value="12h00">12h00</option>
<option value="12h30">12h30</option>
<option value="19h30">19h30</option>
</select>
</fieldset>Étape 2 : choisir un champ natif pour le nombre de couverts
Le nombre de couverts se prête souvent à des widgets personnalisés avec des boutons plus et moins en JavaScript. Un <input type="number"> natif, avec des bornes explicites, reste plus robuste et fonctionne immédiatement avec les flèches du clavier :
<label for="couverts">Nombre de couverts</label>
<input type="number" id="couverts" name="couverts" min="1" max="12" value="2" required>Si un habillage visuel avec des boutons plus et moins reste souhaité pour des raisons de charte graphique, ces boutons doivent agir sur ce même champ natif plutôt que le remplacer, afin de conserver la saisie directe au clavier pour qui préfère taper le nombre.
Étape 3 : garder le focus sur le titre de chaque étape
Quand le formulaire de réservation se présente en plusieurs étapes successives (coordonnées, puis créneau, puis confirmation), le passage d’une étape à l’autre doit déplacer le focus vers le titre de la nouvelle étape, pas le laisser sur le bouton « Suivant » qui vient de disparaître visuellement :
function afficherEtapeSuivante(etape) {
etape.hidden = false;
const titre = etape.querySelector('h2');
titre.setAttribute('tabindex', '-1');
titre.focus();
}Cette gestion du focus permet à une personne utilisant un lecteur d’écran de savoir immédiatement qu’elle a changé de section, sans avoir à explorer la page pour comprendre où elle se trouve désormais.
Étape 4 : annoncer les erreurs avant l’envoi
Si le créneau demandé est complet (information connue côté serveur uniquement au moment de la soumission), le message d’erreur doit apparaître dans une région annoncée automatiquement, associée visuellement et programmatiquement au champ concerné :
<label for="creneau-resa">Créneau horaire</label>
<select id="creneau-resa" name="creneau_resa" aria-describedby="erreur-creneau">
...
</select>
<p id="erreur-creneau" role="alert">Ce créneau est complet, merci d'en choisir un autre.</p>Le rôle alert déclenche une annonce immédiate par le lecteur d’écran dès que le message apparaît dans le DOM, sans attendre que la personne navigue jusqu’à lui.
Étape 5 : confirmer la réservation sans piéger le focus
Une fois la réservation confirmée, le message de succès doit lui aussi recevoir le focus, et surtout ne jamais enfermer la navigation dans une fenêtre modale sans issue au clavier. Un simple message affiché à la place du formulaire, avec le focus déplacé dessus, suffit dans la majorité des cas :
- Le message de confirmation reprend la date, le créneau et le nombre de couverts pour validation finale.
- Un lien vers la page d’accueil ou le menu du restaurant reste disponible immédiatement après.
- Aucun minuteur de redirection automatique n’emporte la personne ailleurs avant qu’elle n’ait fini de lire la confirmation.
Sur les formulaires de réservation que j’ai livrés, l’étape la plus souvent bâclée reste la gestion du focus entre les étapes : le formulaire fonctionne visuellement, mais une personne au lecteur d’écran perd le fil sans ce déplacement explicite du focus.
En résumé
Structurer les champs en groupes explicites, préférer les contrôles natifs aux widgets réinventés, déplacer le focus à chaque changement d’étape, annoncer les erreurs par une région dédiée et confirmer sans piège au clavier : ces cinq étapes couvrent l’essentiel d’un formulaire de réservation de table réellement accessible.
