Sternebewertungen und Produktrezensionen barrierefrei umsetzen

1. Warum ein Sternen-Rating ohne Text für Screenreader unbrauchbar ist

Ein typisches Sternen-Rating besteht aus fünf SVG- oder Icon-Font-Elementen, von denen ein Teil gefüllt und ein Teil leer dargestellt wird, um beispielsweise eine Bewertung von 4 von 5 Sternen zu visualisieren. Ohne begleitenden Text sieht ein Screenreader hier bestenfalls fünf bedeutungslose Grafiken hintereinander, im schlechtesten Fall werden die Icons komplett ignoriert und der gesamte Bewertungsdurchschnitt bleibt für nicht-sehende Nutzer unsichtbar.

Dieses Problem betrifft drei unterschiedliche Stellen im Shop, die jeweils eigene Lösungen brauchen: die aggregierte Sternen-Anzeige im Produktkopf, das Eingabeformular für eine neue Bewertung, und die Sortier- und Filterfunktionen innerhalb der Rezensionsliste. Alle drei Stellen nutzen zwar dieselbe visuelle Sterne-Metapher, brauchen aber unterschiedliches ARIA-Markup, weil sie unterschiedliche Interaktionen abbilden.

2. Screenreader-Ansage von visuellen Sternen-Ratings als Klartext

Die robusteste Lösung für ein reines Anzeige-Rating, etwa im Produktkopf oder in einer Produktliste, ist, den kompletten Sterne-Container mit aria-hidden="true" vor Screenreadern zu verstecken und stattdessen einen unsichtbaren, aber vorlesbaren Text wie "Bewertung: 4 von 5 Sternen" davor oder danach einzufügen. Dieser Text sollte immer als vollständiger Satz formuliert sein, nicht nur als Zahl, damit auch ohne visuellen Kontext klar ist, worum es sich handelt.

Alternativ kann der Text auch direkt als aria-label auf dem Sterne-Container gesetzt werden, wodurch die einzelnen Sterne-Icons selbst mit aria-hidden="true" markiert bleiben. Beide Techniken führen zum selben Ergebnis, wichtig ist nur, dass niemals beide gleichzeitig verwendet werden, da sich aria-label und ein zusätzlicher sichtbarer Alternativtext sonst gegenseitig verdoppeln oder widersprechen können.

<div class="star-rating" aria-label="Bewertung: 4 von 5 Sternen">
  <svg aria-hidden="true" class="star star--filled"></svg>
  <svg aria-hidden="true" class="star star--filled"></svg>
  <svg aria-hidden="true" class="star star--filled"></svg>
  <svg aria-hidden="true" class="star star--filled"></svg>
  <svg aria-hidden="true" class="star star--empty"></svg>
</div>

3. Halbe Sterne und Dezimalwerte präzise formulieren

Viele Shops zeigen Durchschnittsbewertungen mit einer Nachkommastelle an, etwa 4,3 von 5 Sternen, visuell dargestellt durch einen teilweise gefüllten Stern. Der Textalternative sollte dabei nicht einfach auf- oder abgerundet werden, sondern den tatsächlichen Durchschnittswert wiedergeben, etwa "Durchschnittliche Bewertung: 4,3 von 5 Sternen, basierend auf 128 Rezensionen". Die Anzahl der zugrunde liegenden Rezensionen gehört in dieselbe Ansage, weil sie die Aussagekraft der Bewertung entscheidend mit beeinflusst.

Bei einem halben Stern, der nur zur Hälfte gefüllt dargestellt wird, gilt dieselbe Regel: Die Textalternative gibt den präzisen Zahlenwert wieder, nicht eine grobe Beschreibung wie "vier bis fünf Sterne". Nutzer von Screenreadern sollen dieselbe Präzision erhalten wie sehende Nutzer, die den halb gefüllten Stern optisch genau interpretieren können.

4. Barrierefreies Bewertungsformular: Radio-Buttons statt reiner Sterne-Klicks

Beim Anlegen einer neuen Rezension darf die Sternevergabe niemals ausschließlich über Klicks auf nicht-fokussierbare Icon-Elemente funktionieren, da diese ohne native Formular-Semantik weder per Tastatur erreichbar noch für Screenreader verständlich sind. Die zugängliche Grundlage ist eine Gruppe von fünf input type="radio"-Elementen innerhalb eines fieldset mit legend, wobei jeder Radiobutton für eine Sternezahl steht.

Das visuelle Sterne-Design bleibt dabei vollständig erhalten, weil die Radiobuttons genauso wie bei der Zahlungsmethoden-Auswahl mit einer sr-only Technik versteckt und über ein label-Element mit dem sichtbaren Sterne-Icon verbunden werden. Der entscheidende Unterschied zu einem rein dekorativen Klick-Handler ist, dass Tastaturnutzer mit den Pfeiltasten durch die fünf Sternewerte navigieren können und der Screenreader bei jedem Wert die Beschriftung wie "5 Sterne, ausgezeichnet" vorliest.

<fieldset class="rating-input">
  <legend>Ihre Bewertung</legend>

  <label class="rating-input__star">
    <input type="radio" name="rating" value="5" required>
    <span class="sr-only">5 Sterne, ausgezeichnet</span>
    <svg aria-hidden="true"><!-- Stern-Icon --></svg>
  </label>
  <label class="rating-input__star">
    <input type="radio" name="rating" value="4">
    <span class="sr-only">4 Sterne, gut</span>
    <svg aria-hidden="true"><!-- Stern-Icon --></svg>
  </label>
  <!-- weitere Werte 3, 2, 1 analog -->
