Produktseiten barrierefrei gestalten

Die Produktseite ist in einem Online-Shop wahrscheinlich die Seite, auf der die meisten Kaufentscheidungen fallen.

Hier schaut sich der Kunde die Bilder an, liest die Beschreibung, prüft den Preis, wählt eine Größe oder Farbe und entscheidet schließlich: Kaufen oder weitersuchen?

Umso problematischer ist es, wenn ausgerechnet an dieser Stelle Barrieren eingebaut sind.

Ein Produktbild hat keinen sinnvollen Alt-Text. Die Größenwahl funktioniert nur mit der Maus. Hellgraue Schrift macht Lieferinformationen schwer lesbar. Ein Rabatt wird ausschließlich durch eine rote Farbe angezeigt. Oder der „In den Warenkorb“-Button ist zwar sichtbar, aber mit der Tastatur kaum erreichbar.

Für viele Kunden sind das kleine Ärgernisse. Für andere können sie bedeuten, dass das Produkt überhaupt nicht gekauft werden kann.

Eine barrierefreie Produktseite muss deshalb mehr können, als nur gut auszusehen. Informationen müssen verständlich sein und die wichtigsten Funktionen müssen unabhängig von der verwendeten Eingabemethode funktionieren.

Warum Produktseiten bei der Barrierefreiheit so wichtig sind

Bei einem Online-Shop denkt man beim Thema Barrierefreiheit schnell an den Checkout. Natürlich ist der wichtig. Aber der Kunde muss erst einmal bis dorthin kommen.

Die Produktseite enthält oft besonders viele unterschiedliche Elemente:

• Produktbilder
• Bildergalerien
• Produktname
• Preis
• Rabatt
• Lieferstatus
• Varianten
• Mengenwahl
• Warenkorb-Button
• Akkordeons und Tabs
• Größentabellen
• Bewertungen
• Videos
• Downloads
• ähnliche Produkte

Fast jedes dieser Elemente kann eine Barriere verursachen.

Deshalb lohnt es sich, Produktseiten getrennt zu testen und nicht einfach davon auszugehen, dass ein grundsätzlich „barrierefreies Theme“ automatisch alle Probleme löst.

BFSG und Produktseiten: Gehören sie überhaupt dazu?

Bei einem Online-Shop, der unter das Barrierefreiheitsstärkungsgesetz fällt, sollte Barrierefreiheit nicht erst beim Bestellvorgang beginnen.

Die Produktseite ist schließlich ein zentraler Bestandteil der Dienstleistung. Hier werden Informationen bereitgestellt, Produkte ausgewählt und häufig bereits der erste Schritt Richtung Vertragsabschluss durchgeführt.

Wer einen betroffenen Online-Shop betreibt, sollte Produktseiten deshalb genauso ernst nehmen wie Warenkorb und Checkout.

Dabei geht es nicht darum, jede Produktseite komplett neu zu erfinden. Viele Verbesserungen lassen sich bereits mit einer besseren Struktur, verständlicheren Texten und einer saubereren technischen Umsetzung erreichen.

1. Der Produktname braucht eine klare Hauptüberschrift

Die wichtigste Überschrift auf einer Produktseite ist normalerweise der Produktname.

Er sollte technisch als Hauptüberschrift ausgezeichnet sein und sofort erkennen lassen, worum es auf der Seite geht.

Beispiel:

Herren Wanderschuh Trail Pro – Schwarz

Das ist wesentlich hilfreicher als eine Überschrift wie:

Unser Bestseller

Weitere Bereiche können darunter logisch gegliedert werden:

• Produktbeschreibung
• Eigenschaften
• Material und Pflege
• Versand
• Bewertungen
• Häufige Fragen

Überschriften sollten nicht danach ausgewählt werden, welche Schriftgröße gerade am schönsten aussieht. Die optische Gestaltung lässt sich separat verändern.

Eine sinnvolle Überschriftenstruktur hilft nicht nur Screenreader-Nutzern. Auch alle anderen Besucher können eine lange Produktseite schneller überfliegen.

