Ratgeber · Shopware & BFSG

Shopware barrierefrei machen: So wird Ihr Shop BFSG-konform

Wer seinen Shopware-Shop barrierefrei machen will, merkt schnell: generische BFSG-Tipps helfen nur bedingt weiter. Wo Sie konkret ansetzen müssen, hängt stark von der Shopware-Architektur ab. Shopware 6 bringt mit der Bootstrap-5-basierten Storefront eine solide technische Basis mit, hat aber eigene Stolperfallen wie den Feature-Flag ACCESSIBILITY_TWEAKS, individuelle Child-Themes und den Drag-&-Drop-Editor „Erlebniswelten" (Shopping Experiences).

Die allgemeinen BFSG-Grundlagen – seit wann das Gesetz gilt, welcher Standard gefordert ist, wer eine Ausnahme hat – haben wir bereits im Grundlagenartikel „Onlineshop barrierefrei machen" zusammengefasst. Hier geht es ausschließlich um die Shopware-spezifische Umsetzung: Was Sie im Admin-Theme-Manager einstellen können, wo Sie stattdessen an den Code (Twig/SCSS) müssen, und welche typischen Shopware-Fehler uns bei Audits immer wieder begegnen.

Dieser Ratgeber vertieft die Umsetzung. Die allgemeinen BFSG-Grundlagen – wer betroffen ist, welche Ausnahme gilt, was es kostet – finden Sie im Leitfaden „Onlineshop barrierefrei machen".

Ist Shopware von Haus aus barrierefrei?

Die Shopware-6-Storefront basiert seit Version 6.4.9.0 (vollständig ab 6.5) auf Bootstrap 5. Das bedeutet: Modals, Off-Canvas-Menüs, Warenkorb-Slide-in und Tooltips nutzen Bootstraps JavaScript-Plugin-System, das grundlegende ARIA-Attribute und Tastatursteuerung von Haus aus mitbringt. Der Shopware-Standard ist also keineswegs barrierefreies Niemandsland, sondern hat eine brauchbare technische Basis.

Das Problem: Sobald ein individuelles Theme diese Bootstrap-Mechanik durch eigene Slider- oder Modal-Lösungen ersetzt oder die zugrunde liegenden Data-Attribute überschreibt – was bei individuell gestalteten Shops sehr häufig passiert – gehen genau diese eingebauten Grundlagen wieder verloren. Ob Ihr Shop das automatisch mitbekommt, hängt komplett davon ab, wie stark das Theme vom Standard abweicht.

Was ist der ACCESSIBILITY_TWEAKS-Feature-Flag und wie aktivieren Sie ihn?

Seit Shopware 6.6 gibt es einen eigenen Feature-Flag, über den Shopware schrittweise Accessibility-Fixes ins Standard-Theme einspielt: ACCESSIBILITY_TWEAKS=1, gesetzt in der .env-Datei (die ersten flag-gesteuerten Änderungen erschienen mit Release 6.6.6.0). Belegt sind unter anderem die Umstellung der Pagination von einem versteckten Radio-Button auf einen klickbaren Link (ein Breaking Change), Top-Bar-Dropdowns als semantische Button-Elemente, Listen als ul/li statt div, ein Formular-Rework sowie responsive rem-basierte statt fixer px-Schriftgrößen.

Wichtig: Bis einschließlich Shopware 6.6.x ist dieser Flag NICHT standardmäßig aktiv. Wer auf 6.5 oder 6.6 läuft, hat also ohne manuelles Setzen des Flags ungepatchte Accessibility-Basisfehler im offiziellen Standard-Theme – unabhängig vom eigenen Custom-Theme. Erst mit dem Major-Release Shopware 6.7 sind diese Verbesserungen fester Standard.

