Barrierefreier Online-Shop: Die komplette Checkliste

Wenn du einen Online-Shop betreibst, musst du seit Juni 2025 BFSG-konform sein. Dieser Artikel ist deine praxisorientierte Checkliste — Schritt für Schritt, sortiert nach Priorität. Hak einfach ab, was bei dir schon stimmt, und arbeite den Rest der Reihe nach ab.

Shop-System-spezifische Hinweise

WooCommerce (WordPress)

WooCommerce selbst ist grundsätzlich barrierefrei, ABER: Das hängt stark vom verwendeten Theme ab. Viele kommerzielle Themes haben BFSG-Probleme. Empfehlung:

• Theme auf WCAG-Konformität prüfen (im Theme-Marketplace nachlesen)
• Plugins wie "WP Accessibility" installieren
• Produktbilder beim Hochladen immer mit alt-Texten versehen (Mediathek)
• Custom Post Types prüfen ob semantisch korrekt

Shopify

Shopify hat native Accessibility-Features, die Standardthemes sind WCAG-kompatibel. Problempunkte entstehen oft durch:

• Custom Apps die nicht barrierefrei sind (Review-Apps, Pop-ups)
• Custom Liquid-Code vom Shop-Betreiber
• Farb-Customizing ohne Kontrast-Check

Magento / Shopware

Komplexere Systeme mit vielen Erweiterungs-Möglichkeiten. Hier sollte eine professionelle Accessibility-Audit durchgeführt werden, bevor der Shop live geht. Die Implementierungsqualität variiert stark je nach Agentur.

Eigenentwickelte Shops

Hier liegt die volle Verantwortung bei dir. Ein Developer ohne Accessibility-Erfahrung produziert fast immer Verstöße. Empfehlung: Developer auf WCAG schulen oder externe Audit.

Wie du mit einem schnellen Selbsttest startest

Bevor du eine Agentur beauftragst oder dich selbst in WCAG vertiefst, brauchst du einen Überblick über den aktuellen Zustand. Ein strukturierter Selbsttest zeigt dir in wenigen Stunden, wo die größten Hürden liegen:

1. Tastaturtest: Öffne deinen Shop und bediene ihn komplett ohne Maus. Kannst du alle Links anklicken, Formulare ausfüllen und Buttons aktivieren? Sichtbar, wo der Fokus gerade ist?
2. Zoom-Test: Vergrößere den Browser auf 200 Prozent. Bleibt die Bedienung flüssig oder überlappen sich Elemente?
3. Farbkontrast: Nutze ein kostenloses Tool wie WAVE oder Lighthouse (in Chrome DevTools). Es zeigt dir sofort, welche Texte zu hell sind.
4. Screenreader: Wenn dein Budget es erlaubt, installiere einen kostenlosen Reader wie NVDA (Windows) und lausche einer Seite ab.

Diese vier Tests decken bereits 70 Prozent der typischen Fehler ab und kosten kaum Zeit. Notiere dir, wo es hakt, und du hast eine priorisierte Liste für die Umsetzung.

Von der Checkliste zur Umsetzung: Wer macht was

Eine BFSG-Checkliste ist nur so wertvoll, wie sie umgesetzt wird. Hier ist klar, wer welche Aufgaben übernehmen sollte:

• Shop-Admin (du oder dein Team): Textalternativen für Bilder, Meta-Beschreibungen, Überschriften-Struktur, Linktext-Formulierungen.
• Developer: HTML-Semantik, Fokus-Reihenfolge, ARIA-Labels, Formular-Validierung, Tastatur-Navigation.
• Design: Farbkontraste, lesbare Schriftgrößen, Abstraktion von reinen Farbcodes, Platzhalter durch echte Labels ersetzen.
• QA / Testing: Manuelle Tests mit Screenreader, Tastatur und Zoom; regelmäßige Lighthouse-Scans.

Oft sitzt das Wissen verteilt. Ein BFSG-Kickoff, in dem jede Rolle ihre Verantwortung versteht, spart Rückfragen und reduplizierte Arbeit. Besonders wichtig: Developer und Designer müssen wissen, dass BFSG kein Nischen-Feature ist, sondern Teil der Standard-QA.