2. Produktbilder brauchen passende Alt-Texte

Produktbilder sind für viele Shops entscheidend. Ein Kunde möchte schließlich sehen, was er kauft.

Wer ein Bild nicht sehen kann, braucht eine sinnvolle textliche Alternative.

Ein Alt-Text sollte die relevanten Merkmale beschreiben.

Beispiel:

„Schwarzer Wanderschuh mit grauer Profilsohle und orangefarbenen Schnürsenkeln.“

Weniger hilfreich wäre:

„Produktbild Wanderschuh“

Noch schlechter wäre:

„Wanderschuh kaufen günstig Herren Trekking Schuhe Shop“

Ein Alt-Text ist keine Fläche für SEO-Keywords. Er soll vermitteln, was auf dem Bild wichtig ist.

3. Nicht jedes Produktbild braucht denselben Alt-Text

Viele Shops besitzen Produktgalerien mit fünf, zehn oder noch mehr Bildern.

Dabei wird häufig für jedes Bild automatisch derselbe Alt-Text verwendet.

Das kann schnell nervig werden.

Wenn verschiedene Bilder tatsächlich unterschiedliche Informationen zeigen, sollten sie auch unterschiedlich beschrieben werden.

Zum Beispiel:

Bild 1:
„Schwarzer Wanderschuh von der Seite.“

Bild 2:
„Wanderschuh von oben mit Schnürung und gepolstertem Einstieg.“

Bild 3:
„Unterseite des Wanderschuhs mit grobem Profil.“

Bild 4:
„Nahaufnahme der verstärkten Zehenkappe.“

Damit bekommt der Nutzer tatsächlich zusätzliche Informationen.

Zeigen mehrere Bilder dagegen praktisch dasselbe Motiv ohne zusätzlichen Informationswert, muss nicht jedes davon ausführlich beschrieben werden.

4. Bildergalerien müssen mit Tastatur funktionieren

Eine moderne Produktgalerie besteht häufig aus Vorschaubildern, Pfeilen, Zoomfunktion und Lightbox.

Mit der Maus ist das meistens kein Problem.

Aber funktioniert sie auch ohne Maus?

Teste:

• Lassen sich die Vorschaubilder mit Tab erreichen?
• Kann man ein Bild mit Enter öffnen?
• Funktionieren Vor- und Zurück-Buttons per Tastatur?
• Kann eine Lightbox mit Escape geschlossen werden?
• Bleibt der Fokus sichtbar?
• Springt der Fokus nach dem Schließen wieder sinnvoll zurück?

Eine Bildergalerie, aus der man mit der Tastatur nicht mehr herauskommt, wird schnell zur Fokusfalle.

5. Zoom darf nicht die einzige Möglichkeit für Details sein

Bei Kleidung, Möbeln, Elektronik oder technischen Produkten werden wichtige Details häufig erst über eine Zoomfunktion sichtbar.

Das kann praktisch sein, darf aber nicht die einzige Möglichkeit sein, wesentliche Informationen zu erhalten.

Wenn beispielsweise eine bestimmte Anschlussart, eine Materialstruktur oder ein Bestandteil des Produkts kaufentscheidend ist, sollte diese Information auch im Text stehen.

Der Nutzer sollte ein Produkt verstehen können, ohne zwingend ein Bild vergrößern zu müssen.

6. Preisangaben müssen gut lesbar sein

Der Preis gehört zu den wichtigsten Informationen einer Produktseite.

Trotzdem wird er manchmal erstaunlich unauffällig dargestellt.

Hellgraue Schrift, kleine Schriftgröße oder ein schlecht gewählter Hintergrund können die Lesbarkeit unnötig erschweren.

Der aktuelle Preis sollte klar erkennbar sein.

Bei Rabattaktionen muss außerdem nachvollziehbar bleiben:

• Was hat das Produkt vorher gekostet?
• Was kostet es jetzt?
• Handelt es sich um einen Rabatt?
• Welche Bedingungen gelten?

