BFSG-Barrierefreiheit mit Shopware

Shopware ist im deutschen Handel weit verbreitet. Barrierefreiheit hängt am Theme und an den Erweiterungen — ein Scan zeigt, was bei Ihnen konkret anliegt.

Typische Barrieren bei Shopware

Das sind die Stellen, an denen wir bei Shopware zuerst nachsehen:

• Storefront-Themes mit zu geringem Farbkontrast
• Kontakt- und Checkout-Formulare ohne verknüpfte Labels
• Produktfilter und Sortierung, nicht vollständig per Tastatur bedienbar
• Mehrstufiger Checkout ohne klare Fokusführung

Wo diese Fehler bei Shopware auftreten

Im Shopware-Storefront trifft es vor allem den mehrstufigen Checkout: Felder für Adresszusatz und Lieferhinweis ohne Label, Schrittanzeigen, deren aktiver Zustand allein über Farbe kommuniziert wird, und Icon-Buttons für Merkzettel und Vergleich, die ohne Namen ausgeliefert werden.

Wie häufig diese Fehler insgesamt sind, hat die WebAIM Million 2026 an einer Million Startseiten gemessen: Sechs Fehlerarten machen 96 % aller Verstöße aus, und alle sechs sind maschinell erkennbar. Die vollständige Tabelle steht im Ratgeber „Wie Sie Ihre Website auf Barrierefreiheit testen“.

Gilt das BFSG für Shopware?

Als Verbraucher-Shop unterliegt Ihr Shopware-Store dem BFSG. Maßgeblich ist die Nutzung durch Ihre Kundschaft, nicht die eingesetzte Software.

Wer genau betroffen ist und welche Ausnahmen gelten, erklärt unser Ratgeber „Gilt das BFSG für meine Website?“.

Wo Shopware-Shops konkret durchfallen

Shopware 6 liefert ein solides Storefront-Theme aus. Die Barrieren entstehen fast nie im Kern, sondern an drei Stellen: in den Farbwerten, die Ihr Theme überschreibt, im Markup, das Plugins zusätzlich einfügen, und in den interaktiven Bausteinen, die Shopware bewusst offen lässt, damit Sie sie anpassen können. Genau diese Anpassbarkeit ist der Grund, warum zwei Shopware-Shops in einer Prüfung völlig unterschiedlich abschneiden.

Farbwerte aus dem Theme, nicht aus dem Design

Shopware setzt Farben über SCSS-Variablen im Theme. Wer eine Corporate-Farbe als $sw-color-brand-primary hinterlegt, färbt damit Buttons, Links, Preise, Badges und Fokusrahmen gleichzeitig ein — meist ohne zu prüfen, was das für den Kontrast auf weißem und auf grauem Grund bedeutet. Typisch sind drei Fälle:

• Streichpreise und Sale-Badges in hellem Rot auf Weiß. Der reduzierte Preis ist die wichtigste Information auf der Seite und häufig die mit dem schlechtesten Kontrastverhältnis.
• Sekundäre Buttons (Outline-Variante), bei denen Rahmen und Text dieselbe helle Markenfarbe tragen.
• Platzhaltertexte in Formularen in Hellgrau — die als Ersatz für ein Label ohnehin nicht zulässig sind, siehe unten.

Für normalen Text verlangt die WCAG ein Verhältnis von 4,5:1, für große Schrift ab 18,66 px fett bzw. 24 px regulär 3:1. Das lässt sich vollständig maschinell prüfen — es ist der Befund, der in fast jedem Scan zuerst auftaucht.

Der mehrstufige Checkout

Der Shopware-Checkout führt über Warenkorb, Adresse, Versand- und Zahlungsart zur Bestätigung. Diese Struktur ist für die Barrierefreiheit anspruchsvoller als eine Einzelseite, und sie ist der Teil Ihres Shops, an dem ein Abbruch am teuersten ist.

• Schrittanzeige nur über Farbe. Wenn der aktive Schritt allein durch eine Einfärbung markiert ist, fehlt die Information für alle, die Farben nicht unterscheiden — und für Screenreader ganz. Der aktuelle Schritt braucht eine textliche oder programmatische Auszeichnung, nicht nur ein anderes Blau.
• Adresszusatz, Lieferhinweis, Firmenfeld. Genau die optionalen Felder, die im Theme oft nachträglich eingefügt werden, verlieren dabei ihr <label for>.
• Fehlermeldungen nach dem Absenden. Shopware zeigt sie als Flash-Message oben auf der Seite. Ohne Live-Region und ohne Fokusführung erfährt eine Screenreader-Nutzerin nicht, dass die Bestellung gescheitert ist — sie hört unverändert das Formular.
• Pflichtfeld-Kennzeichnung per Sternchen ohne Erklärung und ohne aria-required.

Off-Canvas-Warenkorb und Filter

Der Off-Canvas-Warenkorb ist der interaktive Baustein, der in Prüfungen am häufigsten auffällt. Er öffnet über der Seite, ohne den Fokus mitzunehmen: Die Tastaturposition bleibt im Hintergrund, Esc schließt nichts, und beim Schließen springt der Fokus an den Seitenanfang statt zurück auf den auslösenden Button. Dasselbe Muster betrifft die Filter-Sidebar in der Kategorieansicht.

Hinzu kommt: Wenn sich der Warenkorb per AJAX aktualisiert, ändert sich die Summe für sehende Nutzer sichtbar — für Screenreader passiert ohne Live-Region gar nichts. Der Artikel ist im Warenkorb, aber niemand sagt es.

Plugins aus dem Store

