Barrierefreiheit im Web (BFSG 2025): Pflichtaufgabe oder unterschätzter Umsatz-Hebel?

Deine Website sieht modern aus, die Bilder sind scharf, das Design trendig. Und trotzdem verlierst du jeden Tag 15–20% potenzielle Kunden, ohne es zu merken. Warum? Weil sie dein Kontaktformular nicht bedienen können. Weil dein Menü per Tastatur nicht navigierbar ist. Weil der Screenreader nur Kauderwelsch vorliest.

Ab dem 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Viele Agenturen nutzen dieses Datum, um Panik zu verbreiten: "Handeln Sie jetzt, sonst drohen Abmahnungen!"

Das ist zwar nicht falsch, aber es ist die völlig falsche Perspektive. Denn Barrierefreiheit im Web ist einer der unterschätztesten Wachstumshebel, die du als Unternehmer in Hannover gerade ziehen kannst – für dein Google-Ranking, deine Conversion-Rate und deine Markenwahrnehmung.

Wen betrifft das BFSG wirklich?

Lass uns die Fakten klären, bevor wir zu den wirtschaftlichen Chancen kommen. Das Barrierefreiheitsstärkungsgesetz setzt die European Accessibility Act (EAA) in deutsches Recht um und gilt für:

• Online-Shops (E-Commerce): Der gesamte Kaufprozess – von der Produktsuche über den Warenkorb bis zur Bezahlung – muss für alle zugänglich sein. Das betrifft auch Onlineshop-Betreiber, die bisher Barrierefreiheit ignoriert haben.
• Dienstleistungen im elektronischen Geschäftsverkehr: Terminbuchungstools, digitale Verträge, Kundenportale – alles, was B2C-Interaktion ermöglicht.
• Bankdienstleistungen, Telekommunikation & Personenverkehr: Online-Banking, Telekom-Portale und Buchungssysteme.

Was bedeutet das konkret?

Die technische Grundlage bildet die Europäische Norm EN 301 549, die sich eng an den WCAG 2.1 Level AA Richtlinien orientiert. Das heißt für dein Webdesign: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit deiner Website müssen gewährleistet sein.

Barrierefreiheit im Web: Die Zahlen, die Unternehmer kennen müssen

Bevor wir über Technik sprechen, lass uns über Geld reden. Denn die wirtschaftliche Dimension von Accessibility wird massiv unterschätzt:

• 13% der deutschen Bevölkerung leben mit einer anerkannten Behinderung (Destatis 2024). Das sind über 10 Millionen potenzielle Kunden.
• Temporäre Einschränkungen betreffen jeden: gebrochener Arm, Augen-OP, Sonnenlicht auf dem Display. In Hannover stehen im Sommer tausende Pendler mit geblendetem Smartphone an der Haltestelle.
• Alternde Bevölkerung: 28% der Deutschen sind über 60. Sie brauchen größere Schriften, stärkere Kontraste und intuitive Navigation – alles Accessibility-Themen.
• Click-Away Rate: Laut dem Click-Away Pound Survey verlassen 69% der Nutzer mit Behinderung eine unzugängliche Website sofort – und kommen nie wieder.

Der "Hidden Benefit": Warum Google barrierefreie Websites liebt

Hier wird es richtig spannend. Wir bei Storyable sehen bei unseren Kunden in Hannover immer wieder denselben Effekt: Accessibility-Optimierung führt zu messbaren SEO-Verbesserungen. Das ist kein Zufall – die technischen Anforderungen für Barrierefreiheit (WCAG-Standards) sind zu fast 100% deckungsgleich mit technischer SEO.

Die 5 Überschneidungen im Detail

Wer seine Website-Performance und Core Web Vitals optimiert, macht automatisch auch große Schritte in Richtung Barrierefreiheit. Ein weiterer Beweis: Google hat den INP-Wert (Interaction to Next Paint) zum Core-Web-Vital erhoben – ein Messpunkt, der direkt mit Keyboard-Accessibility zusammenhängt.

WCAG 2.2: Die Checkliste für dein barrierefreies Webdesign

Die Web Content Accessibility Guidelines (WCAG) 2.2 sind der internationale Standard, auf den auch das BFSG verweist. Hier die wichtigsten Anforderungen, die du kennen musst – aufgeteilt nach den vier Prinzipien:

1. Wahrnehmbar (Perceivable)

• Textalternativen: Jedes Bild, Icon und Grafik braucht einen beschreibenden Alt-Text.
• Untertitel & Transkripte: Videos brauchen Captions, Audio braucht Textversionen.
• Kontraste: Text muss mindestens ein Kontrastverhältnis von 4.5:1 (normal) bzw. 3:1 (große Schrift) haben.
• Responsive Design: Inhalte müssen bei 200% Zoom ohne horizontales Scrollen lesbar bleiben.

2. Bedienbar (Operable)

