Barrierefreiheit im Web: BFSG 2025 und was Unternehmen jetzt tun müssen

Am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft – und damit die größte Veränderung im deutschen Webdesign seit der DSGVO. Das Gesetz verpflichtet eine Vielzahl von Unternehmen, ihre digitalen Angebote barrierefrei zu gestalten. Wer die Anforderungen nicht erfüllt, riskiert Bußgelder, Abmahnungen und den Ausschluss von einem erheblichen Kundenkreis.

In Deutschland leben über 10 Millionen Menschen mit anerkannter Behinderung – rund 13 % der Bevölkerung. Hinzu kommen Millionen Menschen mit vorübergehenden Einschränkungen (Armbruch, Augenoperation) oder altersbedingten Beeinträchtigungen (nachlassende Sehkraft, eingeschränkte Feinmotorik). Barrierefreiheit ist keine Nische – sie betrifft einen enormen Teil Ihrer potenziellen Kundschaft.

Dieser Artikel erklärt, was das BFSG für Ihr Unternehmen bedeutet, welche konkreten Maßnahmen Sie ergreifen müssen und wie Sie Ihre Webseite WCAG-konform gestalten.

Was ist das BFSG?

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die deutsche Umsetzung des European Accessibility Act (EAA), einer EU-Richtlinie, die einheitliche Barrierefreiheitsstandards in ganz Europa schaffen soll. Das Gesetz wurde bereits 2021 verabschiedet und tritt am 28. Juni 2025 vollständig in Kraft.

Im Kern verpflichtet das BFSG Unternehmen, bestimmte Produkte und Dienstleistungen barrierefrei anzubieten. Für den digitalen Bereich bedeutet das insbesondere:

• E-Commerce-Webseiten: Onlineshops und digitale Marktplätze
• Bankdienstleistungen: Online-Banking und Finanz-Apps
• Telekommunikationsdienste: Webseiten und Apps von Telekommunikationsanbietern
• E-Books und E-Reader: Digitale Publikationen
• Elektronischer Geschäftsverkehr: Im Wesentlichen alle digitalen Dienstleistungen für Verbraucher

Wer ist betroffen?

Das BFSG betrifft grundsätzlich alle Unternehmen, die Produkte oder Dienstleistungen für Verbraucher (B2C) über digitale Kanäle anbieten. Die wichtigste Ausnahme: Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz sind bei Dienstleistungen vom BFSG ausgenommen (nicht jedoch bei Produkten).

In der Praxis bedeutet das:

• Onlineshops aller Größen müssen barrierefrei sein (auch von Kleinstunternehmen, wenn sie Produkte verkaufen)
• Dienstleistungsunternehmen mit mehr als 10 Mitarbeitern oder über 2 Mio. € Umsatz müssen ihre digitalen Angebote barrierefrei gestalten
• B2B-Unternehmen sind nicht direkt betroffen, sollten aber freiwillig auf Barrierefreiheit setzen (mehr dazu weiter unten)

Achtung: Auch wenn Ihr Unternehmen heute noch unter die Ausnahme für Kleinstunternehmen fällt, ist es sinnvoll, bereits jetzt auf Barrierefreiheit zu setzen. Zum einen kann sich Ihre Unternehmensgröße ändern, zum anderen profitieren alle Nutzer von barrierefreiem Design.

WCAG 2.1: Der technische Standard

Das BFSG verweist auf die EN 301 549, den harmonisierten europäischen Standard für digitale Barrierefreiheit. Dieser Standard basiert im Wesentlichen auf den Web Content Accessibility Guidelines (WCAG) 2.1 der W3C – dem internationalen Goldstandard für barrierefreies Webdesign.

Die WCAG basieren auf vier Grundprinzipien, bekannt als POUR:

1. Wahrnehmbar (Perceivable)

Alle Informationen und Bedienelemente müssen so dargestellt werden, dass Nutzer sie wahrnehmen können – unabhängig von sensorischen Einschränkungen.

Konkrete Maßnahmen:

• Alt-Texte für Bilder: Jedes informative Bild benötigt einen aussagekräftigen Alternativtext, der den Bildinhalt beschreibt. Dekorative Bilder erhalten ein leeres alt-Attribut (alt="").
• Untertitel für Videos: Alle Videos mit Sprache müssen Untertitel haben. Audiodeskriptionen für rein visuelle Inhalte.
• Farbkontraste: Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (WCAG AA-Level). Verwenden Sie Tools wie den WebAIM Contrast Checker.
• Skalierbare Schrift: Text muss auf 200 % vergrößerbar sein, ohne dass Inhalte abgeschnitten werden oder die Funktionalität leidet.
• Nicht nur Farbe als Information: Informationen dürfen nicht ausschließlich durch Farbe vermittelt werden (z. B. rote Pflichtfelder zusätzlich mit Sternchen markieren).

