Barrierefreie Webseiten: Das sollten Sie vor Inkrafttreten der neuen Pflichten zur Barrierefreiheit wissen

Mit dem 2021 verabschiedeten Barrierefreiheitsstärkungsgesetz (BFSG) tritt ab dem 29.06.2025 eine neue Pflicht für Onlineshop-Betreiber in Kraft: Per Gesetz müssen ab diesem Zeitpunkt alle Onlineshops barrierefrei sein. Genauer gesagt gilt das BFSG für alle Produkte, die ab dem 29.06.2025 in Verkehr gebracht und alle Dienstleistungen, die ab diesem Datum erbracht werden.  

Das Ziel dahinter ist es, allen Menschen die Nutzung von Onlineshops zu ermöglichen. In diesem Blogbeitrag zeigen wir Ihnen, welche grundlegenden Anforderungen auf Sie zukommen und wie Sie diese zielgerichtet umsetzen können.

Was ist das Barrierefreiheitsstärkungsgesetz?

Das Barrierefreiheitsstärkungsgesetz (BFSG) bildet die deutsche Umsetzung der europäischen Barrierefreiheitsrichtlinie (Richtlinie (EU) 2019/882 über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen). Mit dem Ziel, die Zugänglichkeit von Produkten und Dienstleistungen zu stärken, wurde das Gesetz am 16. Juni 2021 verabschiedet. Die Richtlinie legt europaweite Standards für Barrierefreiheit im Onlineshop fest, um sicherzustellen, dass Menschen mit unterschiedlichen Fähigkeiten gleichermaßen von digitalen Angeboten profitieren können und barrierefrei online shoppen können.

Im Juni 2022 konkretisierte eine Verordnung die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen gemäß dem BFSG. Der Gesetzestext tritt am 28. Juni 2025 in Kraft und betrifft explizit alle Onlineshops von Unternehmen mit mehr als zehn Angestellten und einem Jahresumsatz von über 2 Millionen Euro. Lediglich Kleinstunternehmen, die ausschließlich Dienstleistungen über ihren Shop verkaufen, bleiben von dieser Regelung ausgenommen. 

Die Kontrolle und Durchsetzung des Gesetzes obliegen den Marktüberwachungsbehörden der Länder. Diese Instanzen spielen eine zentrale Rolle bei der Überwachung und Umsetzung der Barrierefreiheitsanforderungen, um sicherzustellen, dass Unternehmen die gesetzlichen Standards erfüllen und somit einen inklusiven Zugang zu ihren Produkten und Dienstleistungen gewährleisten. Das BFSG fungiert somit als maßgeblicher Schritt in der Umsetzung des European Accessibility Act, indem es deutsche Unternehmen verpflichtet, die Vorgaben für Barrierefreiheit im Onlineshop gemäß dieser europäischen Initiative zu erfüllen.

Sanktionen bei Nichteinhaltung

Die Missachtung der Bestimmungen des Barrierefreiheitsstärkungsgesetzes (BFSG) kann erhebliche finanzielle Konsequenzen für Onlineshop-Betreiber nach sich ziehen. Bußgelder von bis zu 100.000 € können verhängt werden. Zusätzlich zu diesen Geldstrafen können Verstöße gegen die BFSG-Vorschriften auch als Verstöße gegen das Gesetz gegen den unlauteren Wettbewerb (UWG) betrachtet werden. Dies öffnet die Tür für wettbewerbsrechtliche Abmahnungen, die sowohl Unterlassungs- als auch Schadensersatzansprüche beinhalten können.

Bei Nichterfüllung der Barrierefreiheitsanforderungen kann eine Überprüfung durch Verbraucherschützer bei der Marktüberwachungsbehörde gemäß § 28 BFSG beantragt werden. Diese Behörden überwachen Onlineshops nicht nur aufgrund spezifischer Beschwerden, sondern auch eigenständig. 