</fieldset>

5. Tastaturbedienbarkeit und visuelles Vorschau-Verhalten der Sterne-Eingabe

Ein häufiges Detail bei Sterne-Eingaben ist eine Hover-Vorschau, bei der beim Überfahren mit der Maus temporär mehr oder weniger Sterne gefüllt dargestellt werden, bevor der Klick den Wert final setzt. Diese Vorschau darf ausschließlich visuell über CSS erfolgen, etwa mit der Selektor-Kombination :hover ~ label, und niemals den tatsächlich ausgewählten aria-checked-Zustand verändern, da sonst während des Mausbewegens ständig neue, verwirrende Ansagen ausgelöst würden.

Für Tastaturnutzer entfällt die Hover-Vorschau automatisch, weil sie beim Fokussieren eines Radiobuttons direkt den ausgewählten Wert setzen. Wichtig ist, dass der fokussierte Radiobutton einen sichtbaren Fokusring erhält, der unabhängig vom Sterne-Füllzustand erkennbar ist, damit klar bleibt, welcher der fünf Werte gerade per Tastatur ausgewählt werden könnte.

6. Sortier- und Filteroptionen für Rezensionen zugänglich gestalten

Filter wie "nur 5-Sterne-Bewertungen anzeigen" oder eine Sortierung nach "neueste zuerst" sollten als natives select-Element oder als Gruppe von Buttons mit aria-pressed umgesetzt werden, niemals als reine Klick-Fläche ohne Formular- oder Button-Semantik. Nach jeder Filteränderung sollte eine aria-live="polite"-Region die neue Trefferanzahl ansagen, etwa "32 Rezensionen mit 5 Sternen gefunden", damit Screenreader-Nutzer die Auswirkung des Filters unmittelbar nachvollziehen können.

Wird die Rezensionsliste beim Filtern per JavaScript neu geladen, ohne dass die Seite neu lädt, muss der Fokus dabei aktiv erhalten bleiben, etwa auf dem Filter-Steuerelement selbst, statt unkontrolliert zu verschwinden. Ein kompletter Neuaufbau der Liste im DOM, ohne begleitende Ansage der neuen Trefferanzahl, ist einer der häufigsten Gründe, warum Screenreader-Nutzer eine Filteränderung schlicht nicht bemerken.

<div id="review-filter-status" class="sr-only" aria-live="polite"></div>

<script>
function applyReviewFilter(count) {
  document.getElementById('review-filter-status').textContent =
    count + ' Rezensionen gefunden.';
}
</script>

7. Aggregierte Bewertung im Produktkopf: schema.org und Sprung-Link kombinieren

Die aggregierte Sternen-Anzeige im Produktkopf trägt in der Regel auch das strukturierte Daten-Markup für AggregateRating, das für Suchmaschinen relevant ist. Dieses strukturierte Datenformat ersetzt jedoch keine sichtbare und für Screenreader zugängliche Textalternative im gerenderten HTML, beide Ebenen müssen unabhängig voneinander vorhanden sein, weil Suchmaschinen und Screenreader unterschiedliche Datenquellen auswerten.

Zusätzlich sollte die aggregierte Bewertung im Produktkopf als Link zum Rezensionsbereich weiter unten auf der Seite fungieren, etwa mit dem Linktext "128 Rezensionen ansehen", damit Tastaturnutzer direkt zu den Details springen können, statt sich mühsam durch die gesamte Produktbeschreibung zu navigieren.

8. Hilfreich-Markierung für einzelne Rezensionen als Toggle mit Zähler

Die Frage "War diese Bewertung hilfreich?" mit einem zugehörigen Zähler folgt demselben Toggle-Button-Pattern wie ein Merkzettel-Button, allerdings mit einer zusätzlichen Besonderheit: Der Klick verändert nicht nur den eigenen Button-Zustand über aria-pressed, sondern auch eine benachbarte Zahl. Diese Zahländerung muss ebenfalls angesagt werden, etwa über dieselbe aria-live-Region, die schon für die Filteränderung genutzt wird.

Ein häufiger Fehler ist, den Zähler direkt im sichtbaren Button-Text zu aktualisieren, ohne dass der Screenreader die Änderung mitbekommt, weil reine Textänderungen innerhalb eines fokussierten, aber nicht live-annoncierten Elements nicht automatisch vorgelesen werden. Eine zusätzliche Live-Region löst dieses Problem zuverlässig.

9. Umsetzung in Magento und Hyvä: Bewertungs- und Filter-Komponenten mit Alpine.js

In Hyvä lassen sich sowohl die Sterne-Eingabe im Bewertungsformular als auch die Filter- und Sortierlogik als eigenständige Alpine.js-Komponenten kapseln, die jeweils eine gemeinsame, zentrale Live-Region im Rezensionsbereich für ihre Statusmeldungen nutzen. So bleibt die Ansagenlogik an einer Stelle gebündelt, statt in jeder Komponente einzeln dupliziert zu werden.

Wie bei allen inline eingebundenen script-Blöcken muss jede Statusansage-Logik über $hyvaCsp->registerInlineScript() im jeweiligen phtml-Template registriert werden, damit die Content Security Policy die Ausführung nicht blockiert.

document.addEventListener('alpine:init', () => {
  Alpine.data('reviewFilter', () => ({
    resultCount: 0,
    apply(count) {
      this.resultCount = count;
      this.$dispatch('review-status', { message: count + ' Rezensionen gefunden.' });
    },
  }));
});

10. Zusammenfassung

11. FAQ: Sternebewertungen barrierefrei: Die wichtigsten Fragen