WooCommerce und BFSG: Was Shopbetreiber ändern müssen

WooCommerce ist für viele kleine und mittlere Online-Shops die erste Wahl. Das System ist flexibel, lässt sich vergleichsweise einfach erweitern und funktioniert mit unzähligen Themes, Zahlungsanbietern und Plugins.

Genau diese Freiheit kann beim Thema Barrierefreiheit aber zum Problem werden.

Ein WooCommerce-Shop besteht schließlich nicht nur aus WooCommerce. Das Theme gestaltet die Produktseiten, ein Plugin verändert den Checkout, ein anderes ergänzt Produktvarianten und der Zahlungsprozess wird vielleicht über PayPal, Stripe oder Klarna abgewickelt. Dazu kommen Cookie-Banner, Newsletter-Popups, Filter, Kundenkonto und mobile Navigation.

Seit dem 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz, kurz BFSG, vollständig anwendbar. Für viele Shopbetreiber stellt sich deshalb nicht mehr die Frage, ob sie sich irgendwann mit Barrierefreiheit beschäftigen sollten. Sie müssen klären, ob ihr Shop betroffen ist und welche Bereiche überarbeitet werden müssen.

Betrifft das BFSG jeden WooCommerce-Shop?

Nicht jeder WooCommerce-Shop fällt automatisch unter das BFSG. Entscheidend ist unter anderem, an wen sich das Angebot richtet und wie groß das Unternehmen ist.

Besonders relevant sind Shops, die Produkte oder Dienstleistungen an private Verbraucher verkaufen. Der digitale Vorgang, bei dem ein Kunde ein Produkt auswählt, bestellt und bezahlt, gehört zum elektronischen Geschäftsverkehr.

Ein reiner B2B-Shop kann anders einzuordnen sein. Dabei reicht es allerdings nicht unbedingt, irgendwo klein „nur für Gewerbekunden“ zu schreiben. Das Angebot und der Bestellprozess sollten tatsächlich ausschließlich auf Geschäftskunden ausgerichtet sein.

Außerdem gibt es eine Ausnahme für Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen. Darunter können auch sehr kleine Shopbetreiber fallen.

Als Kleinstunternehmen gilt grundsätzlich ein Unternehmen, das:

• weniger als zehn Personen beschäftigt und
• entweder höchstens 2 Millionen Euro Jahresumsatz erzielt oder
• eine Jahresbilanzsumme von höchstens 2 Millionen Euro hat.

Wer diese Grenzen erfüllt, kann bei der Dienstleistung des Online-Handels von der BFSG-Pflicht ausgenommen sein.

Trotzdem sollte man genauer hinsehen. Wer selbst bestimmte vom BFSG erfasste Produkte herstellt, importiert oder unter eigener Marke vertreibt, kann zusätzlich Pflichten als Hersteller, Einführer oder Händler haben. Die Ausnahme für Dienstleistungen löst nicht automatisch jede mögliche Produktpflicht.

Nicht WooCommerce ist verantwortlich, sondern der Shopbetreiber

Ein häufiger Denkfehler lautet:

„WooCommerce ist doch eine bekannte Software. Wenn das Plugin aktuell ist, wird mein Shop schon barrierefrei sein.“

So einfach ist es leider nicht.

WooCommerce liefert die technische Basis. Wie barrierefrei der fertige Shop ist, hängt aber von vielen weiteren Faktoren ab:

• dem verwendeten WordPress-Theme,
• dem Pagebuilder,
• den installierten Erweiterungen,
• den eigenen Produktinhalten,
• dem Checkout-Aufbau,
• den Zahlungsanbietern,
• dem Cookie-Banner,
• den Formularen und
• den individuellen Anpassungen.

Zwei Shops können dieselbe WooCommerce-Version nutzen und trotzdem völlig unterschiedlich abschneiden. Der eine ist sauber strukturiert und mit Tastatur bedienbar. Beim anderen sind Produktvarianten nicht erreichbar und der Checkout bricht auf dem Smartphone auseinander.

Der Betreiber muss deshalb den fertigen Shop prüfen – nicht nur die einzelnen Programme, aus denen er gebaut wurde.

Welche Bereiche des Shops müssen angepasst werden?

