Das Barrierefreiheits-stärkungsgesetz (BFSG)

Ehrlich gesagt, ich verstehe jeden, der beim Thema Barrierefreiheit erstmal zusammenzuckt. Noch eine Baustelle, noch mehr Compliance, noch mehr Kosten – das denkst du dir jetzt vermutlich. Seit dem 28. Juni 2025 ist Barrierefreiheit für Websites und Apps nicht mehr optional, sondern unter Umständen gesetzliche Pflicht in Deutschland. Das Barrierefreiheitsstärkungsgesetz (BFSG) macht Ernst, und ich erkläre dir heute, was das für dich und deine digitalen Projekte bedeutet.

Aber bevor du in Panik verfällst: Barrierefreiheit ist weniger Alptraum als vielmehr Chance. Denn während du deine Website oder deinen Webshop fit für alle Nutzer machst, verbesserst du gleichzeitig die User Experience für absolut jeden – und das wirkt sich direkt auf deine Conversion-Rate aus. Klingt interessanter, oder?

Die Sache ist einfach: Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Unternehmen, ihre digitalen Angebote barrierefrei zu gestalten, um eine diskriminierungsfreie Nutzung digitaler Produkte und Dienstleistungen sicherzustellen. Was trocken klingt, hat einen sehr menschlichen Hintergrund: Menschen mit Behinderungen sollen die gleichen Chancen haben, deine Website oder deinen Onlineshop zu nutzen wie alle anderen auch.

Dabei geht es nicht nur um die offensichtlichen Fälle wie Blindheit oder motorische Einschränkungen. Hast du schon mal versucht, eine Website mit gebrochenem Arm zu bedienen? Oder bist du schon mal in einer lauten Bahn gesessen und wolltest ein Video ohne Ton verstehen? Genau solche Situationen zeigen: Barrierefreiheit nutzt uns allen.

Warum jetzt plötzlich alle darüber reden hat einen einfachen Grund. Es gibt ein Gesetz. Das Thema ist nicht neu, aber jetzt muss man sich damit beschäftigen.

Die Vorschriften zur Umsetzung orientieren sich an der Norm EN 301 549, welche wiederum auf den Empfehlungen des World Wide Web Consortium (W3C) fußt: dem WCAG 2.1. WCAG steht für Web Content Accessibility Guidelines – das sind die internationalen Standards für barrierefreie Webinhalte.

Seit Juni 2025 müssen Unternehmen sicherstellen, dass ihre Websites und digitalen Anwendungen mindestens den Anforderungen der WCAG-Konformitätsstufe AA entsprechen. AA ist dabei die mittlere von drei Stufen (A, AA, AAA), aber keine Sorge – das ist machbar und nicht so abschreckend wie es klingt.

Wer ist betroffen?

Das Gesetz richtet sich nicht an alle, aber die Gruppe ist größer als du vielleicht denkst. Betroffen sind hauptsächlich:

• E-Commerce und Einzelhandel: Wenn du einen Onlineshop für Endverbraucher betreibst, kommst du nicht drumherum. Das gilt für kleine Shops genauso wie für große Marktplätze. Reine B2B-Shops müssen nicht, sollten aber. Gemischte Shops sind ebenfalls verpflichtet
• Dienstleistungsunternehmen: Banken, Versicherungen, Transportdienste, Telekommunikationsanbieter – sie alle müssen ihre digitalen Touchpoints barrierefrei gestalten.
• Medien und Content: Streaming-Dienste, E-Book-Plattformen und andere digitale Medienangebote fallen ebenfalls unter das Gesetz.

Was bedeutet das konkret für dich? Wenn deine Website oder dein Webshop kommerziellen Zwecken dient und du Produkte oder Dienstleistungen verkaufst, solltest du dich mit dem Thema beschäftigen. Auch wenn du vielleicht nicht direkt unter das Gesetz fällst – die Zielgruppe, die von barrierefreien Websites profitiert, ist größer als die meisten denken.

Die WCAG basieren auf vier grundlegenden Prinzipien, die ich dir mal ohne Fachchinesisch erkläre. Diese bilden das Fundament für alles, was folgt:

Wahrnehmbar (Perceivable)

Deine Inhalte müssen so präsentiert werden, dass alle Nutzer sie wahrnehmen können. Das bedeutet nicht, dass jeder alles sehen muss, sondern dass Informationen in verschiedenen Formen verfügbar sind.

Ein praktisches Beispiel: Wenn du ein Video auf deiner Website hast, braucht es Untertitel für Menschen, die nicht hören können. Bilder brauchen Alternativtexte für Menschen, die sie nicht sehen können. Und die Farbkontraste müssen stark genug sein, damit auch Menschen mit Sehbeeinträchtigungen den Text lesen können.

Bedienbar (Operable)

Alle Funktionen deiner Website müssen für verschiedene Eingabemethoden zugänglich sein. Nicht jeder kann eine Maus bedienen, manche navigieren nur mit der Tastatur oder nutzen spezielle Hilfsmittel.

Das heißt für dich: Alle interaktiven Elemente – Buttons, Links, Formulare – müssen auch ohne Maus erreichbar und bedienbar sein. Außerdem solltest du auf blinkende oder automatisch abspielende Inhalte verzichten, die bei manchen Menschen Anfälle auslösen können.

Verständlich (Understandable)

Deine Website muss verständlich aufgebaut und die Navigation logisch sein. Das betrifft sowohl die Sprache als auch die Struktur.

Konkret bedeutet das: Schreib in einer klaren, einfachen Sprache. Erkläre Fachbegriffe. Strukturiere deine Inhalte logisch und halte dich an gewohnte Navigation-Patterns. Wenn etwas schiefgeht, gib hilfreiche Fehlermeldungen aus.

Robust (Robust)

Inhalte müssen robust genug sein, dass Komponenten korrekt und standardisiert funktionieren. Das bedeutet, dass deine Website mit verschiedenen Browsern, Geräten und Hilfstechnologien kompatibel sein muss.

Technisch gesprochen: Verwende korrektes, semantisches HTML. Halte dich an Web-Standards. Teste deine Website mit verschiedenen Browsern und Screenreadern.

Jetzt wird es praktisch. Ich zeige dir die wichtigsten Schritte, mit denen mein eine bestehende Website oder einen bestehenden Webshop barrierefrei gestaltet. Und keine Angst – man musst nicht alles auf einmal machen.

Farbkontraste und visuelle Gestaltung

Der einfachste Einstieg ist die visuelle Gestaltung. Viele Websites scheitern bereits an zu schwachen Kontrasten zwischen Text und Hintergrund. Die WCAG fordern ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (ab 18pt oder 14pt fett).

Das klingt technisch, ist aber einfach zu prüfen. Es gibt kostenlose Online-Tools wie den WebAIM Contrast Checker, mit dem man jeden Text auf deiner Website überprüfen kann. Grauer Text auf weißem Hintergrund? Meist zu schwach. Gelber Text auf weißem Hintergrund? Definitiv zu schwach.

Aber Kontrast ist nicht alles. Verlasse dich nie nur auf Farbe, um Informationen zu vermitteln. Wenn man Pflichtfelder in einem Formular rot einfärbt, fügt man zusätzlich ein Sternchen oder das Wort "Pflichtfeld" hinzu. Menschen, die Farben nicht oder anders sehen, werden es einem danken.

Bilder und alternative Texte

Jedes Bild mit Informationswert auf einer Website braucht einen Alternativtext (Alt-Tag). Das ist der Text, den Screenreader vorlesen, wenn sie auf ein Bild stoßen. Aber Achtung: Nicht jedes Bild braucht eine detaillierte Beschreibung. Überlege immer: Welche Information transportiert das Bild? Ist es ein Produktfoto in einem Webshop, beschreibe das Produkt: "Rotes T-Shirt mit V-Ausschnitt". Ist es ein reines Schmuckbild bzw. Dekoration ohne informationswert, kann und sollte der Alt-Text leer bleiben (alt="").

Ein schlechter Alt-Text ist: "Bild123.jpg" oder "Foto von einem Mann" Ein guter Alt-Text: "CEO Maria Mustermann erklärt die neue Nachhaltigkeitsstrategie vor Mitarbeitern"

Überschriften und Struktur

HTML-Überschriften sind nicht nur fürs Design da, sondern strukturieren den Inhalte logisch. Screenreader nutzen sie zur Navigation – Nutzer können von Überschrift zu Überschrift springen, um schnell zum gewünschten Abschnitt zu gelangen.

Die Regel ist einfach: Verwende die Überschriften hierarchisch. Nach einer H1 kommt eine H2, nach einer H2 kommt H2 oder H3, aber niemals direkt H4. Denk an ein Inhaltsverzeichnis in einem Buch – genauso sollte deine Website strukturiert sein. Das ist im Bereich CMS die Aufgabe des Redakteurs. Zudem ist es für SEO relevant, d.h. dass war auch schon vor der Barrierefreiheit wichtig!

Viele Websites verwenden Überschriften nur für die Optik und wählen H3, weil es "schöner aussieht". Das ist ein Fehler. Überschriften werden mit CSS gestyled, aber die HTML-Struktur muss logisch sein.

Formulare sind kritisch – hier passieren die meisten Conversions, aber hier scheitern auch die meisten barrierefreien Umsetzungen. Dabei ist es gar nicht so schwer.

Labels und Beschriftungen

Jedes Eingabefeld braucht ein eindeutig zugeordnetes Label. Nicht nur als Platzhalter (Placeholder), sondern als echtes HTML-Label. Screenreader können dann klar zuordnen, was in welches Feld gehört.

Fehlermeldungen richtig ausgeben

Wenn beim Ausfüllen eines Formulars Fehler auftreten, müssen diese klar und verständlich kommuniziert werden. "Fehler" ist keine hilfreiche Fehlermeldung. "Die E-Mail-Adresse ist ungültig. Bitte prüfen Sie das Format (beispiel@domain.de)" ist besser.

Wichtig ist auch, dass Fehlermeldungen programmatisch mit dem entsprechenden Eingabefeld verknüpft sind, damit Screenreader sie beim Fokus des Feldes vorlesen.

Erforderliche Felder kennzeichnen

Man kennzeichnet Pflichtfelder nicht nur optisch, z.b. durch rote Farbe und zusätzliche Symbole und Icons, sondern auch im HTML mit dem required-Attribut und im Label-Text. Das macht es für alle Nutzer eindeutig.

Navigation und Tastatur-Bedienung

Eine wirklich barrierefreie Website muss komplett ohne Maus bedienbar sein. Das heißt, alle interaktiven Elemente – Links, Buttons, Formularfelder – müssen mit der Tastatur erreichbar sein.

Tab-Reihenfolge logisch gestalten

Die Tab-Taste sollte durch die Elemente in einer logischen Reihenfolge führen. Von oben nach unten, von links nach rechts, genau so, wie man auch visuell durch die Seite geht. Grundsätzlich vermeidet man, die Tab-Reihenfolge mit CSS oder tabindex zu verändern, es sei denn, es ist wirklich notwendig.

Fokus sichtbar machen

Wenn ein Element den Fokus hat (durch Tab-Navigation erreicht wurde), muss das sichtbar sein. Viele Designer entfernen den Standard-Fokusrahmen, weil er "hässlich" ist. Das ist ein Fehler. Er lässt sich stylen, aber entfernen ist niemals eine gute Idee (auch wenn es gängige Praxis ist).

Skip-Links implementieren

Ein Skip-Link ist ein versteckter Link am Anfang jeder Seite, der beim ersten Tab-Druck sichtbar wird und direkt zum Hauptinhalt springt. Das erspart Screenreader-Nutzern, bei jedem Seitenaufruf erst durch die komplette Navigation zu tabben.

Videos sind heutzutage überall, aber sie bringen besondere Herausforderungen mit sich. Zum Glück sind auch hier die Anforderungen klar definiert.

Untertitel für alle Videos

Alle Videos mit gesprochenem Inhalt brauchen Untertitel. Dabei reicht es nicht, die automatisch generierten YouTube-Untertitel zu verwenden – die sind oft fehlerhaft. Bestenfalls investiert man in korrekte, manuell erstellte oder zumindest überprüfte Untertitel.

