Rendre les systèmes de notation par étoiles accessibles est plus complexe qu'il n’y paraît

On les voit partout : sur les sites de commerce électronique et de réservation d'hôtels, ou dans votre application musicale préférée. Les notations par étoiles semblent simples : un clic et c'est fait. Cependant, les concepteurs et les développeurs doivent tenir compte d'enjeux d'accessibilité importants.

• Comment les personnes ayant une déficience visuelle ou motrice peuvent-elles facilement sélectionner des étoiles à l'aide d'un clavier ?
• Comment pouvons-nous empêcher que les notes ne soient soumises accidentellement ?

Sélectionner des étoiles avec le clavier

Les utilisateurs voyants naviguent dans le système de notation de gauche à droite : vers la gauche pour sélectionner moins d'étoiles et vers la droite pour en sélectionner plus. En revanche, les utilisateurs aveugles qui dépendent des lecteurs d'écran trouvent plus intuitif de naviguer vers le haut (avec le clavier) pour plus d'étoiles et vers le bas pour moins, car ils écoutent une échelle de valeurs.

Une bonne approche consiste à combiner les deux méthodes :

• Naviguer vers la gauche et le bas pour diminuer le nombre d'étoiles
• Naviguer vers la droite et le haut pour augmenter le nombre d'étoiles

Malheureusement, de nombreux systèmes de notation par étoiles existants ne suivent pas cette approche, et il n'y a pas de consensus :

• Certains systèmes de notation réagissent à la « flèche gauche » et à la « flèche haut » pour diminuer la note, comme le Design system d'Uber et l'exemple du W3C.
• D'autres systèmes de notation réagissent à la « flèche bas » et à la « flèche droite » pour diminuer la note, tels que le système du gouvernement italien et le système de notation de la Commission européenne.

Nous préférons une approche mixte des flèches gauche/bas, car les utilisateurs aveugles la trouvent la plus intuitive. Le W3C fournit un bon exemple avec un curseur (slider) qui utilise cette méthode, ce qui peut être une solution efficace.

De plus, il est crucial que chaque étoile soit clairement étiquetée afin que les lecteurs d'écran annoncent le bon ordre. Chaque ajustement doit indiquer activement combien d'étoiles sont actuellement sélectionnées, par exemple :

• 1 étoile sur 5
• 2 étoiles sur 5
• etc.

Eviter la soumission accidentelle

De nombreux systèmes de notation soumettent la note immédiatement après un seul clic. Cela peut créer des difficultés, en particulier pour les utilisateurs qui dépendent de lecteurs d'écran ou qui n'utilisent que le clavier.

Si une étoile est sélectionnée accidentellement, il peut être difficile de revenir en arrière sans quitter la page. Dans certains cas, les utilisateurs n'ont qu'une seule chance de donner une note, et ils pourraient sélectionner une étoile alors qu'ils voulaient en donner cinq. C'est frustrant.

Une solution possible est un bouton de soumission masqué qui n'est visible que pour les utilisateurs de clavier, comme le montre cet exemple du W3C. Cela permet aux utilisateurs aveugles de vérifier leur sélection avant de la soumettre.

Mais pourquoi ne pas rendre ce bouton visible pour tout le monde ? Cela aiderait également les utilisateurs qui travaillent avec une souris ou sur un appareil mobile à éviter les erreurs, ainsi que ceux qui ont des tremblements.

Enfin, un autre critère des WCAG s'applique : l'annulation de l’action du pointeur. Cela exige que s'il n'y a pas de bouton de soumission, l'événement de pression du pointeur (down event) ne doit déclencher aucune partie de la fonction.

Conclusion

Des systèmes de notation par étoiles efficaces doivent être intuitifs pour ceux qui peuvent les voir et faciles à utiliser pour ceux qui ne peuvent pas les voir ou les manipuler avec un clavier. En fournissant des commandes au clavier intuitives et un bouton de soumission clair, nous pouvons les rendre accessibles à tous. Cela garantit que tous les utilisateurs puissent exprimer leur opinion facilement et de manière fiable.