Bedienoberflächen

Wie das BFSG barrierefreie Bedienoberflächen in Deutschland erzwingt

BFSG barrierefreie Bedienoberflächen: Pflichten, BITV 2.0, NAErg- und NIA-Normen, Fristen und prüfbare Nachweise für Websites und digitale Produkte.

Das Wichtigste auf einen Blick

  • BFSG barrierefreie Bedienoberflächen sind für viele digitale Produkte und Dienstleistungen ab dem 28. Juni 2025 verpflichtend.
  • Öffentliche Stellen prüfen nach BITV 2.0, private Anbieter nach der Barrierefreiheitsverordnung.
  • Kontrast, Tastaturbedienung und Screenreader-Ausgabe sind die drei häufigsten Streitpunkte.
  • NAErg und NIA liefern die Normen, mit denen sich Gestaltung nachweisbar prüfen lässt.
  • Die Erklärung zur Barrierefreiheit ist der sichtbare Nachweis gegenüber Kunden und Aufsicht.
  • Typische Fehler entstehen in Farbsystemen, Fokusrahmen und Formularen, nicht im Layout.

Was das BFSG von Websites und digitalen Produkten verlangt

Das Barrierefreiheitsstärkungsgesetz verpflichtet Anbieter, ihre Produkte und Dienstleistungen so zu gestalten, dass Menschen mit Behinderungen sie ohne fremde Hilfe nutzen können. Es setzt die europäische Richtlinie 2019/882 um und gilt seit dem 28. Juni 2025.

Für Gestalter heißt das: Die Bedienoberfläche ist Teil des Produkts. Ein Webshop, eine Buchungsstrecke oder eine Banking-App muss mit Tastatur, Screenreader und Vergrößerung funktionieren. Ob ein Design schön ist, spielt rechtlich keine Rolle. Ob es bedienbar ist, schon.

Der Gesetzestext und die zugehörigen Verordnungen stehen im Volltext bereit, damit Anbieter konkrete Paragrafen prüfen können: Gesetze im Internet. Wer eine bestimmte Vorschrift sucht, findet sie über die Titelsuche im Rechtsportal.

Betroffen sind vor allem Verbraucherprodukte und Dienstleistungen im elektronischen Geschäftsverkehr. Dazu zählen Online-Shops, E-Banking, Personenbeförderung, Telekommunikation und E-Books. Kleine Unternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz sind bei Dienstleistungen teilweise ausgenommen.

Wichtig für die Praxis: Das BFSG verlangt Barrierefreiheit nicht nur auf der Startseite. Jeder Schritt einer Buchung, jeder Fehlertext und jede Bestätigungsmail gehört dazu. Wer nur die Landingpage prüft, erfüllt die Pflicht nicht.

Was konkret gefordert ist

Die Anforderungen orientieren sich an den anerkannten Normen. In der Gestaltung bedeutet das vor allem vier Dinge:

  1. Wahrnehmbarkeit: Inhalte müssen auch ohne Farbe, ohne Maus und ohne Ton erfassbar sein.
  2. Bedienbarkeit: Alle Funktionen sind per Tastatur erreichbar, ohne Zeitdruck und ohne Ausnahme.
  3. Verständlichkeit: Texte, Fehlermeldungen und Beschriftungen sind eindeutig formuliert.
  4. Robustheit: Die Oberfläche funktioniert mit assistiven Technologien und in aktuellen Browsern.

Diese vier Prinzipien stammen aus den WCAG und bilden den Kern jeder Prüfung. Wer sie in ein Designsystem übersetzt, spart sich spätere Nacharbeit.

BITV 2.0 als Prüfmaßstab für öffentliche Stellen und ihre Dienstleister

Für Bundesbehörden, öffentliche Einrichtungen und ihre Auftragnehmer gilt die Barrierefreie-Informationstechnik-Verordnung. Sie beschreibt, wie barrierefreie Informationstechnik auszusehen hat und welche Prüfschritte anzuwenden sind: BITV 2.0 Verordnung.

Die Verordnung verweist auf die WCAG in der Fassung 2.1 auf Konformitätsstufe AA. Für Agenturen, die öffentliche Auftraggeber betreuen, ist das der verbindliche Maßstab. Ein Angebot ohne Kenntnis dieser Stufe ist nicht prüffähig.