Beim BFSG geht es nicht nur um die Startseite oder um ein kleines Barrierefreiheits-Widget am Bildschirmrand. Entscheidend ist der tatsächliche Einkaufsvorgang.

Ein Kunde muss Produkte finden, Informationen verstehen, Varianten auswählen, den Warenkorb bedienen, seine Daten eingeben, eine Zahlungsart wählen und die Bestellung abschließen können.

Dazu gehören insbesondere:

• Navigation und Produktsuche,
• Kategorien und Filter,
• Produktseiten,
• Produktvarianten,
• Warenkorb,
• Checkout,
• Zahlungsfunktionen,
• Kundenkonto,
• Bestellbestätigung,
• Kontakt- und Supportmöglichkeiten.

Auch vorgeschaltete Elemente wie Cookie-Banner oder Popups dürfen diesen Weg nicht blockieren.

1. Theme und Pagebuilder überprüfen

Das Theme bildet die Grundlage des Shops. Es beeinflusst unter anderem:

• Navigation,
• Schriftgrößen,
• Farbkontraste,
• Buttons,
• Produktkarten,
• Fokusmarkierungen,
• Formularfelder,
• mobile Darstellung.

Ein modernes Premium-Theme ist nicht automatisch barrierefrei. Das gilt auch dann, wenn in der Beschreibung Begriffe wie „Accessibility Ready“ oder „WCAG Friendly“ stehen.

Solche Angaben können ein positives Zeichen sein. Sie garantieren aber nicht, dass der fertige Shop alle Anforderungen erfüllt.

Wer zusätzlich Elementor, Divi oder einen anderen Pagebuilder verwendet, sollte besonders auf die Struktur achten. Pagebuilder machen es sehr einfach, Überschriften nur nach der gewünschten Größe auszuwählen oder anklickbare Elemente aus normalen Containern zu bauen. Optisch funktioniert das meistens. Für Tastatur und Screenreader kann die technische Umsetzung trotzdem ungeeignet sein.

Shopbetreiber sollten deshalb nicht nur prüfen, wie eine Seite aussieht, sondern auch, wie sie aufgebaut und bedient wird.

2. Den gesamten Shop mit der Tastatur testen

Einer der besten ersten Tests kostet nichts: Lege die Maus zur Seite und versuche, deinen Shop nur mit der Tastatur zu bedienen.

Mit der Tab-Taste springst du vorwärts. Mit Shift und Tab gehst du zurück. Links und Buttons werden normalerweise mit Enter aktiviert. Checkboxen und bestimmte Schaltflächen funktionieren mit der Leertaste. Escape sollte geöffnete Menüs und Dialogfenster schließen.

Teste den kompletten Ablauf:

1. Ein Produkt über das Menü oder die Suche finden.
2. Die Produktseite öffnen.
3. Eine Variante auswählen.
4. Das Produkt in den Warenkorb legen.
5. Die Menge ändern.
6. Den Checkout öffnen.
7. Alle Felder ausfüllen.
8. Versand- und Zahlungsart auswählen.
9. Die Bestellung bis zum letzten Schritt durchführen.

Bleibst du an irgendeiner Stelle hängen, hast du eine konkrete Baustelle gefunden.

Typische Probleme sind Dropdown-Menüs, Produktfilter, individuell gestaltete Variantenfelder, Popups und eingebettete Zahlungsfenster.

3. Sichtbaren Fokus einrichten

Wer mit der Tastatur arbeitet, muss erkennen können, welches Element gerade ausgewählt ist. Diese sichtbare Markierung nennt man Tastaturfokus.

Viele Themes entfernen die Fokusmarkierung aus optischen Gründen. Dann bewegt sich der Nutzer zwar technisch durch die Seite, sieht aber nicht, wo er gerade ist.

Das ist ungefähr so, als würde man den Mauszeiger unsichtbar machen.

Der Fokus sollte bei allen interaktiven Elementen klar erkennbar sein:

• Links,
• Menüpunkte,
• Buttons,
• Produktvarianten,
• Formularfelder,
• Checkboxen,
• Zahlungsarten,
• Filter,
• Warenkorb-Funktionen.

