Barrierefreie Websites: Ab 2025 Pflicht für B2C-Unternehmen

Ab 28.06.2025 müssen laut Barrierefreiheits­stärkungs­gesetz (BFSG) alle neuen B2C-Websites barrierefrei sein. So erreichen wir das schon 2024.

Eine barrierefreie Website ist nicht nur für Menschen mit Behinderung geeignet, sondern verbessert die Nutzerfreundlichkeit für alle. Der Aktion Mensch zufolge sind 30 % der Bevölkerung von Einschränkungen betroffen, für 10 % der Bevölkerung ist Barrierefreiheit unerlässlich.

Ab 28. Juni 2025 ist Barrierefreiheit für B2C-Unternehmen Pflicht, für B2B-Unternehmen ist das Barrierefreiheitsstärkungsgesetz (BFSG) noch nicht komplett geklärt.

  

Checkliste zum BFSG

Diese Punkte sind zur Barrierefreiheit ab 28.06.2025 zu beachten und werden nachfolgend genauer erläutert:

1. Pflichtinhalte

  • Erklärung zur Barrierefreiheit
  • Feedback-Formular mit Link zur Beschwerdestelle

2. Webdesign

  • Ausreichender Kontrast gemäß WCAG AA Standard
  • Beschriftungen für Icons und Telefon-Nummern
  • Tastaturnavigation, fokusbedingte Stiländerungen
  • Screenreader-Lösungen für Captchas

3. HTML-Code:

  • Klare Auszeichnung von Header, Content, Footer
  • Sauberer Code (sog. W3C-Validierung)
  • Hierarchische Überschriften, sinnvolle Formatierungen
  • Vermeidung leerer Absätze und Listen

Zielgruppe

In Deutschland sind 13 Millionen Menschen von Sehschwäche, motorischen oder auditiven Einschränkungen betroffen (Quelle: Statista 2017). Dazu kommen 11,8 Millionen Ausländer (Quelle:  DeStatis 2021), für welche etwa einfache Sprache sinnvoll sein kann. Nicht zu beziffern sind Menschen unter Stress und/ oder mit Konzentrationsschwäche, welche ebenfalls barrierefreien Angeboten im Internet profitieren können.

Im Allgemeinen betreffen Barrieren Menschen

  1. mit Sehschwäche oder Blinde, die (manche) Inhalte nicht richtig erkennen können,
  2. mit motorischen Einschränkungen, denen die Navigation mit der Maus oder dem Finger schwerfällt,
  3. mit auditiven Einschränkungen oder Gehörlose, welche Videos und Audioformate wie Podcasts nicht oder nur schwer verstehen können,
  4. mit Konzentrationsschwäche oder Migrationshintergrund, welche sich schwertun, komplexe Informationen zu verstehen.

Ziele

Barrierefreie Websites haben laut AccessbilityChecker im Schnitt 12 % mehr Traffic. Ob das nur durch die Barrierefreiheit kommt, ist zu bezweifeln. Ein offizieller Google-Rankingfaktor ist Barrierefreiheit bislang nicht, allerdings könnte man den Mehr-Traffic auch mit ordentlicheren Layouts und demnach allgemein besserer Nutzerfreundlichkeit erklären. Ferner tendieren behinderte Menschen dazu, entsprechend optimierte Angebote weiterzuempfehlen.

Es gibt vier Grundsätze des barrierefreien Zugangs:

  1. Wahrnehmbarkeit, d. h., die Informationen und Komponenten müssen den Nutzern in einer Weise dargestellt werden, dass sie sie wahrnehmen können
  2. Bedienbarkeit, d. h., der Nutzer muss die Komponenten der Nutzerschnittstelle und die Navigation handhaben können
  3. Verständlichkeit, d. h., die Informationen und die Handhabung der Nutzerschnittstelle müssen verständlich sein
  4. Robustheit, d. h., die Inhalte müssen robust genug sein, damit sie zuverlässig von einer Vielfalt von Benutzeragenten, einschließlich assistiven Technologien, interpretiert werden können.
