★★★★☆ : cette suite de caractères, aussi élégante soit-elle visuellement, ne dit rigoureusement rien à un lecteur d’écran qui ne restitue pas systématiquement le sens d’un caractère décoratif, et rien non plus à une personne daltonienne si la distinction entre étoile pleine et étoile vide repose sur une nuance de gris trop proche. Un artisan indépendant qui souhaite afficher les avis de sa clientèle sur son site vitrine mérite un système de notation qui fonctionne pour tout le monde, à l’affichage comme à la saisie.
Le problème : deux usages, deux exigences différentes
Un composant de notation sert toujours deux situations distinctes, qui appellent des solutions différentes : afficher une note déjà donnée (lecture seule, sur la fiche de l’artisan) et permettre à un client de saisir sa propre note (formulaire d’avis). Confondre les deux, en réutilisant par exemple des étoiles cliquables en JavaScript pour l’affichage comme pour la saisie, produit systématiquement un composant bancal dans l’un des deux cas.
Snippet commenté : l’affichage en lecture seule
Pour l’affichage, la solution la plus robuste évite complètement les étoiles comme seul support d’information et les complète toujours d’un texte explicite :
<p>
<span aria-hidden="true">★★★★☆</span>
<span>4 étoiles sur 5, d'après 27 avis</span>
</p>
L’attribut aria-hidden="true" masque les caractères décoratifs aux technologies d’assistance, qui s’appuient alors uniquement sur le texte explicite juste à côté. Ce texte reste visible à l’écran pour tout le monde, ce qui évite aussi toute ambiguïté à une personne voyante qui compterait mal les étoiles à cause d’un rendu de police inhabituel.
Snippet commenté : la saisie d’une note
Pour la saisie, la bonne base reste un groupe de boutons radio natifs, chacun porteur d’une étiquette textuelle complète, habillé visuellement en étoiles par la feuille de style sans jamais dépendre de cet habillage pour le sens :
<fieldset>
<legend>Votre note pour cet artisan</legend>
<label>
<input type="radio" name="note" value="1">
1 étoile sur 5
</label>
<label>
<input type="radio" name="note" value="2">
2 étoiles sur 5
</label>
<label>
<input type="radio" name="note" value="3">
3 étoiles sur 5
</label>
<label>
<input type="radio" name="note" value="4">
4 étoiles sur 5
</label>
<label>
<input type="radio" name="note" value="5">
5 étoiles sur 5
</label>
</fieldset>
Cette structure fonctionne intégralement au clavier grâce au comportement natif des boutons radio, s’annonce correctement à la voix grâce à la legend et aux étiquettes, et ne nécessite aucun script pour être opérationnelle : le style visuel en étoiles reste une couche purement cosmétique ajoutée par-dessus, jamais une dépendance fonctionnelle.
Variantes utiles selon le contexte
- Pour une note plus fine (avec demi-étoiles), remplacer l’échelle de cinq valeurs par une échelle de dix, toujours avec des libellés textuels explicites plutôt que des valeurs décimales silencieuses.
- Pour un affichage agrégé sur une liste de plusieurs artisans, répéter la structure texte plus visuel décorative pour chaque ligne, sans jamais factoriser le texte dans un unique intitulé de tableau qui ne couvrirait pas chaque note individuelle.
- Pour un composant plus riche avec survol interactif des étoiles, s’assurer que le survol reste une amélioration purement visuelle et que la sélection reste possible sans jamais avoir besoin de la souris.
Conseil maison : si vous devez choisir entre un rendu visuel élégant et une information textuelle systématique, gardez toujours la seconde. L’élégance visuelle peut s’ajouter ensuite sans rien retirer au sens.
En résumé
Un système de notation accessible ne demande ni bibliothèque complexe ni compromis esthétique : des boutons radio natifs pour la saisie, un texte explicite en complément des étoiles pour l’affichage, et jamais d’information reposant uniquement sur la couleur ou la forme d’un symbole. Pour un artisan indépendant qui gère seul son site, ce genre de composant simple et robuste évite aussi bien des soucis futurs qu’une dépendance à un script tiers fragile.
