Barrierefreiheit im Online-Shop: Was das BFSG für Händler bedeutet

Digital barrierefrei sein ist kein optionales Kann mehr. Das ist Pflicht. Die BFSG-Deadline war 28. Juni 2025. Wenn dein Shop noch nicht WCAG 2.1 AA konform ist, bist du nicht compliant und solltest sofort handeln. Das bedeutet konkrete Anforderungen für deine Website und echte Konsequenzen: Bußgelder, Verbandsklagen, Reputationsschaden.

Martins Position: Barrierefreiheit ist ein großes Thema und wird sehr ernst genommen bei dasistweb. Das ist nicht nur rechtlich Pflicht, das ist auch wirtschaftlich smart und ethisch richtig. Ein barrierefreier Shop ist ein besserer Shop für alle. dasistweb integriert WCAG 2.1 AA in alle Shopware- und Shopify-Projekte als Standard, nicht als Zusatz.

In diesem Artikel zeige ich dir, was genau das BFSG verlangt, wie du deinen aktuellen Status prüfst und wie du mit konkreten Maßnahmen schnell compliance wirst.

Inhaltsverzeichnis

1. Was ist das BFSG und wen betrifft es?
2. Die wichtigsten WCAG 2.1 AA Anforderungen für E-Commerce
3. Warum die Frist Juni 2025 so wichtig ist
4. Was passiert bei Nicht-Einhaltung: Bußgelder und Konsequenzen
5. Shopware 6 und Shopify: Wie gut vorbereitet sind die Plattformen?
6. Barrierefreiheit ist auch gut fürs Geschäft
7. Praktische Checkliste: Was du konkret im Shop ändern musst
8. Quick Wins für sofort umsetzbar

Was ist das BFSG und wen betrifft es?

Das Barrierefreiheitsstärkungsgesetz ist Deutschlands Umsetzung der EU-Richtlinie 2019/882 (European Accessibility Act, EAA). Diese Richtlinie schafft europaweite einheitliche Standards für Barrierefreiheit.

Worum geht es konkret? Der EAA regelt, dass bestimmte Produkte und Dienstleistungen barrierefrei sein müssen. Und ja, Online-Shops fallen explizit darunter. Die Richtlinie nennt es: "e-commerce". Das bedeutet, dass ab 2025 alle Online-Shops, die in der EU tätig sind (und das sind praktisch alle), diese Standards erfüllen müssen.

Das BFSG konkretisiert das für Deutschland. Barrierefreiheit bedeutet hier: Webseiten und Web-Anwendungen müssen so funktionieren, dass sie Menschen mit Beeinträchtigungen (Seh-, Hör-, Mobilitäts-, kognitiven Beeinträchtigungen) nutzen können. Mit Screenreader, ohne Maus, mit hohem Kontrast, mit Untertiteln.

Wen betrifft das? Grundsätzlich: alle. Aber realistisch vor allem Unternehmen ab einer bestimmten Größe und alle, die Dienstleistungen elektronisch anbieten. Shops fallen darunter. Micro-Unternehmen können unter bestimmten Bedingungen ausgenommen sein (wenn Barrierefreiheit "unverhältnismäßig belastend" wäre), aber diese Ausnahmen sind eng begrenzt und müssen begründet werden.

Die Deadline war bindend: 28. Juni 2025. Sie ist vorbei. Das war keine Richtlinie, sondern deutsches Gesetz mit Bußgeldregelungen. Wenn du die Frist verpasst hast, bist du jetzt nicht compliant.

Die wichtigsten WCAG 2.1 AA Anforderungen für E-Commerce

Das BFSG verlangt die Einhaltung von WCAG 2.1 Level AA. WCAG ist der internationale Standard der W3C (World Wide Web Consortium). Level AA ist der Mittelstandard, der Balanceakt zwischen Anforderung und praktischer Umsetzbarkeit.