Das a11y-Projekt bietet eine gut strukturierte und interaktive Checkliste zur Barrierefreiheit (auf Englisch).

Rechtslage

Disclaimer: Ich habe die Inhalte gewissenhaft recherchiert, bin aber kein Rechtsanwalt und kann daher nicht für Korrektheit garantieren.

Barrierefreiheit wird auf Bundesebene in der Barrierefreie-Informationstechnik-Verordnung – BITV 2.0 definiert und ergänzt die EU-Richtlinie 2016/2102, welche den WCAG 2.1 Standard definiert.

Barrierefreiheit ist für die meisten privaten Unternehmen (noch) nicht verpflichtend, aber für öffentliche Stellen auf Bundes-, Landes- und kommunaler Ebene schon. Dazu gehören Museen, die Bahn, Bürgerämter.

Allerdings sind gemäß Artikel 2 Absatz 1 Nr. 4 EU-Vergaberechtsrichtlinie auch private Einrichtungen und Dienstleister, die der Öffentlichkeit offenstehen bzw. bereitgestellt werden müssen, zur barrierefreien Angeboten verpflichtet. Dies trifft insbesondere auf Krankenhäuser und kommunale Nahverkehrsunternehmen zu.

Ausgenommen sind bis Inkrafttreten des Barrierefreiheits­stärkungs­gesetz (BFSG) im Juni 2025 Websites und mobile Anwendungen

  • von öffentlich-rechtlichen Rundfunkanstalten nach Artikel 1 Absatz 3 a) und Nichtregierungsorganisationen, die keine Belange von Menschen mit Behinderungen vertreten;
  • mit Online-Karten und Kartendiensten, sofern bei Karten für Navigationszwecke wesentliche Informationen in einer barrierefrei zugänglichen Weise digital bereitgestellt werden;
  • mit Inhalten von Dritten, die von der betreffenden öffentlichen Stelle weder finanziert noch entwickelt werden noch deren Kontrolle unterliegen;
  • die als Archive gelten, d. h., die ausschließlich Inhalte enthalten, die weder für aktive Verwaltungsverfahren benötigt werden noch nach dem 23. September 2019 aktualisiert oder überarbeitet wurden.
  • Schulen und Kindergärten nach Artikel 1 Absatz 5, unter der Voraussetzung, dass die Inhalte sich nicht auf wesentliche Online-Verwaltungsfunktionen beziehen.

Außerdem kann von der Richtlinie abgesehen werden, wenn eine barrierefreie Website eine unverhältnismäßige Belastung im Sinne des Artikels 5 darstellen würde.

Grundsätzlich muss eine barrierefreie Website über zwei Informationsseiten verfügen, die auf der Startseite (idealerweise im Footer) verlinkt sind:

  1. Eine Erklärung zur Barrierefreiheit, worin definiert wird, welche Inhalte nicht barrierefrei sind. Eine Mustererklärung zur Barrierefreiheit stellt bspw. das Bayerische Staatsministerium für Digitales bereit.
  2. Ein Feedback-Formular, womit auf Mängel der Barrierefreiheit hingewiesen werden kann. Dieser Feedback-Mechanismus muss in der Erklärung zur Barrierefreiheit integriert sein und einen Link zur Beschwerdestelle des Gesetzesgebers enthalten, falls nicht zeitnah oder keine zufriedenstellende Antwort gegeben wird (Vgl. Mustererklärung).

Ferner sind ein barrierefreies Webdesign sowie barrierefreie Inhalte erforderlich, auf die ich nachfolgend eingehe.

Unser Kunde, die Krankenversicherung BKK ProVita bietet besagte Erklärung zur Barrierefreiheit und das Feedback-Formular im Footer an. Zudem werden besonders wichtige Inhalte in leichter Sprache und Videos in Gebärdensprache gezeigt.

Barrierefreies Webdesign

Um eine barrierefreie Website zu realisieren, sollte man sein Team sensibilisieren und genügend Zeit für die Umsetzung einplanen. Viele Maßnahmen im Webdesign und der -Entwicklung sind zwar kaum aufwändiger, sollten aber ordentlich konzipiert werden, um Mehrkosten zu minimieren. Dazu kommen allerdings ggf. Kosten für Testing, sowie zur Entwicklung von barrierefreien Inhalten (einfache Sprache, Videos mit Gebärdensprache). Auf letztere gehe ich im nächsten Kapitel ein.