• Tastatur-Navigation: Jede Funktion muss ohne Maus erreichbar sein (Tab, Enter, Escape).
• Fokus-Indikatoren: Der aktive Fokus muss visuell deutlich erkennbar sein – kein outline: none ohne Alternative.
• Keine Zeitlimits: Nutzer brauchen genug Zeit für Formulare und Interaktionen.
• Skip-Links: "Zum Inhalt springen"-Links für Screenreader-Nutzer.

3. Verständlich (Understandable)

• Fehlermeldungen: Formulare müssen klar kommunizieren, was falsch ist und wie man es behebt.
• Konsistente Navigation: Menüs müssen auf jeder Seite identisch aufgebaut sein.
• Sprache: Die Dokumentsprache muss im lang-Attribut korrekt gesetzt sein.

4. Robust (Robust)

• Valides HTML: Kein kaputter Code, geschlossene Tags, korrekte Verschachtelung.
• ARIA korrekt einsetzen: Wenn nativ-HTML nicht ausreicht, helfen ARIA-Attribute – aber nur, wenn sie richtig implementiert sind.
• Kompatibilität: Die Website muss mit aktuellen Screenreadern (NVDA, JAWS, VoiceOver) funktionieren.

Custom Development vs. WordPress-Themes: Die Accessibility-Wahrheit

Viele Unternehmen versuchen jetzt, ihre alten WordPress-Themes mit "Accessibility-Plugins" oder Overlays zu retten. Das ist – gelinde gesagt – ein teurer Fehler. Die gleiche Problematik, die wir bereits im WordPress vs. Custom Code Vergleich beschrieben haben, tritt hier verschärft auf.

Warum Overlays nicht funktionieren

Accessibility-Overlays (wie AccessiBe, UserWay & Co.) versprechen "1-Klick-Barrierefreiheit". Die Realität:

• Overlays maskieren Probleme, statt sie zu lösen. Der zugrunde liegende Code bleibt unzugänglich.
• Screenreader-Nutzer hassen sie. Die National Federation of the Blind hat explizit gegen Overlays Stellung bezogen.
• DSGVO-Risiko: Die meisten Overlays laden externe Scripts und setzen Cookies – ohne korrektes Consent Management.
• Keine BFSG-Konformität: Die Marktüberwachungsbehörden akzeptieren Overlays nicht als ausreichende Maßnahme.

Warum Custom Code die Accessibility gewinnt

Hier bei Storyable setzen wir auf Custom Development mit Nuxt.js (Vue) – und Barrierefreiheit ist keine Checkbox, sondern Teil der DNA jeder Website, die unser Büro in Hannover verlässt.

Barrierefreiheit als Conversion-Booster: 3 Praxisbeispiele

1. E-Commerce: +23% Conversion nach Accessibility-Relaunch

Ein Online-Händler hatte eine WordPress-basierte Shopseite mit durchschnittlicher Performance. Die Produktfilter waren per Tastatur nicht bedienbar, der Checkout-Flow hatte keine Fehlermeldungen bei Pflichtfeldern, und der Warenkorb-Button war für Screenreader unsichtbar. Nach dem Relaunch auf ein barrierefreies Custom-Onlineshop-System stiegen die Conversions um 23%. Warum? Weil plötzlich alle Nutzer – auch Senioren, Menschen mit Sehschwäche und Tablet-Nutzer – den Checkout fehlerfrei abschließen konnten. Besonders die verbesserte Formularvalidierung mit klaren, kontextbezogenen Fehlermeldungen sorgte dafür, dass Kaufabbrüche um über ein Drittel sanken.

2. Dienstleister: -40% Bounce Rate durch bessere Navigation

Eine Kanzlei in Hannover hatte eine hohe Absprungrate auf mobilen Geräten. Die Ursache: Das Hamburger-Menü war per Touch kaum bedienbar, Fokus-Indikatoren fehlten komplett und die Unterseiten hatten keine logische Heading-Hierarchie. Besucher fanden schlicht nicht, was sie suchten – und Google verstand die Seitenstruktur ebenfalls nicht. Nach der Optimierung mit sauberem semantischem HTML, klar erkennbaren Fokus-Zuständen und einer verkaufspsychologisch optimierten Navigation sank die Bounce Rate um 40% – und die Kontaktanfragen verdoppelten sich innerhalb von 8 Wochen.

3. B2B-Portal: SEO-Boost durch strukturierte Accessibility

Ein SaaS-Anbieter implementierte vollständiges semantisches HTML mit ARIA-Landmarks, korrekt verschachtelten Heading-Ebenen und beschreibenden Link-Texten (statt "hier klicken"). Google indexierte die Web App danach deutlich besser – ganze Seitenabschnitte tauchten erstmals in Featured Snippets auf. Ergebnis: +35% organischer Traffic innerhalb von 3 Monaten – ohne zusätzlichen Content, rein durch technische Optimierung. Das zeigt: SEO und Accessibility sind keine getrennten Disziplinen, sondern zwei Seiten derselben Medaille.

