BFSG Praxis-Ratgeber: Barrierefreiheit Schritt für Schritt umsetzen

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit dem 28. Juni 2025 in Kraft — und die Übergangsfrist ist abgelaufen. Trotzdem sind viele Websites noch weit davon entfernt, die gesetzlichen Anforderungen zu erfüllen. Die Marktüberwachungsbehörden der Bundesländer haben begonnen, aktiv zu kontrollieren. Wer jetzt noch nicht gehandelt hat, riskiert Bußgelder von bis zu 100.000 Euro.

Dieser Praxis-Ratgeber zeigt dir konkret, was du tun musst: Wer ist betroffen, welche technischen Anforderungen stellt WCAG 2.1 AA, welche Fehler treten am häufigsten auf — und wie du sie behebst.

Wer ist vom BFSG betroffen?

Das BFSG setzt den European Accessibility Act (EAA) in deutsches Recht um. Es gilt für Unternehmen, die Produkte oder Dienstleistungen an Verbraucher (B2C) anbieten. Im digitalen Bereich betrifft das insbesondere:

• Online-Shops und E-Commerce — jede Website, die Waren oder Dienstleistungen an Endverbraucher verkauft
• Bankdienstleistungen — Online-Banking, Finanz-Apps, Kreditvergleiche
• Telekommunikationsdienste — Mobilfunkanbieter, Internet-Provider
• Personenbeförderung — Buchungsportale für Bahn, Flug, Fernbus
• E-Books und E-Reader — digitale Publikationen
• Streaming-Dienste — Video- und Audio-Plattformen

Die Kleinstunternehmen-Ausnahme

Unternehmen mit weniger als 10 Beschäftigten und einem Jahresumsatz unter 2 Millionen Euro sind bei Dienstleistungen grundsätzlich ausgenommen. Aber Achtung: Diese Ausnahme gilt nicht für Produkte. Und selbst wenn du formal ausgenommen bist, gibt es gute Gründe für Barrierefreiheit: bessere Nutzererfahrung, höhere Konversionsraten und SEO-Vorteile.

Auch ohne BFSG-Pflicht relevant

Barrierefreiheit wird zunehmend zum Branchenstandard. In der EU leben rund 87 Millionen Menschen mit einer Behinderung — das sind potenzielle Kunden, die du ausschließt, wenn deine Website nicht barrierefrei ist. Hinzu kommt: Barrierefreie Websites haben bessere Core Web Vitals, bessere Struktur und ranken tendenziell besser bei Google.

WCAG 2.1 AA: Die technischen Anforderungen im Detail

Das BFSG verweist auf die europäische Norm EN 301 549, die wiederum die Web Content Accessibility Guidelines (WCAG) 2.1 Level AA als Standard festlegt. Diese gliedern sich in vier Prinzipien.

Prinzip 1: Wahrnehmbar (Perceivable)

Inhalte müssen so dargestellt werden, dass alle Nutzer sie wahrnehmen können — unabhängig von sensorischen Fähigkeiten.

Textalternativen (Erfolgskriterium 1.1.1)

Jedes nicht-textliche Element braucht eine Textalternative. Das betrifft vor allem Bilder:

• Informative Bilder brauchen einen beschreibenden alt-Text
• Dekorative Bilder brauchen ein leeres alt=""-Attribut (nicht weglassen!)
• Komplexe Grafiken (Diagramme, Infografiken) brauchen eine ausführliche Beschreibung
• Buttons mit Icons brauchen ein aria-label

Untertitel und Audiodeskription (1.2.x)

• Videos mit Sprache brauchen synchrone Untertitel
• Reine Audio-Inhalte brauchen ein Text-Transkript
• Voraufgezeichnete Videos sollten eine Audiodeskription haben

Kontraste (1.4.3 und 1.4.11)

• Normaler Text: Mindestverhältnis 4.5:1 zum Hintergrund
• Großer Text (ab 18pt oder 14pt fett): Mindestverhältnis 3:1
• Grafische Elemente und UI-Komponenten: Mindestverhältnis 3:1 (neu in WCAG 2.1)
• Platzhaltertext in Formularen zählt ebenfalls

