Shopware und BFSG: So machst du deinen Shopware-Shop barrierefrei

Shopware und Barrierefreiheit: Wo steht das System?

Shopware 6 hat gegenüber Shopware 5 deutliche Verbesserungen: Bessere semantische HTML-Struktur, ARIA-Labels für Warenkorb und Navigation, und responsive Storefront-Themes. Trotzdem ist auch Shopware 6 nicht out-of-the-box vollständig BFSG-konform. Custom-Themes, Plugins und Inhalte müssen geprüft werden.

Das BFSG (§ 1, § 2 BFSG) verpflichtet seit Juni 2025 alle E-Commerce-Anbieter, die an Verbraucher verkaufen, zur digitalen Barrierefreiheit. Der technische Standard ist WCAG 2.1 Level AA, verankert in der europäischen Norm EN 301 549. Für Shopware-Betreiber bedeutet das: Jede Seite, jeder Checkout-Schritt und jede Plugin-Ausgabe muss diese Kriterien erfüllen.

Shopware 6 Storefront-Architektur: Was sie für Barrierefreiheit mitbringt

Die Storefront von Shopware 6 basiert auf Twig-Templates, Bootstrap 5 und Symfony. Das bringt einige Vorteile für die Barrierefreiheit:

• Semantisches HTML – Die Standard-Templates nutzen <nav>, <main>, <header>, <footer> und <section>-Elemente (WCAG SC 1.3.1 Info and Relationships)
• ARIA-Landmarks – Navigation, Warenkorb-Flyout und Suchfeld haben grundlegende ARIA-Attribute
• Skip-Link – Shopware 6 enthält keinen Skip-to-Content-Link von Haus aus – diesen musst du manuell ergänzen (WCAG SC 2.4.1 Bypass Blocks)
• Fokus-Management – Modale Dialoge (Warenkorb, Login) bekommen den Fokus, aber nicht alle Plugins halten sich daran

Twig-Templates anpassen: A11y-Verbesserungen

Shopware 6 ermöglicht Template-Überschreibungen über das Theme-System. Hier ein Beispiel für einen Skip-Link, den du in base.html.twig ergänzen kannst: Weitere Informationen finden Sie im BFSG-Glossar.

<!-- In Resources/views/storefront/base.html.twig -->
{% block base_body %}
  <a class="sr-only sr-only-focusable" href="#main-content">
    Zum Hauptinhalt springen
  </a>
  {{ parent() }}
{% endblock %}

Und das Ziel-Anker auf dem Main-Container:

<main id="main-content" role="main">
  {# Shopware Content #}
</main>

Diese Ergänzung erfüllt WCAG SC 2.4.1 Bypass Blocks und hilft Tastatur-Nutzern, die Navigation zu überspringen.

Die häufigsten Barrierefreiheitsprobleme in Shopware-Shops

Diese Probleme finden wir in fast jedem Shopware-Shop:

• Produktbilder ohne Alt-Texte – Shopware hat ein Feld im Medienmanager dafür, es wird nur selten genutzt. Ohne Alt-Text verstoßen Bilder gegen WCAG SC 1.1.1 Non-text Content.
• Erlebniswelten (Shopping Experiences) mit schlechtem Kontrast – Bild-Hintergründe mit Text-Overlays erreichen oft nicht das erforderliche Kontrastverhältnis von 4,5:1 (WCAG SC 1.4.3 Contrast Minimum).
• Filter-Sliders ohne Tastatur-Bedienung – Preis- und Attribut-Filter nutzen oft Custom-JavaScript-Slider, die per Tastatur nicht bedienbar sind (Verstoß gegen WCAG SC 2.1.1 Keyboard).
• Cookie-Banner-Plugins mit Fokus-Fallen – Viele Cookie-Consent-Plugins fangen den Fokus nicht korrekt ab oder lassen ihn hinter dem Overlay auf Seitenelemente springen (WCAG SC 2.4.3 Focus Order).
• Custom Checkout-Plugins – Payment-Provider-Plugins ändern oft den Checkout-Flow und fügen iframes oder JavaScript-Widgets ein, die nicht tastaturzugänglich sind.
• Fehlende Formular-Labels – Besonders bei Newsletter-Anmeldung, Kontaktformularen und Gutscheineingabe fehlen explizite <label>-Elemente (WCAG SC 1.3.1).

Shopping Experiences (Erlebniswelten) barrierefrei gestalten

Shopwares CMS-System „Shopping Experiences“ ist mächtig, aber barrierefreiheitstechnisch problematisch. Hier die wichtigsten Regeln:

• Überschriften-Hierarchie einhalten – Nutze in CMS-Blöcken die korrekte Reihenfolge (h2 → h3 → h4). Spring nicht von h1 zu h4. WCAG SC 1.3.1 verlangt eine logische Dokumentstruktur.
• Text-über-Bild-Blöcke vermeiden – Wenn Text auf einem Bild liegt, stelle sicher, dass ein halbtransparentes Overlay den Kontrast garantiert. Besser: Text neben dem Bild platzieren.
• Video-Blöcke mit Untertiteln – Eingebettete Videos brauchen Untertitel (WCAG SC 1.2.2 Captions) und eine Audio-Beschreibung (SC 1.2.5).
• Animations-Blöcke mit prefers-reduced-motion – Respektiere die Systemeinstellung des Nutzers (WCAG SC 2.3.3).

Plugin-Audit: Welche Plugins prüfen?

Nicht jedes Plugin ist problematisch. Prüfe priorisiert:

1. Cookie-Consent-Banner – Muss den Fokus beim Öffnen auf sich ziehen und beim Schließen zurückgeben. Alle Buttons müssen per Tastatur erreichbar sein.
2. Payment-Plugins – PayPal, Klarna, Stripe: Teste den kompletten Checkout per Tastatur. Prüfe, ob eingebettete iframes title-Attribute haben.
3. Slider/Carousel-Plugins – Müssen Pause-Buttons haben (WCAG SC 2.2.2 Pause, Stop, Hide) und per Pfeiltasten bedienbar sein.
4. Bewertungs-Plugins – Sterne-Bewertungen brauchen ein aria-label wie „4 von 5 Sternen“.
5. Lightbox/Zoom-Plugins – Müssen per Escape schließbar sein und den Fokus korrekt managen.

Tipp: Deaktiviere jedes Plugin einzeln und prüfe, ob sich die Barrierefreiheit ändert. So identifizierst du den Verursacher schnell.

Der Checkout-Flow: Kritischster Bereich

Der Checkout ist der wichtigste Bereich für Barrierefreiheit – hier gehen Verkäufe verloren, wenn Nutzer nicht durchkommen. Prüfe diese Punkte:

• Warenkorb-Seite – Mengenändern und Löschen muss per Tastatur funktionieren. Änderungen müssen über ARIA-Live-Regions angekündigt werden.
• Adressformulare – Jedes Feld braucht ein <label>. Pflichtfelder müssen mit aria-required="true" markiert sein. Fehler müssen identifiziert und beschrieben werden (WCAG SC 3.3.1 Error Identification, SC 3.3.3 Error Suggestion).
• Zahlungsarten-Auswahl – Radio-Buttons müssen als fieldset mit legend gruppiert sein.
• Bestätigungsseite – Die Zusammenfassung muss für Screenreader lesbar strukturiert sein (Tabelle oder Definitionsliste).

Schritt für Schritt: Shopware-Shop BFSG-konform machen

1. Automatisierten Scan durchführen – Nutze den bf-check BFSG-Scanner für eine Erstanalyse. Scanne mindestens: Startseite, eine Kategorieseite, eine Produktdetailseite, den Warenkorb und den Checkout.
2. Alt-Texte im Medienmanager pflegen – Gehe unter Inhalte → Medien durch alle Produktbilder. Fülle das Alt-Text-Feld mit beschreibendem Text (z.B. „Blaues Baumwoll-T-Shirt, Vorderansicht“).
3. Theme prüfen – Wenn du ein Custom-Theme nutzt: Prüfe Farbkontraste, Fokus-Styles und Überschriften-Hierarchie. Das Standard-Storefront-Theme ist ein besserer Startpunkt als viele Marketplace-Themes.
4. Skip-Link ergänzen – Füge einen „Zum Hauptinhalt springen“-Link ein (siehe Twig-Beispiel oben).
5. Plugin-Audit durchführen – Teste jeden Plugin-Frontend-Output mit Tastatur und Screenreader. Ersetze nicht-barrierefreie Plugins.
6. Erlebniswelten prüfen – Kontrolliere Kontraste, Überschriften und Alt-Texte in allen CMS-Layouts.
7. Manuellen Tastatur-Test – Navigiere mit Tab und Enter durch den gesamten Shop. Der Fokus muss immer sichtbar sein (WCAG SC 2.4.7 Focus Visible).
8. Screenreader-Test – Teste mit NVDA (Windows) oder VoiceOver (Mac) mindestens die Startseite und den Checkout.

Shopware 5 vs. 6: Barrierefreiheit im Vergleich

Wenn du noch Shopware 5 nutzt, ist ein Upgrade auf Shopware 6 auch aus Barrierefreiheitssicht sinnvoll. Die Unterschiede:

Nutze die Migration als Anlass, gleich BFSG-konform zu starten. Plane die Barrierefreiheits-Anforderungen in das Migrations-Lastenheft ein, statt sie nachträglich umzusetzen. Vergleiche auch, wie WooCommerce und Shopify mit Barrierefreiheit umgehen.

Häufige Fehler bei Shopware-Barrierefreiheit

• Fokus-Styles per CSS entfernen – outline: none ohne Alternative macht den Shop für Tastaturnutzer unbrauchbar (Verstoß gegen WCAG SC 2.4.7 Focus Visible).
• Nur die Startseite prüfen – Kategorieseiten, Produktdetail, Warenkorb und Checkout haben jeweils eigene Barrierefreiheits-Herausforderungen.
• Overlay-Widgets statt echte Fixes – AccessiBe und ähnliche Overlays ändern nichts am Quellcode und erfüllen die BFSG-Anforderungen nicht.
• Dekorative Bilder mit Alt-Text – Rein dekorative Bilder brauchen alt="" (leerer Alt-Text), nicht „Banner“ oder „Bild“. Inhaltliche Bilder brauchen beschreibende Alt-Texte.
• Automatische Karussells ohne Pause – Sich bewegende Inhalte müssen pausierbar sein (WCAG SC 2.2.2). Ohne Pause-Button ist der Slider ein Verstoß.

Dieser Artikel ersetzt keine Rechtsberatung. Für verbindliche Auskünfte zur BFSG-Konformität deines Shopware-Shops wende dich an einen spezialisierten Anwalt oder Barrierefreiheits-Auditor.

Häufig gestellte Fragen

Barrierefreiheitserklärung für deinen Shopware-Shop veröffentlichen

Wer unter das BFSG fällt, muss nicht nur den Shop selbst anpassen, sondern auch eine Barrierefreiheitserklärung veröffentlichen. Sie gehört zu den Pflichtangaben und wird von Prüfstellen als Erstes verlangt, wenn Beschwerden eingehen. Die Erklärung beschreibt, in welchem Umfang deine Seite den WCAG-Kriterien entspricht, welche Bereiche noch nicht konform sind und warum, und über welchen Weg Nutzer Barrieren melden können. Fehlt sie komplett, wiegt das bei einer Prüfung schwerer als einzelne technische Mängel, weil sie zeigt, dass du dich mit dem Thema noch gar nicht auseinandergesetzt hast.

In Shopware legst du dafür am einfachsten eine eigene CMS-Seite an und verlinkst sie fest im Footer, neben Impressum und Datenschutzerklärung. Trage eine erreichbare Kontaktmöglichkeit ein, über die Nutzer konkrete Barrieren melden können – eine E-Mail-Adresse reicht, ein Kontaktformular ist komfortabler. Ergänze außerdem einen Hinweis auf die zuständige Schlichtungsstelle für den Fall, dass eine Meldung nicht zufriedenstellend beantwortet wird. Formuliere die nicht-barrierefreien Bereiche konkret statt pauschal: „Der Produktkonfigurator ist derzeit nicht vollständig per Tastatur bedienbar“ ist hilfreicher als ein allgemeiner Vorbehalt.

Der häufigste Fehler ist eine Erklärung, die einmal geschrieben und danach nie wieder angefasst wird. Sobald du ein neues Plugin installierst, das Theme wechselst oder die Shopping Experiences überarbeitest, kann sich der Stand der Barrierefreiheit ändern – die Erklärung muss dann mitziehen. Baue dir eine kurze Routine: Nach jedem größeren Update prüfst du in wenigen Minuten, ob die dort genannten Einschränkungen noch stimmen, und passt das Datum der letzten Überprüfung an.

Produktdaten und Downloads barrierefrei aufbereiten

Neben Storefront und Checkout geraten Produktdaten und Downloads bei der Barrierefreiheit oft aus dem Blick, obwohl sie ein fester Bestandteil vieler Shopware-Shops sind. Technische Datenblätter, Montageanleitungen oder AGB als PDF-Anhang müssen denselben Anforderungen genügen wie die HTML-Seiten drumherum, sobald sie zum Kaufprozess gehören. Ein gescanntes PDF ohne Texterkennung ist für einen Screenreader unlesbar und stellt damit dieselbe Barriere dar wie ein Bild ohne Alt-Text.

Prüfe bei jedem Download, ob er als durchsuchbarer Text vorliegt und nicht als reines Bild. Vergib sprechende Dateinamen statt kryptischer Nummern, weil Screenreader-Nutzer den Dateinamen vor dem Öffnen hören. Bei Produktbildern lohnt sich ein zweiter Blick auf die Alt-Texte im Variantensystem: Shopware übernimmt Alt-Texte oft vom Hauptbild, auch wenn eine Variante eine andere Farbe oder Ausführung zeigt. Pflege die Beschreibung dann für jede Variante einzeln, sonst hören Screenreader-Nutzer eine falsche Produktbeschreibung.

Auch Tabellen in Produktbeschreibungen – etwa für technische Maße oder Größentabellen – sollten als echte HTML-Tabelle mit Kopfzeile ausgezeichnet sein und nicht als eingefügtes Bild oder als Text mit Tabulatoren nachgebaut werden. Nur eine korrekt ausgezeichnete Tabelle lässt sich mit einem Screenreader zeilen- und spaltenweise nachvollziehen. Wer viele Varianten und Downloads pflegt, sollte diesen Punkt in die Checkliste für neue Produkte aufnehmen, statt ihn erst bei der nächsten Prüfung nachzuholen.

Screenreader-Test für den Shopware-Warenkorb: Schritt für Schritt

Ein automatisierter Scan findet strukturelle Probleme, aber ob der Warenkorb wirklich benutzbar ist, zeigt erst ein Test mit einem echten Screenreader. Installiere dafür NVDA (kostenlos, für Windows) oder nutze VoiceOver auf dem Mac, und arbeite den kompletten Bestellweg einmal blind – also ohne auf den Bildschirm zu schauen – durch.

Beginne auf der Produktseite: Lässt sich die Mengenauswahl per Tastatur bedienen, und wird ein geänderter Wert vom Screenreader vorgelesen? Füge das Produkt zum Warenkorb hinzu und prüfe, ob eine Bestätigung angesagt wird – ohne akustisches oder textliches Feedback merkt ein blinder Nutzer nicht, ob der Klick funktioniert hat. Öffne anschließend den Mini-Warenkorb: Wird die neue Artikelanzahl angesagt, und lässt sich der Mini-Warenkorb per Tastatur schließen?

Wechsle zur vollständigen Warenkorbseite und teste das Ändern der Menge sowie das Entfernen eines Artikels. Beide Aktionen sollten eine hörbare Rückmeldung geben und die Gesamtsumme muss nach der Änderung korrekt angesagt werden. Gehe danach in den Checkout und prüfe jedes Formularfeld: Hat es ein sprechendes Label, wird ein Pflichtfeld als solches angekündigt, und werden Validierungsfehler nach dem Absenden klar benannt und dem passenden Feld zugeordnet? Notiere jede Stelle, an der du den Faden verlierst oder unsicher bist, was gerade passiert ist – genau das sind die Stellen, an denen auch reale Nutzer aussteigen.