Ein durchgestrichener Preis allein sollte nicht die einzige Information liefern.

7. Rabatte nicht nur über Farben darstellen

Rot bedeutet reduziert. Grün bedeutet verfügbar. Grau bedeutet nicht verfügbar.

Für viele Nutzer funktioniert dieses Prinzip problemlos. Aber Informationen sollten nicht ausschließlich von Farben abhängen.

Angenommen, drei Varianten werden angezeigt:

🔴
🟢
⚪

Ohne weitere Erklärung weiß der Nutzer möglicherweise nicht, was diese Zustände bedeuten.

Besser ist eine Kombination aus Farbe und Text:

Verfügbar
Nur noch wenige verfügbar
Nicht verfügbar

Das Gleiche gilt für Sonderangebote.

Zusätzlich zur farblichen Darstellung kann beispielsweise ausdrücklich „20 % Rabatt“ oder „Angebotspreis“ angegeben werden.

8. Lieferstatus verständlich formulieren

„Sofort verfügbar“ ist verständlich.

„Grüner Punkt“ deutlich weniger.

Produktseiten sollten klar erklären:

• ob das Produkt verfügbar ist,
• wann es ungefähr versendet wird,
• wie lange die Lieferung dauert,
• ob eine Variante ausverkauft ist.

Informationen dürfen nicht nur über ein Symbol oder eine Farbe vermittelt werden.

Gerade bei Produktvarianten ist das wichtig. Vielleicht ist der Pullover grundsätzlich auf Lager, aber Größe XL in Blau nicht.

Der Kunde sollte diese Information erkennen können, bevor er versucht, das Produkt in den Warenkorb zu legen.

9. Varianten müssen ohne Maus auswählbar sein

Ein besonders häufiger Problemfall sind Produktvarianten.

WooCommerce und andere Shop-Systeme verwenden ursprünglich oft klassische Auswahlfelder. Viele Shops ersetzen diese durch schönere Variantenbuttons.

Aus:

Farbe: Blau

wird dann nur noch ein blauer Kreis.

Aus:

Größe: XL

wird ein kleines Kästchen.

Das kann optisch gut aussehen. Technisch funktioniert es aber nicht immer.

Prüfe deshalb:

• Ist jede Variante mit der Tastatur erreichbar?
• Kann sie mit Enter oder Leertaste ausgewählt werden?
• Erkennt ein Screenreader den Namen?
• Ist der ausgewählte Zustand erkennbar?
• Ist sichtbar, welche Varianten nicht verfügbar sind?
• Wird die Auswahl nicht nur über Farbe vermittelt?

Ein Nutzer sollte beispielsweise hören können:

„Farbe Blau, ausgewählt.“

und nicht nur:

„Button.“

10. Farbauswahl zusätzlich beschriften

Farbfelder sind in Mode-, Möbel- und Dekoshops beliebt.

Ein kleiner blauer Kreis sieht zwar offensichtlich nach „Blau“ aus – wenn man ihn sehen kann.

Die Farbauswahl braucht deshalb eine textliche Information.

Beispielsweise:

Blau
Dunkelgrün
Schwarz
Sand

Auch unterschiedliche Namen wie „Ocean Blue“ oder „Forest Green“ sollten verständlich bleiben.

Wenn ein Produktbild nach der Farbauswahl wechselt, sollte die neue Auswahl ebenfalls technisch nachvollziehbar sein.

11. Größen nicht nur als kleine Kästchen darstellen

S, M, L und XL sind relativ unkompliziert.

Schwieriger wird es bei:

• Schuhgrößen,
• Ringgrößen,
• internationalen Größen,
• Kindergrößen,
• unterschiedlichen Maßsystemen.

Eine gute Produktseite bietet deshalb bei Bedarf zusätzliche Informationen.

Zum Beispiel:

Größe M – Brustumfang 96 bis 101 cm

oder einen Link:

Größentabelle öffnen

Die Größentabelle selbst muss natürlich ebenfalls zugänglich sein.

12. Größentabellen barrierefrei gestalten