Aber genug Theorie, schauen wir uns jetzt die Anforderungen an barrierefreies Webdesign in der Praxis an:

Code

Das Design einer Website beginnt schon mit der HTML-Auszeichnung des Kopfbereichs („Header“), des Inhaltsbereichs („Content“) und des Fußbereichs („Footer“), damit klar zwischen der Navigation und den Inhalten unterschieden werden kann. Der HTML-Code einer Website sollte zwar W3C-valide sein…

Screenshot des W3C-Validators

… allerdings muss man die dortigen „Fehler“ prüfen, wie das Beispiel zeigt:

  • Pink markiert sind eigentlich keine richtigen Fehler sondern Warnungen, die das Nachladen von JavaScript-Dateien zur Performance-Optimierung betreffen.
  • Die unteren beiden Boxen mit angeblichen CSS-Fehlern sind auch nicht unproblematisch: Entgegen des W3C-Tests existiert das Attribut antialiased (Quelle: Mozilla), nur halt wie bei den JavaScript-Dateien nicht nach deren sehr konservativen Standard, der nicht mehr ganz aktuell zu sein scheint.

Der WCAG-Test wird auf einer geringen Auflösung von 1024px x 768px (B x H) durchgeführt. Normale Websites werden zwar meist auf 1280px x 720px entwickelt (HD-Auflösung), aber durch die geringe Auflösung wird sichergestellt, dass auch auf kleinen und älteren Displays alles korrekt und ohne Querscrollbalken dargestellt wird.

Schrift

Es gibt zwar keine minimale Schriftgröße, aber ich empfehle mindestens auf 16px zu gehen, um eine gute Lesbarkeit zu gewährleisten. Der WCAG-Test definiert allerdings, dass unabhängig von der Browser-Breite die Schriftgröße um bis zu 200 % vergrößert werden können muss. Dazu ist eine maximale Zeilenbreite von 80 Zeichen zulässig – was primär Desktop-Geräte betrifft. Wir bewegen uns bei unseren Websites und einspaltigen Inhalten daher in der Regel unter 800px Breite.

Da eine reine Schriftvergrößerung unter Beibehaltung der Spaltenbreiten auf Websites kaum erfüllt werden kann und alle gängigen Browser über eine Zoom-Funktion verfügen, fordert der AA-Test lediglich, dass eine Website diese Funktion unterstützt und es zu keinen Darstellungsfehlern und Überlappungen kommt. Da die meisten Websites responsiv entwickelt werden, sprich gleichermaßen für Desktop- und Mobilgeräte, ist die Schriftvergrößerung mittels Zoom-Funktion meist „automatisch“ gewährleistet.

Eine Website-eigene Zoom-Funktion ist zwar nicht Pflicht, aber wenn man trotzdem eine Funktion zur Vergrößerung von Schriften oder zur Aktivierung eines Kontrastmodus anbieten möchte, empfiehlt sich bei WordPress das Plugin WP Accessibility.

Interaktionen

Beim Styling sollte außerdem dringend darauf geachtet werden, dass Buttons und Links ausreichend groß sind, um sie auch etwas ungelenker oder mit dickeren Fingern (mobil bzw. auf Touch-Displays) klicken zu können. Buttons und Links sollten verständlich bezeichnet und klar als solche erkennbar sein, beispielsweise durch Unterstreichung letzterer.

Icons- und Telefon-Nummern sollten mit einer Beschriftung eingesetzt werden, da diese für Screenreader-Nutzer meist unzureichend beschriftet sind: So wird bei Fokussierung der Telefon-Nummer überwiegend nur die Rufnummer vorgelesen oder bei Icons nichts. Ein Hinweis wie „Tel.:“ oder Icon-Labels (Bildunterschriften) helfen dabei.

