Barrierefreiheitsstärkungsgesetz (BFSG): Informationen für Websitebetreiber

Was ist das Barrierefreiheitsstärkungsgesetz (BFSG)?

Das Barrierefreiheitsstärkungsgesetz (BFSG) tritt am 28. Juni 2025 in Deutschland in Kraft und enthält vor allem Informationen zu den Barrierefreiheitsanforderungen bei Produkten und Dienstleistungen inkl. Websites und Onlineshops. Durch das Gesetz werden Maßnahmen zur Pflicht, die Menschen mit unterschiedlichen Behinderungen den Zugang zu Information und Dienstleistungen ermöglichen. Websites und Online-Shops müssen ab diesem Zeitpunkt barrierefrei umgesetzt sein.

Grundlage für die Barrierefreiheitsanforderungen des BFSG sind die WCAG AA-Kriterien des World Wide Web Consortiums (W3C). Diese enthalten eine Vielzahl internationaler Standards zur barrierefreien Gestaltung von Webinhalten, welche ab dem 28. Juni 2025 verpflichtend eingehalten werden müssen.

Welche Websites sind vom BFSG betroffen?

Das BFSG gilt für Websites aus den Bereichen Banken / Online-Banking / Bankdienstleistungen, Personenbeförderungsdienste, Telekommunikationsdiensten, Online-Shops / E-Commerce und Online-Terminbuchungen.

Welche Änderungen müssen auf betroffenen Websites umgesetzt werden?

Grundsätzlich müssen Websites nach dem BFSG ganzheitlich barrierefrei gestaltet werden. Ausnahmen sind zeitbasierte Medien (z. B. Aufgezeichnete Audio- und Video-Dateien) und Inhalte von Dritten die nicht unter der Kontrolle des Betreibers liegen. Dazu zählt keine Drittwerbung wie Banner, Popups, etc. oder Cookie-Consent-Tools, interaktive Funktionen. Zusätzlich müssen Websitebetreiber ab 2025 eine "Erklärung zur Barrierefreiheit" auf ihrer Website bereitstellen. Nachfolgend die konkreten Anforderungen (WCAG-Kriterien) für Websites und Onlineshops:

Bildschirmausrichtung 

Der Inhalt beschränkt seine Ansicht und Bedienung nicht auf eine einzige Bildschirmausrichtung, wie beispielsweise Hochformat oder Querformat, es sei denn, eine spezifische Bildschirmausrichtung ist unerlässlich. 

Identifizierung des Eingabezwecks

Der Zweck jedes Eingabefelds, das Informationen über den Benutzer sammelt, sollte bestimmt werden. 
Ein gutes Beispiel für die Erkennung des Eingabezwecks ist ein Anmeldeformular für einen Newsletter auf einer Website. Wenn Sie Ihre E-Mail-Adresse eingeben, hat das Eingabefeld einen klaren Zweck: Informationen über Ihre E-Mail-Adresse zu sammeln, damit Ihnen der Newsletter zugeschickt werden kann. Die Website-Technologie sollte in der Lage sein zu erkennen, dass dieses Feld für die E-Mail-Adresse gedacht ist und entsprechend darauf reagieren, z. B. durch die Anzeige einer passenden Tastatur auf einem mobilen Gerät.

Reflow

Der Inhalt kann ohne Informations- oder Funktionsverlust präsentiert werden, ohne dass in zwei Dimensionen gescrollt werden muss, und zwar bei:

• Vertikalem Scrollen des Inhalts bei einer Breite von 320 Pixeln
• Horizontalem Scrollen des Inhalts bei einer Höhe von 256 Pixeln. Ausgenommen sind Teile des Inhalts, die eine zweidimensionale Anordnung für die Verwendung oder Bedeutung erfordern.

Kontrast für nicht-textuelle Elemente

Die visuelle Darstellung der folgenden Elemente weist ein Kontrastverhältnis von mindestens 3:1 gegenüber den benachbarten Farben auf:

• Benutzeroberflächenelemente
  Visuelle Informationen, die erforderlich sind, um Benutzeroberflächenelemente und Zustände zu identifizieren, mit Ausnahme von inaktiven Komponenten oder wenn das Aussehen der Komponente vom Benutzeragenten bestimmt wird und nicht vom Autor modifiziert wird.
• Grafische Objekte
  Teile von Grafiken, die erforderlich sind, um den Inhalt zu verstehen, mit Ausnahme, wenn eine bestimmte Präsentation von Grafiken für die zu vermittelnden Informationen wesentlich ist.

Textabstand

Wenn Text auf einer Website angezeigt wird, sollte er gut lesbar sein. Dazu gehören Dinge wie der Zeilenabstand, der Abstand nach einem Absatz, die Laufweite und wie weit die Wörter voneinander entfernt sind. Diese Abstände sollten so eingestellt sein, dass der Text leicht zu lesen ist, ohne dass wichtige Informationen verloren gehen:

• Die Zeilenhöhe (Zeilenabstand) sollte mindestens 1,5 Mal die Schriftgröße betragen.
• Der Abstand nach Absätzen sollte mindestens 2 Mal die Schriftgröße betragen.
• Der Buchstabenabstand (Laufweite) sollte mindestens 0,12 Mal die Schriftgröße betragen.
• Der Wortabstand sollte mindestens 0,16 Mal die Schriftgröße betragen.

Inhalte bei Maus-Hover oder Fokus

Wenn beim Maus-Hover und anschließende Entfernen des Cursors oder Tastatur-Fokus zusätzliche Inhalte sichtbar und dann wieder unsichtbar macht, gelten folgende Regeln:

• Abwählbar: Es steht ein Mechanismus zur Verfügung, um die zusätzlichen Inhalte zu entfernen, ohne den Mauszeiger-Hover oder den Tastatur-Fokus zu verändern, es sei denn, die zusätzlichen Inhalte geben einen Eingabefehler an oder verdecken oder ersetzen keinen anderen Inhalt.
• Überprüfbar: Wenn der Mauszeiger-Hover die zusätzlichen Inhalte auslösen kann, dann kann der Mauszeiger über die zusätzlichen Inhalte bewegt werden, ohne dass diese verschwinden.
• Persistierend: Die zusätzlichen Inhalte bleiben sichtbar, bis der Hover- oder Fokusauslöser entfernt wird, der Benutzer sie entfernt oder ihre Informationen ungültig sind.
• Ausnahme: Die visuelle Darstellung der zusätzlichen Inhalte wird vom Browser gesteuert und nicht vom Autor geändert.

Tastenkürzel mit Buchstaben

Wenn ein Tastenkürzel in Inhalten nur mit Buchstaben (einschließlich Groß- und Kleinbuchstaben), Interpunktionszeichen, Zahlen oder Symbolen implementiert ist, dann trifft mindestens eine der folgenden Bedingungen zu:

• Ausschalten: Ein Mechanismus ist verfügbar, um das Tastenkürzel auszuschalten.
• Umleitung: Ein Mechanismus ist verfügbar, um das Tastenkürzel so umzuleiten, dass es eine oder mehrere nicht druckbare Tasten (z. B. Strg, Alt) einschließt.
• Nur aktiv bei Fokus: Das Tastenkürzel für ein Benutzeroberflächenelement ist nur aktiv, wenn dieses Element den Fokus hat.

Zeigergesten

Alle Funktionen auf einer Website oder in einer App, die Gesten mit mehreren Fingern oder Pfad-basierte Gesten erfordern, müssen auch mit nur einem Finger bedient werden können, es sei denn, die Verwendung von mehreren Fingern oder Pfad-basierten Gesten ist absolut notwendig. 

Zeigerabbruch

Für Funktionen, die mit einem einzigen Zeiger bedient werden können, trifft mindestens eine der folgenden Aussagen zu:

• Kein Down-Event: Das Down-Event wird nicht verwendet, um einen Teil der Funktion auszuführen.
• Abbrechen oder Rückgängig machen: Die Fertigstellung der Funktion erfolgt beim Up-Event, und es steht ein Mechanismus zur Verfügung, um die Funktion vor Abschluss abzubrechen oder die Funktion nach Abschluss rückgängig zu machen.
• Up-Event: Das Up-Event kehrt jede Auswirkung des vorherigen Herunterdrückens des Zeigers um.
• Fertigstellung: Die Fertigstellung der Funktion beim Down-Event ist unerlässlich.

Beschriftung im Namen

Bei Benutzeroberflächenelementen mit Beschriftungen, die Text oder Bilder von Text enthalten, enthält der Name den visuell präsentierten Text.

Bewegungssteuerung

Funktionen, die durch die Bewegung des Geräts oder des Benutzers bedient werden können, können auch durch Benutzeroberflächenelemente bedient werden, und das Reagieren auf die Bewegung kann deaktiviert werden, um versehentliche Auslösungen zu verhindern, außer wenn:

• Unterstützte Schnittstelle: Die Bewegung wird verwendet, um die Funktion über eine barrierefrei unterstützte Schnittstelle zu bedienen.
• Essenziell: Die Bewegung ist für die Funktion unerlässlich, und das Deaktivieren würde die Aktivität ungültig machen.

Statusnachrichten

Statusnachrichten sollten durch Rollen oder Eigenschaften so bestimmt werden, dass sie dem Benutzer durch assistive Technologien präsentiert werden können.