Viele Größentabellen werden als Bild hochgeladen.

Das ist bequem, aber problematisch.

Wenn die wichtigen Werte ausschließlich in einem Bild stehen, können sie von Screenreadern nicht zuverlässig erfasst werden.

Besser ist eine echte Tabelle oder eine strukturierte Textdarstellung.

Zum Beispiel:

Größe	Brustumfang	Taille
S	86–91 cm	71–76 cm
M	96–101 cm	81–86 cm
L	106–111 cm	91–96 cm

Die Tabellenstruktur sollte technisch korrekt aufgebaut sein, damit klar bleibt, welche Werte zusammengehören.

13. Der Warenkorb-Button muss eindeutig sein

„In den Warenkorb“ ist ein gutes Beispiel für einen verständlichen Button.

„Jetzt“, „Weiter“ oder nur ein Warenkorb-Symbol sind deutlich unklarer.

Der Nutzer sollte schon vor dem Aktivieren erkennen können, was passiert.

Bei verschiedenen Produkten auf einer Übersichtsseite kann eine noch genauere Beschriftung sinnvoll sein.

Zum Beispiel:

„Schwarzen Wanderschuh in den Warenkorb legen“

Der Button muss außerdem:

• mit Tastatur erreichbar,
• deutlich sichtbar,
• kontrastreich,
• ausreichend groß,
• technisch als Button erkennbar sein.

Ein normaler Textbereich, der nur über JavaScript anklickbar gemacht wurde, kann unnötige Probleme verursachen.

14. Nach dem Warenkorb-Klick braucht es eine klare Rückmeldung

Der Kunde klickt „In den Warenkorb“.

Was passiert jetzt?

Viele Shops blenden für zwei Sekunden eine kleine Meldung ein:

„Added“.

Dann verschwindet sie wieder.

Besser ist eine eindeutige Rückmeldung:

„Der Artikel wurde in den Warenkorb gelegt.“

Zusätzlich kann angeboten werden:

„Warenkorb öffnen“

Wenn sich die Anzahl der Produkte im Warenkorb ändert, sollte diese Statusänderung auch für Nutzer von Hilfstechnologien wahrnehmbar sein.

Sonst weiß ein Screenreader-Nutzer möglicherweise nicht, ob der Klick überhaupt funktioniert hat.

15. Die Mengenwahl zugänglich umsetzen

Plus- und Minus-Buttons sehen besser aus als ein einfaches Zahlenfeld. Sie brauchen aber verständliche Bezeichnungen.

Ein Screenreader sollte nicht dreimal hören:

„Button, Button, Button.“

Besser:

„Menge verringern“
„Menge 2“
„Menge erhöhen“

Auch eine manuelle Eingabe sollte nach Möglichkeit funktionieren.

Wenn für ein Produkt eine maximale Menge gilt, sollte diese Information vorher verständlich sein.

16. Produktbeschreibungen nicht unnötig kompliziert schreiben

Barrierefreiheit betrifft nicht nur Technik.

Auch Sprache kann eine Barriere sein.

Eine Produktbeschreibung sollte verständlich erklären:

• Was ist das Produkt?
• Für wen ist es geeignet?
• Welche Eigenschaften besitzt es?
• Welche Maße hat es?
• Aus welchem Material besteht es?
• Gibt es Besonderheiten?

Sehr lange Werbesätze helfen dabei selten.

Statt:

„Erleben Sie die unvergleichliche Symbiose aus innovativer Funktionalität und zeitlos eleganter Ästhetik.“

kann man auch schreiben:

„Der Rucksack besitzt ein gepolstertes Laptopfach, zwei Außentaschen und wasserabweisendes Material.“

Das ist konkreter – und für die Kaufentscheidung wahrscheinlich hilfreicher.

17. Wichtige Informationen nicht in langen Texten verstecken

Eine Produktbeschreibung mit 1.500 Wörtern kann zwar ausführlich sein, aber wichtige Angaben sollten trotzdem schnell auffindbar bleiben.