Praktisch relevant sind die Prüfschritte der BITV. Sie verlangen unter anderem Alternativtexte, Untertitel für Videos, eine konsistente Navigation und eine funktionierende Fokusreihenfolge. Wer diese Punkte in einem Abnahmeprotokoll dokumentiert, hat einen belastbaren Nachweis.

Öffentliche Stellen müssen außerdem eine Erklärung zur Barrierefreiheit veröffentlichen und eine Kontaktmöglichkeit für Rückmeldungen anbieten. Fehlt sie, ist das ein eigenständiger Verstoß, unabhängig von der technischen Qualität der Seite.

Was Dienstleister beachten müssen

Wer für eine Behörde gestaltet, haftet nicht selbst, muss aber die Anforderungen vertraglich übernehmen. Sinnvoll ist eine Klausel, die den Konformitätszielwert nennt und die Prüfmethode festlegt. Ohne diese Klausel bleibt offen, was abgenommen wurde.

Barrierefreie Bedienoberflächen: Kontrast, Tastatur und Screenreader

Die drei häufigsten Mängel in deutschen Projekten betreffen Kontrast, Tastatur und Screenreader. Alle drei sind gestalterisch lösbar, wenn sie früh eingeplant werden. Nachträglich werden sie teuer.

Kontrastanforderungen nach WCAG

Text muss ein Kontrastverhältnis von mindestens 4,5 zu 1 zum Hintergrund erreichen. Für große Schrift ab 24 Pixel oder 18,66 Pixel fett genügt 3 zu 1. Bedienelemente, Rahmen und Fokusmarkierungen brauchen mindestens 3 zu 1.

Das Problem entsteht selten bei Schwarz auf Weiß, sondern bei Markenfarben. Ein helles Grau auf Weiß, ein Pastellton auf Creme oder ein Verlauf hinter Text fallen regelmäßig durch. Prüfwerkzeuge zeigen den Wert direkt an.

Wichtig: Farbe darf nie das einzige Unterscheidungsmerkmal sein. Ein Pflichtfeld nur rot zu markieren reicht nicht. Es braucht zusätzlich ein Symbol oder einen Text.

Tastaturbedienung

Jede Funktion muss ohne Maus erreichbar sein. Dazu gehören Links, Formularfelder, Aufklappmenüs, Modalfenster und Karussells. Die Reihenfolge der Fokussierung muss der visuellen Reihenfolge entsprechen.

Ein sichtbarer Fokusrahmen ist Pflicht. Wer ihn aus ästhetischen Gründen entfernt, macht die Seite unbedienbar. Besser: den Rahmen gestalten, nicht löschen.

Modale Fenster müssen den Fokus einfangen und nach dem Schließen zurückgeben. Menüs dürfen sich nicht öffnen, ohne dass die Tastatur sie erreicht. Diese Details entscheiden über die Abnahme.

Screenreader-Bedienung

Screenreader lesen den zugrunde liegenden Code vor, nicht das Bild. Deshalb braucht jedes Bild einen Alternativtext, jede Schaltfläche eine verständliche Beschriftung und jede Überschrift eine korrekte Hierarchie.

Dekorative Grafiken erhalten einen leeren Alternativtext, damit sie nicht vorgelesen werden. Icons, die eine Funktion tragen, brauchen eine textliche Entsprechung. Ein Warenkorb-Symbol ohne Beschriftung ist für Screenreader-Nutzer unsichtbar.

Formulare sind der kritischste Bereich. Labels müssen programmatisch mit dem Feld verbunden sein, Fehlermeldungen müssen vorgelesen werden und Hilfetexte müssen erreichbar bleiben. Ein Platzhaltertext ersetzt kein Label.

Wer betroffen ist: Produkte, Dienstleistungen und Übergangsfristen

Das BFSG unterscheidet zwischen Produkten und Dienstleistungen. Bei Produkten greifen die Anforderungen seit dem 28. Juni 2025. Bei Dienstleistungen gilt eine Übergangsfrist bis zum 28. Juni 2030 für Verträge, die vor dem Stichtag geschlossen wurden.

Betroffene Produktgruppen sind unter anderem Computer, Smartphones, Tablets, Selbstbedienungsterminals, Geldautomaten, Fahrkartenautomaten und E-Book-Lesegeräte. Bei Dienstleistungen zählen Online-Shops, E-Banking, Telefonie, Personenbeförderung und audiovisuelle Medien dazu.

