Prise de rendez-vous en ligne d’une clinique vétérinaire, testée au clavier

Combien de clics une personne valide doit-elle poser pour réserver une consultation de rappel de vaccin le samedi matin ? Deux, en général : le jour, puis l’heure. Au clavier, la même opération sur le module de prise de rendez-vous d’une clinique vétérinaire à trois praticiens en demandait plus d’une douzaine, parce que la grille de créneaux ne proposait aucune façon de se déplacer autrement qu’en tabulant bouton par bouton, ligne après ligne, pour chaque vétérinaire disponible ce jour-là.

Ce cas est un peu plus complexe qu’un simple calendrier de créneaux : la clinique proposait trois praticiens en parallèle, chacun avec ses propres disponibilités, ce qui ajoute une dimension supplémentaire à la grille par rapport à un module de rendez-vous à praticien unique. C’est justement cette dimension en plus qui a rendu visible un défaut que la navigation au clavier révèle plus vite qu’un simple test visuel.

Diagnostic : une grille à deux dimensions traitée comme une liste plate

Le motif de conception ARIA adapté à ce cas reste le rôle grid, mais avec une particularité : chaque colonne correspond ici à un praticien, chaque ligne à un horaire de la journée. Avant correction, chaque bouton de créneau était focusable individuellement au Tab, sans distinction entre déplacement horizontal (changer de praticien à la même heure) et déplacement vertical (changer d’heure pour le même praticien). Une personne au clavier ne pouvait donc jamais deviner, avant de l’atteindre, si la case suivante correspondait au même vétérinaire une heure plus tard ou à un autre praticien.

• role="grid" sur le conteneur de la grille de créneaux ;
• role="row" sur chaque ligne d’horaire ;
• role="gridcell" sur chaque case, avec l’identité du praticien portée par aria-label plutôt que par la seule position visuelle dans la colonne.

Correctif : un déplacement à quatre directions, pas seulement gauche-droite

La différence avec un calendrier à praticien unique tient dans la gestion des flèches haut et bas, qui doivent déplacer le focus d’un horaire à l’autre pour le même praticien, tandis que les flèches gauche et droite changent de praticien à horaire constant :

document.querySelectorAll('[role="gridcell"]').forEach((case_creneau) => {
  case_creneau.addEventListener('keydown', (evenement) => {
    const ligne = case_creneau.closest('[role="row"]');
    const cases_ligne = Array.from(ligne.querySelectorAll('[role="gridcell"]'));
    const index_colonne = cases_ligne.indexOf(case_creneau);
    const lignes = Array.from(document.querySelectorAll('[role="row"]'));
    const index_ligne = lignes.indexOf(ligne);
    let cible = null;
    if (evenement.key === 'ArrowRight') cible = cases_ligne[index_colonne + 1];
    if (evenement.key === 'ArrowLeft') cible = cases_ligne[index_colonne - 1];
    if (evenement.key === 'ArrowDown') {
      const ligne_suivante = lignes[index_ligne + 1];
      cible = ligne_suivante ? ligne_suivante.querySelectorAll('[role="gridcell"]')[index_colonne] : null;
    }
    if (evenement.key === 'ArrowUp') {
      const ligne_precedente = lignes[index_ligne - 1];
      cible = ligne_precedente ? ligne_precedente.querySelectorAll('[role="gridcell"]')[index_colonne] : null;
    }
    if (cible) {
      case_creneau.setAttribute('tabindex', '-1');
      cible.setAttribute('tabindex', '0');
      cible.focus();
    }
  });
});

Ce script gère les quatre directions plutôt que les deux seules flèches gauche-droite d’un calendrier à praticien unique. Sans cette distinction, une personne au clavier finissait par changer de vétérinaire sans s’en rendre compte, simplement parce que la flèche droite l’y emmenait au lieu de rester sur le même praticien à l’heure suivante.

Annoncer le créneau sans faire perdre le repère du praticien

La sélection d’une case déclenche la mise à jour d’une région aria-live="polite" qui rappelle systématiquement le nom du praticien concerné, information que le seul positionnement visuel dans la grille ne suffit pas à transmettre à une technologie d’assistance :

<p aria-live="polite" class="confirmation-creneau">
  Créneau du vendredi 3 juin à 9 h 30 avec le docteur Lemoine sélectionné.
</p>

Répéter systématiquement le nom du praticien dans l’annonce, plutôt que de se contenter de l’heure, s’est révélé indispensable dès les premiers tests : sans cela, une personne pouvait valider un créneau avec un praticien différent de celui recherché, sans moyen simple de le vérifier avant l’envoi.

Le point de vigilance propre à une grille à plusieurs colonnes

Un dernier écueil, spécifique à ce module à trois praticiens : la première case focusable au Tab devait correspondre à la première case réellement disponible, et non systématiquement à la première ligne de la grille. Sur la version initiale, le focus se posait parfois sur un créneau déjà complet, obligeant l’utilisateur à comprendre par lui-même qu’il fallait avancer de plusieurs cases avant de trouver une disponibilité réelle.

Sur une grille à plusieurs colonnes, tester uniquement le déplacement gauche-droite ne suffit jamais : c’est la combinaison des quatre flèches, praticien par praticien, qui révèle si la structure de données a été correctement reflétée dans la structure ARIA.

En résumé

Ce module de prise de rendez-vous vétérinaire n’avait pas besoin d’un rôle ARIA différent de celui d’un calendrier classique, mais d’une gestion du focus à quatre directions cohérente avec sa grille à deux dimensions, praticien et horaire. L’annonce vocale du praticien sélectionné, en plus du seul horaire, a fini par se révéler tout aussi déterminante que la correction de la navigation elle-même.