Eine gut sichtbare Umrandung, ein Schatten oder eine deutliche Hintergrundänderung kann bereits ausreichen. Wichtig ist, dass sich der Fokus klar vom normalen Zustand unterscheidet und nicht hinter einem festen Header, Cookie-Banner oder Chatfenster verschwindet.

4. Produktseiten verständlich aufbauen

Eine Produktseite sollte nicht nur schön aussehen. Kunden müssen alle wichtigen Informationen schnell finden und verstehen können.

Dazu gehören:

• Produktname,
• Preis,
• Verfügbarkeit,
• Lieferzeit,
• Varianten,
• Beschreibung,
• wesentliche Eigenschaften,
• Versandkosten,
• Rückgabeinformationen,
• Kaufbutton.

Unklare Tabs, winzige Preisinformationen und versteckte Produktdetails können den Einkauf erschweren.

Auch die Reihenfolge spielt eine Rolle. Ein Screenreader oder eine Tastaturnavigation sollte die Produktinformationen in einer nachvollziehbaren Abfolge erreichen.

Eine Produktseite muss nicht besonders schlicht sein. Sie sollte aber logisch aufgebaut sein und darf wichtige Informationen nicht nur über Position, Farbe oder ein Bild vermitteln.

5. Produktvarianten zugänglich gestalten

Produktvarianten gehören zu den häufigsten Problemen in WooCommerce-Shops.

Die Standardauswahl wird oft durch schönere Farbfelder, Bilder oder kleine Symbolbuttons ersetzt. Das sieht ansprechend aus, funktioniert aber nicht immer mit Tastatur oder Screenreader.

Prüfe deshalb:

• Sind alle Varianten mit der Tastatur erreichbar?
• Wird der Name der Variante verständlich ausgegeben?
• Ist erkennbar, welche Variante ausgewählt wurde?
• Gibt es neben Farben auch eine textliche Bezeichnung?
• Wird ein geänderter Preis verständlich angezeigt?
• Erscheint eine klare Meldung, wenn keine Variante ausgewählt wurde?
• Funktioniert die Auswahl auf dem Smartphone?

Ein blauer Kreis allein darf nicht die einzige Information für die Farbe „Blau“ sein. Gleiches gilt für Größen, Materialien oder andere Eigenschaften.

6. Produktbilder mit Alt-Texten versehen

Produktbilder sind für die Kaufentscheidung besonders wichtig. Menschen, die Bilder nicht sehen können, brauchen eine sinnvolle textliche Alternative.

Ein guter Alt-Text beschreibt die wichtigsten sichtbaren Produktmerkmale.

Beispiel:

„Schwarzer Lederrucksack mit silbernen Reißverschlüssen und gepolstertem Laptopfach.“

Nicht hilfreich wären:

„Produktbild“
„Rucksack kaufen günstig Shop“
„IMG_4821“

Wenn mehrere Bilder unterschiedliche Ansichten zeigen, sollten auch die Alt-Texte unterschiedlich sein:

„Rucksack von vorne.“
„Seitenansicht mit Flaschenhalter.“
„Geöffnetes Hauptfach mit Laptopfach.“

Dekorative Elemente brauchen dagegen nicht immer eine Beschreibung. Der Alt-Text sollte Informationen liefern und nicht einfach jedes Bild mit Keywords füllen.

7. Farben und Kontraste korrigieren

WooCommerce-Themes verwenden häufig dezente Farben. Das kann elegant wirken, führt aber schnell zu schlechten Kontrasten.

Besonders kritisch sind:

• Preise,
• Lieferhinweise,
• Links,
• Buttons,
• Rabattangaben,
• Formularbeschriftungen,
• Fehlermeldungen,
• Platzhaltertexte,
• deaktivierte Elemente.

Hellgraue Schrift auf weißem Hintergrund ist für viele Menschen schwer lesbar. Weiße Schrift auf einem hellen Button kann ebenfalls problematisch sein.

Auch Informationen dürfen nicht ausschließlich durch Farbe vermittelt werden.

Wenn verfügbare Varianten grün und ausverkaufte Varianten rot dargestellt werden, sollte zusätzlich ein Text oder Symbol erklären, was der Zustand bedeutet.

