# Construire une notation par étoiles accessible sans script tiers

> Les étoiles cliquables en CSS pur trompent la souris mais restent invisibles au clavier. Voici un remplacement en groupe de boutons radio, avec une variante demi-étoile.

- Auteur : WordPress Développement
- Publié le : 2020-09-03
- Mis à jour le : 2020-09-03
- Catégorie : Accessibilité
- URL : https://www.wpmoderne.fr/accessibilite/notation-etoiles-accessible-boutons-radio/

## L’essentiel

- Le survol CSS seul ignore complètement le clavier
- Un groupe de boutons radio résout le problème sans script
- La demi-étoile s'obtient avec un pas de 0,5 sur les valeurs

Cinq étoiles côte à côte, une astuce CSS avec des `label` inversés en ordre visuel et la pseudo-classe `:hover` pour colorer les étoiles précédentes au survol : ce motif de notation, très répandu sur les fiches produit et les pages d'avis, fonctionne parfaitement à la souris. Il ne fonctionne pas du tout au clavier, puisque rien dans cette construction ne reçoit le focus ni ne réagit aux flèches.

Ce billet propose un remplacement complet du widget par un groupe de boutons radio natifs, habillé en étoiles par le CSS, avec une variante permettant la demi-étoile pour les moyennes calculées.

## Le problème du widget CSS pur

La construction classique enchaîne des paires `input[type=radio]` masquées visuellement et des `label` stylés en étoiles, disposés en ordre inversé dans le DOM pour que le sélecteur `~` permette de colorer les étoiles précédentes au survol. Le problème ne vient pas de l'input radio lui-même, qui reste nativement accessible, mais des variantes qui remplacent l'input par un simple `<span>` cliquable avec un gestionnaire `onclick` en JavaScript : dans ce cas, aucune touche `Tab` n'atteint le composant et aucune touche flèche ne change la note.

> L'essentiel à retenir : Le survol CSS seul ignore complètement le clavier ; Un groupe de boutons radio résout le problème sans script ; La demi-étoile s'obtient avec un pas de 0,5 sur les valeurs

## Le remplacement en groupe de boutons radio

La solution la plus robuste consiste à revenir à un vrai groupe de boutons radio, avec un `fieldset` et une `legend` qui décrivent la question posée :

```
<fieldset>
  <legend>Votre note pour ce produit</legend>
  <div class="etoiles">
    <input type="radio" id="note-5" name="note" value="5">
    <label for="note-5">5 étoiles</label>
    <input type="radio" id="note-4" name="note" value="4">
    <label for="note-4">4 étoiles</label>
    <input type="radio" id="note-3" name="note" value="3">
    <label for="note-3">3 étoiles</label>
    <input type="radio" id="note-2" name="note" value="2">
    <label for="note-2">2 étoiles</label>
    <input type="radio" id="note-1" name="note" value="1">
    <label for="note-1">1 étoile</label>
  </div>
</fieldset>
```

Chaque `label` reçoit un texte complet (« 5 étoiles », pas juste une icône), masqué visuellement au profit d'un fond d'étoile en CSS mais lu intégralement par un lecteur d'écran. Le groupe de boutons radio hérite gratuitement du comportement clavier natif : les flèches haut et bas déplacent la sélection dans le groupe, la barre d'espace confirme un choix, et le focus reste parfaitement visible tant qu'aucun `outline: none` ne vient l'effacer.

### Masquer l'input sans le retirer du clavier

La technique correcte pour masquer visuellement l'input tout en le gardant accessible au clavier repose sur un positionnement hors écran, jamais sur `display: none` ou `visibility: hidden` qui retirent l'élément de l'ordre de tabulation :

```
.etoiles input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
```

## La variante demi-étoile

Pour afficher une moyenne calculée avec une demi-étoile, deux approches coexistent. La première, en lecture seule, se contente d'un texte explicite : `<p>Note moyenne : 4,5 sur 5</p>` accompagné d'un habillage visuel en étoiles décoratives, sans piège d'interaction puisqu'il n'y a rien à sélectionner. La seconde, pour un formulaire de notation qui autorise réellement la demi-étoile, double le nombre de boutons radio avec un pas de 0,5 :

- Dix valeurs possibles (0,5 à 5) au lieu de cinq, chacune avec son propre `label` explicite.
- Un affichage visuel qui superpose deux étoiles en CSS (fond et remplissage partiel) sans jamais reposer l'interaction dessus.
- Un test au clavier systématique après implémentation : dix pressions de flèche doivent parcourir les dix valeurs sans saut ni blocage.

> Sur les fiches produit que j'ai reprises, l'ancien widget en `<span>` cliquables restait souvent invisible aux audits automatisés, qui ne remontent pas toujours l'absence d'input sous-jacent : le test au clavier manuel reste irremplaçable ici.

## En résumé

Un groupe de boutons radio natif, habillé en étoiles par le CSS plutôt que remplacé par des éléments cliquables non sémantiques, redonne au widget de notation tout le comportement clavier que le navigateur fournit gratuitement. La demi-étoile s'obtient en doublant les valeurs plutôt qu'en bricolant une détection de position de clic, ce qui garde le composant utilisable sans script tiers.