Was bedeutet das konkret für deinen Shop? Hier die Anforderungen, die im E-Commerce am meisten relevant sind.

1. Bilder und grafische Inhalte brauchen Alt-Text

Jedes Bild im Shop braucht eine sinnvolle Textbeschreibung. Das betrifft:

• Produktfotos
• Infografiken, Icons, Illustrationen
• Logos und Grafiken im Header
• Sogar dekorative Elemente (diese können mit alt="" als dekorativ markiert werden)

Ein gutes Beispiel: Statt alt="Schuh" sollte es sein: alt="Schwarzer Lederschuh mit weißer Sohle, Größe 42, Ansicht von vorn". Das hilft Blinden mit Screenreader zu verstehen, was sie sehen würden.

Für Shops ist das besonders kritisch, weil Produkte visuell kommuniziert werden. Ein Blinder Kunde muss verstehen, was er kauft.

2. Farbkontrast: Mindestens 4,5:1

Text muss sich vom Hintergrund abheben. WCAG 2.1 AA verlangt einen Mindest-Kontrastwert von 4,5:1 für normalen Text. Das ist eine mathematische Verhältnis zwischen Helligkeit von Text und Hintergrund.

Konkreter: Schwarzer Text auf Weiß ist problemlos. Mittelgrau auf Weiß ist oft zu schwach. Heller Text auf farbigem Hintergrund muss häufig angepasst werden.

Das betrifft:

• Alle Copy im Shop
• Knopftext
• Placeholder in Formularen
• Kategorie-Namen
• Preis und andere wichtige Informationen

Es gibt kostenlose Tools wie den WebAIM Contrast Checker, mit dem du deine aktuellen Farben prüfen kannst. Viele Shops müssen hier nachbessern.

3. Keyboard-Navigation: Alles ohne Maus

Dein Shop muss vollständig mit Tastatur bedienbar sein. Tab-Taste zum Navigieren, Enter zum Klicken. Das ist nicht optional.

Das bedeutet:

• Alle Links und Buttons müssen fokussierbar sein
• Die Reihenfolge muss logisch sein (von oben nach unten, von links nach rechts)
• Modals und Popups dürfen die Tastaturnavigation nicht "fangen" (sogenannter Fokus-Trap ist problematisch)
• Es muss sichtbar sein, welches Element gerade den Fokus hat (z.B. dicker Rahmen um Button)

Für Nutzer mit motorischen Beeinträchtigungen ist das essentiell.

4. Videos und Audio brauchen Untertitel und Transkripte

Jedes Video im Shop (z.B. Produktdemos, Erklärvideos) muss Untertitel haben. Audio-Inhalte brauchen Transkripte oder Audiodeskriptionen.

Das ist auch für Nutzer relevant, die dein Video im Büro mit Ton aus anschauen wollen.

5. Formulare: Klar gekennzeichnet und mit Error-Messages

Jedes Formularfeld braucht:

• Ein Label (nicht nur Placeholder)
• Klare Anforderungen (Pflichtfeld, Format)
• Aussagekräftige Fehlermeldungen (nicht nur rot, sondern auch Text)

Das hilft vor allem Nutzern mit kognitiven Beeinträchtigungen und Screenreader-Nutzern, das Formular auszufüllen.

6. Überschriften und Struktur: Semantisch korrekt

HTML-Überschriften (H1, H2, H3) müssen in der richtigen Reihenfolge sein. Nicht zum Stylen verwenden (z.B. H1 auf einer Subheading, weil H1 eben größer ist). Das verwirrt Screenreader-Nutzer.

Die Struktur muss logisch sein: H1 einmal oben, dann H2s für Hauptsektionen, H3s für Untersektionen etc.

7. Zielgrößen für Touch und Click

Buttons und Links müssen mindestens 44 mal 44 Pixel groß sein. Das macht sie auch für Nutzer mit motorischen Beeinträchtigungen leichter zu treffen.