Für zentrale Eigenschaften eignen sich übersichtliche Abschnitte.

Zum Beispiel:

Material

100 % Baumwolle

Passform

Normal geschnitten

Pflege

Waschbar bei 30 Grad

Lieferumfang

Pullover und Aufbewahrungsbeutel

Gewicht

420 Gramm

Das erleichtert die Orientierung für alle Nutzer.

18. Akkordeons müssen zugänglich sein

Viele Produktseiten verstecken Informationen in aufklappbaren Bereichen.

Zum Beispiel:

• Beschreibung
• technische Daten
• Versand
• Rückgabe
• FAQ

Akkordeons sind grundsätzlich nicht schlecht. Sie müssen nur richtig funktionieren.

Prüfe:

• Ist die Überschrift per Tastatur erreichbar?
• Kann der Bereich mit Enter oder Leertaste geöffnet werden?
• Wird erkannt, ob der Bereich geöffnet oder geschlossen ist?
• Bleibt der Fokus sichtbar?
• Funktioniert das Ganze auch bei Vergrößerung?

Ein kleines Pfeilsymbol ohne verständliche Bezeichnung reicht nicht aus.

19. Tabs ebenfalls mit Tastatur prüfen

Produktbeschreibung, technische Daten und Bewertungen werden gerne in Tabs aufgeteilt.

Auch hier sollte man nicht davon ausgehen, dass das verwendete Plugin automatisch alles richtig macht.

Teste die Tabs ohne Maus.

Kann man zwischen ihnen wechseln?

Ist klar, welcher Tab aktiv ist?

Wird der dazugehörige Inhalt an einer nachvollziehbaren Stelle angezeigt?

Wenn ein Screenreader jeden ausgeblendeten Tab-Inhalt trotzdem komplett vorliest, kann das genauso problematisch sein wie ein Inhalt, der gar nicht erreichbar ist.

20. Bewertungen verständlich darstellen

Bewertungen können die Kaufentscheidung stark beeinflussen.

Fünf gelbe Sterne sind visuell schnell verständlich. Für einen Screenreader reichen die Symbole aber nicht.

Zusätzlich sollte eine textliche Information vorhanden sein:

4,7 von 5 Sternen bei 128 Bewertungen

Das ist klarer als fünf einzelne Sterne oder fünfmal das Wort „Stern“.

Auch Filter wie:

★★★★★
★★★★☆
★★★☆☆

sollten verständlich beschriftet werden.

Bewertungsformulare müssen außerdem wie andere Formulare zugänglich sein.

21. Icons brauchen einen verständlichen Zweck

Produktseiten enthalten oft zahlreiche Symbole:

• Herz für Wunschliste
• Pfeil für Teilen
• Lieferwagen für Versand
• Schloss für sichere Zahlung
• Kreis-Pfeil für Rückgabe

Ein Symbol kann für sehende Nutzer eindeutig wirken. Ein Screenreader braucht jedoch eine sinnvolle Bezeichnung.

Statt:

„Button Grafik 17“

sollte beispielsweise ausgegeben werden:

„Zur Wunschliste hinzufügen“

Dekorative Icons sollten dagegen nicht unnötig vorgelesen werden.

Sonst wird aus:

„Kostenloser Versand“

möglicherweise:

„Grafik Lieferwagen, kostenloser Versand.“

Der zusätzliche Hinweis bringt keinen Mehrwert.

22. Links klar benennen

„Mehr erfahren“

ist nicht immer falsch.

Wenn auf einer Produktseite aber fünf Links genau so heißen, wird es unübersichtlich.

Besser sind eindeutige Beschriftungen:

„Versandinformationen anzeigen“

„Größentabelle öffnen“

„Materialinformationen lesen“

„Hinweise zur Rückgabe anzeigen“

Der Nutzer sollte möglichst erkennen können, wohin ein Link führt, ohne den kompletten Absatz davor lesen zu müssen.

23. Downloadbare Dokumente nicht vergessen

Einige Produkte benötigen zusätzliche Dokumente:

• Bedienungsanleitungen
• Montageanleitungen
• technische Datenblätter
• Sicherheitshinweise
• Zertifikate

Ein PDF-Download kann durchaus sinnvoll sein.

Problematisch wird es, wenn wichtige Informationen ausschließlich in einem nicht zugänglichen PDF stehen.

Ein eingescanntes Dokument ohne echten Text ist für viele Hilfstechnologien schwer oder gar nicht nutzbar.

Wichtige Produktinformationen sollten deshalb möglichst auch direkt als HTML-Inhalt verfügbar sein.

Wenn PDFs angeboten werden, sollten diese ebenfalls barrierefrei aufbereitet sein.

24. Produktvideos brauchen Alternativen

Videos können Produkte hervorragend erklären.

Eine Maschine wird vorgeführt, ein Möbelstück aufgebaut oder ein Kleidungsstück aus verschiedenen Perspektiven gezeigt.

Aber nicht jeder Nutzer kann Ton hören oder das Bild sehen.

Je nach Inhalt können deshalb notwendig oder sinnvoll sein:

• Untertitel,
• Transkript,
• Audiodeskription,
• zusätzliche schriftliche Erklärung.

Wesentliche Produktinformationen dürfen nicht ausschließlich im Video vorkommen.

Wenn das Video sagt:

„Drücken Sie diesen roten Knopf drei Sekunden lang“

und diese Information nirgendwo sonst steht, entsteht schnell eine unnötige Barriere.

25. Automatisch startende Inhalte vermeiden

Automatisch abspielende Videos, animierte Produktgalerien und sich bewegende Slider können ablenken.

Besonders problematisch wird es, wenn der Nutzer sie nicht stoppen kann.

Wenn Bewegung eingesetzt wird, sollte der Kunde Kontrolle darüber behalten.

Ein Produkt muss nicht ständig rotieren, zoomen oder durch verschiedene Varianten springen, um modern zu wirken.

Oft ist eine ruhige Darstellung sogar angenehmer.

26. Popups dürfen Produktinformationen nicht blockieren

„10 % Rabatt – jetzt Newsletter abonnieren!“

Genau in dem Moment, in dem der Kunde gerade die Produktbeschreibung liest.

Solche Popups sind ohnehin Geschmackssache. Aus Sicht der Barrierefreiheit werden sie problematisch, wenn sie:

• den Fokus nicht übernehmen,
• nicht mit Tastatur bedienbar sind,
• keinen klaren Schließen-Button haben,
• auf dem Smartphone fast den gesamten Bildschirm bedecken,
• nach dem Schließen sofort wieder erscheinen.

Ein Nutzer darf nicht an einem Newsletter-Popup scheitern, bevor er überhaupt ein Produkt auswählen kann.

27. Sticky Buttons und Leisten dürfen nichts verdecken

Auf mobilen Produktseiten bleiben häufig verschiedene Elemente dauerhaft sichtbar:

• Warenkorb-Button
• Chat
• Cookie-Einstellungen
• Rabattbutton
• Navigation

Jedes Element für sich kann sinnvoll sein.

Zusammen bedecken sie irgendwann die halbe Seite.

Prüfe deshalb, ob wichtige Inhalte und Tastaturfokus noch sichtbar bleiben.

Besonders bei vergrößerter Darstellung kann eine kleine feste Leiste plötzlich sehr viel Platz beanspruchen.

28. Kontraste der gesamten Produktseite prüfen

Nicht nur Fließtext braucht guten Kontrast.

Prüfe auch:

• Preis
• alter Preis
• Lieferstatus
• Variantenauswahl
• Bewertungssterne
• Tabs
• Buttons
• Links
• Fokusrahmen
• Fehlermeldungen

Typische Problemkombinationen sind:

hellgrau auf weiß,
weiß auf gelb,
hellblau auf weiß oder
dünne graue Schrift auf Produktbildern.

Gerade moderne Minimaldesigns neigen dazu, Informationen zu dezent darzustellen.