Die 5 häufigsten BFSG-Fehler – und wie du sie vermeidest

Aus unserer Erfahrung bei Storyable in Hannover sehen wir immer wieder dieselben Stolperfallen. Hier die Top 5:

1. "Wir sind B2B, das betrifft uns nicht." Falsch gedacht. Sobald du einen Webshop, ein Buchungstool oder ein Kundenportal hast, kannst du unter das BFSG fallen. Und selbst wenn nicht: Die SEO-Vorteile und das größere Zielpublikum machen Barrierefreiheit für jedes Unternehmen wirtschaftlich sinnvoll.
2. "Wir installieren ein Accessibility-Plugin." Wie oben beschrieben: Overlays lösen das Problem nicht. Sie erzeugen nur ein falsches Gefühl der Sicherheit – und können sogar zusätzliche DSGVO-Probleme verursachen.
3. "Alt-Texte reichen aus." Barrierefreiheit ist weit mehr als Bildbeschreibungen. Keyboard-Navigation, Fokus-Management, Farbkontraste, verständliche Fehlermeldungen und eine korrekte Heading-Hierarchie sind ebenso kritisch.
4. "Das machen wir nach dem Launch." Barrierefreiheit nachträglich in eine bestehende Architektur einzubauen, kostet das 3–5-fache gegenüber der Integration von Anfang an. Wer bei seinem Website-Relaunch Accessibility von Tag 1 mitdenkt, spart massiv.
5. "Unsere Zielgruppe hat keine Einschränkungen." Das ist statistisch unmöglich. 13% der Bevölkerung haben eine anerkannte Behinderung, und temporäre Einschränkungen (Sonnenlicht, gebrochener Finger, Multitasking) betreffen buchstäblich jeden Smartphone-Nutzer täglich.

Dein Barrierefreiheits-Fahrplan: Von der Analyse zum BFSG-konformen Relaunch

Du willst loslegen? Hier ist der Storyable-Prozess, den wir mit unseren Kunden in Hannover durchlaufen:

Phase 1: Audit (Woche 1–2)

• Automatisierte Tests: Lighthouse, axe DevTools, Wave – für die Low-Hanging Fruits.
• Manueller Test: Keyboard-Navigation, Screenreader-Durchlauf (NVDA + VoiceOver), Kontrast-Prüfung.
• User-Test: Echte Nutzer mit Einschränkungen testen die kritischen User Flows.

Phase 2: Priorisierung (Woche 2)

• Kritisch: Was verhindert Nutzung? (z.B. Checkout nicht per Tastatur erreichbar)
• Hoch: Was beeinträchtigt die UX erheblich? (z.B. fehlende Alt-Texte, schlechte Kontraste)
• Mittel: Was verbessert die Gesamtqualität? (z.B. Skip-Links, bessere Fehlermeldungen)

Phase 3: Umsetzung (Woche 3–8)

Entweder als gezielte Optimierung der bestehenden Seite oder als strategischer Relaunch – je nachdem, wie tief die technische Schuld sitzt.

Phase 4: Dokumentation & Monitoring

• Barrierefreiheitserklärung gemäß BFSG erstellen und veröffentlichen.
• Continuous Monitoring: Accessibility-Tests in die CI/CD-Pipeline integrieren.
• Schulung: Dein Team lernt, Content barrierefrei zu erstellen.

Fazit: Barrierefreiheit im Web ist kein Kostenfaktor – sie ist dein Wettbewerbsvorteil

Barrierefreiheit bedeutet nicht "für Blinde optimieren". Es bedeutet, deine Website für jeden Menschen nutzbar zu machen:

• Den Manager mit gebrochenem Arm, der nur die Tastatur nutzen kann.
• Die Pendlerin in der U-Bahn, die Videos ohne Ton schaut.
• Den Senioren mit Lesebrille, der größere Schriften braucht.
• Den Smartphone-Nutzer in der prallen Sonne, der auf Kontraste angewiesen ist.

Du schließt niemanden aus. Du maximierst deine potenzielle Kundschaft. Und du sendest als Marke das Signal: Wir denken an alle.

In Hannover sehen wir bei Storyable regelmäßig, wie Unternehmen nach einer Accessibility-Optimierung nicht nur BFSG-konform werden, sondern ihr Google-Ranking nachhaltig verbessern und die Conversion-Rate steigern. Das ist kein Entweder-oder – es ist ein Beide-und.

Cagri Ersöz

Ist deine Website barrierefrei – und bereit für das BFSG?

Wir machen dir einen kostenlosen Accessibility- & Performance-Check. Cagri Ersöz zeigt dir persönlich, wo die Quick Wins liegen und wie du das BFSG nicht nur erfüllst, sondern als Wachstumshebel nutzt.

Jetzt kostenlosen Check anfragen