Das ist auch auf Mobilgeräten wichtig.

Die BFSG-Deadline ist vorbei: Das musst du jetzt wissen

Die Deadline 28. Juni 2025 ist vorbei. Das war nicht optional, und es war nicht verhandelbar.

Was bedeutet das konkret? Seit dem 28. Juni 2025 gilt:

• Alle Shops müssen WCAG 2.1 AA konform sein
• Es gibt keine Übergangsfrist mehr für die Shop-Funktionalität
• Nicht-Einhaltung führt zu Bußgeldern und Klagen

Es gibt nur noch eine Übergangsfrist für bestehende Inhalte (alte Blog-Posts) bis 28. Juni 2032. Aber dein Shop selbst, deine Produktseiten, dein Checkout, deine Navigation: Das muss JETZT passen.

Wenn du die Deadline verpasst hast, brauchst du keine Zeit mehr zu vergeuden. Du brauchst einen Plan und Handlung.

Was passiert bei Nicht-Einhaltung: Bußgelder und Konsequenzen

Die rechtliche Zahnlosigkeit ist vorbei. Das BFSG hat echte Konsequenzen.

Bußgelder können bis zu 10.000 Euro betragen, in schwerwiegenden Fällen auch höher. Das ist nicht gering. Aber der finanzielle Schaden ist nur eines. Es gibt auch andere Konsequenzen:

Verbandsklagen: Behindertenorganisationen und Verbände können gegen deinen Shop klagen, wenn dieser nicht barrierefrei ist. Das ist nicht selten und führt zu negativer Publicity.

Reputationsschaden: Ein Shop, der nicht barrierefrei ist, wird von Menschen mit Beeinträchtigungen (7,8 Millionen in Deutschland allein) einfach nicht nutzen. Plus ihre Freunde und Familie, die Wert auf Inklusion legen. Das ist ein echtes Marktrisiko.

Reputations-Risiko in den Medien: Wenn dein Shop verklagt wird wegen Barrierefreiheit, ist das eine Geschichte, die Journalisten berichten. "Shop ignoriert behinderte Kunden" ist eine Narrative, die Medienpräsenz bekommt.

Das ist kein Kampf gegen Paperwork. Das sind echte rechtliche und geschäftliche Risiken.

Shopware 6 und Shopify: Wie gut vorbereitet sind die Plattformen?

Gute Nachricht und kritische Nachricht.

Shopware 6

Shopware 6 hat sich in den letzten Updates barrierefreiheitlich Gedanken gemacht. Die Plattform selbst (das Admin-Interface) wird zunehmend WCAG 2.1 AA-konform. Aber: Das gilt nicht automatisch für deinen Shop-Frontend.

Das Frontend ist deine Verantwortung. Wie barrierefrei dein Shop ist, hängt vom Theme ab und von deinen Custom-Implementierungen. Ein gutes Theme (z.B. mit Semantic HTML, Aria-Labels, korrektem Fokus-Management) macht Barrierefreiheit einfach. Ein schlechtes Theme macht es extrem schwierig.

Was bedeutet das praktisch? Als Shopware-Kunde solltest du bei der Theme-Auswahl explizit fragen: "Ist dieses Theme WCAG 2.1 AA kompatibel?" Das ist jetzt ein Kriterium für die Auswahl. Viele Standard-Themes sind es nicht.

Auch Shopware Agenturen (wie wir) müssen jetzt Barrierefreiheit im Standard mit einplanen. Das ist keine optionale Zusatzleistung mehr.

Shopify

Shopify hat ähnliche Struktur: Shopify selbst ist weitgehend barrierefrei, das Admin-Interface funktioniert für Nutzer mit Beeinträchtigungen. Aber dein Shop hängt vom Theme ab.

