Barrierefreie Website: Was das BFSG 2025 für Ihr Unternehmen bedeutet

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstaerkungsgesetz (BFSG) in Deutschland. Für viele Unternehmen bedeutet das: Ihre Website, Ihr Onlineshop oder Ihre App muss barrierefrei sein. Wer die Anforderungen nicht erfuellt, riskiert Abmahnungen und Bussgelder.

In diesem Ratgeber erklären wir, was das BFSG für Ihr Unternehmen bedeutet, welche konkreten Anforderungen es gibt und wie Sie Ihre Website Schritt für Schritt barrierefrei machen.

Was ist das BFSG?

Das Barrierefreiheitsstaerkungsgesetz setzt die europaeische Richtlinie über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen (European Accessibility Act) in deutsches Recht um.

Wen betrifft es?

Das Gesetz gilt für Unternehmen, die bestimmte Produkte oder Dienstleistungen anbieten:

Direkt betroffen:

E-Commerce / Onlineshops
Bankdienstleistungen und Finanzprodukte
Telekommunikationsdienste
Personenbefoerderungsdienste
E-Books und E-Book-Reader

Ausnahmen:

Kleinstunternehmen mit weniger als 10 Mitarbeitern UND weniger als 2 Millionen Euro Jahresumsatz (bei Dienstleistungen)
Unternehmen, bei denen die Umsetzung eine unverhaeltnismaessige Belastung darstellt

Wichtig: Auch wenn Ihr Unternehmen nicht direkt betroffen ist, sollten Sie Barrierefreiheit ernst nehmen. Sie verbessert die Nutzererfahrung für alle Besucher und ist gut für SEO.

Was droht bei Nichteinhaltung?

Abmahnungen durch Verbaende und Wettbewerber
Bussgelder bis zu 100.000 Euro
Anordnungen der Marktaufsichtsbehoerden
Imageschaden

Was bedeutet “barrierefrei” für Websites?

Eine barrierefreie Website ist für alle Menschen nutzbar, unabhaengig von koerperlichen oder kognitiven Einschraenkungen:

Sehbehinderung: Screenreader können die Seite vorlesen
Motorische Einschraenkung: Die Seite ist vollständig mit der Tastatur bedienbar
Hoerbehinderung: Videos haben Untertitel
Kognitive Einschraenkung: Klare Sprache und einfache Navigation

Der technische Standard dafür sind die Web Content Accessibility Guidelines (WCAG) 2.1 auf Konformitaetsstufe AA.

Die wichtigsten WCAG-Anforderungen

1. Wahrnehmbarkeit

Alle Inhalte müssen für alle Sinne zugaenglich sein.

Textalternativen für Bilder:

Jedes Bild braucht einen beschreibenden Alt-Text
Dekorative Bilder: leerer Alt-Text (alt="")
Komplexe Grafiken: Ausfuehrliche Beschreibung im Text

Kontraste:

Mindestens 4,5:1 Kontrastverhaeltnis für normalen Text
Mindestens 3:1 für großen Text (über 18 Punkt oder 14 Punkt fett)
Auch für Buttons, Links und Formularelemente

Textgroesse:

Mindestens 16 Pixel für Fliesstext
Text muss bis 200 Prozent vergrößerbar sein, ohne dass Inhalte verloren gehen
Keine Inhalte in Bildern, die nicht skalierbar sind

Multimedia:

Videos brauchen Untertitel
Reine Audioinhalte brauchen ein Texttranskript
Keine Auto-Play-Medien mit Ton

2. Bedienbarkeit

Alle Funktionen müssen für alle Eingabemethoden nutzbar sein.

Tastaturnavigation:

Jedes Element muss mit der Tab-Taste erreichbar sein
Fokus-Indikatoren müssen sichtbar sein (kein outline:none)
Keine Tastaturfallen (Elemente, aus denen man mit der Tastatur nicht herauskommt)

Touch-Ziele:

Mindestens 44x44 Pixel für klickbare Elemente
Genug Abstand zwischen Elementen, um Fehltreffer zu vermeiden

Navigation:

Konsistente Navigation auf allen Seiten
Breadcrumb-Navigation für die Orientierung
Skip-to-Content-Link am Seitenanfang
Seitentitel, der den Inhalt beschreibt

Zeitlimits:

Keine automatisch verschwindenden Inhalte ohne Möglichkeit, die Zeit zu verlängern
Keine blinkenden oder flackernden Elemente (Epilepsie-Risiko)

3. Verständlichkeit

Inhalte und Bedienung müssen verständlich sein.

Sprache:

Sprache der Seite im HTML-Code angegeben (lang=“de”)
Fremdsprachige Abschnitte entsprechend markiert
Klare, einfache Formulierungen

Formulare:

Jedes Feld hat ein sichtbares Label
Fehlermeldungen sind klar und beschreiben, was falsch ist
Pflichtfelder sind deutlich gekennzeichnet
Eingabehilfen (z. B. erwartetes Format bei Telefonnummern)

Vorhersehbarkeit:

Keine unerwarteten Kontextwechsel beim Fokus oder bei der Eingabe
Konsistente Bezeichnungen für gleiche Funktionen

4. Robustheit

Die Website muss mit verschiedenen Technologien kompatibel sein.

Valides HTML:

Korrekte HTML-Struktur (Überschriftenhierarchie H1 bis H6)
Semantische HTML-Elemente (nav, main, article, aside)
ARIA-Attribute wo nötig (aber HTML-Semantik bevorzugen)

Kompatibilitaet:

Funktioniert mit gaengigen Screenreadern (NVDA, VoiceOver, JAWS)
Funktioniert mit verschiedenen Browsern und Betriebssystemen
Funktioniert bei deaktiviertem JavaScript (zumindest Grundfunktionen)

Barrierefreiheit prüfen: Tools und Methoden

Automatische Tests

WAVE (WebAIM): Kostenloses Browser-Plugin, prueft Kontraste, Alt-Texte und Struktur
axe DevTools: Browser-Extension für technische Accessibility-Prüfung
Google Lighthouse: Integriert in Chrome DevTools, testet grundlegende Barrierefreiheit
Pa11y: Kommandozeilen-Tool für automatisierte Tests

Wichtig: Automatische Tests finden nur etwa 30 bis 40 Prozent der Probleme. Manuelle Tests sind unverzichtbar.

Manuelle Tests

Tastaturtest: Navigieren Sie die gesamte Website nur mit der Tastatur
Screenreader-Test: Lassen Sie die Seite von einem Screenreader vorlesen
Zoom-Test: Vergrößern Sie den Text auf 200 Prozent
Kontrast-Check: Prüfen Sie Farben mit einem Kontrastrechner

Professionelles Audit

Für eine vollständige Prüfung beauftragen Sie einen Accessibility-Experten. Kosten: 2.000 bis 10.000 Euro je nach Umfang der Website.

Barrierefreiheit umsetzen: Prioritaeten

Sofort (innerhalb einer Woche)

Alt-Texte für alle Bilder hinzufügen
Kontraste prüfen und anpassen
Seitensprache im HTML setzen (lang=“de”)
Formularlabels prüfen
Skip-to-Content-Link hinzufügen

Kurzfristig (1 bis 4 Wochen)

Tastaturnavigation testen und beheben
Überschriftenhierarchie korrigieren
Schema.org-Markup überprüfen
Fokus-Indikatoren sichtbar machen
Video-Untertitel hinzufügen

Mittelfristig (1 bis 3 Monate)

ARIA-Attribute wo nötig ergaenzen
Screenreader-Kompatibilitaet testen
Barrierefreiheitserklärung erstellen und veröffentlichen
Team schulen
Prozess für neue Inhalte etablieren

Barrierefreiheit und SEO

Barrierefreiheit und Suchmaschinenoptimierung haben erstaunlich viele Überschneidungen:

Alt-Texte: Gut für Screenreader und für Google
Überschriftenhierarchie: Hilft Nutzern und Suchmaschinen, die Seite zu verstehen
Semantisches HTML: Google versteht Inhalte besser
Schnelle Ladezeiten: Gut für alle Nutzer und für Rankings
Mobile-First: Touch-Ziele und Lesbarkeit auf Smartphones

Eine barrierefreie Website ist fast immer auch eine gut optimierte Website.

Barrierefreiheitserklärung

Betroffene Unternehmen müssen eine Barrierefreiheitserklärung auf ihrer Website veröffentlichen:

Grad der Konformitaet mit WCAG 2.1 AA
Bekannte Einschraenkungen und geplante Maßnahmen
Kontaktmöglichkeit für Barrierefreiheits-Feedback
Datum der letzten Prüfung

Fazit: Barrierefreiheit ist kein Projekt, sondern ein Prozess

Barrierefreiheit ist keine einmalige Aufgabe, die Sie abhaken und vergessen können. Es ist ein fortlaufender Prozess, der bei jedem neuen Inhalt und jeder Änderung beachtet werden muss. Aber es lohnt sich: Eine barrierefreie Website ist besser für alle Nutzer, besser für SEO und schuetzt Sie vor rechtlichen Risiken.

Sie brauchen eine barrierefreie Website, die auch optisch überzeugt? webAION baut Websites, die von Grund auf barrierefrei gestaltet sind, ohne Kompromisse beim Design. Semantisches HTML, WCAG-konforme Kontraste und Tastaturnavigation sind bei uns Standard. Sprechen Sie uns an.