Vorsicht beim Aktivieren: In Version 6.6.10.3 gab es einen dokumentierten Bug (GitHub-Issue #8684) – ein durch den Flag eingeführter „stretched-link" auf der Wunschliste verdeckte den kompletten Produkt-Klickbereich und machte den „In den Warenkorb"-Button unklickbar, behoben erst mit 6.7.0.0-rc2. Aktivieren Sie den Flag daher zunächst auf einer Staging-Umgebung und testen Sie die kritischen Kaufpfade, bevor Sie live gehen.

Shopware barrierefrei machen: Theme-Manager oder Twig-Code anpassen?

In Shopware gibt es zwei getrennte Bearbeitungsebenen mit unterschiedlicher Reichweite. Der Admin-Theme-Manager unter „Inhalte > Themes" ist eine GUI ohne Codezugriff und deckt nur das ab, was theme.json als konfigurierbares Feld vorsieht – meist Farben, Logo und Schriftgrundwerte. Für einfache Kontrastanpassungen reicht das oft schon aus.

Für strukturelle Fixes – ARIA-Attribute, Skip-Links, Label-Formular-Verknüpfung, Fokusreihenfolge, semantisches HTML – braucht es Entwicklerzugriff. Technisch ist ein Shopware-Theme ein Plugin unter custom/plugins/{ThemeName}/src/Resources/, mit drei Ebenen: views/storefront (Twig-Templates mit Block-Vererbung statt Komplettkopien), app/storefront/src/scss (SCSS) und app/storefront/src/script (JavaScript). Für strukturelle Barrierefreiheits-Fixes legen Sie am besten ein eigenes Child-Theme-Plugin an und überschreiben gezielt einzelne Twig-Blöcke. Nach jeder Änderung ist „bin/console theme:compile" plus Cache leeren nötig, sonst wird nichts sichtbar.

Erlebniswelten barrierefrei gestalten: Worauf Redakteure achten müssen

Viele klassische BFSG-Fehler entstehen bei Shopware gar nicht im Theme-Code, sondern im Drag-&-Drop-CMS-Editor „Erlebniswelten" (Shopping Experiences), mit dem Redakteure Start-, Kategorie- und Landingpages aus Sections, Blocks und Elements zusammensetzen.

Typisch sind Bild-Elemente ohne gepflegten Alt-Text – Shopware bietet in der Medienverwaltung ein eigenes Alt-Text-Feld, das in der Praxis aber oft leer bleibt –, optisch als Überschrift wirkende Text-Elemente statt echter H2/H3-Heading-Blöcke sowie Banner- und Bild-Slider-Blöcke ohne Alt-Text oder mit Fokusfallen. Der Fix liegt hier klar in der Redaktion und Content-Pflege, nicht im Theme-Code – eine kurze Redaktionsrichtlinie spart hier später viel Nacharbeit.

Ist Ihr Shopware-Checkout barrierefrei?

Beim Produktvarianten-Konfigurator werden Farboptionen bei individuell umgesetzten Varianten-Swatches häufig nur als reine Farbfläche ohne Textlabel dargestellt (WCAG 1.4.1, Use of Color). Shopware liefert die Variantenbezeichnung technisch mit, sie könnte also problemlos als aria-label oder Title genutzt werden – viele individuelle Theme-Umsetzungen blenden diese Information aber rein visuell aus.

Im Checkout selbst fehlt Formularfeldern bei Validierungsfehlern oft die Verknüpfung über aria-describedby und aria-invalid, Fehler werden dann nur farblich markiert. Bei der Zahlungsartenauswahl binden Anbieter wie PayPal teils eigene iFrames ein oder leiten komplett auf eine externe Zahlungsseite um – nicht jede Zahlungsart unterstützt eine iFrame-Einbettung. Die Barrierefreiheit dieser Drittanbieter-Oberflächen liegt außerhalb des Einflussbereichs von Agentur oder Shop-Betreiber und sollte als bekannte Einschränkung in der Barrierefreiheitserklärung benannt statt stillschweigend übergangen werden.

Reicht ein Accessibility-Widget aus dem Shopware Store für die BFSG-Pflicht?

Im Shopware Store werden mehrere „Barrierefreiheit-Toolbar"- beziehungsweise „All-in-one-Accessibility"-Erweiterungen angeboten – clientseitige JavaScript-Overlay-Layer mit Kontrast-, Schriftgrößen- und Vorlesefunktion. Bezeichnend: Schon im offiziellen Store-Listing eines solchen Produkts steht der Hinweis, dass es „nicht die vollständige WCAG- oder BFSG-Konformität ersetzt", sondern lediglich ein Komfort-Feature ist – eine Bestätigung der Overlay-Kritik direkt vom Anbieter selbst.

Seit dem 28.06.2025 prüft Shopware neu eingereichte Extensions mit sichtbarem Storefront-UI grundlegend auf Barrierefreiheit, bevor sie im Store veröffentlicht werden. Das gilt aber nur für neue Einreichungen – bereits installierte Erweiterungen wie Slider, Cookie-Banner, Bewertungs-Widgets oder Konfiguratoren wurden nicht rückwirkend geprüft und können weiterhin Barrieren enthalten. Setzen Sie ein Overlay-Widget also höchstens als optionalen Zusatz ein, nie als alleinige BFSG-Maßnahme, und dokumentieren Sie die eigentliche strukturelle Umsetzung separat im Theme.

Shopware 5 barrierefrei machen – oder lieber migrieren?

Shopware 5 ist seit dem 31.07.2024 End-of-Life – es gibt keine Sicherheits- oder Accessibility-Updates mehr, abgesehen von kostenpflichtigem Drittanbieter-Support wie SafeFive. Die SW5-Templates basieren technisch auf der älteren Smarty-Template-Engine und wurden nie auf WCAG 2.1 AA ausgerichtet. Bevor Sie in eine Barrierefreiheits-Sanierung auf Shopware 5 investieren, lohnt sich daher fast immer die Prüfung, ob nicht ohnehin eine Migration auf Shopware 6 ansteht – sonst sanieren Sie ein System, das strukturell ausläuft.

Shopware-BFSG-Checkliste: Die wichtigsten Schritte

Diese Punkte decken die häufigsten Shopware-spezifischen Baustellen ab, die uns in Audits begegnen:

Shopware-Shop von Experten prüfen lassen

Ob ACCESSIBILITY_TWEAKS bereits sauber greift, wo Ihr Theme vom Bootstrap-Standard abweicht und welche Erlebniswelten-Seiten Nacharbeit brauchen, zeigt sich am zuverlässigsten in einer kombinierten manuellen und automatisierten Prüfung – automatisierte Scanner allein finden nur etwa 30–40 % der Barrieren. Mit unserem kostenlosen Kurzcheck erhalten Sie eine erste Einschätzung zu Ihrem Shopware-Shop. Für die vollständige Prüfung bieten wir ein Audit für 490 € an, die anschließende Sanierung liegt je nach Umfang bei 1.490–2.490 €, inklusive optionalem Monatsmonitoring für dauerhafte Konformität.

Dieser Ratgeber ist allgemeine Information zum Stand Juli 2026 und ersetzt keine Rechtsberatung. Im Zweifel wenden Sie sich an eine auf IT-Recht spezialisierte Kanzlei.