Shopify-Standard-Themes sind teilweise besser als Shopware-Themes in Sachen Barrierefreiheit. Aber: "Teilweise" heißt nicht "vollständig". Du wirst fast immer Anpassungen brauchen.

Unterschied zu Shopware: Shopify ist proprietärer. Du kannst nicht einfach Code angucken und anpassen. Das macht es schwieriger, deinen Shop "barrierefrei zu tunen".

Die Empfehlung für beide Plattformen ist gleich: Wähle das Theme basierend auf Barrierefreiheit aus, oder plane Budget für Anpassungen ein.

In unseren Projekten prüfen wir Barrierefreiheit jetzt von Anfang an mit in den Anforderungskatalog auf. Das spart im Nachgang erheblich Zeit, weil spätere Korrekturen am Theme deutlich aufwändiger sind.

Barrierefreiheit ist auch gut fürs Geschäft

Das ist nicht nur eine Compliance-Geschichte. Barrierefreiheit hat echte Business-Vorteile.

1. Größerer Kundenkreis

7,8 Millionen Menschen in Deutschland mit anerkannten Behinderungen. Plus Millionen mehr mit Altersbeeinträchtigungen (Alterssichtigkeit, Schwerhörigkeit), temporären Beeinträchtigungen (Arm in Gips, Sonneneinstrahlung im Büro) und situativen Beeinträchtigungen (schlechter Internet, alte Hardware).

Ein barrierefreier Shop ist für alle leichter zu nutzen. Das ist größerer Markt.

2. Bessere SEO

Google belohnt barrierefreie Websites. Das zahlt sich auch bei der Conversion Rate Optimierung aus. Der Grund: Ein barrierefreier Shop hat bessere HTML-Struktur, schnellere Ladezeiten, korrekte Seitentitel und Meta-Beschreibungen. Das sind alles SEO-Signale.

Alt-Text für Bilder hilft Google, dein Shop-Kategorien zu verstehen.

3. Bessere User Experience für alle

Ein Shop mit großem, kontrastreidem Text ist nicht nur für Menschen mit Sehbeeinträchtigungen leichter zu lesen. Alle profitieren davon.

Eine logische Struktur mit korrekten Überschriften macht Navigation einfacher für alle.

Keyboard-Navigation ist schneller für Power-User.

4. Schnellere Ladezeiten

Guter Alt-Text ist leichter, als große Bilddateien zu laden. Barrierefrei gebaut heißt oft auch: schlank gebaut. Das ist schneller.

5. Höhere Conversion

Wenn dein Shop einfach zu nutzen ist, kaufen mehr Leute. Das ist unumstößlich.

Praktische Checkliste: Was du konkret im Shop ändern musst

Nicht alle WCAG 2.1 AA Anforderungen sind für deinen Shop relevant. Hier ist eine fokussierte Checkliste für E-Commerce.

Homepage und Navigation

• Farbkontrast Text/Hintergrund mind. 4,5:1 (prüfe mit WebAIM Contrast Checker)
• H1-Überschrift nur einmal und sinnvoll (z.B. "Shop-Name" oder "Willkommen")
• Navigations-Menü mit Tastatur navigierbar, Enter öffnet Submenu
• Alle Links haben aussagekräftigen Text (nicht "hier klicken", sondern z.B. "Zu Kategorie Schuhe")
• Skip-Link am Anfang der Seite (ermöglicht Sprung zur Hauptnavigation)

Produktseiten

• Jedes Produktbild hat Alt-Text (aussagekräftig, nicht generisch)
• Produktbeschreibung und Preis sind deutlich lesbar
• "In den Warenkorb"-Button ist mind. 44x44 Pixel und mit Tastatur erreichbar
• Größe/Farbe/Option Selektoren sind klar gekennzeichnet (nicht nur mit Farbe)
• Beim Auswählen einer Variante wird die Seite nicht verwirrt (Fokus bleibt sichtbar)

Warenkorb und Checkout

