Barrierefreiheit im Online-Shop: Was Sie jetzt wissen und umsetzen sollten
Barrierefreiheit im Online-Shop wird ab Juni 2025 in vielen Fällen Pflicht. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) rückt ein Thema in den Fokus, das bisher oft übersehen wurde – obwohl es für alle Online-Shopper zählt. In diesem Beitrag zeigen wir, für wen die neuen Anforderungen gelten, wie Sie Ihren Shop testen können und mit welchen Maßnahmen Sie Schritt für Schritt zur Barrierefreiheit gelangen. Machen Sie Ihren Online-Shop fit für die Zukunft!
Barrierefreiheit im E-Commerce: ab 29.06.2025 Pflicht
Ab dem 29.06.2025 gilt das neue Barrierefreiheitsstärkungsgesetz (Übergangsbestimmungen in § 38). Damit ändern sich die gesetzlichen Anforderungen an Online-Shops. Betreiber müssen dann …
1) ihren Shop barrierefrei gestalten:
- Der Shop muss den Anforderungen zur digitalen Barrierefreiheit gemäß § 19 BFSGV gerecht werden.
- Aufgepasst: Auch Werbung sowie Cookie-Banner und andere Anwendungen von Drittanbietern müssen barrierefrei gestaltet sein. Denn sie werden vom Shop-Betreiber selbst gesteuert.
- Eine erste Orientierung bieten die WCAG-Kriterien.
2) eine Erklärung zur Barrierefreiheit bereitstellen:
- Der Text muss die ergriffenen Maßnahmen zur BFSG-Umsetzung erläutern.
- Er muss in den AGB, im Footer oder an einer ähnlichen, einfach auffindbaren Stelle eingebunden werden.
- Die Erklärung an sich muss ebenfalls barrierefrei sein.
Brauche ich jetzt einen barrierefreien Online-Shop?
Selbst-Check: Für wen das BFSG gilt
Sie wissen nicht, ob Ihr Shop unter das BFSG fällt? Dann prüfen Sie das Barrierefreiheitsstärkungsgesetz – unter Umständen mit einer rechtlichen Beratung an Ihrer Seite. Der folgende Überblick kann Ihnen bei einer ersten Einschätzung helfen:
Die Anforderungen des BFSG sind vor allem umzusetzen von …
- Online-Shops,
- die Produkte und Dienstleistungen
- im B2C-Bereich vertreiben.
Achtung: B2B-Online-Shops sind erst einmal von den neuen Pflichten ausgenommen. Betreiber von Online-Shops, die sowohl im B2B- als auch B2C-Bereich tätig sind, müssen Ihre Pflichten genauer prüfen. Außerdem muss der B2B-Fokus des Shops klar eingrenzt sein und als solcher direkt hervorgehen.
Ausnahmen gelten für:
- Kleinstunternehmen nach § 2 Nr. 17 BFSG (weniger als 10 Mitarbeiter und max. 2 Mio. Euro Jahresumsatz oder Jahresbilanzsumme max. 2. Mio. Euro)
- Online-Shop-Betreiber, die sich nach § 17 BFSG befreit haben lassen
Auch ohne Pflicht: Warum sich Barrierefreiheit lohnt
Unabhängig von rechtlichen Anforderungen bringt ein barrierefreier Online-Shop klare Vorteile:
- Mehr potenzielle Kunden: Viele Menschen leben mit einer Form von Beeinträchtigung.
- Optimiertes Nutzungserlebnis für alle: Bessere Bedienbarkeit sorgt für niedrigere Absprungraten.
- Weniger Kaufabbrüche im Checkout: Barrierearme Prozesse sind klarer, verständlicher – und erfolgreicher.
- Suchmaschinenfreundlich: Viele Accessibility-Maßnahmen wirken sich positiv auf SEO aus.
- Markenimage stärken: Unternehmen mit inklusiven Web-Angeboten zeigen Zukunftsfähigkeit und Werteorientierung.
Tools & Tests: Wie barrierefrei ist mein Online-Shop?
Barrierefreiheit ist messbar – und lässt sich schrittweise verbessern. Diese Tools und Methoden helfen Ihnen dabei:
Automatisierte Analysen
Um zu testen, wie barrierefrei Ihr Online-Shop ist, können Sie externe Prüfberichte anfordern – wie den BIK BITV-Test. Aber auch selbstständig können Sie Ihre Web-Angebote auf digitale Barrieren prüfen. Helfen können Ihnen dabei z.B.:
- die BITV-Selbstbewertung
- Online-Tools, die Einzelaspekte prüfen (wie WAVE)
Manuelle Tests & Feedback
- Bedienbarkeit per Tastatur (Tab-Test)
- Einsatz eines Screenreaders (z. B. NVDA)
- Einbindung echter Nutzer mit Einschränkungen
Häufige Barrieren in Online-Shops – und warum sie problematisch sind
Navigation & Menüführung
- Problem: Viele Menüs basieren auf JavaScript und lassen sich nicht per Tastatur bedienen. Besonders Dropdown-Filter (z. B. nach Größe, Preis) stellen hier Hürden dar.
- Beispiel: Wer Screenreader verwendet, kann keine Auswahl treffen – der Shop wird unbenutzbar.
- Lösung: Navigation per Tab-Taste sicherstellen, Fokus-Zustände visuell hervorheben, ARIA-Rollen für die Semantik nutzen.
Produktseiten
- Problem: Bilder ohne Alternativtexte (Alt-Tags) schließen blinde Menschen aus. Auch Icons wie „Warenkorb“ oder „Herz“-Symbole bleiben ohne Text unerklärbar.
- Beispiel: Ein Produktbild mit nur dem Dateinamen „IMG_232.jpg“ gibt keine Info über Artikel, Farbe oder Variante.
- Lösung: Aussagekräftige Alt-Texte, sprechende Bildbeschreibungen und klare ARIA-Labels.
Videos & Tutorials
- Problem: Videos ohne Untertitel oder Transkripte sind für hörgeschädigte Menschen unzugänglich.
- Beispiel: Ein Produktvideo erklärt Funktionen, aber ohne Ton und ohne Textversion bleibt es unverständlich.
- Lösung: Immer Untertitel bereitstellen, idealerweise auch in einfacher Sprache.
Checkout-Prozess
- Problem: Formulare geben keine verständliche Rückmeldung bei Fehlern. Ein rot markiertes Feld reicht Screenreadern nicht.
- Beispiel: Eine fehlende Postleitzahl wird nur durch rote Umrandung angezeigt – Nutzer mit Sehbehinderung merken es nicht.
- Lösung: Textuelle Fehlermeldungen mit aria-describedby oder role=“alert“ ergänzen.
Mobile Nutzung & Touch-Optimierung
- Problem: Kleine Schaltflächen oder blockierter Zoom verhindern die barrierefreie Nutzung auf Smartphones.
- Beispiel: „Jetzt kaufen“-Button hat nur 30×30 px – für motorisch eingeschränkte Nutzer kaum klickbar.
- Lösung: Mindestgröße 44×44 px, Zoom zulassen, keine Touch-Gesten als einzige Interaktionsmöglichkeit.
So setzen Sie Barrierefreiheit im Online-Shop richtig um
Technische Grundlagen
- Semantisches HTML: z.B. „<header>“ und sinnvolle Überschriftenstruktur
- ARIA-Rollen: z. B. aria-label für Navigationselemente
- Formularpflege: label-Tags zu jedem Feld, Pflichtfeldmarkierung mit Screenreader-Kompatibilität
Shop-Systeme wie Shopware oder Shopify optimieren
- Sichtbare Fokus-Indikatoren für aktive Felder
- Tastatursteuerung für Filter, Slider und Buttons
- Modale Fenster (z. B. Zoomansicht) per Escape-Taste schließen
- Produktvarianten per Tastatur auswählbar machen
Umsetzung in der Praxis: Ihre 3-Schritte-Strategie zur Barrierefreiheit
1. Relevante Barrieren priorisieren
Starten Sie mit den Bereichen, die direkten Einfluss auf Conversions und Nutzererlebnis haben: Navigation, Checkout, Produktseiten. Führen Sie eine kurze Ist-Analyse mit Tools oder einem Audit durch – und priorisieren Sie nach Wirkung.
2. Ihr Team schulen & sensibilisieren
Barrierefreiheit ist Teamarbeit. UX-Designer, Entwickler und Content-Verantwortliche müssen verstehen, worauf es ankommt – etwa beim Umgang mit Farbkontrasten, semantischem Code oder responsivem Design. Eine interne Schulung oder ein kurzer Workshop kann bereits viel bewirken.
3. Kontinuierlich verbessern
Barrierefreiheit ist kein einmaliges Projekt. Planen Sie regelmäßige Audits ein, holen Sie Nutzerfeedback ein und führen Sie neue Standards ein (z. B. WCAG-Updates). So entwickeln Sie eine zukunftssichere, inklusive Markenstrategie – mit echtem Mehrwert für alle Nutzer.
Fazit: Jetzt barrierefrei denken – und handeln
Ein barrierefreier Online-Shop ist nicht nur in vielen Fällen laut BFSG verpflichtend. Er optimiert das Nutzererlebnis und zeigt, dass Sie Ihre Zielgruppe wirklich verstehen. Dafür ist kontinuierliche Arbeit nötig. Shop-Betreiber sollten die User Experience also schnellstmöglich barrierefrei gestalten – vom Menü bis hin zu den einzelnen Produktseiten.