Audiodeskription bei Bedarf

Wenn das Video wichtige visuelle Informationen enthält, die nur durch Sehen verständlich sind, brauchst es eine Audiodeskription. Das ist eine zusätzliche Tonspur, die beschreibt, was im Video passiert.

Autoplay vermeiden

Videos, die automatisch abspielen, können problematisch sein. Sie können Menschen mit bestimmten Behinderungen überfordern oder erschrecken. Lass Nutzer selbst entscheiden, wann sie ein Video starten.

Webshops haben besondere Anforderungen, die über normale Websites hinausgehen. Hier geht es nicht nur um Zugänglichkeit, sondern direkten Umsatz.

Produktseiten strukturieren

Produktinformationen müssen klar strukturiert und für Screenreader zugänglich sein. Das heißt: Man verwendet semantische HTML-Elemente für Preise, Verfügbarkeit und Produkteigenschaften. Eine Tabelle für technische Daten ist besser als eine unstrukturierte Liste.

Warenkorb und Checkout-Prozess

Der Checkout ist der kritischste Teil eines Webshops. Hier darf nichts schiefgehen. Jeder Schritt des Bestellprozesses mus sklar nachvollziehbar sein. Man zeigt immer an, in welchem Schritt sich der Nutzer befindet. Es gibt klare Bestätigungen, wenn etwas in den Warenkorb gelegt oder geändert wurde.

Produktfilter und Suche

Filter und Suchfunktionen müssen auch ohne Maus bedienbar sein. Bevorzugt verwendet man echte Buttons und Checkboxen statt gestylter Divs. Änderungen an Filtern klar kommuniziert – sowohl visuell als auch für Screenreader.

Jetzt fragst du dich sicher: Wie teste man, ob meine Website wirklich barrierefrei ist? Es gibt verschiedene Ansätze, und man sollte sie alle nutzen.

Automatisierte Tests als erster Schritt

Tools wie WAVE, axe oder Lighthouse können automatisch viele Probleme erkennen. Sie finden fehlende Alt-Texte, schwache Kontraste oder falsche HTML-Struktur. Das ist ein guter Anfang, aber nicht alles.

Diese Tools erfassen nur etwa 30-40% aller Barrierefreiheitsprobleme. Viele Aspekte – wie die Qualität von Alt-Texten oder die Logik der Navigation – können nur Menschen bewerten.

Manuelle Tests mit Hilfsmitteln

Teste die Website selbst mit verschiedenen Hilfsmitteln:

• Screenreader: NVDA (kostenlos für Windows) oder VoiceOver (Mac/iOS) geben dir ein Gefühl dafür, wie deine Website für blinde Nutzer klingt.
• Nur Tastatur: Lege die Maus zur Seite und navigiere nur mit Tab, Enter und den Pfeiltasten durch deine Website. Kommst du überall hin?
• Zoom-Test: Zoome in deinem Browser auf 200% oder 400%. Bleibt alles bedienbar?

Nutzer mit Behinderungen einbeziehen

Der beste Test ist immer noch der durch echte Nutzer. Wenn möglich, lässt man eine Website von Menschen mit verschiedenen Behinderungen testen. Ihre Rückmeldungen sind durch nichts zu ersetzen.

Aus meiner Erfahrung sehe ich immer wieder die gleichen Probleme. Hier sind die häufigsten Stolpersteine:

Der Alt-Text-Klassiker

"Bild von..." oder "Foto zeigt..." sind überflüssige Füllwörter. Screenreader kündigen bereits an, dass es sich um ein Bild handelt. Alt-Teste werden typischerweise von einem Redakteur im CMS gepflegt. Daher der Tipp: Beschreibe direkt den Inhalt: Statt "Bild von einem roten Auto" schreibe einfach "Rotes Auto".

Fake-Buttons und Links

Divs oder Spans, die wie Buttons aussehen, aber keine echten Buttons sind, funktionieren nicht mit der Tastatur. Bevorzugt verwendet man also immer die korrekten HTML-Elemente: <button> für Aktionen, <a> für Navigation.

Zu komplexe Navigation

