Barrierefreie Produktseite: Varianten, Galerie, Warenkorb

Das Farbfeld ist auf Produktseiten ein besonders häufiger Befund, weil es so unauffällig ist. Ein runder Farbtupfer zeigt Sehenden, welche Farbe gemeint ist – aber nur, solange sie Farben sicher unterscheiden und das Feld überhaupt als auswählbar erkennen. WCAG verlangt, dass Farbe nicht das einzige visuelle Mittel ist, um eine Information zu vermitteln oder ein Element zu unterscheiden (W3C, WCAG 2.2, SC 1.4.1). Für die Variantenwahl heißt das: Neben dem Farbfeld steht der Farbname, sichtbar oder mindestens nach der Auswahl als Text („Farbe: Salbeigrün“). Und der gewählte Zustand zeigt sich nicht nur durch eine andere Randfarbe, sondern zusätzlich durch einen Haken oder einen deutlich dickeren Rahmen.

Technisch ist eine Variantenwahl eine Auswahlgruppe mit genau einer gewählten Option. Genau dafür gibt es native Optionsfelder: ein fieldset mit legend („Farbe“), darin je Variante ein input type="radio" mit sichtbarem oder zugänglichem Namen. Damit sind Name, Rolle und Zustand jeder Variante programmatisch ermittelbar, wie es SC 4.1.2 für alle Bedienelemente verlangt (W3C, WCAG 2.2, SC 4.1.2). Wer stattdessen div-Elemente mit Klickhandler baut, muss Rolle, Zustand und Tastaturbedienung selbst nachbilden und vergisst in der Praxis oft mindestens eines davon. Die Tastaturkonvention für Optionsgruppen ist festgelegt: Tab führt in die Gruppe hinein und wieder hinaus, die Pfeiltasten wechseln innerhalb der Gruppe die Auswahl (W3C WAI, ARIA Authoring Practices, Radio Group).

Die Galerie trägt auf der Produktseite oft mehr Information als der Beschreibungstext: Rückseite, Innenfutter, Detailnaht, Größenvergleich am Modell. Jede Ansicht ist damit ein eigenes Bild mit eigenem Zweck und braucht einen eigenen Alternativtext, nicht fünfmal den Produktnamen. WCAG verlangt für jeden Nicht-Text-Inhalt eine Textalternative, die denselben Zweck erfüllt (W3C, WCAG 2.2, SC 1.1.1). Wie verbreitet die Lücke ist, zeigt die Startseitenerhebung von WebAIM: 16,2 Prozent aller Bilder fehlt der Alternativtext (WebAIM Million, 2026). Wie gute Beschreibungen für Produktbilder entstehen, steht im Beitrag zu Bildern und Alternativtexten.

Die Vorschaubilder unter dem Hauptbild sind Bedienelemente, keine Dekoration. Als Schaltflächen mit Namen („Ansicht 3 von 5: Innenfutter“) und einem Zustand für die aktuelle Ansicht lassen sie sich per Tastatur ansteuern und hörend auseinanderhalten. Genau hier liegt ein verbreiteter Befund: Etwa 9 Prozent der Schaltflächen am Desktop und 11 Prozent mobil haben keinen zugänglichen Namen (Web Almanac, 2025). Pfeile nach links und rechts, die Lupe und das Schließen-Kreuz des Vollbilds sind die typischen Kandidaten, weil sie nur ein Symbol zeigen. Läuft die Galerie als Karussell, gelten zusätzlich die Regeln aus unserem Beitrag zu Slidern und Karussells.

Zoom und Vollbild sind zwei verschiedene Muster. Eine Lupe, die beim Überfahren mit der Maus einen vergrößerten Ausschnitt einblendet, ist nur mit dem Zeiger bedienbar – alle Funktionen müssen aber auch über die Tastatur erreichbar sein (W3C, WCAG 2.2, SC 2.1.1). Inhalte, die bei Zeiger oder Fokus zusätzlich erscheinen, müssen außerdem schließbar, mit dem Zeiger erreichbar und so lange sichtbar sein, wie sie gebraucht werden (W3C, WCAG 2.2, SC 1.4.13). Der Vollbildmodus ist ein Dialog: Beim Öffnen wandert der Fokus hinein, Escape schließt ihn, und danach kehrt der Fokus zu dem Element zurück, das den Dialog geöffnet hat (W3C WAI, ARIA Authoring Practices, Dialog). Was bei modalen Ebenen sonst schiefgeht, beschreibt der Beitrag zu Modals und Overlays.

Der Mengenwähler besteht meist aus einem Zahlenfeld und zwei Symbolschaltflächen. Das Feld braucht eine Beschriftung („Menge“), die Schaltflächen brauchen Namen („Menge verringern“, „Menge erhöhen“) – ein Minus- und ein Pluszeichen allein werden als „Minus“ oder gar nicht vorgelesen. Ändert ein Klick die Zahl, trägt das Feld selbst den neuen Wert, damit ihn der Screenreader beim nächsten Fokus ansagt. Plus und Minus halten wie alle Ziele mindestens 24 × 24 CSS-Pixel ein (W3C, WCAG 2.2, SC 2.5.8); auf dem Handy liegen sie sonst dicht an der Kante des Mengenfelds und werden leicht verfehlt.

