PAKU Media
StartseiteLeistungenPortfolioÜber unsBlogKontakt
PAKU Media

Kreativagentur aus Bielefeld für Webdesign, Videografie und Social Media — seit 2022.

TikTokInstagramGoogle

Partner

Navigation

  • ›Startseite
  • ›Leistungen
  • ›Portfolio
  • ›Über uns
  • ›Branchen
  • ›Blog
  • ›Kontakt

Leistungen

  • ›Webdesign
  • ›Videografie
  • ›Social Media Ads
  • ›App Design
  • ›Lexikon
  • ›Tools

Kontakt

Pamuk und Kuscu GbR

Friedhofstraße 171
33659 Bielefeld

hello@pakumedia.de

0521 98 99 40 99

PAKU.Media

© 2026 PAKU Media. Alle Rechte vorbehalten.

ImpressumDatenschutzAGBLexikonToolsSitemap
Home/Blog/Barrierefreiheit im Webdesign: BFSG 2025 Pflicht
WebdesignBarrierefreiheitBFSGWCAG

Barrierefreiheit im Webdesign: BFSG 2025 Pflicht

Ab Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz. Was bedeutet das für Ihre Website? Wer betroffen ist, was Sie tun müssen und welche Strafen drohen.

Bünyamin Kuscu·4. Dezember 2025·9 Min. Lesezeit

Am 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft getreten. Was für manche Unternehmen wie ein weiteres bürokratisches Regelwerk klingt, ist in Wahrheit eine grundlegende Veränderung: Digitale Produkte und Dienstleistungen müssen für alle Menschen zugänglich sein — nicht als freiwillige Nettigkeit, sondern als gesetzliche Pflicht.

Dieser Artikel erklärt, was das BFSG konkret bedeutet, wer betroffen ist, was Sie an Ihrer Website ändern müssen und warum Barrierefreiheit nicht nur Pflicht ist, sondern auch wirtschaftlich Sinn macht.

Was ist das BFSG?

Das Barrierefreiheitsstärkungsgesetz setzt die europäische Richtlinie über die Barrierefreiheit von Produkten und Dienstleistungen (European Accessibility Act, EAA) in deutsches Recht um. Es verpflichtet Unternehmen, ihre digitalen Angebote so zu gestalten, dass Menschen mit Behinderungen sie gleichberechtigt nutzen können.

Dazu gehören:

  • Online-Shops und E-Commerce-Plattformen
  • Bankdienstleistungen und Finanzprodukte
  • Telekommunikationsdienste
  • Personenbeförderung (Buchungssysteme)
  • E-Books und E-Book-Reader
  • Messenger-Dienste und Kommunikations-Apps

Wer ist betroffen?

Grundsätzlich alle B2C-Unternehmen, die digitale Produkte oder Dienstleistungen anbieten. Ausgenommen sind lediglich Kleinstunternehmen mit weniger als 10 Beschäftigten UND einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens 2 Millionen Euro.

Aber Achtung: Selbst wenn Sie formal nicht unter das BFSG fallen, können Barrierefreiheitsmängel ein Wettbewerbsnachteil sein. Und das allgemeine Gleichbehandlungsgesetz (AGG) sowie die UN-Behindertenrechtskonvention gelten unabhängig vom BFSG.

Welche Strafen drohen?

Das Gesetz hat Zähne. Bei Verstößen drohen:

  • Bußgelder bis zu 100.000 Euro
  • Abmahnungen durch Wettbewerber und Verbraucherschutzverbände
  • Vertriebsverbote für nicht-konforme Produkte und Dienstleistungen
  • Reputationsschäden durch öffentliche Bekanntmachung der Verstöße

Die Marktüberwachungsbehörden der Bundesländer sind zuständig und können Stichprobenkontrollen durchführen.

Warum Barrierefreiheit mehr Menschen betrifft als Sie denken

Wenn Sie an Barrierefreiheit denken, haben Sie vielleicht blinde Menschen vor Augen, die einen Screenreader nutzen. Das ist ein wichtiger Anwendungsfall — aber bei weitem nicht der einzige.

Die Zahlen in Deutschland

  • 7,9 Millionen schwerbehinderte Menschen (Statistisches Bundesamt, 2023)
  • 17,5 Millionen Menschen über 65 Jahre — viele mit Sehschwäche, motorischen Einschränkungen oder Hörproblemen
  • Jeder zehnte Mann hat eine Rot-Grün-Sehschwäche
  • Temporäre Einschränkungen: Gebrochener Arm, Migräne, laute Umgebung, grelles Sonnenlicht auf dem Bildschirm

Insgesamt profitiert etwa ein Drittel der Bevölkerung direkt von barrierefreiem Design. Und indirekt alle: Untertitel helfen auch in der S-Bahn. Große Buttons helfen auch bei kalten Fingern. Klare Kontraste helfen auch bei müden Augen.

Barrierefreiheit ist kein Nischenproblem

Denken Sie an Ihre eigene Situation: Haben Sie schon einmal versucht, auf dem Smartphone ein winziges Dropdown-Menü zu bedienen, während Sie in der anderen Hand eine Kaffeetasse halten? Oder einen Text auf einer Website zu lesen, bei der hellgrauer Text auf weißem Hintergrund steht?

Das sind keine Randprobleme. Das sind alltägliche Situationen, die durch barrierefreies Design gelöst werden.

Die technische Grundlage: WCAG 2.1 Level AA

Das BFSG verweist auf die europäische Norm EN 301 549, die wiederum auf den Web Content Accessibility Guidelines (WCAG) 2.1 Level AA basiert. Diese Richtlinien definieren vier Prinzipien — die sogenannten POUR-Prinzipien:

1. Wahrnehmbar (Perceivable)

Alle Inhalte müssen für alle Sinne zugänglich sein.

Was das konkret bedeutet:

  • Alternativtexte für Bilder: Jedes Bild braucht einen beschreibenden Alt-Text. Nicht "IMG_4523.jpg", sondern "Teamfoto von PAKU Media bei der Projektbesprechung im Büro". Dekorative Bilder erhalten ein leeres Alt-Attribut (alt="").

  • Untertitel für Videos: Alle vorproduzierten Videos brauchen Untertitel. Live-Videos brauchen zumindest eine Audiodeskription.

  • Ausreichende Kontraste: Text muss einen Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben (bei normalem Text) bzw. 3:1 (bei großem Text ab 18pt oder 14pt fett). Tools wie der WebAIM Contrast Checker helfen bei der Prüfung.

  • Textvergrößerung: Inhalte müssen bis 200 % vergrößerbar sein, ohne dass Informationen verloren gehen oder die Seite unbenutzbar wird.

2. Bedienbar (Operable)

Alle Funktionen müssen mit verschiedenen Eingabemethoden nutzbar sein.

Was das konkret bedeutet:

  • Tastaturnavigation: Jede Funktion muss ohne Maus erreichbar sein. Nutzer müssen mit der Tab-Taste durch alle interaktiven Elemente navigieren können — in logischer Reihenfolge.

  • Sichtbarer Fokus: Wenn ein Element den Tastaturfokus hat, muss das visuell erkennbar sein. Der Standard-Browser-Fokusring reicht oft aus, aber viele Websites entfernen ihn aus ästhetischen Gründen — das ist ein Barrierefreiheitsfehler.

  • Keine Zeitlimits: Nutzer müssen genug Zeit haben, Inhalte zu lesen und Aktionen auszuführen. Automatische Timeouts bei Formularen sind problematisch.

  • Kein Flackern: Inhalte dürfen nicht mehr als dreimal pro Sekunde aufblitzen — das kann epileptische Anfälle auslösen.

  • Skip-Navigation: Ein "Zum Inhalt springen"-Link am Seitenanfang ermöglicht es Tastaturnutzern, die Hauptnavigation zu überspringen.

3. Verständlich (Understandable)

Inhalte und Bedienung müssen verständlich sein.

Was das konkret bedeutet:

  • Sprache angeben: Das HTML-Dokument muss die Sprache deklarieren (lang="de"). Fremdsprachige Passagen müssen separat ausgezeichnet werden.

  • Konsistente Navigation: Die Navigation muss auf allen Seiten gleich aufgebaut sein. Gleiche Funktionen müssen gleich aussehen und sich gleich verhalten.

  • Fehlermeldungen in Formularen: Wenn ein Nutzer ein Formular falsch ausfüllt, muss die Fehlermeldung klar beschreiben, was falsch ist und wie es korrigiert werden kann — nicht einfach nur "Fehler aufgetreten".

  • Beschriftungen: Jedes Formularfeld braucht ein sichtbares Label. Placeholder-Text allein reicht nicht — er verschwindet beim Eintippen.

4. Robust (Robust)

Inhalte müssen von verschiedenen Technologien korrekt interpretiert werden können.

Was das konkret bedeutet:

  • Valides HTML: Der Code muss syntaktisch korrekt sein. Fehlende schließende Tags, doppelte IDs oder falsch verschachtelte Elemente können Screenreader verwirren.

  • ARIA richtig einsetzen: ARIA-Attribute (Accessible Rich Internet Applications) helfen Screenreadern, komplexe Widgets zu verstehen. Aber falsch eingesetztes ARIA ist schlimmer als gar keins. Die erste Regel von ARIA lautet: "Wenn Sie ein natives HTML-Element verwenden können, tun Sie es."

  • Kompatibilität: Die Website muss mit aktuellen Browsern und gängigen assistiven Technologien funktionieren — insbesondere NVDA (Windows), VoiceOver (Mac/iOS) und TalkBack (Android).

Die häufigsten Barrierefreiheitsfehler auf Websites

Laut dem WebAIM Million Report 2025 haben 95,9 % aller getesteten Websites mindestens einen WCAG-Fehler. Die häufigsten:

1. Fehlende Alternativtexte (58 % aller Seiten)

Das ist der einfachste Fehler — und der häufigste. Jedes informative Bild braucht einen Alt-Text. Jedes dekorative Bild braucht alt="". Keine Ausnahmen.

2. Mangelnder Kontrast (83 % aller Seiten)

Hellgrauer Text auf weißem Hintergrund mag "elegant" aussehen, ist aber für Millionen Menschen unlesbar. Prüfen Sie jeden Text-Hintergrund-Kombination mit einem Contrast Checker.

3. Fehlende Formular-Labels (45 % aller Seiten)

Ein Eingabefeld ohne zugeordnetes <label> ist für Screenreader-Nutzer unsichtbar. Sie hören nur "Eingabefeld" — ohne zu wissen, was sie eingeben sollen.

4. Leere Links und Buttons (44 % aller Seiten)

Ein Button mit nur einem Icon und ohne Text oder aria-label ist für Screenreader-Nutzer ein "Button — leer". Jedes interaktive Element braucht einen zugänglichen Namen.

5. Fehlende Dokumentensprache (17 % aller Seiten)

Ohne lang="de" im HTML-Tag weiß der Screenreader nicht, in welcher Sprache er den Text vorlesen soll — und verwendet möglicherweise die falsche Aussprache.

Barrierefreiheit umsetzen: Ihr Fahrplan

Phase 1: Ist-Analyse (1-2 Wochen)

Bevor Sie etwas ändern, müssen Sie wissen, wo Sie stehen.

Automatisierte Tests:

  • Lighthouse in Chrome DevTools (Tab "Accessibility")
  • axe DevTools Browser-Extension
  • WAVE Web Accessibility Evaluation Tool

Diese Tools finden typischerweise 30-40 % aller Barrierefreiheitsprobleme — die offensichtlichen, maschinell prüfbaren.

Manuelle Tests:

  • Navigieren Sie Ihre gesamte Website nur mit der Tastatur (Tab, Enter, Escape, Pfeiltasten)
  • Aktivieren Sie einen Screenreader und versuchen Sie, ein Formular auszufüllen
  • Vergrößern Sie die Seite auf 200 % — bricht etwas?
  • Prüfen Sie alle Farbkontraste

Phase 2: Quick Wins (1-2 Wochen)

Diese Maßnahmen haben den größten Impact bei geringstem Aufwand:

  1. lang="de" im HTML-Tag ergänzen (5 Minuten)
  2. Alt-Texte für alle Bilder nachrüsten (je nach Bildanzahl 1-4 Stunden)
  3. Formular-Labels mit Eingabefeldern verknüpfen (1-2 Stunden)
  4. Farbkontraste anpassen — problematische Farben identifizieren und ersetzen (2-4 Stunden)
  5. Skip-Navigation einbauen (30 Minuten)
  6. Fokus-Styles sicherstellen — nicht per CSS entfernen (30 Minuten)

Phase 3: Strukturelle Verbesserungen (2-4 Wochen)

  • Semantisches HTML: <nav>, <main>, <article>, <aside>, <footer> statt <div> für alles
  • Überschriften-Hierarchie: H1 > H2 > H3 — keine Ebenen überspringen
  • ARIA-Landmarks: Komplexe Widgets (Tabs, Akkordeons, Modals) korrekt auszeichnen
  • Tastaturnavigation in Custom-Komponenten sicherstellen
  • Fokus-Management bei dynamischen Inhalten (Modals, Toast-Notifications)
  • Responsive Design: Inhalte dürfen bei 200 % Zoom nicht abgeschnitten werden

Phase 4: Kontinuierliche Verbesserung

Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess.

  • Neue Inhalte ab sofort nach WCAG-Kriterien erstellen
  • Regelmäßige Audits: Mindestens halbjährlich automatisiert, jährlich mit manuellem Test
  • Schulung: Redakteure, Designer und Entwickler müssen die Grundlagen kennen
  • Nutzer-Feedback: Bieten Sie einen Kontaktkanal für Barrierefreiheitsprobleme an
  • Barrierefreiheitserklärung: Das BFSG verlangt eine öffentliche Erklärung zur Barrierefreiheit auf Ihrer Website

Barrierefreiheit als Wettbewerbsvorteil

Lassen Sie uns ehrlich sein: Die meisten Unternehmen setzen Barrierefreiheit um, weil sie müssen. Aber die klugen Unternehmen erkennen, dass es sich auch lohnt.

SEO-Vorteile

Barrierefreiheit und SEO überlappen sich stark. Alt-Texte helfen nicht nur Screenreadern — sie helfen auch Google, Bilder zu verstehen. Semantisches HTML hilft nicht nur assistiven Technologien — es hilft auch Crawlern, Ihre Seitenstruktur zu erfassen. Schnelle Ladezeiten und gute Core Web Vitals sind sowohl ein Barrierefreiheits- als auch ein Ranking-Faktor.

Größere Zielgruppe

7,9 Millionen schwerbehinderte Menschen in Deutschland haben Kaufkraft. Dazu kommen Millionen Menschen mit leichteren Einschränkungen und eine alternde Gesellschaft. Wer diese Menschen ausschließt, lässt Umsatz liegen.

Bessere UX für alle

Barrierefreie Websites sind grundsätzlich benutzerfreundlicher — für alle Nutzer. Klare Kontraste, logische Navigation, verständliche Fehlermeldungen und große Touch-Targets verbessern das Erlebnis für jeden Besucher. Das wirkt sich direkt auf Conversion-Raten, Verweildauer und Kundenzufriedenheit aus.

Rechtssicherheit

Eine barrierefreie Website schützt Sie vor Abmahnungen, Bußgeldern und Reputationsschäden. In den USA gab es 2024 über 4.000 ADA-Klagen wegen nicht barrierefreier Websites. Europa wird nachziehen.

Häufige Ausreden — und warum sie nicht gelten

"Unsere Zielgruppe hat keine Behinderung." Woher wissen Sie das? 70 % aller Behinderungen sind nicht sichtbar. Und temporäre Einschränkungen hat jeder — gebrochener Arm, Sonnenlicht auf dem Display, laute Umgebung.

"Das ist zu teuer." Barrierefreiheit von Anfang an einzuplanen, kostet 5-10 % mehr. Nachträgliche Anpassung kostet das Drei- bis Fünffache. Und ein Bußgeld von 100.000 Euro ist noch teurer.

