Shopware barrierefrei machen: BFSG-Checkliste für Shopware 6

Was Shopware 6.6 und 6.7 für die Barrierefreiheit mitbringen, wo eigene Themes und Plugins Barrieren erzeugen und was Sie im Admin selbst prüfen müssen.

Shopware hat die Barrierefreiheit zum Thema eines ganzen Major-Releases gemacht. Mit Shopware 6.7, veröffentlicht am 17. Juni 2025 und damit kurz vor dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) am 28. Juni 2025, sind zahlreiche Verbesserungen im Standard-Storefront fest aktiviert. Viele Shopbetreiber schließen daraus, ihr Shop sei mit dem Update erledigt. Das stimmt in den seltensten Fällen. Die meisten Barrieren in Shopware-Shops entstehen in eigenen Themes, Plugins, Erlebniswelten und Inhalten.

Diese Checkliste zeigt, was Shopware Ihnen abnimmt und wo Sie selbst ansetzen müssen. Maßstab sind die WCAG 2.1 in der Stufe AA, auf die das BFSG über die harmonisierte Norm EN 301 549 verweist. Welche Pflichten insgesamt gelten, lesen Sie in BFSG für Onlineshops: Diese Pflichten gelten seit Juni 2025. Der Artikel ist eine technische Anleitung und keine Rechtsberatung.

Was Shopware 6.6 und 6.7 mitbringen

Shopware hat die Arbeiten an der Barrierefreiheit in zwei Schritten ausgeliefert. In Shopware 6.6 waren die Änderungen bereits enthalten, aber hinter dem Feature-Flag ACCESSIBILITY_TWEAKS versteckt, weil einige davon das Markup grundlegend verändern. Seit Shopware 6.7 sind sie Standard.

Zu den Verbesserungen gehören laut Shopware und den Release Notes unter anderem:

• ein Sprunglink „Zum Hauptinhalt springen“ und deutlich sichtbare Fokuszustände,
• eine Basisschriftgröße von 16 Pixeln und Größen in rem, damit Text bis 200 % skaliert werden kann,
• Sprach- und Währungswechsler als echte Buttons statt als Formularfelder,
• Listen im Warenkorb und in der Bestellübersicht als semantische Listen,
• eine Seitennavigation (Pagination) aus echten Links statt Radio-Buttons,
• Fokusführung beim Öffnen und Schließen von Modalen und eine per Tastatur bedienbare Bildergalerie,
• dekorative Icons, die vor Screenreadern verborgen sind.

Shopware testet den Storefront nach eigenen Angaben laufend automatisiert mit Playwright und axe. Das ist eine gute Grundlage. Es betrifft aber nur das Standard-Theme in seinem Auslieferungszustand.

Wer ist wofür verantwortlich?

Rechtlich bieten Sie als Shopbetreiber die Dienstleistung an, nicht Shopware und nicht Ihre Agentur. Gegenüber Kunden und der Marktüberwachung bleiben Sie verantwortlich, auch für Code, den andere geschrieben haben.

Schritt 1: Version prüfen und aktualisieren

Prüfen Sie im Admin unten links oder unter Einstellungen > System, welche Version läuft.

• Shopware 6.7 oder neuer: Die Verbesserungen sind aktiv. Spielen Sie Minor- und Patch-Updates regelmäßig ein, Shopware liefert laufend weitere Korrekturen aus.
• Shopware 6.6: Die Version erhält nur noch Sicherheitsupdates. Die Barrierefreiheitsänderungen lassen sich über ACCESSIBILITY_TWEAKS=1 in der .env aktivieren. Testen Sie das zuerst auf einer Staging-Umgebung, denn die Änderungen am Markup können eigene Templates und Plugins sichtbar beeinträchtigen. Mittelfristig ist das Update auf 6.7 der sauberere Weg.
• Shopware 5: Die Version wird seit Sommer 2024 nicht mehr gewartet und erhält diese Verbesserungen nicht. Barrierefreiheit lässt sich dort nur mit hohem Aufwand im eigenen Theme nachbauen. Ein Umstieg auf Shopware 6 ist meist wirtschaftlicher.

Schritt 2: Eigene Themes gegen Shopware 6.7 abgleichen

Dieser Punkt wird am häufigsten übersehen. Ein eigenes Theme erbt das Standard-Theme und überschreibt einzelne Twig-Blöcke. Alles, was Ihr Theme überschreibt, profitiert nicht von den Korrekturen in Shopware 6.7. Wurde etwa die Produktkarte, der Header oder die Pagination vor zwei Jahren angepasst, liefert Ihr Shop dort weiterhin das alte Markup aus.

