Barrierefreiheit im Web 2026: Was das BFSG für Ihre Website bedeutet

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Damit müssen viele Online-Shops und Websites, über die Verbraucher Verträge abschließen, barrierefrei sein. Was bedeutet das konkret für Unternehmen in Neuss, Kaarst, Düsseldorf und am Niederrhein? Hier ist der Überblick – verständlich und ohne Panikmache.

Wichtig vorab: Dieser Artikel ist eine allgemeine Orientierung und keine Rechtsberatung. Ob und in welchem Umfang Ihr Angebot unter das BFSG fällt, klären Sie im Zweifel mit einer Fachanwältin, einem Fachanwalt oder Ihrer IHK.

Das BFSG im Überblick

Was ist das BFSG?

Das Barrierefreiheitsstärkungsgesetz setzt die EU-Richtlinie über Barrierefreiheitsanforderungen (European Accessibility Act) in deutsches Recht um. Es gilt seit dem 28. Juni 2025 und betrifft bestimmte Produkte und Dienstleistungen – darunter Websites und Apps, über die Verbraucher etwas kaufen, buchen oder abschließen.

Wer ist betroffen?

Im Fokus stehen Dienstleistungen für Verbraucher, unter anderem:

• Dienstleistungen im elektronischen Geschäftsverkehr – also Online-Shops und Websites oder Apps, über die Verbraucher einen Vertrag abschließen (z. B. Bestellung, Buchung, Termin mit Bezahlung)
• Bankdienstleistungen für Verbraucher
• Telekommunikationsdienste
• bestimmte Elemente von Personenbeförderungsdiensten (z. B. Websites, Apps, E-Tickets)
• E-Books und dafür bestimmte Software
• Zugang zu audiovisuellen Mediendiensten

Öffentliche Stellen fallen übrigens nicht unter das BFSG – für sie gelten schon länger eigene Regeln (BGG und BITV 2.0).

Wer ist ausgenommen?

• Kleinstunternehmen, die Dienstleistungen anbieten. Als Kleinstunternehmen gilt, wer weniger als zehn Personen beschäftigt und entweder höchstens 2 Mio. € Jahresumsatz oder höchstens 2 Mio. € Jahresbilanzsumme hat. Achtung: Für Produkte gilt diese Ausnahme nicht.
• Reine B2B-Angebote, die sich nicht an Verbraucher richten.
• Reine Informationsseiten, über die kein Vertrag mit Verbrauchern zustande kommt, fallen in der Regel nicht unter das BFSG – barrierefrei zu sein lohnt sich trotzdem.
• Für bestimmte Inhalte gibt es Sonderregeln, etwa für archivierte Inhalte oder vor dem Stichtag veröffentlichte Medien.

Ein Beispiel aus der Region: Ein Online-Shop aus Kaarst mit zwölf Beschäftigten, der an Privatkunden verkauft, ist betroffen. Ein Handwerksbetrieb mit fünf Beschäftigten und einer reinen Informationswebsite ist es in der Regel nicht.

Was bedeutet „barrierefrei" konkret?

Der Maßstab: WCAG 2.1 Level AA

Das BFSG selbst nennt keine Checkliste. In der Praxis orientiert man sich an der harmonisierten europäischen Norm EN 301 549, die für Web-Inhalte auf die Web Content Accessibility Guidelines (WCAG) 2.1, Konformitätsstufe AA verweist. Das ist auch der Maßstab, an dem sich die BITV 2.0 für öffentliche Stellen orientiert.

Die WCAG kennen drei Stufen:

• Level A: Mindestanforderungen
• Level AA: der gängige Standard – und das Ziel für BFSG-relevante Angebote
• Level AAA: höchste Stufe, für ganze Websites selten vollständig erreichbar

Die vier Grundprinzipien

1. Wahrnehmbar

• Textalternativen für Bilder
• Untertitel für Videos
• ausreichende Kontraste
• Text lässt sich vergrößern, ohne dass Inhalte verloren gehen

2. Bedienbar

• vollständige Bedienung per Tastatur
• genug Zeit für Interaktionen
• keine blinkenden Inhalte, die Anfälle auslösen können
• klare, nachvollziehbare Navigation

3. Verständlich

• gut lesbare Texte
• vorhersehbares Verhalten
• hilfreiche Fehlermeldungen
• konsistente Navigation