Wartung und regelmäßige Überprüfung

Barrierefreiheit ist kein Projekt, das nach dem Launch erledigt ist. Jedes Update, jedes neue Theme oder Plugin kann neue Fehler einführen. Daher:

• Monatlich (5 bis 10 Min.): Automatisierte Scans mit Lighthouse oder WAVE durchlaufen.
• Nach jedem Relaunch: Manueller Test mit Tastatur und Screenreader vor Go-Live.
• Quartal: Ein fokussierter Audit auf Checkout, Login und Suchfunktion (die drei umsatzkritischsten Zonen).
• Bei Beschwerden: Nicht ignorieren. Jede Barrierefreiheits-Reklamation ist ein Signal für einen echten Fehler.

Integriere die Checks in deinen Entwicklungsprozess. Wenn BFSG-Tests erst nach dem Relaunch stattfinden, ist es zu spät.

Bilder, Alt-Texte und visuelle Inhalte richtig auszeichnen

Produktbilder tragen im Online-Shop die Hauptlast der Information, und genau deshalb fallen sie beim Thema Barrierefreiheit am häufigsten durch. Ein Alt-Text wie "Bild1" oder ein leeres Attribut hilft niemandem, der mit Screenreader einkauft. Für Produktfotos gilt: Beschreibe, was tatsächlich zu sehen ist und was für eine Kaufentscheidung relevant ist — Farbe, Material, Besonderheiten. Ein Alt-Text wie "Rucksack aus Segeltuch, dunkelblau, mit braunen Lederriemen" liefert echten Mehrwert, während "Rucksack" kaum über den Produktnamen hinausgeht.

Bei dekorativen Bildern, etwa Trennlinien, Hintergrundmustern oder rein gestalterischen Icons, gilt die umgekehrte Regel: Sie bekommen ein leeres alt-Attribut, damit der Screenreader sie überspringt und den Nutzer nicht mit bedeutungslosen Ansagen aufhält. Wer hier stattdessen den Dateinamen einträgt, produziert Textmüll, der jede Seite verlangsamt und die eigentlichen Produktinformationen im Rauschen untergehen lässt.

Komplexer wird es bei Größentabellen, Infografiken oder Montageanleitungen als Bild. Ein einzelner Alt-Text kann eine ganze Tabelle nicht sinnvoll wiedergeben. Hier braucht es entweder eine zusätzliche Textversion direkt auf der Seite oder einen längeren Beschreibungstext, der über einen sichtbaren Link erreichbar ist. Shops, die Größentabellen nur als Bild einbinden, schließen damit einen Teil ihrer Kundschaft von einer kaufentscheidenden Information aus.

Auch Icons ohne begleitenden Text sind ein Dauerthema: ein Warenkorb-Symbol, ein Herz für die Wunschliste oder ein Lupe-Icon für die Suche müssen entweder einen sichtbaren Text oder zumindest einen versteckten, für Screenreader lesbaren Titel besitzen. Sonst bleibt unklar, welche Funktion sich hinter dem Symbol verbirgt, besonders wenn mehrere ähnliche Icons nebeneinander stehen.

Formulare, Fehlermeldungen und Pflichtfelder verständlich gestalten

Checkout-Formulare entscheiden direkt über Umsatz, und sie sind zugleich der Bereich, in dem Barrieren am teuersten werden. Jedes Eingabefeld braucht ein sichtbares, programmatisch verknüpftes Label — nicht nur einen Platzhaltertext, der beim Klick ins Feld verschwindet. Platzhalter allein sind keine Label: Sobald ein Nutzer zu tippen beginnt, ist die Information weg, und wer mit Screenreader arbeitet, bekommt oft gar keinen Feldnamen vorgelesen.

Pflichtfelder müssen eindeutig markiert sein, und diese Markierung darf nicht allein über Farbe funktionieren. Ein rotes Sternchen ohne Text dahinter ist für farbenblinde Nutzer und für Screenreader gleichermaßen unsichtbar. Besser ist eine Kombination aus Symbol und Wort, etwa "Pflichtfeld" im Label oder in einem zusätzlichen Hinweistext am Formularanfang.