Zudem sollten alle Interaktionen – Buttons, Links, Formulare, Akkordeons etc. – mithilfe der Tastatur navigierbar (Tab- oder Pfeiltasten) sein und funktionieren. Damit Sehgeschädigte ihre Interaktionen mit der Tastatur besser erkennen, empfiehlt es sich, Focus-Styles in Signal- oder Komplementärfarbe zu definieren.

Auch für visuelle Captchas sollte eine Screenreader-Lösung geboten werden wie eine Rechenaufgabe. Ein Sehgeschädigter tut sich sonst schwer, Brücken zu selektieren oder Buchstaben zu drehen.

Farben

Barrierefreiheit bedeutet aber auch, dass die Farben ausreichend Kontrast haben, damit die Inhalte einfach lesbar sind. Texte oder inhaltlich relevante Objekte sollten demnach mindestens den WCAG AA Standard erfüllen:

Eines meiner Lieblingstools zur Barrierefreiheit ist der Contrast Checker, mit dessen Hilfe man ermitteln kann, ob sich die auf der Website gewählten Schrift- und Hintergrundfarben ausreichend voneinander absetzen.

Elemente wie Schmuck- oder Hintergrundbilder sind davon per se nicht betroffen. Wenn Bilder aber wichtige Informationen für den Kontext enthalten oder Inhalte darauf abgebildet sind, ist ausreichend Kontrast dringend ratsam. Aus Sicht der Ladezeit-Optimierung empfehle ich auf Schmuck- oder Hintergrundbilder komplett zu verzichten.

Aber auch ähnlich satte Farben können problematisch sein, wenn beispielsweise Menschen mit einer Rot-Grün-Schwäche diese nicht mehr unterscheiden können. Ein praktisches Tool, um so etwas nachvollziehen zu können, ist der Color-Blind-Simulator von Venngage.

Barrierefreie Inhalte

Grundsätzlich sollten Inhalte mit einer hierarchischen Überschriften-Struktur und Formatierungen versehen werden. Das ist übrigens auch zur Suchmaschinenoptimierung dringend empfehlenswert.

Screenshot aus dem Web Accessibility Evaluation Tool (WAVE)

Außerdem sollten leere Absätze und sinnfreie Listen unbedingt vermieden werden. Und umgekehrt sollten alle auflistbaren Elemente auch als solche formatiert werden.

Metadaten

Der Dokumententitel muss den Inhalt der individuellen Seite und das Webangebot (Firmennamen) enthalten. Aus SEO-Sicht ist der Firmenname zwar nur optional, da dieser meist schon in der Domain enthalten ist, aber wenn man den Firmennamen in Kurzform hinten anstellt, ist der Spagat zwischen Barrierefreiheit und SEO möglich.

Textverständnis

Barrierefreie Texte sollten leicht zu verstehen sein. Dabei kann man entweder Inhalte von vorneherein einfacher und in kurzen Sätzen formulieren, oder man bietet sie optional in einfacher Sprache an.

Es gibt zwar keine feste Regel, die vorschreibt, wie einfach oder kompliziert die Inhalte sein sollten, da dies von der Zielgruppe abhängig ist. Wenn man aber alle Menschen erreichen will, sollten Texte auch mit niedriger, sekundärer Schulbildung verstanden werden können. Das bedeutet einen Flesch-Wert von 71 zu erreichen:

Flesch-Reading-Ease-Score Lesbarkeit Verständlich für
0–30 Sehr schwer Akademiker
30–50 Schwer
50–60 Mittelschwer
60–70 Mittel 13–15-jährige Schüler
70–80 Mittel leicht
80–90 Leicht
90–100 Sehr leicht 11-jährige Schüler
Quelle: Wikipedia

Zusätzlich ist es empfehlenswert, Inhalte in leichter Sprache und Gebärdensprache anzubieten, was aber deutlich aufwendiger ist, als kurze Sätze zu formulieren. Hier möchte ich auch wieder unseren Kunden, die Krankenkasse BKK ProVita nennen, welche diverse Informationen in Deutscher Gebärdensprache (kurz: DGS) auf ihrer Website anbietet.

Screenshot von der BKK ProVita Website mit Videos zur Gebärdensprache