So gehen Sie vor:

• Lassen Sie sich von Ihrer Agentur oder dem Theme-Anbieter auflisten, welche Templates im Ordner Resources/views/storefront überschrieben sind.
• Vergleichen Sie diese Blöcke mit den aktuellen Templates des Standard-Themes und übernehmen Sie die Änderungen an ARIA-Attributen, Buttons und Listen.
• Fragen Sie bei gekauften Themes aus dem Shopware Store nach, ob eine an 6.7 angepasste Version verfügbar ist und welche Aussagen der Anbieter zur Barrierefreiheit macht.
• Prüfen Sie eigene SCSS-Regeln auf outline: none oder outline: 0. Damit wird der Fokusrahmen häufig unbeabsichtigt entfernt.

Ein deutlicher Fokusrahmen lässt sich im eigenen Theme mit wenigen Zeilen SCSS ergänzen:

:focus-visible {
  outline: 3px solid $sw-text-color;
  outline-offset: 2px;
}

Danach kompilieren Sie das Theme neu, zum Beispiel mit bin/console theme:compile, und testen auf hellen und dunklen Flächen.

Schritt 3: Kontraste in der Theme-Konfiguration

Unter Inhalte > Themes legen Sie in der Konfiguration Ihres Themes die zentralen Farben fest: Primär- und Sekundärfarbe, Text- und Überschriftenfarbe, Rahmenfarbe, die Farben für Statusmeldungen sowie Farbe und Textfarbe des Kaufen-Buttons. Im Code heißen sie zum Beispiel $sw-color-brand-primary, $sw-text-color und $sw-color-buy-button.

Prüfen Sie jede Kombination mit einem Kontrastrechner:

• Normaler Text: mindestens 4,5:1 zum Hintergrund.
• Große Schrift (ab 24 Pixel oder ab etwa 19 Pixel fett): mindestens 3:1.
• Rahmen von Eingabefeldern, Icons und Fokusmarkierungen: mindestens 3:1.

Typische Problemstellen sind ein heller Markenfarbton als Primärfarbe für Links, weiße Schrift auf einem Kaufen-Button in Pastellgrün, gelbe Hinweismeldungen, hellgraue Platzhalter in Formularen und Streichpreise in Hellgrau. Die Primärfarbe wirkt in Shopware an vielen Stellen gleichzeitig. Eine Korrektur hier verbessert oft Dutzende Elemente auf einmal.

Schritt 4: Alt-Texte in der Medienverwaltung

Bilder in Produkten, Kategorien und Erlebniswelten beziehen ihren Alternativtext aus der Medienverwaltung. Unter Inhalte > Medien wählen Sie ein Bild aus und tragen in der Seitenleiste den Alt-Text ein. Der Titel ersetzt den Alt-Text nicht.

• Beschreiben Sie, was für die Kaufentscheidung wichtig ist: „Wanderschuh in Grau, Sohle mit grobem Profil“ statt „IMG_4711“.
• Rein dekorative Bilder bekommen keinen beschreibenden Text.
• Für große Kataloge lohnt ein Abgleich per Import und Export oder über die Admin-API, statt jedes Bild einzeln zu öffnen.
• Das Logo braucht den Namen Ihres Shops als Alt-Text.

Schritt 5: Erlebniswelten und Slider

Erlebniswelten sind Shopwares Seitenbaukasten. Sie sind praktisch, erzeugen aber schnell Barrieren, weil Redakteure Layouts ohne technische Prüfung veröffentlichen.

• Text in Bildern: Rabattaktionen und Claims, die in Bannerbilder eingebettet sind, können Screenreader nicht lesen und werden beim Zoomen unscharf. Setzen Sie Text als echten Text im Element „Text auf Bild“.
• Überschriften: Jede Seite braucht eine sinnvolle Gliederung. Nutzen Sie Überschriften im Text-Element nicht nur für die Optik.
• Bild-Slider: Automatisch wechselnde Slider brauchen eine Möglichkeit zum Anhalten. Verzichten Sie im Zweifel auf das automatische Weiterschalten.
• Links auf Bildern: Ein verlinktes Bild ohne Alt-Text ist für Screenreader ein Link ohne Namen.

Schritt 6: Plugins, Captcha und Cookie-Hinweis

Jedes Plugin, das im Storefront etwas anzeigt, bringt eigenes Markup und JavaScript mit: Bewertungs-Widgets, Mega-Menüs, Filter-Erweiterungen, Produktkonfiguratoren, Chats und Newsletter-Popups. Diese Erweiterungen sind in der Praxis häufiger die Ursache von Barrieren als das Standard-Theme.