Zoom und Reflow (1.4.4 und 1.4.10)

• Inhalte müssen bei 200% Zoom lesbar und bedienbar bleiben
• Bei 320px Breite darf kein horizontales Scrollen nötig sein (Reflow)
• Texte dürfen nicht in Containern abgeschnitten werden

Prinzip 2: Bedienbar (Operable)

Alle Funktionen müssen für alle Nutzer bedienbar sein — auch ohne Maus.

Tastaturzugänglichkeit (2.1.1 und 2.1.2)

• Jede Funktion muss per Tastatur erreichbar sein
• Es darf keine Tastaturfallen geben: Der Fokus muss immer weiterbewegt werden können
• Die Tab-Reihenfolge muss logisch sein (nicht durch tabindex-Werte durcheinander gebracht)

Fokus-Indikatoren (2.4.7)

• Der aktuell fokussierte Element muss visuell erkennbar sein
• Standard-Browser-Fokus (outline) nicht per CSS entfernen, ohne einen sichtbaren Ersatz zu bieten
• Fokus-Indikatoren sollten deutlich sichtbar sein — mindestens 2px Breite

Skip-Navigation (2.4.1)

• Ein “Zum Inhalt springen”-Link muss als erstes fokussierbares Element vorhanden sein
• Damit können Tastaturnutzer die Navigation überspringen

Genug Zeit (2.2.1)

• Zeitlimits müssen verlängerbar oder abschaltbar sein
• Automatisch scrollende Inhalte (Karussells, Ticker) müssen pausierbar sein

Prinzip 3: Verständlich (Understandable)

Inhalte und Bedienung müssen für alle verständlich sein.

Seitensprache (3.1.1 und 3.1.2)

• Die Hauptsprache muss im <html lang="de">-Tag angegeben sein
• Fremdsprachige Abschnitte brauchen ein eigenes lang-Attribut

Konsistente Navigation (3.2.3)

• Die Navigation muss auf allen Seiten an derselben Stelle stehen
• Gleichartige Elemente müssen sich konsistent verhalten

Formulare (3.3.x)

• Eingabefelder brauchen zugeordnete <label>-Elemente
• Fehler müssen klar beschrieben und dem richtigen Feld zugeordnet werden
• Pflichtfelder müssen als solche gekennzeichnet sein — nicht nur durch Farbe
• Fehlermeldungen müssen Korrekturvorschläge enthalten

Prinzip 4: Robust (Robust)

Die Website muss mit verschiedenen Technologien und assistiven Hilfsmitteln funktionieren.

Valides HTML (4.1.1)

• Keine doppelten IDs im Dokument
• Korrekte Verschachtelung der HTML-Elemente
• Alle Tags korrekt geöffnet und geschlossen

ARIA-Attribute (4.1.2)

• Interaktive Elemente brauchen die richtigen Rollen und Zustände
• Custom-Widgets (Dropdown, Modal, Tab) brauchen ARIA-Markup
• ARIA-Werte müssen korrekt sein — falsches ARIA ist schlimmer als kein ARIA

Die 10 häufigsten Barrierefreiheits-Verstöße

Basierend auf Tausenden von Website-Scans sind dies die Probleme, die am häufigsten auftreten:

1. Fehlende Alt-Texte bei Bildern

Das mit Abstand häufigste Problem. Bilder ohne alt-Attribut werden von Screen-Readern entweder ignoriert oder der Dateiname wird vorgelesen — beides ist schlecht.

Fix: Füge jedem informativen Bild einen beschreibenden alt-Text hinzu. Dekorative Bilder bekommen alt="".

<!-- Schlecht -->
<img src="team-foto.jpg">

<!-- Gut: informatives Bild -->
<img src="team-foto.jpg" alt="Das Compliso-Team bei der Büroeinweihung im März 2026">

<!-- Gut: dekoratives Bild -->
<img src="divider-line.svg" alt="">

2. Unzureichende Farbkontraste

Heller Text auf hellem Hintergrund oder trendige Pastellfarben sehen modern aus — sind aber für viele Menschen schlecht lesbar.