4. Robust

• funktioniert mit Hilfstechnologien wie Screenreadern
• sauberer, semantischer Code

Praktische Checkliste: Ist Ihre Website barrierefrei?

Bilder und Medien

• Alle informativen Bilder haben aussagekräftige Alternativtexte
• Dekorative Bilder sind als solche markiert
• Videos haben Untertitel
• Audio-Inhalte haben ein Transkript

Farben und Kontraste

• Text-Kontrast mindestens 4,5:1
• Großer Text mindestens 3:1
• Farbe ist nie das einzige Unterscheidungsmerkmal
• Links sind auch ohne Farbe erkennbar

Texte und Struktur

• klare, einfache Sprache
• logische Überschriften-Hierarchie
• Absätze und Listen sauber strukturiert
• Abkürzungen werden erklärt

Navigation und Bedienung

• komplette Tastaturnavigation möglich
• sichtbarer Fokus-Indikator
• Sprunglink zum Hauptinhalt
• keine Tastaturfallen

Formulare

• jedes Eingabefeld hat ein sichtbares Label
• verständliche Fehlermeldungen
• Pflichtfelder gekennzeichnet
• Autovervollständigung, wo sinnvoll

Die häufigsten Barrieren – und wie Sie sie beheben

1. Fehlende Alternativtexte

Screenreader können Bilder nicht „sehen". Informative Bilder brauchen deshalb einen Alternativtext, der beschreibt, was zu sehen ist – etwa alt="Team bei der Projektbesprechung im Büro". Ein Text wie alt="Bild" hilft niemandem. Rein dekorative Bilder bekommen ein leeres alt="", damit der Screenreader sie überspringt.

2. Zu schwache Kontraste

Hellgraue Schrift auf Weiß sieht elegant aus, ist für viele Menschen aber schwer lesbar – auch für alle, die ihr Handy in der Sonne benutzen. Prüfen lässt sich das schnell mit dem WebAIM Contrast Checker, dem Colour Contrast Analyser oder den Chrome DevTools.

3. Keine Tastaturnavigation

Drücken Sie auf Ihrer Website einmal nur die Tab-Taste: Sind alle Links, Buttons und Formularfelder erreichbar? Sehen Sie jederzeit, wo Sie gerade sind? Der Fokus-Rahmen darf nie ersatzlos entfernt werden (outline: none ohne Alternative ist ein Klassiker).

4. Unzugängliche Formulare

Jedes Eingabefeld braucht ein korrekt verknüpftes Label. Fehlermeldungen sollten klar beschreiben, was falsch ist, auf das betroffene Feld verweisen und bei dynamischen Meldungen auch von Screenreadern angesagt werden (z. B. über role="alert").

5. Videos ohne Untertitel

Gehörlose und schwerhörige Menschen brauchen Untertitel. Bei YouTube und Vimeo lassen sie sich direkt hochladen, bei selbst gehosteten Videos über das track-Element. Automatisch erzeugte Untertitel sollten Sie immer gegenlesen.

Technische Umsetzung mit Next.js und React

Semantisches HTML

Die halbe Miete ist die richtige Struktur: header, nav, main, aside und footer sowie echte button- und a-Elemente statt anklickbarer divs.

ARIA mit Augenmaß

Die goldene Regel lautet: Kein ARIA ist besser als falsches ARIA. ARIA-Attribute ergänzen natives HTML dort, wo es nicht ausreicht – etwa aria-label für Icon-Buttons, aria-expanded für Akkordeons und aria-live für dynamische Updates.

Fokus-Management

Bei modernen Web-Apps ist wichtig, dass der Fokus nach einem Seitenwechsel sinnvoll gesetzt wird, Dialoge den Fokus einfangen und wieder freigeben und Ladezustände angekündigt werden.

Testen

Automatisierte Tests: axe DevTools, Lighthouse, WAVE oder Pa11y finden viele, aber längst nicht alle Probleme.

Manuelle Tests: Bedienen Sie die Seite nur mit der Tastatur, testen Sie mit einem Screenreader (VoiceOver, NVDA) und zoomen Sie auf 200 %. Erst die Kombination ergibt ein belastbares Bild.

Was kostet Barrierefreiheit?

