Barrierefreiheit für Online-Shops: Ein Experte zeigt, wie es richtig geht
Tobias Kaiser6.9.2024
Barrierefreiheit im E-Commerce? Klingt erstmal kompliziert, ist aber super wichtig – und mit diesen Tipps sicher umgesetzt.
Inhalt
- Was ist das Barrierefreiheitsstärkungsgesetz (BFSG)?
- Warum ist Barrierefreiheit im Online-Shop so wichtig?
- Vorteile barrierefreier Online-Shops
- Kein barrierefreier Online-Shop? Das wird teuer!
- Richtlinien für die Gestaltung barrierefreier Online-Shops
- Hilfreiche Tools für Barrierefreiheit im Online-Shop
- Offizielle Prüf- & Zertifizierungsstellen für die Barrierefreiheit
- Fazit: Jetzt handeln und barrierefrei werden
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. Doch was bedeutet Barrierefreiheit konkret für Online-Shops? Erfahre, wie du dein E-Commerce-Angebot gesetzeskonform optimierst.
Das Wichtigste in Kürze
- Ab Juni 2025 müssen die meisten Online-Shops barrierefrei sein.
- Bei Verstößen drohen Abmahnungen, Bußgelder oder Vertriebsverbote für nicht barrierefreie Online-Shops.
- Eine barrierefreie Gestaltung verbessert die Nutzererfahrung, erweitert die Zielgruppe und optimiert das SEO Ranking.
Was ist das Barrierefreiheitsstärkungsgesetz (BFSG)?
Das Barrierefreiheitsstärkungsgesetz (BFSG) wurde 2021 vom Bundestag verabschiedet und verpflichtet ab dem 28. Juni 2025 zur barrierefreien Gestaltung bestimmter digitaler Produkte und Dienstleistungen. Dazu zählen insbesondere:
- Websites
- Online-Shops
- Mobile Apps
- Chatbots und Formulare
- Elektronische Bezahlsysteme
Das Gesetz 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.
Warum ist Barrierefreiheit im Online-Shop so wichtig?
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, die man für barrierefreies Webdesign beachten muss.
Das World Wide Web Consortium (W3C) hat eine Reihe an Web Content Accessibility Guidelines (WCAG) erstellt, auf die sich auch das BFSG beruft.
Vorteile barrierefreier Online-Shops
Die gesetzliche Verpflichtung ist nur ein Aspekt. Achtest du auf Barrierefreiheit in deinem Online-Shop, bringt das klare Vorteile:
- Größere Zielgruppe: Millionen von Menschen mit körperlichen oder kognitiven Einschränkungen profitieren von einer barrierefreien Nutzung.
- Bessere Usability: Eine optimierte Nutzerführung verbessert die Konversionsrate und die allgemeine Kundenzufriedenheit.
- SEO Vorteile: Suchmaschinen bevorzugen barrierefreie Websites, da sie eine bessere Struktur und nutzerfreundliche Inhalte bieten.
- Rechtssicherheit: Wer die neuen Vorgaben ignoriert, riskiert Abmahnungen und Bußgelder.
Kein barrierefreier Online-Shop? Das wird teuer!
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.
Damit du dir darüber keine Gedanken machen muss, stellen wir im folgenden wichtige Richtlinien vor, die sich aus dem Barrierefreiheitsstärkungsgesetz für Websites ableiten.
Richtlinien für die Gestaltung barrierefreier 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.
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
Gut lesbare barrierefreie Schriftarten 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.
Gut lesbare barrierefreie Schriftarten 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Websites müssen für Desktop und Mobile optimiert sein. Wichtig ist, dass Screenreader die Seite unabhängig vom Displaygerät auslesen können.
Hilfreiche Tools für Barrierefreiheit im Online-Shop
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.
Offizielle Prüf- & Zertifizierungsstellen für die Barrierefreiheit
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.
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 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.
Empfehlenswerte Digitale Barrierefreiheitsprogramme
Auf unserer Vergleichsplattform OMR Reviews findest du weitere empfehlenswerte Digitale Barrierefreiheitsprogramme. Mehr als 29 verschiedene Systeme stehen zur Verfügung. Unsere Plattform bietet umfassende Unterstützung in allen Bereichen der Digitalen Barrierefreiheit. Nutze die Gelegenheit, verschiedene Digitale Barrierefreiheitssprogramme zu vergleichen, und berücksichtige dabei echte Nutzerbewertungen, um die ideale Lösung für deine individuellen Anforderungen zu finden:
Fazit: Jetzt handeln und barrierefrei werden
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 barrierefreie Online-Shops und Webistes zu gestalten, empfehle ich die Unterstützung von Expert*innen.
Autor*In
Tobias Kaiser
Autor*In
Tobias Kaiser
Wenn Nutzer*innen digitale Anwendungen lieben, sind sie wertvoll für das Unternehmen. Mit dieser Überzeugung führt Tobias Kaiser (47) als strategischer Leiter und Geschäftsführer die Hamburger E-Commerce-Agentur For Sale Digital. Das Unternehmen bietet ein breites Leistungsspektrum mit Fokus auf Umsatzsteigerung und begleitet Marken von der strategischen Beratung über Konzept, Design und Content bis hin zur technischen Umsetzung sowie der Entwicklung leistungsfähiger Teams. Seit einigen Jahren ist Tobias als Speaker und Moderator unter anderem für OMR Reviews im Einsatz.
