Verwendung
Eine Sterne-Bewertung besteht in der Regel aus Bildern von fünf Sternen, die verwendet werden können, um eine Dienstleistung auf einer Skala von 1 bis 5 zu bewerten.
Interaction Design & Einsatzbeispiele
Per Maus werden Sterne bei :hover hervorgehoben, ein Klick wählt diese aus. Wenn Nutzende zum Beispiel auf den dritten Stern von links klicken, dann beträgt die Bewertung des Elements 3 von 5 Sternen. Eine Bewertung mit Null Sternen ist aktuell nicht vorgesehen.
Um dies so barrierefrei wie möglich anzubieten, werden visuell versteckte Formularelemente verwendet. Die Komponente besteht aus einer Gruppe von fünf Radiobuttons, einen für jeden Stern. Die Labels für die Radiobuttons enthalten den eigentlichen Text („1 Stern“, „2 Sterne“, …) und sind ebenso visuell ausgeblendet.
Daher ist die Tastaturbedienung der Sterne mit der einer Gruppe von Radiobuttons vergleichbar: Tab wählt die Gruppe aus, Pfeiltasten aktivieren bzw. deaktivieren die Sterne.
Die Sterne können als SVG oder über den Iconfont eingebunden sein, Farbwechsel werden durch die :focus und :hover Pseudo-Klassen initiiert, sodass sie mit einer Maus, Tastatur und anderen Eingabemethoden aktiviert werden können. Da nicht mehrere Radiobuttons einer Gruppe gleichzeitig aktiviert sein können, werden im CSS Sibling Selectors verwendet, um ausgewählte, aktive und inaktive Sterne anzuzeigen.
Positionierung & responsives Verhalten
Ab dem Breakpoint SM (≥ 575px)