Die Größentabelle ist eine echte Datentabelle und gehört auch so ausgezeichnet: mit caption, Spalten- und Zeilenköpfen (th mit scope), damit ein Screenreader beim Wandern durch die Zellen Größe und Maß gemeinsam ansagt, etwa „Größe M, Brustumfang“ und dann den Wert. Struktur und Beziehungen, die visuell erkennbar sind, müssen programmatisch ermittelbar sein (W3C, WCAG 2.2, SC 1.3.1). Eine Größentabelle als Bild erfüllt das nicht, ein Raster aus div-Elementen ebenso wenig. Öffnet die Tabelle in einer eigenen Ebene, gelten dieselben Regeln wie für das Vollbild der Galerie. Einzelheiten zu Kopfzellen und Beschriftungen stehen im Beitrag zu Datentabellen und komplexen Inhalten.

Lieferzeit und Verfügbarkeit erscheinen gern als farbiger Punkt: grün für lieferbar, gelb für wenige Stück, rot für ausverkauft. Das ist genau der Fall, den SC 1.4.1 ausschließt, wenn der Text daneben fehlt (W3C, WCAG 2.2, SC 1.4.1). Ein kurzer Satz wie „Auf Lager, Lieferzeit ein bis zwei Werktage“ trägt dieselbe Information für alle. Für normalen Text gilt ein Kontrast von mindestens 4,5:1 (W3C, WCAG 2.2, SC 1.4.3) – Lieferhinweise in hellem Grün oder Orange verfehlen diesen Wert leicht. Zu geringer Textkontrast fand sich auf 83,9 Prozent der untersuchten Startseiten (WebAIM Million, 2026).

Die Sternebewertung ist eine Grafik, in der eine Zahl steckt. Fünf Sternsymbole, von denen viereinhalb gefüllt sind, brauchen eine Textalternative wie „4,5 von 5 Sternen“ samt Zahl der Bewertungen – als ein zusammenhängender Text, nicht als fünf einzelne Bilder mit dem Alternativtext „Stern“. Ist die Bewertung ein Verweis zum Bewertungsbereich weiter unten, nennt der Verweistext dieses Ziel. Sterne als Eingabe im Bewertungsformular sind dagegen wieder eine Auswahlgruppe mit Optionsfeldern, für die dieselben Regeln gelten wie für die Variantenwahl.

Die folgende Tabelle fasst zusammen, was wir an einer Produktvorlage prüfen. Sie ist nach Bausteinen geordnet, nicht nach Erfolgskriterien, weil Entwicklungsteams in Bausteinen denken und Befunde dort beheben. Die Kriterien in der dritten Spalte stammen aus WCAG 2.2, die für die Konformität in der Regel auf Stufe AA geprüft wird.

Die Produktseite ist nicht die einzige Vorlage eines Shops, aber eine mit besonders großer Hebelwirkung: Sie wird sehr oft ausgespielt, und an ihr fällt die Kaufentscheidung. Wer sie barrierefrei baut, nimmt einen großen Teil der Befunde aus dem Sortiment, bevor der Checkout überhaupt erreicht ist. Für den Rest gilt dieselbe Denkweise: Startseite, Kategorieseite, Suche, Warenkorb, Kasse und Kundenkonto sind je eine Vorlage, die einmal gründlich geprüft wird. Welche Hürden ältere Kundinnen und Kunden im Shop besonders treffen, behandelt unser Beitrag Kundschaft ab 65; die Schaltflächen für Widerruf und Kündigung stehen im Beitrag zum barrierefreien Widerrufsbutton.

Für Onlineshops, die sich an Verbraucher richten, fällt die Produktseite in der Regel in den Anwendungsbereich des Gesetzes; Ausnahmen gelten unter anderem für Kleinstunternehmen, die Dienstleistungen erbringen. Ein Verstoß kann mit einem Bußgeld von bis zu hunderttausend Euro geahndet werden (BFSG, § 37). Im Alltag wiegt aber oft schwerer, was an einer stummen Warenkorb-Schaltfläche verloren geht: Ein Kauf, der nie zustande kommt, erscheint in keiner Beschwerde und in keiner Statistik.

Der Aufwand dafür liegt fast vollständig in der Vorlage. Die Daten – Farbnamen, Bildbeschreibungen, Grundpreise, Lieferzeiten – liegen im Warenwirtschaftssystem in der Regel ohnehin vor; was fehlt, ist ihre Ausgabe an der richtigen Stelle. Eine Anpassung am Template wirkt nach dem nächsten Ausrollen auf jeder Produktseite, und die Prüfung lässt sich mit jeder neuen Fassung der Vorlage wiederholen.