Ein Shopify-Shop kann visuell gelungen sein und trotzdem Menschen ausschließen: Eine Produktvariante lässt sich nicht per Tastatur wählen, der Warenkorb-Drawer gibt keine Rückmeldung oder ein Fehler im Formular wird nur rot markiert.
Barrierefreiheit ist deshalb eine Eigenschaft des gesamten Einkaufsprozesses, nicht nur der Startseite. Dieser Beitrag hilft dir, typische Hürden im Shopify-Frontend systematisch zu finden.
Gilt das BFSG für jeden Shopify-Shop?
Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen, darunter grundsätzlich auch Dienstleistungen im elektronischen Geschäftsverkehr mit Verbrauchern.
Entscheidend ist die konkrete Tätigkeit und die gesetzliche Einordnung, nicht das verwendete Shopsystem. Für Kleinstunternehmen, die entsprechende Dienstleistungen erbringen, sieht das Gesetz unter bestimmten Voraussetzungen eine Ausnahme vor. Dabei geht es unter anderem um die Mitarbeiterzahl und wirtschaftliche Größenmerkmale.
Eine private Website, ein reiner B2B-Auftritt und ein B2C-Shop sind rechtlich nicht automatisch gleich zu behandeln. Maßgeblich sind die aktuellen gesetzlichen Anforderungen und möglichen Ausnahmen. Die Bundesfachstelle Barrierefreiheit erklärt die Grundlagen.
Hinweis: Diese technische Checkliste ist keine Rechtsberatung und keine Bescheinigung der BFSG-Konformität.
1. Navigation vollständig per Tastatur testen
Öffne deinen Shop im Browser und lege die Maus weg. Navigiere mit Tab, Shift + Tab, Enter und Escape.
Prüfe dabei:
- Ist jeder Menüpunkt erreichbar?
- Siehst du jederzeit, wo der Tastaturfokus liegt?
- Öffnet und schließt sich ein Untermenü zuverlässig?
- Springt der Fokus beim Schließen eines Dialogs zurück zum Auslöser?
- Kannst du den Warenkorb ohne Maus verlassen?
Ein Hover-Menü, das sich nur mit dem Mauszeiger öffnet, ist ein Warnsignal.
2. Produktvarianten verständlich auswählbar machen
Gerade individuell gestaltete Swatches und Größenwähler bereiten Probleme. Farbe als einziger Hinweis reicht nicht; ein Kunde muss auch ohne Farbwahrnehmung erkennen, welche Variante ausgewählt ist.
Eine robuste Ausgangslage ist eine Gruppe mit echten Formularelementen:
<fieldset>
<legend>Größe wählen</legend>
<label>
<input type="radio" name="size" value="S">
Größe S
</label>
<label>
<input type="radio" name="size" value="M">
Größe M
</label>
</fieldset>In Shopify muss diese Auswahl natürlich mit der tatsächlichen Variantenlogik des Themes verbunden werden. Ein dekoratives Beispiel ersetzt weder Bestandsprüfung noch korrekte Auswahl im Warenkorb.
Weitere Hintergründe findest du bei den W3C-Anleitungen zur Beschriftung von Formularen.
3. Warenkorb und Cart Drawer prüfen
Wenn sich ein Drawer nach „In den Warenkorb“ öffnet, muss das Interface auf den Zustandswechsel reagieren.
Achte darauf, dass:
- die hinzugefügte Position, Menge und Variante richtig angezeigt werden;
- Änderungen und Fehlermeldungen auch ohne Farbe verständlich sind;
- Fokus und Schließen-Schaltfläche erwartbar funktionieren;
- Mengenfelder und Entfernen-Schaltflächen sprechende Beschriftungen besitzen;
- ein Bildschirmlesegerät eine wichtige Statusänderung erfassen kann.
Häufiger Fehler: Eine animierte Erfolgsmeldung sieht gut aus, wird aber weder fokussiert noch angekündigt. Nutzer wissen dann nicht, ob das Hinzufügen erfolgreich war.
4. Formulare und Fehlermeldungen verbessern
E-Mail, Adresse, Rabattcode und Lieferoptionen sollen klar beschriftet sein. Platzhaltertext allein ersetzt kein dauerhaft sichtbares Label.
Beim Absenden unvollständiger Daten:
- Bleiben die bereits eingegebenen Werte erhalten?
- Erscheint eine verständliche konkrete Fehlermeldung?
- Ist klar, welches Feld korrigiert werden muss?
- Wird die Rückmeldung auch von assistiver Technik wahrgenommen?
- Kann die Person die Eingabe ohne Maus korrigieren?
Ein automatisierter Test deckt manche Fehler auf, ersetzt aber keinen echten Tastatur- und Screenreader-Test.
5. Mobile Darstellung und visuelle Verständlichkeit
Teste typische Shopseiten in kleinen Viewports, etwa mit 320 oder 375 Pixeln Breite. Achte auf:
- Keine abgeschnittenen Produktnamen, Preise oder Buttons.
- Ausreichend erkennbare Fokusmarkierungen und Kontraste.
- Produktbilder mit sinnvollen Alternativtexten, wenn sie Informationen tragen.
- Keine bewegten Inhalte, die wichtige Bedienelemente überdecken.
- Zoombarkeit und lesbare Schriftgrößen.
- Korrekte Reihenfolge von Überschriften und Abschnitten.
Bei Produktbildern sollte der Alternativtext beispielsweise die tatsächlich sichtbare Variante beschreiben, nicht unkritisch den kompletten SEO-Produkttitel wiederholen.
6. Performance, Apps und Accessibility gemeinsam betrachten
Ein Shopify-Theme kann durch Apps, Review-Widgets oder Drittanbieter-Popups neue Barrieren bekommen. Prüfe deshalb nicht nur das unveränderte Theme, sondern die konkrete Storefront mit allen produktiven Erweiterungen.
Für jede neue App lohnt sich ein kurzer Abnahmetest:
| Bereich | Testfrage |
|---|---|
| Navigation | Ist jedes Element per Tastatur bedienbar? |
| Dialoge | Bleibt der Fokus im geöffneten Dialog und kehrt zurück? |
| Formulare | Haben Felder verständliche Namen und Fehlerhinweise? |
| Varianten | Ist die aktuelle Auswahl klar erkennbar? |
| Warenkorb | Werden Status und Fehler zuverlässig gemeldet? |
| Mobile | Funktionieren Buttons und Texte ohne Überlauf? |
Ladezeiten bleiben ebenfalls wichtig. Ein langsamer oder springender Bildschirm belastet viele Nutzer zusätzlich. Hier hilft unser Ratgeber zu den Core Web Vitals bei Shopify.
Eine sinnvolle Prüf-Reihenfolge für Shopbetreiber
Beginne mit den meistgenutzten Wegen: Startseite → Kategorie → Produkt → Warenkorb → Checkout. Danach kommen Suche, Konto, Kontakt, Hilfeseiten und Sonderfunktionen.
Prüfe jede Änderung im Theme-Duplikat, dokumentiere reproduzierbare Fehler mit Geräten und Browsern und teste nach der Korrektur erneut.
Das Ziel ist keine dekorative Score-Zahl, sondern ein Einkaufsprozess, in dem möglichst wenige Menschen an technischen Hürden scheitern.
Fazit
Barrierefreiheit in Shopify entsteht durch semantische Komponenten, klare Zustände und durchgängige Tests. Das BFSG kann für B2C-Angebote rechtliche Pflichten begründen; die konkrete Betroffenheit sollte im Einzelfall geprüft werden.
Wenn du einen bestehenden Shop technisch verbessern möchtest, findest du den passenden Einstieg bei unserer Shopify-Theme-Entwicklung und Webdesign-Leistung.
War dieser Artikel hilfreich?
Dein Feedback hilft uns, unsere Ratgeber zu verbessern.
Mit Digitalhaus Kunze gearbeitet?
Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.
Auf Google bewerten