Barrierefreiheit im E-Commerce – was das BFSG jetzt fordert
Pflicht statt Kür ab 2025
· René van Dinter
Seit Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz auch für Online-Shops. Was das konkret bedeutet – und die häufigsten Baustellen, verständlich erklärt.
Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG) – die Umsetzung des European Accessibility Act. Für viele Online-Shops ist digitale Barrierefreiheit damit keine Kür mehr, sondern Pflicht. Höchste Zeit, das Thema ernst zu nehmen.
Wen betrifft das BFSG?
Betroffen sind vor allem B2C-Online-Shops und digitale Dienstleistungen. Es gibt Ausnahmen – etwa für Kleinstunternehmen bei bestimmten Dienstleistungen – aber wer im E-Commerce an Endkunden verkauft, sollte davon ausgehen, dass er in der Pflicht steht.
Kurz gesagt: Ein Shop muss so gebaut sein, dass ihn auch Menschen mit Einschränkungen bedienen können – per Tastatur, mit Screenreader, bei geringem Sehvermögen oder motorischen Einschränkungen.
Der Maßstab: WCAG 2.1 auf Stufe AA
Technisch orientiert sich das Gesetz an der Norm EN 301 549, die wiederum auf die WCAG 2.1 (Level AA) verweist. Die vier Grundprinzipien:
| Prinzip | Bedeutung |
|---|---|
| Wahrnehmbar | Inhalte müssen für alle Sinne zugänglich sein (z. B. Alt-Texte, Kontraste) |
| Bedienbar | Alles per Tastatur nutzbar, genug Zeit, keine Fallen |
| Verständlich | Klare Sprache, vorhersehbares Verhalten, hilfreiche Fehlermeldungen |
| Robust | Sauberes, standardkonformes Markup, das mit Hilfstechnik funktioniert |
Die häufigsten Baustellen im Shop
- Tastaturbedienung: Jede Funktion – Filter, Warenkorb, Checkout – muss ohne Maus erreichbar sein, in sinnvoller Reihenfolge und mit sichtbarem Fokus.
- Formulare: Jedes Feld braucht ein echtes
<label>, Fehlermeldungen müssen erklären, was zu tun ist. - Kontraste: Text zu Hintergrund mindestens 4,5. Ein häufiger, leicht behebbarer Fehler.
- Alternativtexte: Produktbilder brauchen aussagekräftige
alt-Attribute; rein dekorative Bilder ein leeresalt="". - Semantik statt
div-Wüste: Überschriften-Hierarchie,<button>für Buttons, Landmarks (<nav>,<main>) – das ist die halbe Miete.
<!-- Nicht barrierefrei -->
<div class="btn" onclick="addToCart()">In den Warenkorb</div>
<!-- Barrierefrei: echtes Button-Element, per Tastatur & Screenreader nutzbar -->
<button type="button" onclick="addToCart()">In den Warenkorb</button>
Und in Shopware 6?
Die Standard-Storefront bringt eine solide Grundlage mit – aber sobald eigene Themes, Plugins oder Custom-Elemente ins Spiel kommen, verlässt man diesen sicheren Rahmen schnell. Mein Vorgehen:
- Mit semantischem HTML starten, ARIA nur ergänzend einsetzen.
- Früh mit Tastatur und Screenreader testen, nicht erst am Ende.
- Automatisierte Prüfung (z. B. Lighthouse, axe) als Netz – aber der manuelle Test bleibt Pflicht.
Fazit
Barrierefreiheit ist kein Feature, das man am Ende „drüberlegt", sondern eine Haltung, die von Anfang an mitgedacht wird. Der schöne Nebeneffekt: Ein zugänglicher Shop ist meist auch schneller, sauberer strukturiert und besser für Suchmaschinen – Qualität, von der alle profitieren.