Bilder & Videos

Wie bereits erläutert empfiehlt es sich aus Performance-Gründen auf Schmuck- und Hintergrundbilder sowie Videos im Hintergrund von Websites zu verzichten, wenn diese nicht zum Kontext beitragen. Sind Schmuckbilder und -Videos unvermeidlich, sollten dafür keine Alternativtexte hinterlegt werden, da diese meist irrelevant sind und es sehgeschädigten und blinden Nutzern erschweren, mithilfe eines Screenreaders die Inhalte einer Website zu verstehen.

Umgekehrt sollten aber alle Bilder, die etwas zum Kontext beitragen, mit beschreibenden Alternativtexten oder Bildunterschriften sowie Videos mit Untertiteln versehen werden. Darin sollten keine Keywords zur SEO auftauchen, sondern wirklich beschrieben werden, was abgebildet ist. Google kann übrigens Bilder auch ohne Alternativtext schon gut verstehen.

Mithilfe des reCaptcha vermeidet Google nicht nur Spam, sondern trainiert seine K.I. zur Bilderkennung.
YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

PGlmcmFtZSB0aXRsZT0iVmlkZW8gYmVzdCBwcmFjdGljZXMgZm9yIEdvb2dsZSBTZWFyY2ggJmFtcDsgRGlzY292ZXIiIHdpZHRoPSI3NjAiIGhlaWdodD0iNDI4IiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkLzFacWt6OFlfa0Z3P2ZlYXR1cmU9b2VtYmVkJnNob3dpbmZvPTAmcmVsPTAmYXV0b2hpZGU9MSIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIGFsbG93ZnVsbHNjcmVlbj48L2lmcmFtZT4=

Die Untertitel von Videos eignen sich übrigens auch zur Video-SEO. Mit anderen Worten: Spricht man die Keywords ein, mit denen man gefunden werden will, erhöht das die Reichweite. Aber wie gesagt, bitte die Untertitel nicht inflationär mit Keywords vollstopfen, sondern Keywords sinnvoll nennen – wir entwickeln unsere Inhalte ja nicht für Google oder YouTube, sondern für Menschen.

Formulare

Formulare sollten mit klaren Beschriftungen („Labels“) versehen werden, damit vor und nach Eingabe von Informationen klar ist, was benötigt wird. Außerdem sollte durch Klick auf die Beschriftung (zum Beispiel auf das Wort “Vorname”) der Mauszeiger in das Eingabefeld springen.

Des Weiteren sollten Formularfelder für das automatische Ausfüllen („Autocomplete“) vorbereitet sein, damit Nutzerinnen ihre Kontaktdaten nicht manuell eintippen müssen.

Das Formular-Plugin GravityForms (Partnerlink) bietet bei Kontaktfeldern mit einem Klick die richtigen Attribute zur Auto-Vervollständigung. Hier werden die Labels für Autocomplete erläutert.

Das Nachricht-Feld in Formularen sollte erst nach Eingabe der Kontaktdaten erscheinen.

Fazit

Barrierefreie Web-Entwicklung ist leicht, wenn man die Grundlagen zur Lesbarkeit (Kontraste, Schriftgröße, Dimensionen) beachtet, ordentliche Formatierungen anwendet und einfache Sätze verfasst.

Durch eine barrierefreie Website erreicht man mehr Menschen und integriert sie besser in die Gesellschaft. Barrierefreiheit ist auch ein Qualitätsstandard für Websites, denn die Effekte einer gut entwickelten Seite wirken sich positiv auf das Ranking (SEO) aus.

Hinweis: Die erste Version dieses Beitrags ist im November 2022 entstanden. Hiermit geht ein Dank an Saskia Bader, deren Vortrag auf der Campixx-Konferenz im Juni 2023 mir bei der Aktualisierung dieses Artikels geholfen hat.

Array
(
    [id] => 1
)

Severin Lucks

Geschäftsführer der DELUCKS GmbH und Ideengeber für websei.de. Ich mag die Kombination von gutem Design, ansprechenden Texten und wirkungsvoller SEO.