Wenn Shop-Betreiber auch nach wiederholten Fristen nicht reagieren, besteht die Möglichkeit, dass die Behörden den Onlineshop schließen. Verbraucher haben zudem die Option, bei einer Schlichtungsstelle nach § 16 Abs. 1 des Behindertengleichstellungsgesetzes ein Schlichtungsverfahren einzuleiten (§ 34 BFSG). In diesem Rahmen kann auch die Marktüberwachungsbehörde auf Antrag des Verbrauchers eingebunden werden. 

Falls die Marktüberwachungsbehörde feststellt, dass eine Webseite nicht den gesetzlichen Anforderungen entspricht, erfolgt zunächst die Aufforderung zur (Wieder-)Herstellung der Barrierefreiheit. Bei wiederholtem Ignorieren dieser Aufforderungen kann die Behörde bis zur Erfüllung die Einstellung des elektronischen Geschäftsverkehrs anordnen.

Was bedeutet Barrierefreiheit im Netz?

Barrieren gibt es auf Webseiten und in Onlineshops viele. Ein gängiges Beispiel für eine Barriere ist, wenn die Farben der Texte und Hintergründe nicht stark genug kontrastiert sind. So kann es für sehbeeinträchtigte Menschen schnell schwierig bis unmöglich werden, diese Texte zu lesen. Auch die Nutzung der Tab-Taste für blinde Menschen und einige mobilitätseingeschränkte Menschen zur Navigation auf einer Website ist ein gutes Beispiel für Barrieren im Onlineshop: Der Shop sollte unbedingt so programmiert sein, dass sich diese Personen mit der Tastatur durch die Seite navigieren können.

Weitere typische Barrieren in Onlineshops sind beispielsweise:  

• Fehlende Alternativtexte bei Grafiken oder Bildern 

• Unzugängliche PDF-Formate 

• Komplizierte Sprache oder zu lange Texte 

• Komplexe Menüs und Navigationskonzepte 

• Zu kleine Navigationselemente oder Schriften

Laut dem Testbericht von Aktion Mensch besteht für die meisten Onlineshops hier großer Handlungsbedarf. Ganze 75 % der untersuchten Shops waren nicht barrierefrei.Onlinehändler sollten daher zeitnah handeln. Die Pflicht zur Barrierefreiheit im Onlineshop rückt immer näher und bei Nichteinhaltung drohen zudem nicht unerhebliche Sanktionen. Die Website muss in erster Linie auch für Menschen mit Behinderung problemlos nutzbar sein, wobei es nicht auf eine bestimmte Behinderung ankommt.  

Onlineshops müssen in angemessener Weise wahrnehmbar, bedienbar, verständlich und performant sein. Die genauen Anforderungen und Entwicklungen können Sie in der Verordnung zum Barrierefreiheitsstärkungsgesetz (BFSGV) nachlesen.  

Kurz gesagt schreibt die Verordnung vor, dass Shops für Menschen mit Behinderung so weit wie möglich nutzbar sein sollen. Außerdem muss

• mindestens eine nicht-manuelle Bedienungsform zur Verfügung stehen muss, die keine feinmotorische Steuerung und Bedienung, Handmuskelkraft oder die gleichzeitige Bedienung von mehr als einem Bedienelement erfordert.

• auch mindestens eine Bedienform angeboten werden, die die Nutzung bei kognitiven Einschränkungen erleichtert.

Im Kontext der Diskussion über die Gestaltung barrierefreier Webseiten sind praktische Beispiele entscheidend, um die Umsetzung der zugrundeliegenden Prinzipien zu verdeutlichen. Barrierefreie Webseiten-Beispiele dienen als Leitfaden für erfolgreiche Implementierungen. Klare und verständliche Texte, gut strukturierte Inhalte, und die Integration von Alternativtexten für Bilder sind einige der Praktiken, die hervorgehoben werden können. Im Zuge der bevorstehenden Pflichten zur Barrierefreiheit für Onlineshops unterstreichen solche Beispiele die Relevanz und die Vorteile einer inklusiven Gestaltung im digitalen Raum. 

Barrierefreiheit als Wettbewerbsvorteil