Bewertungs-, Cookie-, Newsletter- und Produktkonfigurator-Plugins bringen eigenes Markup mit, das an Ihrem Theme vorbei ausgeliefert wird. Sie haben es nicht geschrieben, Sie sehen es im Backend nicht, und es zählt trotzdem zu Ihrer Website. Bei einer Prüfung ist die häufigste Kategorie hier: Icon-Buttons ohne zugänglichen Namen — Sternebewertungen, Schließen-Kreuze, Pfeile in Slidern.

WCAG-Checkliste für Shopware 6

Diese Liste ist nach den Bereichen sortiert, in denen ein Shopware-Shop tatsächlich gebaut wird. Was ein automatischer Scan zuverlässig erkennt, ist entsprechend markiert — der Rest braucht fünf Minuten Handarbeit.

Storefront und Navigation

• Sprachauszeichnung <html lang="de"> gesetzt (automatisch prüfbar)
• Aussagekräftiger <title> je Seite, nicht überall der Shopname (automatisch prüfbar)
• Überschriften bauen eine Hierarchie ohne übersprungene Ebenen (automatisch prüfbar)
• Landmark-Struktur vorhanden: header, nav, main, footer (automatisch prüfbar)
• „Zum Hauptinhalt springen“-Link als erstes fokussierbares Element
• Hauptnavigation mit ausklappbaren Kategorien vollständig per Tastatur bedienbar
• Sichtbarer Fokusindikator auf allen interaktiven Elementen — nicht per outline: none entfernt

Kategorie und Produktliste

• Produktbilder mit sinnvollem Alt-Text, nicht mit der Artikelnummer (Vorhandensein automatisch prüfbar, Sinnhaftigkeit nicht)
• Produktkacheln: verlinkt ist der Produktname, nicht nur das Bild (leere Links automatisch prüfbar)
• Filter-Checkboxen und Preisschieber haben verknüpfte Labels (automatisch prüfbar)
• Sortierung als echtes <select> mit Label
• Ergebnisanzahl nach Filterwechsel wird als Statusmeldung angekündigt
• Kontrast von Streichpreisen, Badges und Verfügbarkeitshinweisen (automatisch prüfbar)

Produktdetail und Warenkorb

• Varianten-Auswahl (Größe, Farbe) per Tastatur bedienbar und beschriftet
• Mengenfeld mit Label, Plus/Minus-Buttons mit zugänglichem Namen (automatisch prüfbar)
• Farbvarianten nicht allein über Farbfelder — Name im Text oder als Alternative
• Bildergalerie und Zoom per Tastatur erreichbar, Esc schließt
• Off-Canvas-Warenkorb: Fokus wandert hinein und danach zurück
• Warenkorb-Aktualisierung wird über eine Live-Region angekündigt
• Merkzettel- und Vergleichs-Icons mit zugänglichem Namen (automatisch prüfbar)

Checkout und Konto

• Jedes Feld mit <label for>, auch Adresszusatz und Firmenfeld (automatisch prüfbar)
• Autocomplete-Attribute auf Name, Adresse, E-Mail gesetzt
• Fehler werden im Text benannt, nicht nur rot umrandet
• Fehlerzusammenfassung erhält den Fokus nach dem Absenden
• Aktiver Checkout-Schritt nicht allein über Farbe erkennbar
• Zahlungsart-Auswahl als Radiogruppe mit fieldset und legend
• AGB- und Widerrufs-Checkbox mit klickbarem, verknüpftem Label (automatisch prüfbar)

Inhalte, Dokumente und Erklärung

• Erlebniswelten (Shopping Experiences) mit korrekter Überschriftenstruktur
• Text in Bannerbildern zusätzlich als echter Text vorhanden
• Rechnungen und Datenblätter als getaggte PDFs oder als HTML-Alternative
• Videos mit Untertiteln, kein Autoplay mit Ton
• Barrierefreiheitserklärung veröffentlicht und auffindbar

Was die Marktüberwachung bei einem Shop ansieht

Die zuständige Stelle der Länder setzt bei webbasierten Diensten nach eigener, veröffentlichter Strategie auf automatisierte Vorprüfungen mit technischer Prüfsoftware — und gewichtet daneben ausdrücklich die Nutzerreichweite eines Angebots. Ein Shop mit vielen Kunden steht damit weiter oben als eine Nischenseite.

Ebenso ausdrücklich haben Beschwerden Vorrang: Jede Verbraucherin kann nach § 32 BFSG einen Antrag auf Marktüberwachungsmaßnahmen stellen. Für einen normalen deutschen Shop ist das der realistische Auslöser — nicht ein Sweep. Was in dem Dokument sonst noch steht, haben wir im Ratgeber „So prüft die Marktüberwachung nach dem BFSG“ zusammengefasst.

Bemerkenswert für Shop-Betreiber ist ein zweiter, oft übersehener Punkt: Die Prüfung der Informationspflichten nach § 14 Abs. 2 BFSG nennt die Strategie einen „wesentlichen Bestandteil der formalen Überwachung“. Diese Angaben gehören zu den AGB oder an eine andere deutlich wahrnehmbare Stelle — und sie sind mit Abstand der billigste Teil der Pflicht.

So prüfen Sie Ihren Shopware-Shop — kostenlos

Der kostenlose Einzelseiten-Check zeigt in Sekunden die ersten Barrieren — ohne Anmeldung. Automatisierte Tests finden dabei ehrlich nur rund 30–57 % der WCAG-Probleme; den Rest markieren wir zur manuellen Prüfung, statt „100 % konform“ zu versprechen.

Für die ganze Website gibt es den vollständigen automatischen Report ab €14 — günstiger als die üblichen deutschen Tools.