Barrierefreiheitsstärkungsgesetz für Onlineshops – Das solltest du beachten
In diesem Artikel geht es um die Umsetzung der Barrierefreiheit für Online-Händler*innen gemäß dem Barrierefreiheitsstärkungsgesetz (BFSG) ab 2025
- Was ist das BFSG und welche Ziele verfolgt es?
- Welche Bereiche musst du bei der digitalen Barrierefreiheit beachten?
- Richtlinien für die Gestaltung eines barrierefreien Online-Shops
- Offizielle Prüf- & Zertifizierungsstellen für die Barrierefreiheit
- Hilfreiche Tools zur Umsetzung
- Mit welchen Kosten muss ich rechnen, wenn ich das BFSG nicht umsetze?
- Fazit
Hast du schon vom Barrierefreiheitsstärkungsgesetz (BFSG) gehört? Ab Juni 2025 verpflichtet es so gut wie alle Online-Händler*innen in Deutschland, ihre Websites barrierefrei zu gestalten. In diesem Artikel erfährst du alles, was du darüber wissen musst. Zudem geben wir dir Tipps für die Umsetzung der BFSG-Regeln.
Was ist das BFSG und welche Ziele verfolgt es?
Das Barrierefreiheitsstärkungsgesetz (BFSG) wurde 2021 vom Bundestag verabschiedet und verpflichtet ab dem 28. Juni 2025 zur barrierefreien Gestaltung von Websites, digitalen Dokumenten und mobilen Anwendungen. Es basiert auf dem 2019 verabschiedeten European Accessibility Act, der darauf abzielt, die EU inklusiver zu machen, indem er konkrete Anforderungen an die Barrierefreiheit von Gütern und Dienstleistungen stellt.
Das BFSG gilt für Hersteller*innen, Händler*innen und Importeure von Produkten sowie für Anbieter*innen von Dienstleistungen. Kleinstunternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz von höchstens 2 Millionen Euro, die Dienstleistungen anbieten, sind von dem Gesetz ausgenommen – nicht jedoch Kleinstunternehmen, die Produkte verkaufen. Somit betrifft es fast alle E-Commerce-Anbieter*innen in Deutschland.
Welche Bereiche musst du bei der digitalen Barrierefreiheit beachten?
Bei den relevanten Beeinträchtigungen für digitale Barrierefreiheit wird generell in visuelle, auditive, kognitive und motorische Einschränkungen unterschieden. Diese betreffen beispielsweise Personen mit Sehschwäche oder Rot-Grün-Blindheit, Schwerhörige, Legastheniker*innen oder von ADHS Betroffene sowie Menschen mit Gelenkrheumatismus oder Lähmungen. Daraus ergeben sich verschiedene Bereiche, bei denen man auf eine barrierefreie Gestaltung achten muss.
Das World Wide Web Consortium (W3C) hat eine Reihe an Web Content Accessibility Guidelines (WCAG) erstellt, auf die sich auch das BFSG beruft. Im Folgenden stellen wir die wichtigsten Richtlinien für die barrierefreie Gestaltung von Websites vor.
Richtlinien für die Gestaltung eines barrierefreien Online-Shops
1. Text und Layout
Leicht verständliche Sprache
Texte sollten für Website-Besuchende einfach zu verstehen sein und keine komplexen Sätze oder Fachbegriffe enthalten (siehe auch: Leichte Sprache). Bei der Übersetzung in Leichte Sprache können bestimmte KI-Sprachmodelle unterstützen. Allerdings ist es ratsam, die Texte von professionellen Übersetzer*innen prüfen zu lassen. Bei der Nutzung von KI-Diensten muss man zudem darauf achten, keine sensiblen Daten preiszugeben.
Lesbare Schriften
Am besten lesbar sind Sans-Serif-Schriften. Die Schriftgröße sollte mindestens 14 px betragen, und der Text sollte weder kursiv noch unterstrichen sein. Für Hervorhebungen sollten Fettungen genutzt werden. Zudem muss man auf ausreichenden Zeilenabstand achten (etwa das 1,2- bis 1,5-Fache der Schriftgröße). Idealerweise lässt sich die Textgröße individuell von Nutzer*innen einstellen. Erhöhte Buchstabenabstände und vergrößerte Wortabstände können ebenfalls beim Lesen helfen. Zudem sollte man darauf achten, dass sich die Buchstaben I, J, l und 1 sowie db und qp in der Schriftart deutlich unterscheiden, da sie leicht verwechselt werden können.
Übersichtliches Text-Layout
Klare Hierarchien und eine Struktur mit kurzen Absätzen machen vor allem lange Texte einfacher lesbar. Wichtig ist auch eine logische Reihenfolge der Überschriftenstruktur – also eine korrekte Abfolge von H1-, H2- und H3-Überschriften. Das unterstützt Screenreader dabei, den Inhalt korrekt zuzuordnen. Sprachen sollten zudem mit <html lang="de"> definiert und Absätze mit <p>...</p> gekennzeichnet sein.
Kontrastreiche Farbkombinationen
Haben die Farben einen hohen Kontrast, erleichtert das die Lesbarkeit für Menschen mit Sehschwäche. Für sie eignet sich dunkler Text auf hellem Hintergrund am besten. Allerdings gibt es auch Einschränkungen, bei denen andere Kontraste erforderlich sind. Beispielsweise können hohe Kontraste für neurodivergente Menschen ermüdend wirken. Für Personen mit Autismus werden beispielsweise Pastellfarben empfohlen, da sie sensorisch weniger reizend sind. Optimal ist demnach eine Funktion, die es Usern ermöglicht, selbst Kontraste und Farben auszuwählen.
Nicht nur Farbe als Information
Wenn Farbe zur Unterscheidung von Elementen verwendet wird (etwa bei Statusmeldungen), sollte es eine zusätzliche Kennzeichnung geben, die nicht auf Farbwahrnehmung beruht. Zum Beispiel Sternchen, um auf erforderliche Formularfelder hinzuweisen, Checkmarks oder Ausrufezeichen sowie Beschriftungen. Bei der Farbwahl sollte man zudem eine Rot-Grün-Sehschwäche berücksichtigen.
Erkennbare interaktive Elemente
Klickbare Links und Buttons sollten hervorgehoben werden, damit sie leicht zu erkennen sind. Beispielsweise können sie ihre Farbe verändern, wenn man mit der Maus darüber fährt oder sie per Tastatur anwählt. Noch besser ist es, Links zu unterstreichen oder zu fetten. Statt „Hier klicken” sollten Links und Buttons das Ziel des Links in Worten beschreiben. Die Stile und Bezeichnungen für interaktive Elemente sollten auf der gesamten Website einheitlich sein.
2. Bild, Audio und Video
Textalternativen
Bilder müssen mit beschreibenden Alternativtexten versehen werden, die von Screenreadern erkannt werden, damit auch Menschen mit Sehbehinderung visuelle Inhalte verstehen können. Das gilt auch für Videos, die Untertitel und Transkriptionen enthalten sollten (letzteres gilt auch für Audiodateien). Verlassen Sie sich nicht auf Tonsignale, sondern weisen Sie auch visuell auf Elemente hin, die sich verändern oder eine Handlung erfordern.
Gut erkennbare Bilder
Text auf Bildern sollte vermieden werden, ebenso flackernde und blinkende Inhalte, da sie neurodivergente Menschen irritieren können. Pinch- und Zoom-Funktionen helfen Usern, Inhalte individuell zu vergrößern oder zu verkleinern (<meta name="viewport" user-scalable="yes">). Für Grafiken und Videos bieten sich Beschreibungstexte an.
Individualisierbares Bewegtbild
Vor allem für neurodivergente Menschen kann es extrem anstrengend sein, wenn Videos und Motion-Elemente automatisch abgespielt werden. Daher sollten Bewegtbildinhalte von den Nutzern selbst gestartet und pausiert werden können. Generell sollten dekorative Hintergrundbewegungen wie Parallax-Scrolling oder großflächige Animationen im Sinne der Barrierefreiheit vermieden werden.
3. Navigation und Bedienung
Sinnvolle Navigation
Eine sinnvolle Navigation ist nicht nur für beeinträchtigte User wichtig, sondern für alle. So führen etwa unlogische Tab-Reihenfolgen zu Verwirrung. Nutzende sollten zu jedem Zeitpunkt wissen, wo sie welche Inhalte finden und in welchem Bereich der Website sie sich befinden. Hierbei helfen zum Beispiel klar erkennbare Pfade innerhalb von Navigationsanzeigen.
Navigierbarkeit per Tastatur
Websites müssen laut BFSG vollständig über die Tastatur steuerbar sein, also auch Befehle wie Pausieren, Anhalten oder Verstecken bei Audiodateien, Videos und Slidern. Wichtig bei der Tastatursteuerung ist der sogenannte Fokusstatus: Bei Links und interaktiven Elementen wie Buttons und Formularfeldern muss erkennbar sein, wenn sie angesteuert werden, zum Beispiel durch eine sichtbare Umrandung.
Overlays vermeiden
Banner oder Cookie-Overlays, die den Hauptinhalt der Website verdecken und zudem schwer zu schließen sind, sollten vermieden werden.
Geräteunabhängigkeit
Websites müssen für Desktop und Mobile optimiert sein. Wichtig ist, dass Screenreader die Seite unabhängig vom Displaygerät auslesen können.
All diese Funktionen sollten regelmäßig getestet werden – vor allem nach einem Relaunch sowie bei kleineren Änderungen an der Website. Checklisten helfen dabei, nichts zu vergessen.
Offizielle Prüf- & Zertifizierungsstellen für die Barrierefreiheit
Es gibt offizielle Stellen, bei denen du deine Website auf Barrierefreiheit prüfen und zertifizieren lassen kannst. Beispielsweise bietet der TÜV Süd ein Zertifikat an, das nach einer erfolgreichen Prüfung vergeben wird. Auch Agenturen wie For Sale Digital und andere spezialisierte Dienstleister*innen bieten solche Prüfungen gemäß dem Barrierefreiheitsstärkungsgesetz (BFSG) an. Es ist jedoch wichtig zu beachten, dass für die Umsetzung keine Fördermittel zur Verfügung stehen, sodass die Kosten vollständig vom Unternehmen getragen werden müssen.
Hilfreiche Tools zur Umsetzung
UserWayDas Tool hilft bei der barrierefreien Gestaltung von Websites und beinhaltet Funktionen wie Text-zu-Sprache, Schriftgrößenanpassung, Kontrasteinstellungen und Tastaturnavigation. Die Integration ist einfach und erfordert nur wenige Schritte. Nutzer können die Website an ihre Bedürfnisse anpassen, was die Barrierefreiheit verbessert und die Einhaltung von Vorschriften erleichtert.
WAVEWAVE ist eine Suite von Werkzeugen zur Bewertung der Barrierefreiheit von Webinhalten, die dabei hilft, diese zugänglicher für Menschen mit Behinderungen zu machen. Die Suite identifiziert Fehler in der Barrierefreiheit im Einklang mit den Web Content Accessibility Guidelines (WCAG) und bietet Browsererweiterungen für Chrome, Firefox und Edge an, um Barrierefreiheit direkt im Webbrowser zu testen.
accessiBeDas KI-basierte Tool verbessert die Barrierefreiheit von Websites in Echtzeit. Es bietet Funktionen wie automatische Bildbeschreibungen, Tastaturnavigation und Schriftgrößenanpassung. AccessiBe erfordert minimale manuelle Eingriffe und kann schnell auf Websites implementiert werden, um die Zugänglichkeit zu gewährleisten.
Darüber hinaus bieten moderne Browser bereits eigenständige Erweiterungen, mit denen du deinen Onlineshop auf verschiedene Faktoren testen kannst. Der WCAG Contrast Checker von Chrome zeigt dir zum Beispiel, ob die Kontraststärke deiner Elemente den Anforderungen entspricht. Ebenso kannst du mit der Chrome-Erweiterung Web Developer überprüfen, ob deine Webseite auch ohne CSS korrekt und nutzbar dargestellt wird.
Mit welchen Kosten muss ich rechnen, wenn ich das BFSG nicht umsetze?
Wenn die Anforderungen nach einer Warnung und einer Fristsetzung durch die Behörden nicht erfüllt werden, können verschiedene Strafen verhängt werden. Die zuständige Marktüberwachungsbehörde kann beispielsweise entscheiden, dass ein Produkt oder eine Dienstleistung nicht mehr angeboten werden darf, wenn sie nicht barrierefrei ist. Außerdem kann ein solcher Verstoß als Ordnungswidrigkeit gelten, was zu einer Geldstrafe von bis zu 100.000 Euro führen kann. Die Höhe der Strafe hängt dabei von dem*der Anbieter*in der betroffenen Webseite und dem Ausmaß des Verstoßes ab.
Fazit
Es lohnt sich, besser jetzt als später in die Barrierefreiheit von Online-Shops zu investieren. Händler*innen können sich dadurch von der Konkurrenz abheben und neue Zielgruppen erschließen. Außerdem sind sie so bestens auf das Inkrafttreten des BFSG vorbereitet. Zudem kommt hier auch eine rein menschliche Komponente zum Tragen: Internet und E-Commerce sollten so inklusiv wie möglich sein, damit möglichst alle Menschen daran teilhaben können.
Erste Schritte wie Alternativtexte für Bilder und kontrastreiche Texte können schon viel verändern und Websites zugänglicher machen – mehr geht natürlich immer. Mithilfe der oben vorgestellten Richtlinien sind Händler*innen in der Lage, ihre digitalen Shops inklusiver zu gestalten. Einige Software- und Shopsystem-Anbieter*innen bieten erste Hilfestellungen an, doch um wirklich BFSG-konforme Websites und Shops zu gestalten, sollte man sich die Unterstützung von Expert*innen holen.
Wenn Nutzer*innen digitale Anwendungen lieben, sind sie wertvoll für das Unternehmen. Mit dieser Überzeugung führt Tobias Kaiser (45) als strategischer Leiter und Geschäftsführer die Hamburger E-Commerce-Agentur For Sale Digital. Das Unternehmen erstellt E-Commerce-Plattformen und Webshops, optimiert diese und individualisiert sie durch digitale Innovationen. Seit einigen Jahren ist Tobias auch als Speaker und Moderator unter anderem für OMR Reviews im Einsatz.
