Das BFSG wird ab 2025 verpflichtend und auch Websites sind davon betroffen. Nachdem wir Ihnen in einem früheren Beitrag bereits einen Überblick über das Gesetz, seine Hintergründe und mögliche Maßnahmen gegeben haben, möchten wir Ihnen nun unsere detaillierte BFSG-Checkliste vorstellen.
Disclaimer: Die Informationen in diesem Beitrag haben wir mit größter Sorgfalt recherchiert. Dennoch übernehmen wir keine Haftung für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Informationen. Diese sind insbesondere allgemeiner Art und stellen keine Rechtsberatung dar. Zur Lösung von konkreten Rechtsfällen konsultieren Sie bitte unbedingt einen Rechtsanwalt.
Ab 2025 sind viele Websites und Onlineshops in Deutschland verpflichtet, ihre Angebote barrierefrei im Internet bereitzustellen. Wir haben eine Checkliste erstellt, die Ihnen bei der Umsetzung behilflich sein kann.
WICHTIG: Die Liste ist nicht vollständig und bietet keine rechtliche Gewährleistung. Obwohl wir die Punkte sorgfältig ausgewählt haben, lässt das BFSG in einigen Bereichen Interpretationsspielraum. Letztlich tragen Sie die Verantwortung für Ihre Website.
Inhalt
Website
- Die Website hat für jede Seite eine über ein Sprachattribut festgelegte Hauptsprache (z.B. <html lang=„de“>).
- Die Website funktioniert vollständig sowohl im Hochformat als auch im Querformat.
- Wiederholte Navigationsmechanismen erscheinen konsistent in gleicher Reihenfolge und im gleichen Aufbau.
- Elemente mit gleicher Funktion sind konsistent als solche erkennbar.
- Wenn Hilfsmechanismen auf mehreren Seiten vorhanden sind, sollten sie konsistent platziert werden.
- Benutzerschnittstellenkomponenten (wie Formularelemente, Links, Button und skriptbasierte Elemente) sollten durch ARIA-Attribute (Accessible Rich Internet Applications) wie name, role, states, properties und values semantische Informationen bereitstellen, die die Barrierefreiheit verbessern. Diese Attribute unterstützen Screenreader und andere assistive Technologien dabei, die Interpretation und Nutzung interaktiver Funktionen zu erleichtern.
- Statusänderungen wie Fehlermeldungen, Erfolgsmeldungen oder Ladebalken können von unterstützenden Technologien (AT, Assistive Technologien, z. B. Screenreader, Braillezeilen) vorgelesen werden.
- Die Besucher haben mindestens zwei Optionen, die gleiche Seite bzw. Inhalt zu erreichen. Ausnahme: wenn die Seite ein Teil eines Prozesses ist (z.B. Bestellbestätigungsseite).
- Alle Elemente sind per Tastatur bedienbar:
- Zu jeder Mauszeigerbewegung gibt es eine entsprechende Tastatureingabe.
- Wird die Website in einer bestimmten Reihenfolge navigiert, ermöglicht die Reihenfolge des Tastaturfokus eine äquivalente Reihenfolge.
- Die Website hat eine sichtbare Tastaturfokusanzeige mit ausreichend Kontrast.
- Der Tastaturfokus kann ausschließlich über die Tastatur bewegt werden, wenn nicht, wird der User darauf hingewiesen.
- Ist ein Element im Tastaturfokus, ändert sich die Umgebung des Elements nicht (z.B. Öffnen eines neuen Fensters).
- Das Element im Tastaturfokus muss, zumindest teilweise, sichtbar sein und darf nicht komplett durch andere eingeblendete Inhalte verdeckt sein.
- Falls Tastaturkombinationen auf der Website eingebunden sind, können sie deaktiviert oder verändert werden, oder nur aktiviert werden, solange das entsprechende Element im Tastaturfokus ist.
Aufbau der einzelnen Seiten
- Jede Seite hat einen logischen Aufbau der Inhalte und eine klare Struktur durch die Nutzung von HTML-Tags (z.B. H1-H6 etc.), die für User verständlich und von unterstützenden Technologien in gleicher Abfolge zu erfassen ist.
- Die Überschriften und Labels (z.B. Beschriftung eines Eingabefeldes) haben aussagekräftige Titel.
- Jede Seite verfügt über einen beschreibenden Tab-Namen im <title>-Tag.
- Nicht-Text-Inhalte wie Buchstabenmuster, Emoticons oder Bilder mit Text erhalten einen beschreibenden Alternativtext im <alt>-Attribut.
- Es gibt die Möglichkeit, sich wiederholende Inhalte zu überspringen.
- Text kann ohne Verlust von Informationen und Funktionen bis zu 200 % vergrößert werden.
- Benutzer können den Seiteninhalt anpassen, ohne dass Inhalte oder Funktionen verloren gehen, indem sie die folgenden Attribute ändern: eine Zeilenhöhe von mindestens 1.5rem, einen Abstand zwischen Absätzen von mindestens 2rem, einen Buchstabenabstand von mindestens 0.12rem und einen Wortabstand von mindestens 0.16rem.
- Zweck und Ziel der Links werden durch den Linktext oder Kontext deutlich.
Inhalt
- Die Inhalte sind unabhängig von Farben, Formen, Größe, Sound, Orientierung und visueller Ausrichtung verständlich.
- Blinkende, sich bewegende oder scrollende Inhalte, die automatisch anfangen, länger als fünf Sekunden dauern und parallel mit anderem Inhalt präsentiert werden, können gestoppt, deaktiviert oder versteckt werden. Ausnahme: die Funktion ist essenziell.
- Kein Blitzen/rotes Blitzen länger als 3x/Sekunde oder Blitz ist unterhalb des Schwellenwertes (nach 2.3.1)
- Bei von Kunden gelieferten Texten ist darauf zu achten, dass Eigennamen, Fachsprache, unbestimmte Sprache oder Inhalt in Fremdsprache als solche gekennzeichnet werden; ausgenommen sind Inhalte in Umgangssprache oder Lehnwörter.
Design
- Die verwendeten Farben sind nicht das einzige visuelle Mittel, um Informationen zu übermitteln, Aktionen zu verdeutlichen, Reaktionen auszulösen oder ein visuelles Element hervorzuheben.
- Ein ausreichender Kontrast in der Farbgebung muss sichergestellt sein: 4.5:1 bei normalem Text (weniger als 24px oder weniger als 18.5px fett), 3:1 bei großen Texten sowie Elemente der grafischen Benutzeroberfläche oder sonstigen grafischen Objekten. Ausgenommen sind Logos und dekorative Elemente.
- Responsives Design ist umgesetzt: Der Inhalt bleibt bei einem sichtbaren Bereich bis zu einer Breite von 320px bei vertikalem Scrollen oder einer Höhe von 256px bei horizontalem Scrollen gut lesbar und wird in einer Spalte dargestellt. Eine mehrspaltige Anordnung ist nur dann zulässig, wenn sie für das Verständnis unerlässlich ist (z.B. bei Bildern, Karten, Werkzeugleisten etc.).
- Zusätzlicher Inhalt kann bei Hover oder Tastaturfokus ausgeblendet werden.
- Zusätzlicher Inhalt, der bei Hover über ein Element angezeigt wird, muss sichtbar bleiben, solange der Hover/Fokus besteht, der Benutzer ihn nicht ausblendet oder die Information relevant bleibt. Eine Ausnahme gilt, wenn der Inhalt keinen anderen Inhalt überlagert oder eine Fehlermeldung anzeigt.
- Text wird anstelle von Bildern mit Text verwendet. Wenn dennoch ein Bild mit Text eingesetzt wird, muss dieser Text genauso anpassbar sein wie normaler Text. Eine Ausnahme bilden Logos.
- Klickbare Elemente müssen einen klickbaren Bereich von 24 x 24 px haben, was auch dann erfüllt ist, wenn:
- Ein Mindestabstand von 24px zu allen Seiten zu anderen klickbaren Elementen vorhanden ist.
- Ein äquivalentes Steuerelement vorhanden ist, das die oben genannte Mindestgröße erfüllt.
- Das klickbare Element ein Inline-Element ist.
- Die Größe vom User Agent z.B. an den Browser festgelegt wird.
Ausnahme: Wenn es essenziell oder gesetzlich vorgeschrieben ist.
Audio, Video und Animationen
- Zeitbasierte Medien (aufgezeichnete Medien, die vor- und zurückgespult werden können) haben einen beschreibenden Alt-Text – (vom Kunden sicherzustellen)
- Es sind Alternativen für zeitbasierte Medien vorhanden (z.B. Transkription, Audio-Deskription) – (vom Kunden sicherzustellen)
- Voraufgezeichnete Medien, die vertont sind (z.B. Video mit Audio, auch synchronisierte Medien genannt) haben synchronisierte Audio-Deskriptionen; Ausnahme: Alle Informationen aus dem Video sind schon im existierenden Audio vorhanden – (vom Kunden sicherzustellen)
- Untertitel sind in synchronisierten Medien vorhanden. Das gilt auch für Live-Übertragungen – (vom Kunden sicherzustellen)
- Bei einer automatischen Wiedergabe von Audio, die länger als drei Sekunden dauert, gibt es die Möglichkeit zum Pausieren, Stoppen oder Stummschalten.
Funktionen
- Für Funktionen, die mit einem Mauszeiger oder Finger bedient werden, gilt mindestens einer der folgenden Punkte:
- Die Funktion wird über das Up-Event (Loslassen des Mauszeigers/Fingers) ausgelöst, nicht über Down-Event (= Runterdrücken).
- Die Funktion kann vor dem Auslösen abgebrochen oder nach dem Auslösen rückgängig gemacht werden.
Ausnahme: Wenn es essenziell ist.
- Funktionen, die durch Bewegungen aktiviert werden (z.B. schütteln für rückgängig), können durch zusätzliche barrierefreie Steuerelemente aktiviert werden.
Ausnahme: Wenn es essenziell ist. - Funktionen, die durch Wisch-/Ziehbewegung (z.B. Wechseln zwischen offenen Apps) ausgelöst werden, haben eine äquivalente Alternative; Ausnahme: es ist essenziell
- Zeitlimits auf der Website können deaktiviert oder angepasst werden (mind. um das 10-fache der Standardeinstellung) und zusätzlich muss folgendes geschehen:
- User wird gewarnt, bevor das Zeitlimit erreicht wird, dann hat er mind. 20 Sekunden Zeit, um das Limit mit einer simplen Aktion zu verlängern (User kann insgesamt mind. 10 Mal verlängern).
- Ausnahme: Das Zeitlimit ist essenziell und keine Alternative zum Zeitlimit ist möglich oder das Zeitlimit ist länger als 20 Stunden.
- Bei sich automatisch aktualisierenden Informationen, die selbständig anfangen und parallel mit anderem Inhalt präsentiert werden, gibt es eine Möglichkeit zum Stoppen, Deaktivieren oder Verstecken.
Ausnahme: Wenn es essenziell ist.
Formulare und Eingabefelder
- Die Labels (Beschriftung des Eingabefeldes) und Anweisungen zeigen an, wo und was der User eingeben muss.
- Der Zweck eines Eingabefeldes ist verständlich, zusätzlich zum Label gibt es Verständnishilfen für die Eingabefelder (z.B. Icons, automatisches Ausfüllen des Formulars)
- Jedes Formularfeld erhält in Abhängigkeit von der Nutzbarkeit eines der ARIA-Attribut (Accessible Rich Internet Applications) wie name, role, states, properties und values semantische Informationen bereitstellen, die die Barrierefreiheit verbessern.
- Ändert sich die Umgebung beim Ausfüllen der Felder, wird der User darauf hingewiesen.
- Wird ein Eingabefehler automatisch erkannt, wird der User über den betreffenden Fehler textlich informiert.
- Wird ein Eingabefehler automatisch erkannt und sind Verbesserungsvorschläge vorhanden, wird der User darüber informiert. Ausnahme: Die Mitteilung würde die Sicherheit oder Zweck des Inhalts gefährden.
- Bei rechtlichen Verpflichtungen oder finanziellen Transaktionen ist mindestens einer der drei Punkte erfüllt:
- Die Übermittlung der Daten kann rückgängig gemacht werden,
- Daten können auf Eingabefehler geprüft oder korrigiert werden,
- Ein Mechanismus ist vorhanden, mit dem der User seine Daten überprüfen, bestätigen oder korrigieren kann bevor er sie final übermittelt.
- Bei einer wiederholten Dateneingabe gilt: Formularfelder werden entweder automatisch mit Daten ausgefüllt oder vom User auswählbar gemacht.
Ausnahme: die erneute Dateneingabe ist essenziell, nötig für die Sicherheit des Inhalts oder zuletzt eingegebene Daten sind nicht mehr gültig. - Captcha: Ein Alt-Text und zusätzliche barrierefreie Captcha-Alternative sind vorhanden (z.B. Audio-Captcha, leichter Wissenstest, Zwei-Faktor-Authentifizierung).
- Ein rein kognitiver Test zur Authentifizierung ist möglich, wenn einer der folgenden Punkte ermöglicht wird:
- Es ist eine Alternative zum kognitiven Test vorhanden (z.B. Face-ID, Fingerabdruck).
- Es sind Hilfsmechanismen für das Lösen der Aufgabe vorhanden.
- Der kognitive Test besteht daraus, Objekte oder persönlichen Inhalt zu erkennen, der zuvor der Website vom User zur Verfügung gestellt wurde.
Informationspflicht
Fällt ein Unternehmen in das BFSG, muss es nicht nur die Barrierefreiheitsanforderungen erfüllen, sondern mit einer „Erklärung zur Barrierefreiheit“ auf der Website nach Anlage 3 Nummer 1 BFSG über den Status der Barrierefreiheit auf der Website aufklären.
(Neben diesen Informationen muss der Dienstleister, die Anforderungen an die Verbraucherinformationen nach Artikel 246 des Einführungsgesetzes zum Bürgerlichen Gesetzbuch einbinden.)
Diese Informationen müssen für die Allgemeinheit in barrierefreier Form zugänglich sein. Der Dienstleister muss diese Informationen so lange aufbewahren, wie er die Dienstleistung anbietet oder erbringt.
Das kann in den AGB oder woanders auf der Website auf „andere deutlich wahrnehmbare Weise“ geschehen.
Darunter zählt, soweit anwendbar:
- Allgemeine Beschreibung der Dienstleistung in einem barrierefreien Format.
- Beschreibung und Erläuterungen, die zum Verständnis der Durchführung der Dienstleistung erforderlich sind.
- Beschreibung wie die Dienstleistung die Anforderungen (nach dem BFSG) erfüllt.
- Angaben zur zuständigen Marktüberwachungsbehörde.