Eine Produktseite darf schön aussehen. Die Informationen müssen trotzdem lesbar bleiben.

29. Textvergrößerung testen

Vergrößere die Produktseite im Browser deutlich.

Danach sollte sie weiterhin funktionieren.

Prüfe:

• Überlappen Texte?
• Werden Preise abgeschnitten?
• Verschwinden Buttons?
• Funktioniert die Bildergalerie?
• Bleibt die Variantenauswahl benutzbar?
• Muss horizontal gescrollt werden?
• Verdeckt ein Sticky-Element den Inhalt?

Dieser Test findet erstaunlich viele Probleme, die bei normaler Darstellung nicht auffallen.

30. Mobile Produktseiten separat testen

Eine Desktop-Produktseite einfach schmaler zu machen reicht nicht.

Auf dem Smartphone verändert sich die Bedienung grundlegend.

Die Bildgalerie wird größer, Varianten rutschen untereinander, Buttons befinden sich an anderen Stellen und Popups nehmen plötzlich viel mehr Platz ein.

Teste daher mit einem echten Smartphone:

1. Produkt öffnen.
2. Bilder ansehen.
3. Beschreibung lesen.
4. Variante auswählen.
5. Menge ändern.
6. Produkt in den Warenkorb legen.
7. Informationen zu Versand oder Rückgabe öffnen.

Achte besonders auf ausreichend große Bedienflächen.

Ein winziger Auswahlpunkt für eine Produktfarbe kann mit einem Finger deutlich schwerer zu treffen sein als mit dem Mauszeiger.

31. Produktseite einmal komplett ohne Maus bedienen

Das ist einer der schnellsten Tests überhaupt.

Maus weglegen.

Dann:

• mit Tab durch die Seite gehen,
• Bildergalerie öffnen,
• Varianten auswählen,
• Akkordeons öffnen,
• Menge ändern,
• Bewertungen aufrufen,
• Warenkorb-Button aktivieren.

Beobachte dabei:

Wo bin ich gerade?

Wenn du diese Frage nicht beantworten kannst, ist der Fokus wahrscheinlich nicht deutlich genug.

Kann ich alles erreichen?

Wenn nein, fehlt Tastaturbedienung.

Kann ich wieder zurück?

Wenn nein, könnte eine Fokusfalle vorliegen.

Dieser Test dauert nur wenige Minuten und deckt viele ernsthafte Probleme auf.

32. Nicht blind auf das Shop-Theme verlassen

Ein Theme kann eine gute technische Grundlage bieten.

Aber die fertige Produktseite wird meistens aus vielen Komponenten zusammengesetzt:

• Theme
• Shop-System
• Pagebuilder
• Variantenplugin
• Bildergalerie
• Bewertungsplugin
• Wunschliste
• Popup-Plugin
• eigene CSS-Anpassungen

Ein einziger Baustein kann die Barrierefreiheit verschlechtern.

Deshalb sollte immer die fertige Produktseite geprüft werden und nicht nur die Beschreibung des Themes.

33. Neue Produkte brauchen einen festen Ablauf

Wer hunderte Produkte besitzt, möchte nicht bei jedem neuen Artikel darüber nachdenken, welche Barrierefreiheitspunkte gerade relevant sind.

Deshalb lohnt sich eine einfache interne Checkliste.

Beim Anlegen eines Produkts prüfen:

• Produktname vorhanden
• sinnvolle Überschriften
• Bilder mit passenden Alt-Texten
• verständliche Produktbeschreibung
• Eigenschaften als Text verfügbar
• Varianten richtig beschriftet
• Preis eindeutig
• Lieferstatus verständlich
• Downloads zugänglich
• Videos mit Alternativen
• Produktseite mobil geprüft

Damit wird Barrierefreiheit Teil des normalen Workflows.

Praktische Checkliste für barrierefreie Produktseiten

Gehe eine typische Produktseite durch und beantworte diese Fragen:

• Ist sofort klar, um welches Produkt es geht?
• Ist der Produktname als Hauptüberschrift ausgezeichnet?
• Haben wichtige Bilder sinnvolle Alt-Texte?
• Liefert jedes Galeriebild tatsächlich zusätzliche Informationen?
• Funktioniert die Bildergalerie ohne Maus?
• Ist der Preis deutlich lesbar?
• Werden Rabatte nicht nur über Farbe vermittelt?
• Ist der Lieferstatus verständlich?
• Sind alle Varianten mit Tastatur auswählbar?
• Haben Farbvarianten verständliche Namen?
• Sind Größeninformationen zugänglich?
• Ist der Warenkorb-Button eindeutig?
• Gibt es nach dem Hinzufügen eine klare Rückmeldung?
• Sind Mengenbuttons verständlich beschriftet?
• Ist die Produktbeschreibung klar strukturiert?
• Funktionieren Tabs und Akkordeons per Tastatur?
• Werden Bewertungen auch als Text dargestellt?
• Haben wichtige Icon-Buttons verständliche Bezeichnungen?
• Sind Downloads zugänglich?
• Haben Videos passende Alternativen?
• Blockieren keine Popups den Inhalt?
• Sind die Kontraste ausreichend?
• Funktioniert die Seite bei Vergrößerung?
• Ist die mobile Darstellung gut bedienbar?
• Kann das Produkt komplett ohne Maus gekauft werden?

Wenn du mehrere dieser Fragen mit Nein beantworten musst, hast du bereits eine gute Prioritätenliste für die Überarbeitung.

Wo sollte man anfangen?

Bei einer großen Produktdatenbank kann die Aufgabe zunächst gewaltig wirken.

Du musst aber nicht unbedingt zuerst tausend alte Alt-Texte überarbeiten.

Beginne mit den Problemen, die einen Kauf verhindern oder wesentliche Informationen unzugänglich machen.

Priorität 1

Zuerst beheben:

• Varianten nicht per Tastatur auswählbar
• Warenkorb-Button nicht erreichbar
• wichtige Produktinformationen fehlen als Text
• Fokus ist nicht sichtbar
• Produktseite funktioniert bei Vergrößerung nicht
• mobile Bedienung ist stark eingeschränkt

Priorität 2

Danach:

• Alt-Texte verbessern
• Farben und Kontraste korrigieren
• Überschriften ordnen
• Akkordeons und Tabs verbessern
• Fehlermeldungen verständlicher gestalten

Priorität 3

Anschließend:

• bestehende PDFs überarbeiten
• Videos ergänzen
• ältere Produktbeschreibungen verbessern
• zusätzliche Komfortfunktionen optimieren

So wird zuerst das repariert, was Kunden tatsächlich vom Einkauf abhält.

Fazit: Eine gute Produktseite muss mehr können als verkaufen

Produktseiten werden oft bis ins kleinste Detail auf Conversion optimiert.

Der Button wird verschoben. Das Produktbild wird größer. Ein Gütesiegel kommt dazu. Der Preis bekommt eine andere Farbe.

Barrierefreiheit sollte genauso selbstverständlich Teil dieser Optimierung sein.

Denn eine Produktseite kann nur dann wirklich gut verkaufen, wenn Kunden die Informationen auch wahrnehmen, verstehen und bedienen können.

Mein praktischer Tipp ist deshalb sehr einfach:

Nimm eines deiner meistverkauften Produkte und teste dessen Seite einmal vollständig ohne Maus. Vergrößere sie anschließend stark und öffne sie danach auf einem Smartphone.

Schon diese drei Tests zeigen meistens sehr schnell, wo die größten Schwachstellen liegen.

Eine barriereärmere Produktseite profitiert dabei nicht nur von technischen Verbesserungen. Meist wird sie gleichzeitig übersichtlicher, verständlicher und angenehmer zu bedienen.

Und genau das ist eigentlich das Ziel jeder guten Produktseite.

Hinweis: Dieser Beitrag bietet eine allgemeine Orientierung und ersetzt keine individuelle Rechtsberatung oder vollständige Prüfung der Barrierefreiheit.