Kontrast sollte nicht nur auf der Startseite geprüft werden. Warenkorb, Checkout und Kundenkonto sind mindestens genauso wichtig.

8. Warenkorb klarer machen

Der Warenkorb ist ein zentraler Schritt im Einkauf. Hier sollte sofort erkennbar sein:

• Welche Produkte wurden ausgewählt?
• Welche Variante befindet sich im Warenkorb?
• Wie hoch ist die Menge?
• Wie lässt sich die Menge ändern?
• Wie kann ein Produkt entfernt werden?
• Wie setzen sich die Kosten zusammen?
• Wie geht es zum Checkout?

Kleine X-Symbole ohne Beschriftung sind ungünstig. Ein Screenreader sollte erkennen können, welches Produkt durch den Button entfernt wird.

Auch Plus- und Minus-Schaltflächen für die Menge brauchen eine verständliche Bezeichnung.

Wenn sich der Warenkorb nach einer Änderung aktualisiert, sollte diese Änderung für Hilfstechnologien wahrnehmbar sein. Es reicht nicht immer, nur kurz eine optische Animation einzublenden.

9. Checkout gründlich überarbeiten

Der Checkout ist der wichtigste Bereich des Shops. Hier entscheidet sich, ob ein Kunde den Einkauf abschließen kann.

Prüfe jedes Feld:

• Hat es eine sichtbare Beschriftung?
• Ist klar, ob es verpflichtend oder freiwillig ist?
• Ist die Reihenfolge logisch?
• Funktioniert das Feld mit Tastatur?
• Wird auf dem Smartphone die passende Tastatur angezeigt?
• Ist die Autovervollständigung möglich?
• Bleiben Eingaben nach einem Fehler erhalten?

Platzhaltertexte sind kein vollständiger Ersatz für Feldbeschriftungen. Sobald der Nutzer etwas eintippt, verschwindet der Platzhalter. Dann ist nicht mehr klar, welche Angabe in das Feld gehörte.

Auch der finale Bestellbutton sollte eindeutig formuliert sein. Der Kunde muss verstehen, dass er mit diesem Schritt eine zahlungspflichtige Bestellung auslöst.

10. Fehlermeldungen verständlicher schreiben

WooCommerce kann bei fehlerhaften Eingaben Meldungen anzeigen. Durch Themes, Übersetzungen oder Checkout-Plugins fallen diese aber teilweise sehr allgemein aus.

Meldungen wie „Ungültige Eingabe“ oder „Es ist ein Fehler aufgetreten“ helfen wenig.

Besser ist eine konkrete Erklärung:

„Bitte geben Sie eine gültige E-Mail-Adresse ein.“
„Bitte tragen Sie Ihre Postleitzahl ein.“
„Bitte wählen Sie eine Zahlungsart aus.“
„Bitte akzeptieren Sie die Allgemeinen Geschäftsbedingungen.“

Fehler sollten direkt beim jeweiligen Feld erscheinen. Zusätzlich kann eine Zusammenfassung am Anfang des Formulars helfen.

Wichtig ist außerdem, dass Fehler nicht nur über eine rote Umrandung dargestellt werden. Farbe kann die Meldung unterstützen, aber nicht ersetzen.

11. Zahlungsarten und externe Anbieter prüfen

Der eigene Checkout kann gut funktionieren, während der Zahlungsprozess beim externen Anbieter Probleme verursacht.

Das betrifft zum Beispiel:

• PayPal,
• Stripe,
• Klarna,
• Mollie,
• Amazon Pay,
• Kreditkartenfelder,
• externe Authentifizierungsfenster.

Prüfe den vollständigen Weg bis zur Rückkehr in den Shop.

Kann die Zahlungsart mit Tastatur ausgewählt werden? Sind eingebettete Felder beschriftet? Lässt sich ein geöffnetes Fenster wieder schließen? Ist klar, ob die Zahlung erfolgreich war?

Shopbetreiber haben nicht auf jedes Detail eines externen Dienstes direkten Einfluss. Trotzdem gehört der Anbieter zum Einkaufserlebnis. Deshalb sollte Barrierefreiheit bereits bei der Auswahl von Zahlungs- und Checkout-Diensten berücksichtigt werden.

