# Créneau de rendez-vous accessible pour un artisan itinérant

> Un snippet JS et PHP pour un calendrier de disponibilités qui annonce vocalement le créneau choisi, sans bibliothèque de calendrier lourde.

- Auteur : WordPress Développement
- Publié le : 2024-04-13
- Mis à jour le : 2024-04-13
- Catégorie : Accessibilité
- URL : https://www.wpmoderne.fr/accessibilite/creneau-rendez-vous-accessible-artisan-itinerant/

## L’essentiel

- Une grille de boutons plutôt qu'un calendrier visuel complexe
- Le créneau choisi est annoncé sans rechargement de page
- Aucune bibliothèque de calendrier externe requise

Comparé à un calendrier JavaScript classique avec ses grilles de mois, ses flèches de navigation et ses infobulles, un simple ensemble de boutons de créneaux horaires reste souvent plus simple à rendre accessible, et c'est le choix qu'a fait un ramoneur itinérant pour son site de prise de rendez-vous, plutôt que d'installer un plugin de réservation généraliste jugé trop lourd pour ses besoins.

Le principe retenu : afficher, pour une semaine donnée, une liste de créneaux disponibles sous forme de boutons, chacun représentant un jour et une plage horaire. Aucun composant de calendrier visuel avec grille de mois, aucune bibliothèque tierce, seulement une structure HTML simple et un peu de PHP pour générer les disponibilités depuis un tableau de données interne.

## La génération des créneaux côté PHP

Les disponibilités sont stockées comme des champs personnalisés attachés à un type de contenu `creneau`, enregistré avec `register_post_type()`, et listées via `WP_Query` pour la semaine en cours.

```
function afficher_creneaux_semaine() {
    $creneaux = new WP_Query(array(
        'post_type'      => 'creneau',
        'posts_per_page' => -1,
        'meta_key'       => 'disponible',
        'meta_value'     => '1',
        'orderby'        => 'meta_value',
        'meta_type'      => 'DATETIME',
        'order'          => 'ASC',
    ));
    foreach ( $creneaux->posts as $creneau ) {
        printf(
            '<button type="button" class="creneau" data-id="%1$d">%2$s</button>',
            esc_attr( $creneau->ID ),
            esc_html( get_the_title( $creneau ) )
        );
    }
}
```

Chaque créneau devient un bouton natif, focalisable et activable au clavier sans aucun ajout, contrairement à une `<div>` cliquable qui aurait exigé de gérer manuellement le focus et l'activation à la touche `Entrée`.

> L'essentiel à retenir : Une grille de boutons plutôt qu'un calendrier visuel complexe ; Le créneau choisi est annoncé sans rechargement de page ; Aucune bibliothèque de calendrier externe requise

## L'annonce vocale du créneau choisi

Une fois un créneau sélectionné, l'interface doit confirmer le choix sans recharger la page ni ouvrir de fenêtre modale, ce qui aurait alourdi l'interaction pour un simple clic de confirmation.

```
const region = document.getElementById('confirmation-creneau');
document.querySelectorAll('.creneau').forEach((bouton) => {
  bouton.addEventListener('click', () => {
    document.querySelectorAll('.creneau[aria-pressed="true"]')
      .forEach((b) => b.setAttribute('aria-pressed', 'false'));
    bouton.setAttribute('aria-pressed', 'true');
    region.textContent = `Créneau sélectionné : ${bouton.textContent}.`;
  });
});
```

L'attribut `aria-pressed` transforme chaque bouton en bouton bascule reconnu comme tel par les technologies d'assistance, tandis que la région `aria-live="polite"` associée à `confirmation-creneau` annonce le choix sans déplacer le focus, ce qui laisse l'utilisateur libre de changer d'avis immédiatement après.

## La validation du rendez-vous

Le bouton de validation finale reste désactivé tant qu'aucun créneau n'a été sélectionné, avec un état reflété à la fois visuellement et via l'attribut natif `disabled`, plutôt qu'une simple classe CSS grisée qui n'empêcherait pas l'activation au clavier.

- Le bouton de validation passe de `disabled` à activable dès qu'un créneau est sélectionné, sans délai artificiel.
- Un message d'erreur clair apparaît si l'utilisateur tente malgré tout de valider sans créneau choisi, via la même région live.
- La confirmation finale de prise de rendez-vous réutilise la région live existante plutôt que d'en créer une seconde.

### Pourquoi éviter un calendrier visuel complet ici

Un calendrier avec grille de mois impose une navigation à deux dimensions (jour et semaine) souvent mal gérée au clavier par les implémentations maison, et une charge cognitive supplémentaire pour choisir une case dans une grille plutôt qu'un créneau dans une liste. Pour un artisan qui ne propose que quelques créneaux par semaine, la liste de boutons reste largement suffisante et plus robuste.

> Le calendrier le plus accessible est souvent celui qu'on n'a pas construit : une liste de boutons fait le travail sans les pièges d'une grille bidimensionnelle.

## En résumé

Cent quatre-vingts lignes de code, réparties entre la génération PHP des créneaux et le script d'annonce vocale, ont suffi à construire un module de prise de rendez-vous entièrement accessible, sans bibliothèque de calendrier ni dépendance externe. Ce choix, guidé par la simplicité réelle du besoin plutôt que par l'envie de proposer une interface sophistiquée, reste une option à considérer chaque fois qu'un calendrier visuel complexe n'apporte rien de plus qu'une liste de créneaux disponibles.