"Das sieht dann nicht mehr gut aus." Das ist ein Mythos. Apple, Google, Microsoft — die Unternehmen mit dem besten Design der Welt sind auch Vorreiter in Sachen Barrierefreiheit. Gutes Design und Barrierefreiheit sind kein Widerspruch, sondern zwei Seiten derselben Medaille.

"Wir nutzen ein Accessibility-Overlay, das reicht doch." Nein. Accessibility Overlays (Widgets, die sich über die Website legen und Schriftgröße, Kontrast etc. anpassen) sind keine ausreichende Lösung. Sie beheben nicht die eigentlichen Probleme im Code, verursachen oft neue Barrieren und werden von der Barrierefreiheits-Community abgelehnt. Mehrere Unternehmen wurden trotz Overlay abgemahnt.

Checkliste: BFSG-Konformität prüfen

  • Alle Bilder haben aussagekräftige Alt-Texte (oder alt="" bei Deko-Bildern)
  • Farbkontrast mindestens 4,5:1 (normaler Text) bzw. 3:1 (großer Text)
  • Alle Formularfelder haben sichtbare Labels
  • Die gesamte Website ist per Tastatur bedienbar
  • Fokus-Indikatoren sind sichtbar
  • Überschriften-Hierarchie ist logisch (H1 > H2 > H3)
  • Sprache ist im HTML-Tag deklariert (lang="de")
  • Skip-Navigation ist vorhanden
  • Videos haben Untertitel
  • Die Seite ist bei 200 % Zoom vollständig nutzbar
  • ARIA wird korrekt eingesetzt (oder gar nicht)
  • Eine Barrierefreiheitserklärung ist veröffentlicht

Fazit: Barrierefreiheit ist keine Last — sie ist eine Chance

Das BFSG mag als Pflicht daherkommen, aber die Unternehmen, die Barrierefreiheit ernst nehmen, profitieren auf mehreren Ebenen: bessere Suchmaschinen-Rankings, größere Zielgruppe, bessere Nutzererfahrung für alle Besucher und rechtliche Sicherheit.

Die Frage ist nicht, ob Sie in Barrierefreiheit investieren sollten — das Gesetz beantwortet diese Frage für Sie. Die Frage ist, ob Sie es als lästige Pflicht behandeln oder als Chance, Ihre Website für alle Menschen zugänglich und damit besser zu machen.

Wer Barrierefreiheit von Anfang an mitdenkt, baut nicht nur gesetzeskonforme Websites. Er baut bessere Websites.

Tags:BarrierefreiheitBFSGWCAGWebdesignAccessibility
←Zurück zum Blog
Weiter lernen

Verwandte Begriffe.

Zum Lexikon →
01Design

Barrierefreiheit im Web

Web-Barrierefreiheit (WCAG 2.2): Konformitätsstufen, 4 Grundprinzipien, rechtliche Anforderungen 2025, Tools und SEO-Vorteile erklärt.

Definition lesen→
02Webentwicklung

UX-Design

Was ist UX-Design? Definition, alle UX-Prinzipien, Methoden und wie nutzerzentriertes Design Ihre Website-Performance und Kundenzufriedenheit steigert.

Definition lesen→
03Webentwicklung

Responsive Design

Responsive Design: Definition, Mobile-First vs. Desktop-First, Breakpoints, Fluid Grids, CSS Media Queries und Auswirkungen auf SEO und Core Web Vitals.

Definition lesen→
04SEO

Core Web Vitals

Core Web Vitals erklärt: LCP, INP, CLS – Messung mit PageSpeed Insights, Search Console und konkrete Optimierungsmaßnahmen für bessere Google-Rankings.

Definition lesen→
05UX/UI Design

Dark Mode

Was ist Dark Mode? Definition, Vorteile für Nutzer, Design-Herausforderungen und Implementierung im Webdesign.

Definition lesen→
06UX/UI Design

Formular-Design

Was ist gutes Formular-Design? Definition, UX-Prinzipien, Validierung und Best Practices für Web-Formulare.

Definition lesen→

Projekt anfragen

Bereit für Ihr Projekt?

Unser Team berät Sie kostenlos und unverbindlich — direkt aus Bielefeld.

Kontakt aufnehmen→