12. Kundenkonto und Anmeldung nicht vergessen

Nach dem Kauf endet die Nutzung des Shops nicht immer.

Im WooCommerce-Kundenkonto können Kunden:

• Bestellungen ansehen,
• Adressen ändern,
• Rechnungen herunterladen,
• digitale Produkte abrufen,
• Passwörter ändern,
• Rückgaben verfolgen.

Auch dieser Bereich muss gut bedienbar sein.

Besonders häufig gibt es Probleme bei Login, Registrierung und „Passwort vergessen“. Unklare Fehlermeldungen, schlecht beschriftete Felder oder schwer erkennbare Links können Nutzer aussperren.

Wer digitale Produkte verkauft, sollte auch den Download und die anschließende Nutzung prüfen. Ein barrierefreier Kauf hilft wenig, wenn das gekaufte Dokument oder der Kursbereich danach nicht zugänglich ist.

13. Mobile Nutzung ernst nehmen

Ein großer Teil der Bestellungen wird über Smartphones durchgeführt. Trotzdem werden viele Shops hauptsächlich am Desktop gebaut.

Auf kleinen Bildschirmen entstehen schnell neue Barrieren:

• zu kleine Buttons,
• schwer bedienbare Varianten,
• überlappende Formularfelder,
• abgeschnittene Texte,
• störende Popups,
• verdeckte Bestellbuttons,
• zu breite Tabellen,
• unübersichtliche Checkout-Seiten.

Teste deshalb auf einem echten Smartphone und nicht nur in der Vorschau des Pagebuilders.

Gehe den gesamten Einkauf durch. Produkt auswählen, Warenkorb öffnen, Checkout ausfüllen, Zahlungsart wählen und Bestätigung ansehen.

Eine mobile Seite, die nur optisch ordentlich aussieht, ist noch nicht automatisch gut bedienbar.

14. Cookie-Banner und Popups anpassen

Ein Cookie-Banner erscheint häufig noch vor dem eigentlichen Shop. Wenn es nicht bedienbar ist, spielt die Qualität des restlichen Shops kaum noch eine Rolle.

Prüfe:

• Sind alle Auswahlmöglichkeiten per Tastatur erreichbar?
• Ist der Fokus sichtbar?
• Sind Annehmen und Ablehnen klar erkennbar?
• Kann das Einstellungsfenster geschlossen werden?
• Verdeckt das Banner auf dem Smartphone keine wichtigen Elemente?

Ähnliches gilt für Newsletter-Popups, Rabattfenster, Chat-Widgets und eingeblendete Warenkörbe.

Ein Popup darf Nutzer nicht in einer Endlosschleife festhalten. Nach dem Schließen sollte der Fokus an eine sinnvolle Stelle zurückspringen.

15. Suche, Filter und Sortierung prüfen

Große Shops sind ohne Suche und Filter kaum nutzbar. Gerade diese Elemente werden aber häufig durch Drittanbieter-Plugins ergänzt.

Teste:

• Ist das Suchfeld beschriftet?
• Sind Suchvorschläge mit Tastatur erreichbar?
• Kann man Filter auswählen und wieder entfernen?
• Ist sichtbar, welche Filter aktiv sind?
• Funktionieren Preisschieber ohne Maus?
• Sind Farbfelder textlich benannt?
• Ist die Sortierung verständlich?

Ein Filter, der nur aus bunten Punkten besteht, ist nicht ausreichend. Auch ein Preisregler, der ausschließlich durch Ziehen mit der Maus funktioniert, kann eine Barriere sein.

16. Überschriften und Seitenstruktur korrigieren

WooCommerce und Pagebuilder erzeugen teilweise komplexe Seitenstrukturen. Auf einer Produktseite können Produktname, Beschreibung, Zusatzinformationen, Bewertungen und verwandte Produkte durcheinander ausgezeichnet sein.

Eine sinnvolle Überschriftenstruktur hilft bei der Orientierung.

Der Produktname sollte normalerweise die zentrale Überschrift der Seite sein. Weitere Bereiche wie Beschreibung, Bewertungen und ähnliche Produkte folgen darunter logisch gegliedert.