Bei einer neuen Website gehört Barrierefreiheit von Anfang an dazu – sauber geplant entsteht dabei kaum Mehraufwand. Aufwendiger ist die Nachrüstung einer gewachsenen Seite. Als grobe Orientierung über den Markt hinweg:

• Kleine Websites: einige Arbeitstage, meist ein niedriger vierstelliger Betrag
• Mittlere Websites: deutlich mehr Aufwand, vor allem bei Videos, Formularen und eigenen Komponenten
• Online-Shops: der aufwendigste Fall, weil Produktfilter, Warenkorb, Checkout und Kundenkonto barrierefrei funktionieren müssen

Der tatsächliche Aufwand hängt stark vom Zustand der bestehenden Seite ab.

Welche Folgen haben Verstöße?

• Marktüberwachung: Die Länder haben eine gemeinsame Marktüberwachungsbehörde für Barrierefreiheit (MLBF) mit Sitz in Sachsen-Anhalt eingerichtet. Sie kann Mängel beanstanden und im äußersten Fall das Angebot untersagen.
• Bußgelder: Das BFSG sieht Bußgelder von bis zu 100.000 € in schweren Fällen und bis zu 10.000 € in anderen Fällen vor.
• Abmahnungen: Auch Mitbewerber und Verbände können Verstöße geltend machen.

Kein Grund zur Panik – aber ein guter Grund, die eigene Seite zeitnah prüfen zu lassen.

So gehen Sie vor

1. Bestandsaufnahme: Die Website automatisiert und manuell prüfen und die Probleme dokumentieren.

2. Priorisierter Maßnahmenplan: Kritische Barrieren zuerst, danach Schritt für Schritt.

3. Umsetzung: Barrieren nach WCAG 2.1 AA beheben – bei neuen Websites von Anfang an mitplanen.

4. Testen: Tastatur, Screenreader, Zoom und automatisierte Prüfungen.

5. Dokumentation: Die vorgeschriebenen Informationen zur Barrierefreiheit Ihres Angebots.

Best Practices für barrierefreies Webdesign

In der Design-Phase

• Kontraste von Anfang an mitprüfen
• Informationen nie nur über Farbe transportieren
• Fließtext ausreichend groß und mit genug Zeilenabstand
• klare visuelle Hierarchie und konsistente Navigation
• großzügige Klickflächen, vor allem auf dem Smartphone

In der Entwicklung

• semantische HTML-Elemente bevorzugen
• JavaScript als Erweiterung, nicht als Ersatz für native Funktionen
• die Einstellung „Bewegung reduzieren" respektieren
• Barrierefreiheits-Tests fest in den Entwicklungsprozess einbauen

Barrierefreiheit als Chance

Barrierefreiheit ist mehr als eine Pflicht:

• Größere Zielgruppe: Menschen mit Behinderungen, ältere Menschen und alle mit vorübergehenden Einschränkungen – etwa mit gebrochenem Arm – können Ihr Angebot nutzen.
• Bessere Auffindbarkeit: Saubere Struktur und gute Alternativtexte helfen auch Suchmaschinen und KI-Systemen, Ihre Inhalte zu verstehen.
• Bessere Nutzererfahrung für alle: Gute Kontraste, klare Struktur und verständliche Formulare machen jede Website angenehmer.

Fazit

Das BFSG gilt – und für viele Online-Shops und Buchungsangebote ist Barrierefreiheit damit Pflicht. Gleichzeitig ist sie eine echte Chance, Ihre Website für alle zugänglicher und besser zu machen.

Die nächsten Schritte:

1. Prüfen, ob Ihr Angebot unter das BFSG fällt
2. Website auf Barrieren prüfen (lassen)
3. kritische Barrieren zuerst beheben
4. Informationen zur Barrierefreiheit bereitstellen
5. Barrierefreiheit bei jeder Änderung mitdenken

Weiterlesen

• Was kostet eine Website? – Barrierefreiheit gehört von Anfang an dazu.
• Webdesign-Trends 2026 – warum Barrierefreiheit kein Trend, sondern Standard ist.
• Webdesign in Neuss – individuell programmierte Websites aus der Region.

Sie planen eine neue Website und möchten Barrierefreiheit von Anfang an mitdenken? Schreiben Sie uns – wir beraten Sie gern.