Das Statistische Bundesamt gab im Juni 2022 eine Pressemitteilung heraus, aus der hervorgeht, dass Ende 2021 fast 10 Prozent der Gesamtbevölkerung in Deutschland schwerbehindert waren – was 7,8 Millionen Menschen entspricht. In der Realität ist diese Zahl aber deutlich höher, denn Menschen mit mittlerer bis leichter Behinderung sind in diesen Zählungen nicht enthalten.  

Wenn Sie Ihren Onlineshop nicht barrierefrei gestalten, schließen Sie also automatisch Millionen von potenziellen Kunden aus. Barrierefreiheit im Onlineshop kann sich also als wahrer Wettbewerbsvorteil erweisen. Wenn Sie bereits jetzt damit beginnen, die Barrierefreiheit online auf Ihrer Website zu erhöhen, können Sie diese Zielgruppe schon heute erreichen und frühzeitig an sich binden.  

Außerdem verbessert ein barrierefreier Onlineshop auch das Nutzererlebnis für alle Shop-Besucher erheblich, wodurch die Verweildauer sowie die Conversions erhöht werden können. Durch die verbesserte Usability können zusätzlich Folgekosten vermieden werden, indem Nutzungsfehler minimiert und damit beispielsweise Anfragen beim Kundenservice reduziert werden. Dank vereinfachter, reibungsloser Prozesse im Checkout lassen sich auch Kaufabbrüche reduzieren – und weniger Absprünge bedeuten auch ein verbessertes Ranking bei Google.  

Wenn Sie Ihren Onlineshop bereits jetzt barrierefrei gestalten, schaffen Sie sich eine großzügige Übergangsphase bis 2025. In dieser können Probleme identifiziert und behoben werden.

Wie gestalte ich eine barrierefreie Website?

Die Schaffung einer barrierefreien Website sollte nicht nur als ethische Verpflichtung angesehen werden, sondern ist auch eine gesetzliche Anforderung, insbesondere vor dem Hintergrund des Barrierefreiheitsstärkungsgesetzes (BFSG). Eine inklusive Gestaltung ermöglicht es Menschen mit unterschiedlichen Fähigkeiten, ohne Hindernisse auf digitale Inhalte zuzugreifen. In diesem Abschnitt werfen wir einen Blick auf die Schlüsselelemente, die Sie berücksichtigen sollten, wenn Sie barrierefreie Webseiten gestalten wollen. 

1. Barrierefreie Texte 

Um sicherzustellen, dass Ihre Texte für alle Nutzer leicht zu verarbeiten sind, ist zunächst ein hoher Kontrast wichtig. Hier hat sich schwarzer Text auf weißen Hintergrund als bewährt bewiesen, weil es für alle Beteiligten am angenehmsten ist. Allgemein gilt jedoch, dass der Kontrast nicht zu gering oder zu hoch sein sollte.Übrigens: Der beliebte Dark-Mode kann hinderlich für barrierefreie Webseiten sein! Nur wenn hier auf die richtigen Farbeinstellungen geachtet wird, kann der Dunkel-Modus die Lesbarkeit verbessern. Allerdings dreht sich dieser Effekt bei schlechter Umsetzung um und die Schrift wird deutlich schlechter lesbar. Wenn Sie dennoch nicht auf den Trend verzichten möchten, müssen Sie Ihren Nutzern unbedingt die Möglichkeit zur Verfügung stellen, zwischen Dark- oder Light-Mode zu wählen - denn nur so kann die Website barrierefrei bleiben. 

Auch die Schriftgröße und Schriftart Ihrer Website-Texte ist ein wichtiger Punkt: Menschen mit Sehbehinderung fällt es sonst schwer, Ihre Website-Texte zu lesen, wenn die Schrift zu klein oder verschnörkelt ist.  

