Star raters: moeilijker toegankelijk te maken dan je denkt

Je ziet ze vaak, bijvoorbeeld op e-commercewebsites of op websites waar je een hotel kunt boeken. Sterrenbeoordelingen lijken eenvoudig: één klik en je bent klaar. Toch zijn er belangrijke toegankelijkheidsvragen die je als ontwerper en ontwikkelaar moet overwegen.

1. Hoe kunnen mensen met een visuele of motorische beperking gemakkelijk sterren kiezen met een toetsenbord?
2. Hoe voorkomen we dat beoordelingen per ongeluk worden verzonden?

Sterren kiezen met het toetsenbord

Mensen die de star rater kunnen zien, denken "van links naar rechts": links om minder sterren te kiezen, rechts meer. Blinde gebruikers met een screenreader vinden het echter "natuurlijker" om omhoog te navigeren (met het toetsenbord) voor meer sterren en omlaag voor minder. Dit komt omdat zij luisteren naar een schaal van waarden.

Een goede aanpak is daarom om beide methoden te combineren:

• Navigeer naar links en omlaag om het aantal sterren te verminderen.
• Navigeer naar rechts en omhoog om het aantal sterren te verhogen.

Helaas gebruiken veel bestaande star raters deze aanpak niet, en is er geen consensus:

• Sommige star raters reageren op "pijltje naar links" en "pijltje omhoog" om te verlagen, zoals Uber's designsysteem en het voorbeeld van W3C.
• Andere star raters reageren op "pijltje naar beneden" en "pijltje naar rechts" om te verlagen, zoals het systeem van de Italiaanse overheid en de star rater van de Europese Commissie.

Wij geven de voorkeur aan pijltje omhoog/omlaag, omdat blinde gebruikers dit het meest intuïtief vinden. Het W3C heeft een mooi voorbeeld met een schuifregelaar die deze methode gebruikt, wat een goede oplossing kan zijn.

Daarnaast is het belangrijk dat elke ster goed gelabeld is, zodat screenreaders de juiste volgorde aankondigen. Bij elke aanpassing moet actief worden gemeld hoeveel sterren op dat moment zijn geselecteerd, bijvoorbeeld:

• 1 van 5 sterren
• 2 van 5 sterren
• etc.

Voorkom per ongeluk verzenden

Veel beoordelingssystemen verzenden de beoordeling meteen na één klik. Dit kan problemen opleveren, vooral voor mensen die een screenreader gebruiken of alleen het toetsenbord gebruiken.

Als je per ongeluk een ster kiest, is het vaak moeilijk om terug te gaan zonder de pagina te verlaten. In sommige gevallen heb je zelfs maar één kans om een beoordeling te geven, en dan heb je mogelijk maar één ster gegeven terwijl je er eigenlijk 5 wilde geven. Dat is frustrerend.

Een mogelijke oplossing is een verborgen verzendknop die alleen zichtbaar is voor toetsenbordgebruikers, zoals in dit voorbeeld van het W3C. Zo kunnen blinde gebruikers hun keuze eerst controleren voordat ze verzenden.

Maar waarom maken we deze knop niet gewoon voor iedereen zichtbaar? Dit helpt ook mensen die met een muis of op een mobiel apparaat werken om fouten te voorkomen, en mensen met bijvoorbeeld tremoren.

Er is ten slotte nog een ander WCAG-criterium van toepassing: aanwijzerannulering. Dit vereist dat, als er geen verzendknop is, het down-event van de aanwijzer niet wordt gebruikt om enig deel van de functie uit te voeren.

Conclusie

Goede star raters zijn niet alleen intuïtief voor wie ze kan zien, maar ook gemakkelijk bruikbaar voor wie ze niet kan zien of ze bedient met het toetsenbord. Door te zorgen voor intuïtieve toetsenbordbediening en een duidelijke verzendknop, maken we ze toegankelijk voor iedereen. Zo kunnen alle gebruikers eenvoudig en betrouwbaar hun mening geven.