Überschriften sollten nicht nur wegen ihrer Schriftgröße ausgewählt werden. Wenn eine H4 optisch besser aussieht als eine H2, sollte das Design angepasst werden – nicht die inhaltliche Struktur.

17. PDFs und Produktinformationen prüfen

Viele Shops stellen zusätzliche Dateien bereit:

• Datenblätter,
• Bedienungsanleitungen,
• Größentabellen,
• Preislisten,
• Zertifikate,
• Montageanleitungen.

Diese Dokumente sollten nicht nur eingescannt sein. Wichtige Inhalte brauchen eine sinnvolle Struktur, echte Texte, passende Überschriften und Alternativtexte für relevante Bilder.

Zentrale Produktinformationen sollten möglichst auch direkt auf der Produktseite stehen. Ein schlecht lesbares PDF sollte nicht die einzige Möglichkeit sein, wichtige Maße, Eigenschaften oder Sicherheitshinweise zu erfahren.

18. Informationen zur Barrierefreiheit bereitstellen

Betroffene Dienstleistungserbringer müssen Informationen darüber zugänglich machen, wie ihre Dienstleistung die Barrierefreiheitsanforderungen erfüllt.

Umgangssprachlich wird dafür häufig der Begriff „Barrierefreiheitserklärung“ verwendet. Für private Unternehmen nach dem BFSG geht es jedoch um konkrete Informationen zur angebotenen Dienstleistung und zur Umsetzung der Anforderungen.

Die Information sollte unter anderem verständlich beschreiben:

• welche Dienstleistung angeboten wird,
• wie der Bestellprozess funktioniert,
• welche Barrierefreiheitsmaßnahmen umgesetzt wurden,
• welche Anforderungen dabei berücksichtigt werden,
• welche Marktüberwachungsbehörde zuständig ist.

Diese Angaben können beispielsweise in den AGB oder auf einer deutlich erreichbaren eigenen Seite bereitgestellt werden. Sie müssen selbst barrierefrei zugänglich sein.

Ein allgemeiner Satz wie „Unser Shop ist barrierefrei“ dürfte dafür kaum ausreichen.

19. Overlay-Tools nicht als Komplettlösung betrachten

Accessibility-Overlays versprechen oft, eine Website mit wenigen Klicks barrierefrei zu machen. Dazu wird ein kleines Menü eingeblendet, über das Nutzer Kontrast, Schriftgröße oder andere Darstellungen verändern können.

Solche Funktionen können im Einzelfall hilfreich sein. Sie lösen aber nicht automatisch die eigentlichen Probleme des Shops.

Ein Overlay repariert nicht zuverlässig:

• unbedienbare Produktvarianten,
• fehlende Formularbeschriftungen,
• unlogische Fokusreihenfolgen,
• schlechte Fehlermeldungen,
• blockierende Popups,
• problematische Zahlungsfenster,
• unzugängliche PDFs.

Barrierefreiheit muss im Shop selbst umgesetzt werden. Ein zusätzliches Werkzeug kann ergänzen, aber nicht die technische und inhaltliche Überarbeitung ersetzen.

20. Barrierefreiheit dauerhaft pflegen

Ein einmaliger Test reicht bei WooCommerce nicht aus.

Der Shop verändert sich ständig:

• neue Produkte werden angelegt,
• neue Bilder hochgeladen,
• Plugins aktualisiert,
• Zahlungsarten ergänzt,
• Checkout-Felder verändert,
• Kampagnen und Popups eingebaut.

Jede Änderung kann neue Barrieren verursachen.

Deshalb sollten einfache Regeln in den Shop-Alltag aufgenommen werden:

Neue Produktbilder erhalten sinnvolle Alt-Texte.
Neue Plugins werden vor dem Einsatz getestet.
Änderungen am Checkout werden mit Tastatur und Smartphone geprüft.
Neue Farben werden auf Kontrast kontrolliert.
Wichtige Nutzerwege werden regelmäßig wiederholt.

Barrierefreiheit ist kein einmaliger Schalter, sondern ein Teil der laufenden Qualitätssicherung.

In welcher Reihenfolge sollten Shopbetreiber vorgehen?

