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