« La documentation officielle du composant recommande un rôle grid pour un calendrier de sélection de date » : c’est cette phrase, tirée des pratiques ARIA APG, qui a servi de point de départ à la refonte du composant de prise de rendez-vous d’un cabinet d’avocats, initialement construit avec des cases cliquables sans aucune sémantique de groupe.
Ce billet décrit le cas concret de cette refonte : un calendrier de créneaux de consultation, avec navigation clavier complète et annonce du créneau retenu, sans recourir à la visioconférence intégrée qui reste hors du périmètre de ce composant.
Le composant de départ et ses limites
La version initiale du calendrier affichait une grille de <div> cliquables, une par jour, avec un gestionnaire onclick en JavaScript et un changement de couleur de fond pour indiquer la sélection. Aucune de ces cases ne recevait le focus au clavier, puisqu’aucune n’était un élément interactif natif ni ne portait de tabindex. Le composant fonctionnait uniquement à la souris ou au doigt sur écran tactile.
La restructuration en grille navigable
La refonte a remplacé chaque case par un bouton natif, regroupé dans un conteneur portant role="grid" pour donner une structure de tableau de sélection à la technologie d’assistance :
<div role="grid" aria-label="Créneaux disponibles pour la semaine du 24 mai">
<div role="row">
<button role="gridcell" aria-selected="false">Lun. 24, 9h</button>
<button role="gridcell" aria-selected="false">Lun. 24, 11h</button>
</div>
<div role="row">
<button role="gridcell" aria-selected="false">Mar. 25, 14h</button>
<button role="gridcell" aria-selected="true">Mar. 25, 16h</button>
</div>
</div>Un script gère les flèches directionnelles pour déplacer le focus d’une cellule à l’autre dans la grille, en respectant le modèle d’un seul élément atteignable au Tab à la fois (la cellule active), les autres cellules restant accessibles par les flèches uniquement. C’est le modèle décrit par les pratiques ARIA APG pour les grilles de sélection.
Annoncer le créneau sélectionné
Choisir une case dans la grille ne suffit pas : la personne doit recevoir une confirmation explicite de son choix, sans avoir à deviner d’après le seul changement visuel de aria-selected. Une région dédiée, mise à jour à chaque sélection, remplit ce rôle :
<p aria-live="polite" id="creneau-confirme">
Créneau sélectionné : mardi 25 mai à 16h
</p>Cette région, présente en permanence dans le DOM mais vide au départ, se met à jour par script à chaque nouvelle sélection. Le lecteur d’écran annonce automatiquement son contenu dès qu’il change, sans que la personne ait besoin de naviguer explicitement jusqu’à elle.
La confirmation finale du rendez-vous
Après validation, l’écran de confirmation reprend chaque information saisie plutôt que d’afficher un simple message générique de succès :
- Le créneau retenu, repris mot pour mot depuis la région d’annonce précédente.
- Le motif de consultation, tel que saisi dans le champ de texte libre du formulaire.
- Un numéro de confirmation, présenté en texte sélectionnable et non uniquement dans une image ou un pictogramme.
Le focus est déplacé sur le titre de cet écran de confirmation dès son affichage, pour que la personne comprenne immédiatement que la démarche est terminée.
Sur ce projet, le rôle grid a résolu la navigation, mais c’est l’annonce du créneau par une région dédiée qui a le plus changé l’expérience réelle : sans elle, la personne validait un choix qu’elle ne pouvait pas vérifier avant l’envoi final.
Ce que le cabinet a demandé en complément
Le cabinet a également souhaité que le motif de consultation reste distinct du choix de créneau, sur un écran séparé, pour ne pas surcharger la grille de sélection d’un champ de texte libre. Ce choix, purement ergonomique, a eu un effet positif inattendu sur l’accessibilité : en isolant le calendrier sur son propre écran, le focus déplacé lors du passage à l’écran suivant a pu se poser directement sur le titre du formulaire de motif, sans avoir à traverser à nouveau toute la grille de créneaux déjà validée.
En résumé
Remplacer des cases cliquables sans sémantique par une grille de boutons natifs, navigable aux flèches selon le modèle documenté par les pratiques ARIA APG, redonne au calendrier de créneaux une utilisation clavier complète. L’annonce explicite du créneau choisi, dans une région dédiée, referme la boucle en confirmant le choix avant l’envoi du formulaire.