• Formularfelder haben Labels (nicht nur Placeholder)
• Pflichtfelder sind klar gekennzeichnet (mit Text, nicht nur *)
• Fehler-Meldungen sagen, was falsch ist (nicht nur "Fehler" in roter Farbe)
• Gutschein-Code-Feld ist mit Tastatur erreichbar
• Radiobuttons und Checkboxen haben klare Labels
• Zahlungsarten-Auswahl ist per Tastatur navigierbar

Footer und allgemein

• Kontakt-Daten sind gut lesbar und strukturiert
• Social-Media-Links haben aussagekräftige Text-Label
• Videos haben Untertitel (falls vorhanden)
• PDF-Links sind gekennzeichnet ("PDF-Download, 2MB")
• Größen-Ratgeber oder andere wichtige PDFs sind als HTML verfügbar

Technisch

• Keine Bild-Text-Inhalte (Grafiken mit eingebundenem Text statt HTML-Text)
• Fokus-Indikator ist sichtbar (z.B. dicker Rahmen um Buttons bei Tab)
• Keine Zeit-Limits oder automatische Weiterleitungen ohne Warnung
• Formulare lassen sich mit Tab navigieren

Quick Wins für sofort umsetzbar

Du brauchst nicht alles sofort zu machen. Hier sind die Maßnahmen mit dem höchsten Nutzen pro Aufwand:

1. Farbkontrast anpassen (2-5 Stunden)

Das ist oft schnell gemacht. Schaue deine aktuelle Farbpalette an mit WebAIM. Mach Text dunkel oder hell genug. Oft reicht es, Text-Farbe von #999 zu #333 zu ändern.

2. Alt-Text für die Top 30 Produkte schreiben (2-3 Stunden)

Nicht den ganzen Shop, fang mit den Top-Verkäufern an. Das gibt dir schnell einen Unterschied.

3. Formular-Labels prüfen (1-2 Stunden)

Guck die Checkout-Seite an. Haben Input-Felder HTML-Labels oder nur Placeholder? Labels sind wichtig. Das kann man schnell fixen.

4. Navigation mit Tastatur testen (1 Stunde)

Nimm eine beliebige Shop-Seite, drücke Tab und guck, ob du überall hinkommst. Du wirst schnell Probleme sehen. Diese Probleme zu fixen kostet oft nicht viel (Fokus-Indikator CSS, Tabindex, etc.).

5. H1 und Überschriften-Struktur prüfen (1-2 Stunden)

Sind Überschriften semantisch korrekt? Ist nur eine H1 pro Seite? Das ist schnell zu fixen.

Das sind 7-13 Stunden Arbeit, die deinen Shop schon deutlich barrierefreier machen.

Fazit: Die Deadline ist vorbei. Das ist Compliance, nicht Optional.

Barrierefreiheit im Online-Shop ist 2026 keine Kür mehr, sondern Pflicht. Das BFSG ist kein lästiges Gesetz, das ignoriert werden kann. Es ist echte Compliance, mit echten Konsequenzen. Die Deadline ist vorbei. Das ist keine Zukunfts-Aufgabe mehr, das ist Gegenwart.

Ein barrierefreier Shop ist ein besserer Shop. Für alle. Mehr Kunden, bessere SEO, einfachere Nutzung. Aber vor allem: Er ist legal.

Wenn du noch nicht WCAG 2.1 AA konform bist, brauchst du einen Plan. Jetzt. Nicht später.

Wo fängst du an?

1. Mach ein Barrierefreiheits-Audit (intern oder mit Agentur). Dringend.
2. Priorisiere die Quick Wins (Kontrast, Top-Produkte, Formulare). Diese Woche anfangen.
3. Plane größere Überarbeitungen (Theme-Wechsel, komplexe Funktionen) sofort.

Das ist nicht überwältigend. Es ist strukturierte Arbeit die du anfangen musst, bevor die Verbandsklagen kommen.