Für Gestaltungsbüros bedeutet das: Der Markt wächst nicht plötzlich, aber kontinuierlich. Wer heute barrierefreie Designsysteme baut, verkauft sie morgen an Kunden, die nachrüsten müssen.

Die Übergangsfrist ist kein Freibrief. Neue Verträge und Neuentwicklungen fallen sofort unter die Pflicht. Nur bestehende Dienstleistungsverträge dürfen bis 2030 weiterlaufen.

Betroffene Branchen im Überblick

Branche Typisches Produkt Frist
Handel Online-Shop, Kassenterminal 28.06.2025
Banken Banking-App, Geldautomat 28.06.2025
Verkehr Buchungsportal, Automat 28.06.2025
Telekommunikation Vertragsportal, Router-Oberfläche 28.06.2025
Medien E-Book, Streaming-Oberfläche 28.06.2025
Öffentliche Stellen Behördenwebsite BITV 2.0, laufend

Prüfbare Gestaltung: Normen aus NAErg und NIA anwenden

Barrierefreiheit ist kein Gefühl, sondern eine Messung. Die Normen des DIN liefern die Grundlage dafür. Der Normenausschuss Ergonomie behandelt ergonomische und barrierefreie Gestaltung: NAErg Normenausschuss. Der Normenausschuss Informationstechnik deckt Bedienoberflächen und Informationstechnik ab: NIA Normenausschuss.

Für die Praxis relevant ist die Normenreihe DIN EN ISO 9241, die Anforderungen an interaktive Systeme beschreibt. Sie ergänzt die WCAG um ergonomische Kriterien wie Aufgabenangemessenheit und Selbstbeschreibungsfähigkeit.

Wer nach diesen Normen gestaltet, kann die Einhaltung belegen. Das ist wichtig, weil Aufsichtsbehörden und Auftraggeber Nachweise verlangen, keine Beteuerungen.

Prüfschritte im Projekt

  1. Anforderungen festlegen: WCAG-Stufe, Normenbezug und Ausnahmen schriftlich fixieren.
  2. Designsystem prüfen: Farben, Typografie, Fokusrahmen und Abstände gegen die Kriterien messen.
  3. Komponenten testen: Jede Komponente mit Tastatur und Screenreader durchlaufen.
  4. Seiten testen: Vollständige Nutzerwege inklusive Fehlerfällen abbilden.
  5. Dokumentieren: Ergebnisse mit Datum, Prüfer und Werkzeug festhalten.

Checkliste für die Gestaltungsabnahme

  • Alle Textkontraste erreichen mindestens 4,5 zu 1.
  • Fokusrahmen sind sichtbar und haben mindestens 3 zu 1 Kontrast.
  • Jede Funktion ist ohne Maus erreichbar.
  • Jedes inhaltstragende Bild hat einen Alternativtext.
  • Formularfelder haben programmatisch verbundene Labels.
  • Fehlermeldungen sind textlich und nicht nur farblich markiert.
  • Überschriften folgen einer lückenlosen Hierarchie.
  • Videos haben Untertitel und Audiodeskription, wo nötig.
  • Die Sprache der Seite ist im Code ausgezeichnet.
  • Die Erklärung zur Barrierefreiheit ist verlinkt und aktuell.

Erklärung zur Barrierefreiheit als Nachweis gestalten

Die Erklärung zur Barrierefreiheit ist ein Pflichtdokument für öffentliche Stellen und für viele Anbieter, die unter das BFSG fallen. Sie beschreibt, wie barrierefrei das Angebot ist, welche Inhalte ausgenommen sind und wie Nutzer Mängel melden können.

Inhaltlich braucht sie vier Teile: eine Aussage zum Konformitätsstatus, eine Liste nicht barrierefreier Inhalte mit Begründung, eine Kontaktmöglichkeit für Rückmeldungen und den Hinweis auf die Durchsetzungsstelle.

Gestalterisch ist die Erklärung eine eigene Seite, die selbst barrierefrei sein muss. Sie gehört in die Fußzeile, nicht in ein Untermenü. Wer sie versteckt, riskiert Beschwerden.

Wichtig ist die Aktualität. Eine Erklärung, die einen Stand von vor zwei Jahren trägt, ist wertlos. Änderungen am Designsystem müssen sich im Dokument widerspiegeln.