Wer viele Baustellen findet, sollte nicht planlos überall gleichzeitig anfangen.

Höchste Priorität

Zuerst kommen alle Funktionen, die für den Kaufabschluss notwendig sind:

• Navigation,
• Produktsuche,
• Produktvarianten,
• Warenkorb,
• Checkout,
• Zahlungsarten,
• Fehlermeldungen,
• Bestellbestätigung.

Zweite Priorität

Danach folgen:

• Kundenkonto,
• Filter,
• Produktbilder und Alt-Texte,
• mobile Optimierung,
• Kontaktmöglichkeiten,
• Cookie-Banner und Popups.

Dritte Priorität

Anschließend können weitere Inhalte systematisch verbessert werden:

• Blogartikel,
• ältere Produktbeschreibungen,
• PDFs,
• Downloads,
• Marketing-Landingpages,
• Newsletter-Formulare.

So wird zuerst das repariert, was Kunden tatsächlich am Kauf hindert.

Praktischer WooCommerce-Selbsttest

Mit diesem kurzen Ablauf findest du viele Probleme:

1. Öffne den Shop in einem privaten Browserfenster.
2. Bediene das Cookie-Banner ohne Maus.
3. Suche ein Produkt nur mit der Tastatur.
4. Wähle eine Produktvariante aus.
5. Lege das Produkt in den Warenkorb.
6. Ändere die Menge.
7. Öffne den Checkout.
8. Fülle die Felder aus.
9. Erzeuge absichtlich eine Fehlermeldung.
10. Wähle Versand und Zahlung aus.
11. Wiederhole den Ablauf auf einem Smartphone.
12. Prüfe anschließend Kundenkonto und Bestellbestätigung.

Notiere jedes Problem konkret. Statt „Checkout nicht barrierefrei“ besser:

„Die Zahlungsart kann mit der Tab-Taste erreicht, aber nicht ausgewählt werden.“

Oder:

„Nach einer Fehlermeldung springt der Fokus an den Anfang der Seite und nicht zum fehlerhaften Feld.“

Mit solchen Angaben kann ein Entwickler deutlich besser arbeiten.

Reicht ein automatischer Test?

Automatische Prüfprogramme sind hilfreich. Sie finden unter anderem manche fehlenden Alt-Texte, Kontrastprobleme, leere Buttons und strukturelle Fehler.

Sie können aber nicht zuverlässig beurteilen:

• ob eine Fehlermeldung verständlich ist,
• ob die Produktvarianten logisch bedienbar sind,
• ob der Checkout angenehm funktioniert,
• ob die Reihenfolge der Elemente sinnvoll ist,
• ob ein externer Zahlungsprozess Nutzer verwirrt.

Ein guter Test besteht deshalb aus mehreren Teilen:

• automatischer Prüfung,
• Tastaturtest,
• mobilem Test,
• Screenreader-Grundtest,
• realistischen Kaufabläufen.

Fazit: Beim BFSG zählt nicht das Plugin, sondern der fertige Einkauf

WooCommerce kann die Grundlage für einen barriereärmeren Online-Shop bilden. Die Installation allein erfüllt aber keine gesetzlichen Anforderungen.

Entscheidend ist der fertige Shop mit allen Themes, Erweiterungen, Produktinhalten und externen Diensten.

Kunden müssen ein Produkt finden, verstehen, auswählen, bezahlen und anschließend nutzen können. Und zwar möglichst unabhängig davon, ob sie eine Maus, Tastatur, einen Screenreader oder ein anderes Hilfsmittel verwenden.

Shopbetreiber sollten deshalb nicht nur die Startseite verschönern oder ein Accessibility-Widget installieren. Sie sollten den kompletten Einkaufsvorgang prüfen.

Der beste Einstieg ist erstaunlich einfach: Maus weglegen, Smartphone nehmen und eine echte Testbestellung durchführen.

Dabei zeigt sich sehr schnell, wo die größten Probleme liegen.

Wer diese Stellen Schritt für Schritt verbessert, erfüllt nicht nur Anforderungen des BFSG. Der Shop wird gleichzeitig verständlicher, zuverlässiger und leichter zu bedienen. Und davon profitieren am Ende alle Kunden.

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