Bei Fehlermeldungen entscheidet sich, ob ein Formular überhaupt abschließbar ist. Eine allgemeine Meldung am oberen Seitenrand wie "Bitte prüfen Sie Ihre Eingaben" zwingt Screenreader-Nutzer dazu, jedes Feld einzeln durchzugehen, um den Fehler zu finden. Deutlich besser: Die Fehlermeldung steht direkt am betroffenen Feld, ist mit ihm programmatisch verknüpft und beschreibt konkret, was fehlt oder falsch ist, etwa "E-Mail-Adresse: Zeichen @ fehlt" statt nur "ungültig".

Nach dem Absenden eines fehlerhaften Formulars sollte der Fokus automatisch zur ersten Fehlermeldung springen, statt einfach oben auf der Seite stehen zu bleiben. Sinnvoll ist außerdem, Autocomplete-Attribute für Standardfelder wie Name, Adresse oder Zahlungsdaten zu setzen — das beschleunigt das Ausfüllen für alle Nutzer, hilft aber besonders Menschen, die auf Sprachsteuerung oder motorische Hilfsmittel angewiesen sind.

Farbkontraste, Schriftgrößen und Zoom-Verhalten testen

Kontraste zwischen Text und Hintergrund entscheiden darüber, ob ein Shop für Menschen mit Sehschwäche überhaupt lesbar ist. Hellgraue Schrift auf weißem Grund, ein beliebtes Stilmittel für "dezente" Zusatzinformationen wie Lieferzeiten oder Artikelnummern, ist für viele Nutzer schlicht unlesbar. Prüfe insbesondere Preisangaben, Rabattlabels und Call-to-Action-Buttons, denn genau dort führt ein schwacher Kontrast direkt zu entgangenen Verkäufen.

Farbe allein darf außerdem nie die einzige Information tragen. Wenn ein ausverkaufter Artikel nur durch eine graue statt grüne Fläche markiert wird, bleibt das für farbenblinde Nutzer unsichtbar. Ergänze Text oder Icons: "Nicht verfügbar" statt nur ein Farbwechsel, ein durchgestrichener Preis mit Text statt nur roter Schrift.

Auch das Zoomverhalten gehört auf jede Prüfliste. Wenn Nutzer die Seite im Browser auf 200 Prozent vergrößern, sollten Inhalte weiterhin lesbar und Funktionen weiterhin bedienbar bleiben, ohne dass Text abgeschnitten wird oder Buttons übereinander rutschen. Gerade responsive Themes mit festen Pixel-Höhen für Container brechen bei starkem Zoom häufig zuerst.

Der Fokusindikator, also die sichtbare Markierung, wenn ein Element per Tastatur angesteuert wird, wird in vielen Shop-Themes komplett entfernt, weil er optisch nicht ins Design passt. Ohne sichtbaren Fokus verliert ein Tastaturnutzer aber jede Orientierung darüber, wo er sich gerade befindet. Ein deutlich sichtbarer Rahmen oder Unterstrich beim Fokus ist kein kosmetisches Detail, sondern eine Grundvoraussetzung für Bedienbarkeit ohne Maus.

Häufig gestellte Fragen

Prioritäts-Ranking: Womit solltest du anfangen?

Wenn du nicht alles auf einmal schaffen kannst, hier die Reihenfolge nach Nutzen:

1. alt-Texte bei allen Produktbildern (30 Min-2h je nach Produktanzahl)
2. Formular-Labels im Checkout (30 Min)
3. lang="de" im HTML (30 Sekunden)
4. Farbkontrast prüfen und fixen (1-2 Stunden)
5. Skip-Link + Fokus-Indikator (30 Min)
6. Erklärung zur Barrierefreiheit veröffentlichen (1 Stunde)
7. Tastatur-Bedienbarkeit testen und fixen (2-4 Stunden)
8. Alle anderen Punkte der Checkliste (je nach Shop-Größe 4-16 Stunden)

Die ersten 6 Punkte entfernen bereits ~80% des Abmahnrisikos. Das sind 3-5 Stunden Arbeit, die du entweder selbst oder mit einer Webagentur für 300-800 € umsetzen kannst.