Zudem sollten Sie für eine barrierefreie Website auch die Verständlichkeit der Sprache beachten. Die wenigsten ihrer Website-Besucher sind studierte Germanisten mit einem gewaltigen Wortschatz. Es ist also ratsam, Texte in einer leicht verständlichen Sprache zu verfassen. Falls Sie die Lesbarkeit Ihrer Texte prüfen wollen, können Sie das mit dem sogenannten Lesbarkeitsindex (LIX) feststellen. Dieser Index ermittelt einen Punktewert, der sich unter anderem aus der Anzahl längerer Worte und der durchschnittlichen Satzlänge ergibt.

2. Barrierefreie Bilder und ALT-Texte

Auch die Bilder in Ihrem Onlineshop können barrierefrei zur Verfügung gestellt werden. Das gelingt Ihnen mithilfe der sogenannten Alternativtexte – oft als ALT-Texte abgekürzt. Wenn Sie sich bereits mit der Suchmaschinenoptimierung auseinandergesetzt haben, sind Sie sicher bereits mit den Alternativtexten in Berührung gekommen. Hier kommen sie oft in Spiel, wenn relevante Suchbegriffe in ALT-Texten eines Bildes platziert werden sollen.

Geht es jedoch um barrierefreie Webseiten, sollte ein Alternativtext allerdings die Nutzung erleichtern, indem das jeweilige Bild beschrieben wird. Die ALT-Tags können von Softwares für Sehbehinderte ausgelesen werden. So können blinde Menschen ein Verständnis dafür gewinnen, was auf einer bestimmten Website angezeigt wird.

Mittlerweile verfügt nahezu jedes Content-Management-System (CMS) und jedes Shopsystem über die Möglichkeit, Bilder mit diesen Tags zu versehen. Häufig wird beim Einfügen von Bildern bereits ein automatisch generierter ALT-Text erstellt – diese dienen jedoch eher dazu, die Suchmaschinen zufriedenzustellen. Zur Barrierefreiheit tragen sie eher weniger bei, weshalb Sie ihre Alt-Tags immer selbst verfassen sollten.

3. Barrierefreie Videos 

Für Menschen mit Sehbehinderung sind Videos durch den Ton im Video etwas leichter zu verarbeiten. Allerdings sieht das für hörbehinderte Menschen schon ganz anders aus.  

Sie sollten daher darauf achten, dass bei sämtlichen Videos Untertitel vorhanden sind. Auch wenn hier bereits viel mit künstlicher Intelligenz gelöst werden kann, sollten Sie alle Untertitel prüfen und ggf. manuell anpassen.

4. Kennzeichnen Sie Links 

Damit die Lesbarkeit Ihrer Seite weiter verbessert werden kann, sollten sich Links deutlich vom herkömmlichen Fließtext unterscheiden und sich nicht nur farblich abheben, sondern möglichst auch unterstrichen werden. Zusätzlich sollte jeder Link mit einem eigenen Ankertext ausgestattet werden. Verlinken Sie Bilder, sollten Sie diese ebenfalls so beschriften, dass diese Verlinkung auch für Website-Besucher erkennbar ist. 

Wir bei Latori setzen bei Links klassisch auf Unterstreichungen. Besonders spannende Artikel setzen wir in einen grünen Block - auch hier sticht die Verlinkung durch hellgrüne Schrift besonders hervor.

5. Vergeben Sie Aria-Rollen 

Genau wie die ALT-Attribute steigern auch die Aria-Rollen die Verwendbarkeit Ihrer Seite mit Auslese-Tools für Sehbehinderte. Mithilfe von Aria-Rollen können Sie den Zweck der einzelnen Elemente Ihrer Website definieren.  

So können Sie beispielsweise mit dem Tag role=“button“ das Auslesewerkzeug darauf hinweisen, dass es sich bei einem Element um eine klickbare Fläche handelt. Wenn Sie ein modernes Theme in einem gängigen CMS oder Shopsystem verwenden, brauchen Sie meist nichts weiter zu tun. Mittlerweile verfügen die meisten Themes von Haus aus über eine korrekte Zuweisung der Aria-Rollen.

6. Struktur des Onlineshops 