Mega-Menüs mit Dutzenden von Unterebenen sind ein Albtraum für Screenreader-Nutzer. Im Optimalfall ist die Navigation so einfach wie möglich und biete alternative Wege zu wichtigen Inhalten (z.B. eine Sitemap).

Jetzt mal Butter bei die Fische: Was bringt dir Barrierefreiheit geschäftlich? Mehr als du denkst.

Größere Zielgruppe

In Deutschland leben etwa 13 Millionen Menschen mit Behinderungen. Das ist eine beträchtliche Zielgruppe mit erheblicher Kaufkraft. Wenn eine Website barrierefrei ist, können sie die Produkte oder Dienstleistungen nutzen. Wenn nicht, gehen sie zur Konkurrenz.

Bessere SEO

Viele Maßnahmen für Barrierefreiheit verbessern gleichzeitig deine Suchmaschinenoptimierung. Semantisches HTML, aussagekräftige Alt-Texte, klare Überschriftenstruktur – Google liebt das alles.

Verbesserte User Experience für alle

Eine barrierefreie Website ist benutzerfreundlicher für alle. Gute Kontraste helfen auch bei Sonnenlicht auf dem Smartphone. Klare Navigation hilft auch gestressten Nutzern. Untertitel helfen auch in lauten Umgebungen.

Rom wurde nicht an einem Tag erbaut, und eine Website wird nicht über Nacht barrierefrei. Hier ist ein pragmatischer Fahrplan:

Phase 1: Quick Wins

Man startet mit einfachen Sachen, die große Wirkung haben:

• Farbkontraste prüfen und verbessern
• fehlende Alt-Texte hinzufügen
• Überschriftenstruktur prüfen und ggf. korrigieren
• Tastaturnavigation testen

Phase 2: Formulare und Interaktionen

Interaktive Elemente zugänglich machen:

• Labels zu allen Formularfeldern hinzufügen
• Fehlermeldungen verbessern
• Fokus-Management überprüfen
• Skip-Links implementieren

Phase 3: Inhalte und Medien

Komplexere Inhalte prüfen und ergänzen:

• Videos mit Untertiteln versehen
• Komplexe Tabellen strukturieren
• PDF-Dokumente prüfen und ggf. ersetzen

Phase 4: Testing und Feinschliff

Alles gründlich testen:

• ggf. Automatisierte Tests durchführen
• Manuell mit Screenreader testen
• Feedback von Nutzern einholen
• Dokumentation erstellen

Eine der häufigsten Fragen ist: Was kostet das alles? Die Antwort ist frustrierend und ehrlich zugleich: Es kommt darauf an.

Für neue Projekte

Wenn man von Anfang an barrierefrei entwickelt, entstehen kaum bzw. überschaubare Mehrkosten. Die meisten Maßnahmen sind Teil guter Webentwicklung. Rechne mit 5-15% Mehraufwand für zusätzliche Tests und Dokumentation.

Für bestehende Projekte

Hier hängt alles vom aktuellen Zustand ab. Eine gut entwickelte Website braucht vielleicht nur Feintuning. Eine schlecht strukturierte Website kann eine komplette Überarbeitung erfordern.

Als Faustregel: Plane 10-30% der ursprünglichen Entwicklungskosten für die Nachbesserung ein. Das klingt viel, aber bedenke: Du investierst einmal und profitierst langfristig.

Gewisse Übergangsregelungen gelten bis Mitte 2030, aber das sollte dich nicht in falscher Sicherheit wiegen. Die Anforderungen werden eher strenger als lockerer.

Neue Technologien im Blick behalten

Voice Interfaces, KI-Chatbots, AR/VR – auch neue Technologien müssen barrierefrei gestaltet werden. Wer jetzt die Grundlagen schafft, ist für zukünftige Entwicklungen besser gerüstet.

Internationale Entwicklung

Die EU arbeitet an einheitlicheren Standards, und global setzen immer mehr Länder auf Barrierefreiheit. Wer international tätig ist oder werden möchte, kommt um das Thema nicht herum.

Kommen Aktualisierungen?

Es ist bereits geplant, die erweiterten Anforderungen der WCAG 2.2 in die Norm aufzunehmen.