Fix: Prüfe alle Text-Hintergrund-Kombinationen mit einem Kontrastprüfer. Das Mindestverhältnis ist 4.5:1 für normalen Text.

3. Fehlende Formular-Labels

Eingabefelder ohne zugeordnete Labels sind für Screen-Reader-Nutzer unbedienbar. Platzhaltertext (placeholder) ist kein Ersatz für Labels.

Fix: Jedes <input>, <select> und <textarea> braucht ein <label> mit passender for/id-Verknüpfung.

<!-- Schlecht -->
<input type="email" placeholder="E-Mail-Adresse">

<!-- Gut -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" placeholder="z.B. max@beispiel.de">

4. Fehlende oder falsche Heading-Hierarchie

Überschriften werden oft nach visueller Größe statt nach logischer Struktur gewählt. Ein <h1> gefolgt von einem <h3> (ohne <h2> dazwischen) ist ein Strukturfehler.

Fix: Verwende Überschriften in korrekter Reihenfolge: h1 > h2 > h3. Nur ein <h1> pro Seite. Für visuelle Anpassungen nutze CSS-Klassen.

5. Fehlende Skip-Navigation

Ohne Skip-Link müssen Tastaturnutzer bei jedem Seitenwechsel durch die gesamte Navigation tabben, bevor sie zum Inhalt gelangen.

Fix: Füge als erstes Element im <body> einen Skip-Link ein:

<a href="#main-content" class="skip-link">Zum Inhalt springen</a>

6. Entfernter Fokus-Indikator

Viele CSS-Resets enthalten outline: none, was den Standard-Fokus-Indikator des Browsers entfernt. Tastaturnutzer sehen dann nicht, welches Element gerade fokussiert ist.

Fix: Entferne outline: none oder ersetze es durch einen sichtbaren Custom-Fokus:

:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

7. Fehlende Seitensprache

Ohne lang-Attribut im <html>-Tag weiß der Screen-Reader nicht, in welcher Sprache er vorlesen soll. Deutsche Texte werden dann möglicherweise mit englischer Aussprache vorgelesen.

Fix: Setze <html lang="de"> im Quellcode.

8. Nicht-responsive Layouts

Inhalte, die bei kleineren Bildschirmen oder bei Zoom abgeschnitten werden oder horizontales Scrollen erfordern, verletzen das Reflow-Kriterium.

Fix: Verwende relative Einheiten (rem, em, %) statt fester Pixel-Werte. Teste bei 320px Breite und 200% Zoom.

9. Automatisch startende Videos und Animationen

Videos, die automatisch abspielen, oder Animationen, die sich nicht stoppen lassen, sind für viele Nutzer problematisch — besonders bei vestibulären Störungen.

Fix: Setze autoplay nur in Kombination mit muted ein. Biete einen Pause-Button für alle Animationen. Respektiere prefers-reduced-motion.

10. Nicht-barrierefreie Cookie-Banner

Der Cookie-Banner ist oft das erste Element, das Nutzer sehen — und ist häufig selbst nicht barrierefrei: keine Tastaturnavigation, kein Fokus-Management, keine ARIA-Attribute.

Fix: Stelle sicher, dass der Cookie-Banner per Tastatur bedienbar ist, der Fokus korrekt gesetzt wird und Buttons aussagekräftige Labels haben. Der Compliso-Banner wurde von Grund auf barrierefrei entwickelt — mit Tastaturnavigation, ARIA-Attributen und korrektem Fokus-Management.

Praktische Umsetzung: So gehst du vor

Schritt 1: Ist-Zustand ermitteln

Bevor du etwas änderst, brauchst du eine Bestandsaufnahme. Nutze einen automatisierten Scanner wie den Compliso Accessibility-Checker, um die häufigsten Probleme zu identifizieren. Automatische Tools finden circa 30-40% aller Barrierefreiheitsprobleme — sie sind ein guter Startpunkt, ersetzen aber keinen manuellen Test.

Schritt 2: Quick Wins umsetzen

Viele Probleme lassen sich schnell beheben:

• Alt-Texte ergänzen
• lang="de" setzen
• Formular-Labels hinzufügen
• Skip-Navigation einbauen
• Fokus-Indikatoren wiederherstellen
• Kontraste anpassen