Der Aufbau einer Website knüpft an barrierefreie Texte an. Werden Besucher von einer Textwand begrüßt, springen Sie schnell wieder ab.  

Am besten nutzen Sie Absätze, die nicht länger als 4 Zeilen lang sind, und brechen den Text mit anderen Elementen in kleinere Einheiten auf.  

Besonders gut geeignet sind dafür:  

• Tabellen 

• Bilder 

• Videos 

• Bullet Points 

• Buttons  

Zwischen diesen Elementen können Sie zusätzlich noch etwas Whitespace einfügen, um die Barrierefreiheit zu fördern. Sehen Sie sich auch die Kontaktformulare auf Ihrer Website im Detail an und prüfen Sie, ob sie für alle Nutzer leicht verwendet werden können. 

7. Bedienbarkeit des Onlineshops

Einige Nutzer sind auf die Bedienung über die Tastatur angewiesen. Gründe dafür können beispielsweise motorische Einschränkungen sein.  

In der Regel wird die Navigation per Tastatur mit der Tabulator-Taste realisiert. Durch den Tastendruck springt der Cursor von einem Link zum nächsten. Oft unterstützen Systeme diese Funktion bereits von Haus aus. Allerdings können einige Elemente die Navigation per Tastatur erschweren. Verzichten Sie daher auf Slideshows, Iframes oder dynamische Elemente.

8. Feedback einholen 

Sie können noch so viel über die Barrierefreiheit lesen und sich informieren – am besten können jedoch direkt Betroffene beurteilen, was Ihrem Shop fehlt und wo Optimierungsbedarf besteht.  

Bieten Sie Ihrer Kundschaft am besten an, Kontakt aufzunehmen und Feedback zu Ihrem Shop und der Barrierefreiheit zu geben. So können Sie schnell feststellen, wo genau Sie noch handeln müssen.  

Barrierefreiheit online testen

Die Sicherstellung von barrierefreien Webseiten erfordert umfassende Tests – hier stehen Ihnen verschiedene Ansätze zur Verfügung. 

Der BITV-Test, basierend auf der deutschen Barrierefreie-Informationstechnik-Verordnung, bietet eine präzise Überprüfung der Barrierefreiheit nach nationalen Standards. Für internationale Richtlinien kommt der WCAG-Test ins Spiel, entwickelt von BIK auf Basis der Web Content Accessibility Guidelines. Diese Expertentests bieten detaillierte Einblicke in die Zugänglichkeit von Webseiten. 

Wenn Sie direkt selbst aktiv werden möchten, stehen zwei Testmöglichkeiten zur Verfügung.

Die BITV/WCAG Selbstbewertung ist ein Prüftool, das speziell für Entwickler von barrierefreien Webangeboten konzipiert ist. Es orientiert sich an den internationalen Web Content Accessibility Guidelines (WCAG) sowie der deutschen Barrierefreie-Informationstechnik-Verordnung (BITV). Diese Selbstbewertung ermöglicht eine detaillierte Überprüfung der Zugänglichkeit von Webseiten nach relevanten Standards. 

Für einen schnellen und unkomplizierten Einstieg bieten die Easy Checks eine effektive Lösung. Diese ermöglichen eine erste Einschätzung der Barrierefreiheit von Internetseiten, indem sie zehn grundlegende Barrierefreiheits-Anforderungen prüfen. Die Easy Checks sind bewusst einfach gestaltet und erfordern kein tiefgehendes Entwickler-Know-how, wodurch sie auch für Nicht-Experten zugänglich sind. 

Diese beiden Tools tragen dazu bei, die Zugänglichkeit von Webangeboten zu verbessern und Entwicklern sowie Website-Betreibern wertvolle Werkzeuge an die Hand zu geben, um die Barrierefreiheitsstandards effizient zu erfüllen.