Praxisbeispiel

Ein Berliner Online-Händler veröffentlichte seine Erklärung zur Barrierefreiheit mit dem Status vollständig konform. Eine Prüfung ergab, dass die Filterfunktion im Katalog nicht per Tastatur bedienbar war. Der Händler musste den Status korrigieren und den Mangel beheben. Die Erklärung war damit erst nach der Nacharbeit belastbar.

Typische Fehler in der Gestaltungspraxis und ihre Behebung

Die meisten Mängel entstehen nicht aus Unwissen, sondern aus Routine. Hier sind die häufigsten, mit der jeweiligen Korrektur.

Fokusrahmen entfernt

Viele Designsysteme setzen outline auf none. Das macht die Seite für Tastaturnutzer unbedienbar. Lösung: einen eigenen Fokusstil definieren, der zur Marke passt und den Kontrastwert einhält.

Farbe als einziger Informationsträger

Rote Pflichtfelder, grüne Häkchen, farbige Statuspunkte. Wer Farben sieht, versteht es. Wer nicht, versteht nichts. Lösung: Symbol oder Text ergänzen.

Platzhalter statt Label

Platzhaltertexte verschwinden beim Tippen. Nutzer verlieren die Orientierung, Screenreader lesen sie unzuverlässig. Lösung: sichtbares Label über dem Feld, Platzhalter nur als Beispiel.

Unklare Linktexte

Hier klicken oder mehr erfahren sagt nichts aus. Screenreader listen Links oft isoliert auf. Lösung: beschreibende Linktexte, die auch ohne Kontext verständlich sind.

Fehlende Alternativtexte

Bilder ohne Alt-Text sind für Screenreader leer. Lösung: inhaltlich relevante Bilder beschreiben, dekorative auszeichnen. Das gehört in den Redaktionsprozess, nicht in die Nacharbeit.

Modale Fenster ohne Fokusmanagement

Der Fokus bleibt hinter dem Fenster, Nutzer verlieren die Orientierung. Lösung: Fokus beim Öffnen setzen, im Fenster halten und beim Schließen zurückgeben.

Autoplay und Bewegung

Automatisch startende Videos und Animationen stören. Lösung: Nutzer entscheidet, Bewegung reduzierbar über prefers-reduced-motion.

Häufige Fragen

Ab wann gilt das BFSG für Websites?

Für Produkte und die meisten Dienstleistungen seit dem 28. Juni 2025. Für bestehende Dienstleistungsverträge gilt eine Übergangsfrist bis zum 28. Juni 2030.

Gilt die BITV 2.0 auch für private Unternehmen?

Nur für öffentliche Stellen des Bundes und ihre Dienstleister. Private Anbieter prüfen nach dem BFSG und den dort genannten Normen.

Welche Kontrastwerte sind Pflicht?

Für normalen Text mindestens 4,5 zu 1, für große Schrift 3 zu 1, für Bedienelemente und Fokusmarkierungen ebenfalls 3 zu 1.

Reicht ein barrierefreies Designsystem?

Nein. Das System ist die Grundlage, aber jede Seite und jeder Nutzerweg muss separat geprüft werden. Fehler entstehen oft in der Anwendung, nicht im System.

Wer prüft die Einhaltung?

Bei öffentlichen Stellen die zuständige Durchsetzungsstelle, bei privaten Anbietern die Marktüberwachung der Länder. Verbraucher können Beschwerden einreichen.

Was kostet die Nachrüstung?

Das hängt vom Umfang ab. Früh eingeplante Barrierefreiheit ist deutlich günstiger als eine Nachrüstung nach der Abnahme.

Mehr aus Bedienoberflächen

Bedienoberflächen

3 Wege zu barrierefreien Bedienoberflächen für Berliner Digitalunternehmen

Barrierefreie Bedienoberflächen Berlin: drei Wege mit BITV-Prüfschritten, Werkzeugen und Aufwandsschätzung für Digitalfirmen in der Hauptstadt.

Bedienoberflächen

Bedienoberflächen für unterschiedliche Nutzergruppen untersuchen

Platzhalter für Gestaltungsbeweis. Diese Rubrik behandelt bedienoberflächen. Wird durch importierte Beiträge ersetzt.