Ein Beispiel für eine Statusnachricht könnte eine Benachrichtigung auf einer Website sein, die den Benutzer darüber informiert, dass eine Aktion erfolgreich abgeschlossen wurde. Diese Nachricht sollte mit einer entsprechenden Rolle oder Eigenschaft markiert sein, sodass assistive Technologien wie Bildschirmleseprogramme sie erkennen können. Die Nachricht könnte beispielsweise so lauten: "Die Bestellung wurde erfolgreich abgeschickt". Diese Nachricht wird dann von der assistiven Technologie vorgelesen, ohne dass der Benutzer den Fokus darauf setzen muss. Im HTML der Website könnte die Markierung für eine Statusnachricht wie folgt aussehen, indem man eine geeignete Rolle oder Eigenschaft verwendet:

<div role="status" aria-live="polite">
  Die Bestellung wurde erfolgreich abgeschickt.
</div>

In diesem Beispiel wird das <div>-Element als Statusnachricht markiert, indem die role="status" und die Eigenschaft aria-live="polite" verwendet werden. Dies bedeutet, dass die Nachricht vorgelesen werden sollte, ohne den Benutzer zu unterbrechen. Assistive Technologien können dann diese Markierungen verwenden, um die Nachricht korrekt zu interpretieren und dem Benutzer zugänglich zu machen.

Was sollte ich jetzt als Websitebetreiber tun?

Websitebetreiber sollten frühzeitig handeln, um sicherzustellen, dass ihre Websites den Anforderungen des BFSG entsprechen. Dies beinhaltet eine umfassende Überprüfung der Barrierefreiheit ihrer Website und gegebenenfalls Anpassungen oder Überarbeitungen, um die Standards zu erfüllen.

Um die Barrierefreiheit Ihrer Website zu testen, gibt es mehrere Websites, Werkzeuge und weitere Möglichkeiten. Hier sind einige Schritte, die Sie befolgen können:

Automatisierte Tools

Es gibt verschiedene Online-Tools, die Ihre Website automatisch auf Barrierefreiheit prüfen können. Einige beliebte sind:

• PageSpeed Insights
• WAVE (Web Accessibility Evaluation Tool)
• Constrast Checker
• WebAIM's WAVE Browser Extension
• AChecker

Manuelle Überprüfung

Ein automatisiertes Tool kann nicht alle Aspekte der Barrierefreiheit abdecken. Es ist wichtig, Ihre Website manuell zu überprüfen, um sicherzustellen, dass sie für alle Benutzer zugänglich ist. Überprüfen Sie zum Beispiel:

• Die Lesbarkeit des Textes: Stellen Sie sicher, dass der Text ausreichend kontrastreich ist und in angemessener Größe dargestellt wird.
• Die Bedienbarkeit: Überprüfen Sie, ob alle Interaktionselemente (Schaltflächen, Links usw.) gut sichtbar und einfach zu bedienen sind.
• Die Navigation: Stellen Sie sicher, dass Benutzer mit verschiedenen Fähigkeiten problemlos durch Ihre Website navigieren können.
• Screen-Reader-Tests: Testen Sie Ihre Website mit einem Screen-Reader, um sicherzustellen, dass sie von Menschen mit Sehbehinderungen problemlos verwendet werden kann. Screen-Reader wie VoiceOver (für macOS und iOS), NVDA (für Windows) und JAWS sind die gängigsten.
• Tastatur-Navigation: Überprüfen Sie, ob alle Interaktionselemente auf Ihrer Website mit der Tastatur bedient werden können. Menschen mit motorischen Beeinträchtigungen verwenden möglicherweise keine Maus und sind auf die Tastatur angewiesen.
• A/B-Tests: Führen Sie Tests mit verschiedenen Benutzern durch, um festzustellen, wie gut Ihre Website von Personen mit unterschiedlichen Fähigkeiten genutzt werden kann.
• Schulungen und Richtlinien: Informieren Sie sich über die Richtlinien für Barrierefreiheit im Web, wie z. B. die Web Content Accessibility Guidelines (WCAG) um die Barrierefreiheit von Websites besser zu verstehen und umzusetzen.

Was passiert wenn meine Website nicht barrierefrei ist?

Websitebetreiber, deren Webinhalte ab dem 28. Juni 2025 nicht den Anforderungen des BFSG entsprechen, müssen mit Abmahnungen und Bußgeldern bis zu 100.000 € rechnen. Es ist daher entscheidend, rechtzeitig Maßnahmen zu ergreifen, um die Barrierefreiheit der Website sicherzustellen und potenzielle Sanktionen zu vermeiden.