Darüber hinaus spielen automatisierte Tests eine Rolle, die neben manuellen Prüfungen existieren. Diese automatisierten Tests bieten eine effiziente Möglichkeit, bestimmte Aspekte der Barrierefreiheit zu überprüfen. Es ist jedoch wichtig zu verstehen, dass sie nicht alle Nuancen erfassen können. Daher sollten sie in Kombination mit manuellen Überprüfungen eingesetzt werden, um eine umfassende Sicherstellung der Barrierefreiheit zu gewährleisten.

Barrierefreie Webseiten Beispiele

1. Scope

Die Website Scope.org.uk, die zur Organisation für Behindertengleichstellung Scope gehört, ist besonders fortschrittlich in Bezug auf Barrierefreiheit, vor allem bei der Tastaturnavigation. Das Design von Scope setzt auf leicht erkennbare Bilder, klare Farben und gut gestaltete Schaltflächen, um die Zugänglichkeit zu erleichtern. Eine transparente Liste von Zugänglichkeitsproblemen wird aktiv angegangen. Durch diese Maßnahmen verbessert Scope die Benutzerfreundlichkeit der Website und sorgt gleichzeitig für eine einfache Bedienung.

2. BBC

Das Digital-Team der BBC ist stark dafür, dass alle Menschen die Webseite einfach nutzen können. Sie wollen sicherstellen, dass die Webseite für alle wertvoll ist und dass sich die Nutzer darauf verlassen können. Die BBC-Webseite hat viele kleine Verbesserungen für Zugänglichkeit, wie versteckten Text für Screenreader, einfache Tastaturnavigation und gut gestaltete Links. Die BBC war eine der ersten, die sogenanntes Responsive Webdesign genutzt hat. Das bedeutet, dass die Webseite nicht nur auf verschiedenen Bildschirmgrößen gut aussieht, sondern auch für Menschen, die den Bildschirm größer gemacht haben.

Sowohl der BBC iPlayer als auch BBC Sounds sind gut für Screenreader, Tastaturen und alternative Eingabegeräte gemacht. Alle Programme im iPlayer haben Untertitel, und es gibt eine einfache Navigation für Sendungen mit Beschreibungen und Gebärdensprache.

3. Sensalou

Auch unser Kunde Sensalou veranschaulicht, wie man schrittweise die Barrierefreiheit in einem Online-Shop verbessern kann. Im Shop wird eine klare, geradlinige Schrift ohne Schnörkel verwendet, die Schriftgröße ist groß und die Farbkontraste sind deutlich, was beispielhaft für barrierefreies Design steht. Auch Icons werden extra groß und gut klickbar dargestellt. Damit geht Sensalou definitiv einen guten Schritt in Richtung Barrierefreiheit.

4. Caritas

Die Caritas Österreich setzt sich intensiv für Barrierefreiheit ein, insbesondere für ihre Zielgruppe. Bereits auf der Startseite steht ein Seitenmenü zur Verfügung, das verschiedene Einstellungen ermöglicht. Hierzu zählen eine Funktion für "Leichter Lesen" sowie Anpassungsmöglichkeiten für den Kontrast in Schwarz-Weiß oder Blau-Gelb. Darüber hinaus können Nutzer verschiedene Schriftgrößen wählen und einen Readspeaker verwenden, um die Texte vorlesen zu lassen.

Die gesamte Webseite ist bewusst einfach und übersichtlich gestaltet, mit schwarzem Text auf weißem Hintergrund, um die Lesbarkeit zu optimieren. Klare und aussagekräftige Bilder tragen dazu bei, die Informationen leicht verständlich zu machen. Die bewusst schlichte und übersichtliche Gestaltung erleichtert die Navigation und fördert eine schnelle Orientierung auf der Webseite. All diese Maßnahmen tragen dazu bei, eine barrierefreie und benutzerfreundliche Umgebung für die Besucher zu schaffen.

Fazit – Barrierefreiheit in Onlineshops wird unverzichtbar

Mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) am 29.06.2025 stehen Onlineshop-Betreiber vor neuen, anspruchsvollen Herausforderungen. Die Sanktionen bei Nichteinhaltung sind erheblich, und die Umsetzung erfordert eine ganzheitliche Herangehensweise.