Diese Maßnahmen decken oft 60-70% der gefundenen Probleme ab.

Schritt 3: Komplexere Anpassungen

Einige Änderungen erfordern mehr Aufwand:

• Heading-Hierarchie überarbeiten (kann Template-Änderungen erfordern)
• Tastaturnavigation für Custom-Widgets (Dropdown, Modal, Tab-Panels)
• ARIA-Attribute für interaktive Elemente
• Video-Untertitel erstellen
• Responsive Layouts überarbeiten

Schritt 4: Barrierefreiheitserklärung veröffentlichen

Das BFSG verlangt eine Barrierefreiheitserklärung auf deiner Website. Sie muss enthalten:

• Aktueller Stand der Barrierefreiheit (vollständig, teilweise, nicht konform)
• Auflistung nicht barrierefreier Inhalte mit Begründung
• Erstellungs- oder Aktualisierungsdatum
• Kontaktmöglichkeit für Barrierefreiheits-Feedback
• Hinweis auf die zuständige Marktüberwachungsbehörde

Die Erklärung gehört als eigener Link in den Footer — neben Impressum und Datenschutzerklärung. Mit dem Compliso Content-Generator kannst du eine rechtssichere Barrierefreiheitserklärung per Fragebogen erstellen.

Schritt 5: Regelmäßig prüfen

Barrierefreiheit ist kein einmaliges Projekt. Jedes Content-Update, jedes Plugin-Update und jede Design-Änderung kann neue Probleme einführen. Richte regelmäßige Scans ein — idealerweise automatisiert.

Tools für die Barrierefreiheitsprüfung

Automatisierte Scanner

• Compliso Scanner — prüft automatisch auf WCAG 2.1 AA-Verstöße, basierend auf axe-core, mit konkreten Fix-Empfehlungen
• axe DevTools — Browser-Extension für manuelle Prüfungen während der Entwicklung
• WAVE — Web Accessibility Evaluation Tool von WebAIM

Manuelle Prüfmethoden

• Tastaturtest: Navigiere deine gesamte Website nur mit der Tastatur (Tab, Enter, Escape, Pfeiltasten)
• Screen-Reader-Test: Teste mit NVDA (Windows, kostenlos) oder VoiceOver (Mac, vorinstalliert)
• Zoom-Test: Vergrößere die Seite auf 200% und prüfe, ob alles bedienbar bleibt
• Kontrastprüfer: Nutze den Colour Contrast Analyser oder WebAIM Contrast Checker

Praxis-Checkliste: BFSG-Konformität

• Alle Bilder haben aussagekräftige Alt-Texte (oder alt="" bei dekorativen Bildern)
• Farbkontraste mindestens 4.5:1 für normalen Text
• Alle Formularfelder haben zugeordnete Labels
• Heading-Hierarchie ist logisch und lückenlos (h1 > h2 > h3)
• Skip-Navigation vorhanden
• Fokus-Indikatoren sind sichtbar
• Website vollständig per Tastatur bedienbar
• <html lang="de"> ist gesetzt
• Videos haben Untertitel
• Animationen sind pausierbar, prefers-reduced-motion wird respektiert
• Cookie-Banner ist barrierefrei bedienbar
• Inhalte sind bei 200% Zoom und 320px Breite nutzbar
• Barrierefreiheitserklärung ist veröffentlicht und im Footer verlinkt
• Feedback-Mechanismus für Barrierefreiheitsprobleme ist eingerichtet
• Regelmäßige automatisierte Scans sind eingerichtet

Deine Website auf BFSG-Konformität prüfen

Du willst wissen, wie barrierefrei deine Website aktuell ist? Der Compliso Scanner prüft deine Website automatisch auf die häufigsten WCAG 2.1 AA-Verstöße. Du erhältst einen Accessibility-Score, eine priorisierte Fehlerliste und konkrete Handlungsempfehlungen — in unter 30 Sekunden.

Jetzt kostenlos scannen und deinen Barrierefreiheits-Status ermitteln. Oder direkt registrieren für regelmäßige automatische Prüfungen und detaillierte Reports.