2. Bedienbar (Operable)

Alle Funktionen müssen mit verschiedenen Eingabemethoden bedienbar sein – nicht nur mit der Maus.

Konkrete Maßnahmen:

• Tastaturnavigation: Alle interaktiven Elemente müssen per Tastatur erreichbar und bedienbar sein (Tab, Enter, Leertaste, Pfeiltasten).
• Sichtbarer Fokus: Der aktuell fokussierte Bereich muss visuell klar erkennbar sein (Focus-Outline nicht entfernen!).
• Keine Tastaturfallen: Nutzer dürfen nicht in einem Element „gefangen" werden, aus dem sie per Tastatur nicht mehr herausnavigieren können.
• Ausreichend Zeit: Zeitlimits für Eingaben müssen verlängerbar oder abschaltbar sein.
• Keine blinkenden Inhalte: Inhalte, die mehr als dreimal pro Sekunde blinken, können Anfälle auslösen und sind verboten.
• Skip-Links: „Zum Inhalt springen"-Links am Seitenanfang, um die Navigation zu überspringen.

3. Verständlich (Understandable)

Informationen und Bedienung müssen verständlich sein.

Konkrete Maßnahmen:

• Sprachangabe: Die Dokumentsprache muss im HTML-Tag angegeben werden (lang="de").
• Konsistente Navigation: Die Navigation muss auf allen Seiten gleich aufgebaut sein.
• Fehlererkennung: Fehler in Formularen müssen klar beschrieben und Korrekturvorschläge angeboten werden.
• Labels für Formulare: Jedes Eingabefeld muss ein sichtbares, zugeordnetes Label haben.
• Vorhersehbares Verhalten: Elemente dürfen keine unerwarteten Aktionen auslösen (z. B. automatische Weiterleitung bei Dropdown-Auswahl).

4. Robust (Robust)

Inhalte müssen mit verschiedenen assistiven Technologien kompatibel sein.

Konkrete Maßnahmen:

• Valides HTML: Sauberer, standardkonformer HTML-Code ohne Syntaxfehler.
• ARIA-Attribute: Korrekte Verwendung von WAI-ARIA-Rollen und -Attributen für dynamische Inhalte und benutzerdefinierte Widgets.
• Semantische HTML-Elemente: Verwenden Sie native HTML-Elemente statt generischer divs – button statt div mit onclick, nav statt div mit class="navigation".
• Kompatibilität mit Screenreadern: Testen Sie Ihre Seite regelmäßig mit NVDA (Windows), VoiceOver (Mac/iOS) oder TalkBack (Android).

Praktische Umsetzung: Checkliste für Ihre Webseite

Hier eine komprimierte Checkliste der wichtigsten Maßnahmen:

1. Alt-Texte: Alle informativen Bilder haben aussagekräftige Alternativtexte.
2. Kontraste: Alle Text-Hintergrund-Kombinationen erfüllen das Mindestkontrastverhältnis.
3. Tastaturnavigation: Die gesamte Seite ist per Tastatur bedienbar.
4. Focus-Styles: Der Tastaturfokus ist auf allen Elementen sichtbar.
5. Formulare: Alle Felder haben Labels, Fehlermeldungen sind verständlich.
6. Überschriftenstruktur: Logische Hierarchie von H1 bis H6 ohne übersprungene Ebenen.
7. Sprachangabe: lang-Attribut im html-Tag gesetzt.
8. Skip-Link: „Zum Inhalt springen"-Link am Seitenanfang vorhanden.
9. Responsive Design: Seite funktioniert bei 200 % Zoom und auf allen Geräten.
10. Video-Untertitel: Alle Videos mit Sprache haben Untertitel.
11. Animationen: prefers-reduced-motion wird respektiert.
12. Links: Alle Links haben aussagekräftige Texte (nicht „hier klicken").

Testing-Tools für Barrierefreiheit

Automatisierte Tests können etwa 30–40 % der Barrierefreiheitsprobleme erkennen. Für den Rest sind manuelle Tests nötig. Empfohlene Tools:

• WAVE (WebAIM): Browser-Extension für schnelle Barrierefreiheitsprüfung
• axe DevTools: Umfangreiches Testing-Tool als Browser-Extension
• Google Lighthouse: Enthält einen Accessibility-Audit in den Chrome DevTools
• Pa11y: Open-Source-Tool für automatisierte Tests in der CI/CD-Pipeline
• Colour Contrast Analyser: Desktop-Tool zum Prüfen von Farbkontrasten
• Screenreader-Tests: NVDA (kostenlos, Windows), VoiceOver (kostenlos, Mac/iOS)

Wichtig: Verlassen Sie sich nicht ausschließlich auf automatisierte Tests. Manuelle Prüfung durch Experten und idealerweise Tests mit Betroffenen sind unverzichtbar für eine wirklich barrierefreie Webseite.

Konsequenzen bei Nicht-Einhaltung

Das BFSG sieht empfindliche Strafen vor:

• Bußgelder: Bis zu 100.000 € bei Verstößen
• Marktüberwachung: Die zuständigen Marktüberwachungsbehörden der Bundesländer überwachen die Einhaltung
• Vertriebsverbot: Im schlimmsten Fall können nicht barrierefreie Produkte und Dienstleistungen vom Markt genommen werden
• Abmahnrisiko: Verbraucherschutzverbände und Behindertenverbände können abmahnen

Neben den rechtlichen Konsequenzen droht auch ein Reputationsschaden: In einer Gesellschaft, die zunehmend sensibel für Inklusion ist, kann eine nicht barrierefreie Webseite das Unternehmensimage nachhaltig beschädigen.

Die versteckten Vorteile der Barrierefreiheit

Barrierefreiheit ist nicht nur Pflicht, sondern bietet handfeste geschäftliche Vorteile:

• Größere Zielgruppe: Sie erreichen 13 % mehr potenzielle Kunden – Menschen mit Behinderungen und deren Angehörige und Freunde.
• Bessere SEO: Barrierefreie Webseiten sind besser strukturiert, haben aussagekräftige Alt-Texte und sauberen Code – alles Faktoren, die Google positiv bewertet.
• Bessere Usability für alle: Was für Menschen mit Behinderungen gut funktioniert, funktioniert für alle besser. Größere Buttons, klare Kontraste und logische Navigation verbessern die Nutzererfahrung für jeden Besucher.
• Mobile Optimierung: Viele Barrierefreiheitsanforderungen überschneiden sich mit Best Practices für mobiles Design.
• Rechtssicherheit: Sie minimieren das Risiko von Abmahnungen und Bußgeldern.
• Innovationsvorsprung: Unternehmen, die jetzt in Barrierefreiheit investieren, sind der Konkurrenz einen Schritt voraus.

So gehen Sie die Umsetzung an

Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Hier ist ein pragmatischer Fahrplan:

1. Audit durchführen: Lassen Sie Ihre aktuelle Webseite professionell auf Barrierefreiheit prüfen. Identifizieren Sie die kritischsten Probleme.
2. Priorisieren: Beginnen Sie mit den Seiten und Funktionen, die den meisten Traffic haben und die größte geschäftliche Relevanz besitzen.
3. Umsetzen: Beheben Sie die identifizierten Probleme – idealerweise im Rahmen eines Redesigns oder iterativ.
4. Schulen: Schulen Sie Ihr Team (Content-Ersteller, Entwickler, Designer) in barrierefreier Arbeit.
5. Testen: Implementieren Sie regelmäßige Barrierefreiheitstests in Ihren Workflow.
6. Dokumentieren: Erstellen Sie eine Erklärung zur Barrierefreiheit und einen Feedback-Mechanismus.

Fazit: Barrierefreiheit ist kein Nice-to-have, sondern Pflicht

Mit dem BFSG wird Barrierefreiheit im Web vom optionalen Qualitätsmerkmal zur gesetzlichen Pflicht. Unternehmen, die jetzt handeln, sichern sich nicht nur gegen rechtliche Risiken ab, sondern verschaffen sich echte Wettbewerbsvorteile: eine größere Zielgruppe, besseres SEO, höhere Usability und ein positives Markenimage.

Die gute Nachricht: Barrierefreiheit muss nicht teuer oder kompliziert sein. Wenn Sie bei Ihrem nächsten Webdesign-Projekt von Anfang an auf Barrierefreiheit achten, entstehen nur geringe Mehrkosten – und der Nutzen ist enorm.

Brauchen Sie Unterstützung bei der barrierefreien Gestaltung Ihrer Webseite? Arifi Media entwickelt Webseiten, die nicht nur gut aussehen, sondern für alle Menschen zugänglich sind – BFSG-konform und zukunftssicher.