WooCommerce ist für viele WordPress-Websites die naheliegende Lösung, wenn ein Online-Shop entstehen soll. Es ist flexibel, erweiterbar und für kleine Shops genauso interessant wie für größere Projekte.
Aber genau diese Flexibilität hat auch eine Schattenseite.
Ein WooCommerce-Shop besteht selten nur aus WooCommerce selbst. Meist kommen Theme, Pagebuilder, Zahlungsanbieter, Versand-Plugins, Produktfilter, Cookie-Banner, Checkout-Erweiterungen, Tracking-Tools und vielleicht noch ein paar Marketing-Plugins dazu.
Und genau dort entstehen viele Barrieren.
Ein Shop kann optisch sauber aussehen und trotzdem für manche Menschen schwer oder gar nicht nutzbar sein. Besonders kritisch ist das, weil es bei WooCommerce nicht nur um Information geht. Es geht um einen Kaufprozess. Nutzer sollen Produkte finden, Varianten auswählen, den Warenkorb bedienen, ihre Daten eingeben, bezahlen und eine Bestellung abschließen können.
Wenn dieser Weg nicht funktioniert, ist das nicht nur ein Barrierefreiheitsproblem. Es kostet auch Umsatz.
Warum WooCommerce besonders genau geprüft werden sollte
Bei einer normalen Firmenwebsite ist das Kontaktformular oft der wichtigste Punkt. Bei WooCommerce ist der wichtigste Punkt der komplette Einkaufsweg.
Also nicht nur:
„Sieht die Startseite gut aus?“
Sondern:
Kann ein Kunde ein Produkt finden?
Kann er eine Variante auswählen?
Kann er den Warenkorb verstehen?
Kann er den Checkout ausfüllen?
Kann er bezahlen?
Bekommt er eine klare Bestätigung?
Genau diese Kette muss funktionieren. Wenn nur ein Schritt unklar oder unbedienbar ist, bricht der Kauf ab.
Das macht WooCommerce anspruchsvoller als eine einfache Website.
Baustelle 1: Das Theme
Viele WooCommerce-Probleme beginnen beim Theme.
Ein Theme bestimmt nicht nur Farben und Layout. Es beeinflusst auch Menü, Produktseiten, Buttons, Fokus-Stile, Warenkorb-Darstellung, mobile Ansicht und oft sogar Teile des Checkouts.
Typische Probleme sind:
schlechte Kontraste,
Buttons ohne sichtbaren Fokus,
Dropdown-Menüs, die mit Tastatur schwer nutzbar sind,
zu kleine Schrift,
unübersichtliche Produktkarten,
mobile Menüs mit Problemen,
Slider oder Animationen auf Shopseiten.
Ein Theme kann schön aussehen und trotzdem nicht gut zugänglich sein. Deshalb sollte man es nicht nur nach Design auswählen.
Wichtig ist: Teste dein Theme mit echten Shop-Funktionen. Produkt anklicken, Variante wählen, Warenkorb öffnen, Checkout starten. Nicht nur die Demo-Startseite anschauen.
Baustelle 2: Produktseiten
Die Produktseite ist der Ort, an dem Nutzer entscheiden, ob sie kaufen.
Hier müssen Informationen klar sein:
Produktname, Preis, Verfügbarkeit, Beschreibung, Varianten, Bilder, Lieferzeit, Zusatzkosten, Bewertungen und Button zum Warenkorb.
Häufige Barrieren auf Produktseiten sind:
zu kleine Preisangaben,
schwache Kontraste,
unklare Varianten-Auswahl,
Bilder ohne sinnvolle Alt-Texte,
Tabs, die nicht gut mit Tastatur funktionieren,
Bewertungen, die schlecht strukturiert sind,
Buttons mit unklarer Beschriftung.
Gerade Varianten wie Größe, Farbe, Material oder Menge sind wichtig. Wenn ein Kunde nicht erkennt, welche Variante ausgewählt ist, wird der Kauf unnötig schwierig.
Baustelle 3: Produktvarianten
Produktvarianten sind in WooCommerce oft eine echte Problemzone.
Viele Shops nutzen Farbfelder, Icons, kleine Buttons oder spezielle Variation-Swatches. Das sieht besser aus als ein normales Dropdown, kann aber neue Barrieren erzeugen.
Prüfe:
Kann man Varianten mit der Tastatur auswählen?
Ist klar erkennbar, welche Variante aktiv ist?
Sind Farbfelder zusätzlich beschriftet?
Gibt es verständliche Fehlermeldungen, wenn eine Auswahl fehlt?
Funktioniert die Auswahl mobil?
Wird der Preis nach Variantenwahl verständlich aktualisiert?
Ein roter Kreis allein ist keine gute Auswahl, wenn nicht klar ist, dass er für „Rot“ steht. Farbe darf nicht die einzige Information sein.
Baustelle 4: Produktbilder und Galerien
Produktbilder sind im Shop besonders wichtig. Sie ersetzen oft das Anfassen im Laden.
Aber Bilder können auch Barrieren erzeugen.
Prüfe:
Haben wichtige Produktbilder sinnvolle Alt-Texte?
Ist die Galerie mit Tastatur bedienbar?
Lässt sich ein vergrößertes Bild wieder schließen?
Sind Zoom-Funktionen verständlich?
Werden wichtige Informationen nicht nur im Bild gezeigt?
Wenn auf einem Produktbild wichtige Maße, Varianten oder Hinweise stehen, sollten diese Informationen auch im normalen Text erscheinen.
Alt-Texte müssen nicht werblich sein. Sie sollten nüchtern beschreiben, was für den Kauf wichtig ist.
Baustelle 5: Produktübersichten und Kategorien
Viele WooCommerce-Shops haben Kategorieseiten mit Produktkarten. Dort suchen Nutzer nach passenden Produkten.
Typische Probleme sind:
Produktkarten ohne klare Struktur,
Preis und Button schlecht erkennbar,
zu viele Produkte ohne Filter,
unverständliche Sortierung,
Hover-Effekte, die mobil oder per Tastatur nicht funktionieren,
Buttons wie „Auswählen“ ohne weiteren Kontext.
Eine gute Kategorieseite hilft Nutzern schnell zu verstehen:
Was ist das Produkt?
Was kostet es?
Ist es verfügbar?
Wie komme ich zur Produktseite?
Kann ich es direkt kaufen?
Gerade auf dem Smartphone sollten Produktkarten nicht zu gedrängt wirken.
Baustelle 6: Filter und Suche
Filter sind praktisch, aber oft schlecht zugänglich.
Viele Shops nutzen Filter nach Preis, Größe, Farbe, Marke, Bewertung oder Verfügbarkeit. Wenn diese Filter nur über kleine Schieberegler, Farbpunkte oder versteckte Menüs funktionieren, kann es schwierig werden.
Prüfe:
Sind Filter mit Tastatur bedienbar?
Ist sichtbar, welche Filter aktiv sind?
Kann man Filter wieder entfernen?
Sind Farbfelder beschriftet?
Ist die Suche gut auffindbar?
Sind Suchergebnisse verständlich?
Ein Filter sollte nicht nur schön aussehen. Er muss klar sagen, was ausgewählt wurde.
Baustelle 7: Warenkorb
Der Warenkorb ist der Übergang vom Stöbern zum Kaufen. Hier muss alles besonders klar sein.
Prüfe:
Sind Produkte im Warenkorb eindeutig erkennbar?
Kann man Mengen ändern?
Kann man Produkte entfernen?
Sind Preis, Zwischensumme, Versand und Gesamtsumme verständlich?
Ist der Button zur Kasse klar benannt?
Sind Gutscheinfeld und Versandoptionen gut bedienbar?
Ein häufiger Fehler: Kleine Entfernen-Icons ohne verständliche Beschriftung. Für manche Nutzer ist dann nicht klar, was der Button auslöst.
Auch Mengenfelder sollten sauber beschriftet sein. Ein kleines Plus und Minus allein reicht nicht immer.
Baustelle 8: Checkout
Der Checkout ist die wichtigste Seite im ganzen Shop.
Hier entscheidet sich, ob der Kauf abgeschlossen wird oder nicht.
Prüfe:
Sind alle Formularfelder klar beschriftet?
Sind Pflichtfelder verständlich markiert?
Sind Fehlermeldungen konkret?
Bleiben Eingaben erhalten, wenn ein Fehler passiert?
Sind Versandarten klar auswählbar?
Sind Zahlungsarten verständlich beschrieben?
Ist die Bestellübersicht gut lesbar?
Ist der finale Button eindeutig?
Nicht hilfreich ist:
„Fehler beim Ausfüllen.“
Besser ist:
„Bitte geben Sie eine gültige E-Mail-Adresse ein.“
„Bitte wählen Sie eine Zahlungsart aus.“
„Bitte akzeptieren Sie die Allgemeinen Geschäftsbedingungen.“
Der Checkout muss ruhig, logisch und verständlich sein. Je mehr unnötige Felder, Popups und Ablenkungen dort auftauchen, desto schwieriger wird es.
Baustelle 9: Zahlungsanbieter
Viele WooCommerce-Shops nutzen Stripe, PayPal, Klarna, Mollie, Amazon Pay oder andere Zahlungsdienste.
Das Problem: Ein Teil des Kaufprozesses findet dann nicht mehr direkt im Shop statt. Für den Kunden gehört es aber trotzdem zum Einkauf.
Prüfe deshalb:
Ist die Zahlungsart klar auswählbar?
Funktioniert die Weiterleitung?
Sind Popups oder eingebettete Zahlungsfenster bedienbar?
Ist klar, wann die Zahlung abgeschlossen ist?
Kommt der Nutzer sauber zurück zum Shop?
Wird die Bestellung verständlich bestätigt?
Wenn der Zahlungsprozess verwirrend ist, hilft auch der schönste Shop nicht.
Baustelle 10: Kundenkonto und Login
Viele WooCommerce-Shops bieten Kundenkonten an. Dort können Nutzer Bestellungen ansehen, Adressen ändern, Downloads abrufen oder Passwörter zurücksetzen.
Auch dieser Bereich sollte geprüft werden.
Wichtig sind:
Login-Formular, Registrierung, Passwort vergessen, Bestellübersicht, Adressverwaltung, Downloads, Abmelden-Button und Fehlermeldungen.
Gerade Passwort-zurücksetzen-Funktionen sind oft unnötig kompliziert. Wenn Nutzer nicht mehr in ihr Konto kommen, entsteht Frust und Support-Aufwand.
Baustelle 11: Rechtstexte und Checkboxen
Im Checkout gibt es oft Checkboxen für AGB, Datenschutz oder Widerruf. Diese kleinen Elemente sind wichtig.
Prüfe:
Ist die Checkbox mit Tastatur erreichbar?
Ist der Text eindeutig zugeordnet?
Sind Links zu AGB und Datenschutz gut erreichbar?
Gibt es eine klare Fehlermeldung, wenn eine Pflicht-Checkbox fehlt?
Ist die Checkbox auch mobil gut antippbar?
Ein häufiger Fehler ist, dass Checkbox und Text optisch zusammengehören, technisch aber nicht sauber verbunden sind. Für Nutzer mit Hilfsmitteln kann das verwirrend sein.
Baustelle 12: Gutscheine und Aktionscodes
Gutscheinfelder wirken harmlos, können aber Probleme machen.
Prüfe:
Ist das Gutscheinfeld klar beschriftet?
Ist der Button eindeutig?
Erscheint eine verständliche Meldung, wenn der Code falsch ist?
Wird der Rabatt nachvollziehbar angezeigt?
Kann man einen Gutschein wieder entfernen?
Meldungen wie „Coupon invalid“ oder „Fehler“ wirken unprofessionell und helfen nicht weiter.
Baustelle 13: Fehlermeldungen im Shop
Fehlermeldungen sind einer der wichtigsten Punkte für Barrierefreiheit.
Ein Shop muss nicht nur sagen, dass etwas falsch ist. Er muss erklären, was zu tun ist.
Schlecht:
„Ungültige Eingabe.“
„Fehler.“
„Bitte prüfen.“
Besser:
„Bitte geben Sie Ihre Postleitzahl ein.“
„Diese E-Mail-Adresse ist nicht gültig.“
„Bitte wählen Sie zuerst eine Größe aus.“
„Dieses Produkt ist in der gewählten Variante nicht verfügbar.“
Gute Fehlermeldungen reduzieren Abbrüche. Sie helfen allen Kunden.
Baustelle 14: Mobile Ansicht
Viele WooCommerce-Käufe passieren über das Smartphone. Deshalb muss der Shop mobil wirklich funktionieren.
Prüfe:
Produktseite, Varianten, Bildergalerie, Warenkorb, Checkout, Zahlungsanbieter, Cookie-Banner, Menü, Filter und Kundenkonto.
Achte besonders auf:
zu kleine Buttons, überlappende Elemente, abgeschnittene Felder, schwer bedienbare Dropdowns, lange Checkout-Seiten und störende Popups.
Ein Shop, der mobil mühsam ist, verliert Kunden. Ganz unabhängig vom BFSG.
Baustelle 15: Tastaturbedienung
Ein einfacher Test zeigt viel: Lege die Maus weg und bediene den Shop nur mit der Tastatur.
Gehe den kompletten Kaufprozess durch:
Produkt suchen, Produktseite öffnen, Variante wählen, in den Warenkorb legen, Warenkorb prüfen, zur Kasse gehen, Formular ausfüllen, Zahlungsart wählen, Bestellung abschließen.
Prüfe dabei:
Ist der Fokus sichtbar?
Kommst du in einer logischen Reihenfolge durch die Seite?
Sind alle Buttons erreichbar?
Kannst du Popups schließen?
Bleibst du irgendwo hängen?
Wenn du den Kauf ohne Maus nicht durchführen kannst, ist das eine große Baustelle.
Baustelle 16: Fokus-Stile
Der Fokus zeigt, welches Element gerade aktiv ist. Ohne sichtbaren Fokus ist Tastaturbedienung fast unmöglich.
Viele Themes entfernen den Fokus, weil der Rahmen optisch stört. Das ist keine gute Idee.
Der Fokus sollte deutlich sichtbar sein bei:
Links, Buttons, Formularfeldern, Menüpunkten, Produktvarianten, Warenkorb-Aktionen, Checkout-Feldern und Zahlungsarten.
Ein sauberer Fokus sieht nicht schlecht aus. Er macht den Shop bedienbar.
Baustelle 17: Pagebuilder und WooCommerce-Templates
Viele Shops werden mit Elementor, Divi, Bricks oder anderen Pagebuildern gebaut. Zusätzlich werden WooCommerce-Templates angepasst.
Das kann sinnvoll sein, aber auch Probleme erzeugen.
Typische Risiken:
falsche Überschriftenstruktur,
Buttons ohne klare Namen,
Tabs und Akkordeons mit schlechter Tastaturbedienung,
Produktkarten ohne logische Reihenfolge,
zu viele verschachtelte Elemente,
Layouts, die mobil brechen.
Wenn du Produktseite, Warenkorb oder Checkout angepasst hast, solltest du besonders gründlich testen. Standard-WooCommerce ist eine Sache. Ein stark umgebauter Shop ist eine andere.
Baustelle 18: Plugins und Erweiterungen
WooCommerce lebt von Erweiterungen. Versand, Zahlung, Filter, Produktoptionen, Abos, Mitgliedschaften, Rechnungen, Checkout-Felder, Upsells, Popups, Bewertungen.
Jedes Plugin kann neue Barrieren erzeugen.
Prüfe besonders Plugins für:
Produktvarianten, Checkout-Felder, Filter, Zahlungsarten, Cookie-Banner, Popups, Produktbundles, Wunschlisten, Abos, Mitgliedschaften und Kurszugänge.
Installiere nicht blind jedes Plugin, das hübsch aussieht. Teste, ob es den Kaufprozess wirklich verbessert oder nur komplizierter macht.
Baustelle 19: Downloads und digitale Produkte
WooCommerce wird oft für digitale Produkte genutzt: E-Books, Vorlagen, Kurse, Dateien, Software, Mitgliedschaften.
Dann ist nicht nur der Kauf wichtig, sondern auch der Zugang danach.
Prüfe:
Sind Download-Links klar erkennbar?
Sind Dateien verständlich benannt?
Funktionieren Downloads im Kundenkonto?
Sind PDFs gut lesbar?
Ist der Mitgliederbereich bedienbar?
Sind Kursinhalte zugänglich?
Ein digitaler Kauf ist nicht abgeschlossen, wenn bezahlt wurde. Der Nutzer muss das Produkt auch nutzen können.
Baustelle 20: Automatische Accessibility-Plugins
Viele Shopbetreiber hoffen, dass ein Accessibility-Plugin alles löst.
Das kann unterstützen, aber es ist keine vollständige Lösung.
Ein Plugin kann vielleicht Kontraste anpassen, Schriftgrößen verändern oder bestimmte Hilfsfunktionen ergänzen. Es repariert aber nicht automatisch:
einen schlechten Checkout,
unklare Produktvarianten,
falsche Formularbeschriftungen,
unverständliche Fehlermeldungen,
nicht bedienbare Zahlungsfenster,
schlecht strukturierte Produktseiten.
Barrierefreiheit im WooCommerce-Shop muss am eigentlichen Kaufprozess ansetzen. Nicht nur an einer kleinen Bedienleiste am Rand.
Was du zuerst verbessern solltest
Wenn du nicht alles auf einmal schaffen kannst, fang mit den wichtigsten Bereichen an.
Priorität 1:
Produktseite, Varianten-Auswahl, Warenkorb, Checkout, Zahlungsarten, Fehlermeldungen und mobile Ansicht.
Priorität 2:
Kundenkonto, Login, Filter, Suche, Produktbilder, Alt-Texte und Rechtstexte.
Priorität 3:
PDFs, Blogbereich, Newsletter, Popups, Bewertungen und weitere Marketing-Elemente.
Arbeite nicht zuerst an kleinen dekorativen Dingen, wenn der Checkout noch Probleme macht. Der Kaufprozess ist das Herz deines Shops.
Einfacher Selbsttest für WooCommerce
Du kannst direkt heute einen ersten Test machen.
Öffne deinen Shop und versuche eine Bestellung nur mit der Tastatur durchzuführen. Die Maus bleibt weg.
Teste:
Produkt finden, Variante auswählen, in den Warenkorb legen, Warenkorb öffnen, Menge ändern, zur Kasse gehen, Felder ausfüllen, Versand wählen, Zahlung wählen, Bestellung abschließen.
Danach machst du dasselbe auf dem Smartphone.
Wenn du an einer Stelle hängenbleibst, hast du eine konkrete Baustelle gefunden.
Fazit: Bei WooCommerce zählt der komplette Kaufprozess
WooCommerce barrierefrei zu machen bedeutet nicht, nur ein Plugin zu installieren oder ein paar Alt-Texte einzutragen.
Es geht um den gesamten Einkaufsweg.
Von der Produktübersicht über Produktseite, Varianten, Warenkorb, Checkout, Zahlung, Bestätigung und Kundenkonto muss der Shop verständlich und bedienbar sein.
Mein praktischer Rat: Teste deinen Shop nicht wie ein Betreiber, sondern wie ein Kunde. Ohne Maus. Auf dem Smartphone. Mit falschen Eingaben im Formular. Mit einer Produktvariante, die ausgewählt werden muss. Mit einem echten Blick auf Fehlermeldungen und Zahlungswege.
Dann siehst du sehr schnell, wo die wichtigsten Baustellen liegen.
Ein barriereärmerer WooCommerce-Shop hilft nicht nur Menschen mit Behinderung. Er macht den Einkauf für alle einfacher. Und ein Shop, der einfacher zu bedienen ist, verkauft am Ende meistens auch besser.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.