• Testen Sie jedes sichtbare Plugin mit der Tastatur: Erreichen Sie alle Elemente, sehen Sie den Fokus, lässt sich ein Popup mit Escape schließen?
• Fragen Sie Plugin-Hersteller nach Aussagen zur Barrierefreiheit und nach Updates für 6.7.
• Deaktivieren und entfernen Sie Plugins, die Sie nicht mehr brauchen.

Ein oft übersehener Punkt ist das Captcha. Shopware bietet in den Basis-Informationen mehrere Varianten an, darunter einen Honeypot und ein Bild-Captcha. Ein Captcha, das nur als Bild vorliegt, ist für blinde Menschen nicht lösbar. Bevorzugen Sie Verfahren ohne Rätsel, etwa den Honeypot.

Den Cookie-Hinweis prüfen Sie wie jedes Popup: per Tastatur erreichbar, ausreichender Kontrast der Buttons, verständliche Beschriftung und bei 400 % Zoom vollständig bedienbar. Nutzen Sie ein Consent-Plugin eines Drittanbieters, gelten dieselben Anforderungen.

Schritt 7: Listing, Filter, Varianten und Warenkorb

Gehen Sie den typischen Kaufweg einmal nur mit der Tastatur durch: Startseite, Kategorie, Filter, Produkt, Variante, Menge, Warenkorb, Checkout.

• Filter im Listing müssen per Tastatur bedienbar sein, und Änderungen an der Trefferliste sollten Screenreadern angesagt werden.
• Farbvarianten im Variantenkonfigurator brauchen einen Textnamen, nicht nur ein farbiges Feld.
• Nach „In den Warenkorb“ muss klar sein, was passiert ist. Öffnet sich der Off-Canvas-Warenkorb, gehört der Fokus hinein und beim Schließen zurück.
• Formularfelder in Registrierung, Adresse und Checkout brauchen Beschriftungen, und Fehlermeldungen müssen als Text erscheinen, nicht nur als roter Rahmen.

Schritt 8: Informationen zur Barrierefreiheit veröffentlichen

Das BFSG verlangt, dass Sie in Ihren Allgemeinen Geschäftsbedingungen oder an anderer deutlich wahrnehmbarer Stelle darüber informieren, wie Ihr Shop die Anforderungen erfüllt. In Shopware legen Sie dafür eine Kategorie vom Typ Seite mit eigener Erlebniswelt an und hängen sie in die Footer- oder Service-Navigation Ihres Verkaufskanals. Welche Angaben hineingehören, zeigt unser Muster für die Erklärung zur Barrierefreiheit.

Die Checkliste im Überblick

Häufige Fragen

Ist Shopware 6.7 automatisch BFSG-konform?

Nein. Shopware 6.7 verbessert das Standard-Theme deutlich, und das ist eine wichtige Grundlage. Inhalte, Farben, eigene Templates und Plugins verantworten Sie selbst. Gerade stark angepasste Shops profitieren oft nur teilweise vom Update.

Reicht es, in Shopware 6.6 das Feature-Flag zu aktivieren?

Das Feature-Flag ACCESSIBILITY_TWEAKS bringt die Änderungen aus 6.7 in den Standard-Storefront. Es ersetzt aber weder die Prüfung eigener Templates noch spätere Korrekturen, die nur in neueren Versionen erscheinen. Da 6.6 nur noch Sicherheitsupdates erhält, sollten Sie das Update auf 6.7 einplanen.

Gibt es ein Plugin, das Shopware barrierefrei macht?

Es gibt Plugins, die ein Barrierefreiheits-Menü mit Schriftgröße und Kontrastmodus einblenden. Solche Overlays ändern das Markup Ihres Themes nicht und beheben die Ursachen nicht. Warum das nicht reicht, erklären wir in Accessibility-Overlays und das BFSG.

Muss ich auch den Checkout prüfen?

Ja. Der Checkout gehört zum Kaufweg und ist für das BFSG besonders relevant, weil dort der Vertrag zustande kommt. Prüfen Sie Formulare, Fehlermeldungen, Zahlungsarten und eingebundene Zahlungsfenster von Drittanbietern.

Nächster Schritt

Prüfen Sie in 30 Sekunden kostenlos, welche Barrieren Ihr Shopware-Shop hat: Jetzt kostenlosen BFSG-Check starten. Der Check erkennt unter anderem fehlende Alt-Texte, zu schwache Kontraste und fehlende Beschriftungen und zeigt, an welcher Stelle im Shop sie auftreten. Er ersetzt keine manuelle Prüfung und keine Rechtsberatung.

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung.