Seit dem 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Es verpflichtet viele Unternehmen, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten – einschließlich Websites und Online-Shops. Wer nicht handelt, riskiert Abmahnungen und Bußgelder. In diesem Guide erklären wir, was das BFSG für dein Unternehmen bedeutet, wer betroffen ist und welche konkreten Schritte du jetzt unternehmen solltest.

Was ist das Barrierefreiheitsstärkungsgesetz (BFSG)?

Das BFSG setzt die EU-Richtlinie European Accessibility Act (EAA) in deutsches Recht um. Das Ziel: Digitale Produkte und Dienstleistungen sollen für alle Menschen zugänglich sein – auch für die rund 10 Millionen Menschen mit Behinderungen in Deutschland. Das Gesetz betrifft nicht nur öffentliche Stellen, sondern erstmals auch private Unternehmen.

Konkret bedeutet das: Wenn du eine Website betreibst, über die du Produkte oder Dienstleistungen an Verbraucher anbietest, musst du die Anforderungen der BITV 2.0 und WCAG 2.1 (Level AA) erfüllen. Das klingt technisch – ist in der Praxis aber gut machbar.

Wer ist betroffen? Und wer nicht?

Betroffen sind:

• Online-Shops und E-Commerce-Websites (B2C)
• Dienstleistungswebsites mit Online-Buchung oder -Kontakt
• Banking- und Finanzdienstleistungen
• E-Books und digitale Medien
• Telekommunikationsdienste
• Alle Unternehmen mit mehr als 10 Mitarbeitern und über 2 Mio. € Jahresumsatz

Ausnahmen:

• Kleinstunternehmen (weniger als 10 Mitarbeiter UND unter 2 Mio. € Umsatz)
• Rein B2B-Websites ohne direkten Verbraucher-Kontakt
• Websites, die keine Produkte oder Dienstleistungen anbieten (reine Infowebsites)

Was bedeutet Barrierefreiheit konkret für Websites?

Die WCAG 2.1 Level AA definiert vier Grundprinzipien. Deine Website muss:

1. Wahrnehmbar sein

• Alle Bilder haben aussagekräftige Alt-Texte
• Videos haben Untertitel und/oder Audiodeskription
• Text ist ohne Zoom lesbar (Mindestschriftgröße 16px)
• Kontrastverhältnis zwischen Text und Hintergrund mindestens 4.5:1
• Inhalte sind nicht nur über Farbe unterscheidbar (z.B. Fehlermeldungen)

2. Bedienbar sein

• Alle Funktionen sind per Tastatur erreichbar (Tab, Enter, Escape)
• Fokus-Indikatoren sind sichtbar (kein „outline: none" ohne Alternative)
• Navigation ist konsistent und vorhersehbar
• Nutzer haben genug Zeit, Inhalte zu lesen und zu interagieren
• Keine Inhalte, die Anfälle auslösen können (Blinken, Flackern)

3. Verständlich sein

• Sprache des Dokuments ist angegeben (lang="de")
• Formulare haben klare Labels und Fehlermeldungen
• Navigation und Layout sind konsistent über alle Seiten
• Abkürzungen und Fachbegriffe sind erklärt oder vermeidbar

4. Robust sein

• Valides HTML mit korrekter semantischer Struktur (h1–h6, nav, main, footer)
• ARIA-Attribute korrekt eingesetzt (aria-label, aria-describedby)
• Kompatibilität mit Screenreadern und assistiven Technologien
• Keine Abhängigkeit von JavaScript für grundlegende Funktionen

Barrierefreiheits-Checkliste für deine Website

1. Alt-Texte für alle Bilder und Grafiken hinzufügen
2. Kontrastverhältnisse prüfen (Tool: WebAIM Contrast Checker)
3. Tastaturnavigation testen (Tab durch die gesamte Website)
4. Formulare mit Labels und Fehlermeldungen versehen
5. Schriftgröße mindestens 16px, Zeilenabstand mindestens 1.5
6. HTML-Sprachattribut setzen (lang="de")
7. Semantisches HTML verwenden (keine div-Suppe)
8. Fokus-Styles sichtbar machen
9. Headings hierarchisch korrekt (h1 → h2 → h3)
10. Videos mit Untertiteln versehen
11. Skip-Navigation-Link am Seitenanfang
12. Barrierefreiheitserklärung veröffentlichen
13. WAVE oder aXe DevTools Audit durchführen
14. Screenreader-Test (VoiceOver auf Mac, NVDA auf Windows)

Was passiert, wenn man nichts tut?

Das BFSG sieht Sanktionen vor:

• Bußgelder bis zu 100.000 € bei Verstößen
• Abmahnungen durch Verbraucherschutzverbände
• Marktüberwachungsbehörden können Produkte und Dienstleistungen vom Markt nehmen
• Reputationsschaden durch öffentliche Berichterstattung

Auch wenn die Durchsetzung schrittweise erfolgt: Die Abmahnindustrie hat das Thema längst entdeckt. Wer jetzt handelt, ist auf der sicheren Seite.

So machst du deine Website barrierefrei: 5 Schritte

Schritt 1: Ist-Analyse (Audit)

Führe ein Barrierefreiheits-Audit durch. Tools wie aXe DevTools, WAVE oder Google Lighthouse identifizieren automatisch viele Probleme. Eine manuelle Prüfung durch Experten ergänzt den automatisierten Test – besonders für Tastaturnavigation und Screenreader-Kompatibilität.

Schritt 2: Prioritäten setzen

Nicht alle Probleme haben die gleiche Dringlichkeit. Fokussiere dich zuerst auf die kritischsten Barrieren: Fehlende Alt-Texte, unzureichende Kontraste, nicht bedienbare Formulare und fehlende Tastaturnavigation.

Schritt 3: Technische Umsetzung

Behebe die identifizierten Probleme. Bei einer bestehenden WordPress-Website können Plugins wie WP Accessibility oder AccessiBe helfen. Für eine nachhaltige Lösung empfehlen wir jedoch eine fachkundige Umsetzung, die direkt in den Code eingreift – Overlay-Lösungen sind umstritten und gelten nicht als vollwertige Lösung.

Schritt 4: Barrierefreiheitserklärung veröffentlichen

Eine Barrierefreiheitserklärung auf deiner Website ist Pflicht. Sie beschreibt den aktuellen Stand der Barrierefreiheit, bekannte Einschränkungen und einen Feedback-Mechanismus für Nutzer.

Schritt 5: Laufende Prüfung

Barrierefreiheit ist kein einmaliges Projekt. Jede neue Seite, jeder neue Blog-Artikel, jedes neue Feature muss die Standards einhalten. Integriere Barrierefreiheits-Checks in deinen Workflow.

Was kostet ein Barrierefreiheits-Audit und die Umsetzung?

• Automatisierter Basis-Check: Kostenlos (Lighthouse, WAVE)
• Professionelles Audit mit Bericht: 500 – 2.000 €
• Technische Umsetzung (bestehende Website): 1.000 – 5.000 €
• Barrierefreier Relaunch (neue Website): Im Projektpreis enthalten
• Laufende Prüfung und Betreuung: 100 – 300 € / Monat

Bei Discover Studio bieten wir einen kostenlosen Barrierefreiheits-Schnellcheck an, gefolgt von einem detaillierten Audit und konkreten Maßnahmenplan. Für neue Website-Projekte ist Barrierefreiheit nach BFSG-Standard bei uns inklusive.

Barrierefreiheit lohnt sich – auch wirtschaftlich

Digitale Barrierefreiheit ist nicht nur Pflicht, sondern bringt echte Vorteile:

• Größere Zielgruppe: 15–20 % der Bevölkerung profitieren direkt
• Besseres SEO: Sauberes HTML, Alt-Texte und Struktur verbessern auch das Ranking
• Höhere Usability: Was für Menschen mit Einschränkungen funktioniert, funktioniert für alle besser
• Rechtssicherheit: Keine Abmahnungen, keine Bußgelder
• Positive Markenwahrnehmung: Inklusion stärkt das Image deines Unternehmens

Barrierefreiheit ist kein Hindernis für gutes Design – sie ist die Grundlage dafür. Eine barrierefreie Website ist automatisch eine bessere Website.

Barrierefreiheit bei WordPress, Shopify und Next.js

WordPress: Plugins und Themes

WordPress bietet mit dem Theme „Flavor" und dem Plugin „WP Accessibility" solide Grundlagen. Wichtig ist, ein barrierefreies Theme als Basis zu wählen – nachträgliches „Drüberlegen" mit Overlay-Tools wie AccessiBe oder UserWay wird von der Community kritisch gesehen und reicht rechtlich möglicherweise nicht aus. Die besten Ergebnisse erzielst du mit einem individuell entwickelten Theme, das Barrierefreiheit von Anfang an berücksichtigt.

Shopify: E-Commerce und Barrierefreiheit

Shopify hat in den letzten Jahren stark nachgebessert. Das Standard-Theme „Dawn" ist grundsätzlich barrierefrei gestaltet. Problematisch werden Custom-Themes und Third-Party-Apps. Teste jeden installierten App-Bereich auf Barrierefreiheit. Besonders kritisch: der Checkout-Prozess, Produktfilter und Pop-ups. Shopify bietet seit 2025 ein integriertes Accessibility-Reporting im Admin-Bereich.

Next.js: Moderne Frameworks

React-basierte Frameworks wie Next.js bieten technisch die besten Voraussetzungen für Barrierefreiheit – vorausgesetzt, die Entwickler setzen semantic HTML, ARIA-Attribute und Tastaturnavigation korrekt um. Tools wie eslint-plugin-jsx-a11y fangen viele Probleme bereits im Entwicklungsprozess ab. Bei Discover Studio nutzen wir Next.js und achten in jedem Projekt auf WCAG-Konformität.

Die besten Tools für Barrierefreiheits-Tests

Hier sind die Tools, die wir bei jedem Projekt einsetzen:

• Google Lighthouse: Integriert in Chrome DevTools, kostenfrei, schneller Überblick über Accessibility-Score
• aXe DevTools: Browser-Extension von Deque, sehr detaillierte Analyse mit konkreten Handlungsempfehlungen
• WAVE: Visuelles Tool von WebAIM, zeigt Barrieren direkt auf der Seite an
• WebAIM Contrast Checker: Prüft das Kontrastverhältnis zwischen Text- und Hintergrundfarbe
• Pa11y: Automatisiertes Testing für CI/CD-Pipelines – perfekt für laufende Überprüfung
• Screen Reader: VoiceOver (Mac), NVDA (Windows) – nichts ersetzt den manuellen Test mit echtem Screenreader
• Keyboard-Test: Navigiere durch die gesamte Website nur mit Tab, Enter und Escape

5 Mythen über barrierefreies Webdesign

Mythos 1: „Barrierefreie Websites sehen hässlich aus"

Falsch. Barrierefreiheit und gutes Design sind kein Widerspruch. Apple, Gov.uk und viele preisgekrönte Websites sind vollständig barrierefrei und gleichzeitig visuell beeindruckend. Die Einschränkungen betreffen hauptsächlich Kontraste und Schriftgrößen – und bessere Lesbarkeit ist immer auch besseres Design.

Mythos 2: „Das betrifft nur öffentliche Websites"

Seit dem BFSG 2025 gilt die Pflicht auch für private Unternehmen, die Produkte oder Dienstleistungen an Verbraucher anbieten. Also für fast jeden Online-Shop und jede Dienstleistungswebsite.

Mythos 3: „Ein Overlay-Widget macht meine Website barrierefrei"

Overlay-Widgets wie AccessiBe oder UserWay versprechen Barrierefreiheit per JavaScript-Injection. Die Realität: Sie lösen nicht die grundlegenden strukturellen Probleme, werden von Screenreader-Nutzern oft als störend empfunden und sind rechtlich umstritten. Echte Barrierefreiheit erfordert sauberen Code, nicht ein aufgesetztes Widget.

Mythos 4: „Unsere Zielgruppe hat keine Einschränkungen"

15–20 % der Bevölkerung haben eine Form von Einschränkung – das sind mehr als du denkst. Dazu kommen temporäre Einschränkungen (gebrochener Arm, Augen-OP) und situationsbedingte (grelles Sonnenlicht auf dem Smartphone-Display, laute Umgebung). Barrierefreiheit hilft allen.

Mythos 5: „Barrierefreiheit ist einmalig"

Nein. Jede neue Seite, jeder neue Blog-Artikel, jedes Feature-Update muss die Standards einhalten. Barrierefreiheit ist ein laufender Prozess, kein einmaliges Projekt. Integriere Barrierefreiheits-Checks in deinen Content-Workflow.

Fazit: Jetzt handeln, nicht abwarten

Das BFSG ist seit Juni 2025 in Kraft und die Uhr tickt. Unternehmen, die jetzt nicht handeln, riskieren rechtliche Konsequenzen und verpassen die Chance, ihre digitale Präsenz für alle Menschen zugänglich zu machen. Die gute Nachricht: Die Umsetzung ist machbar, die Kosten sind überschaubar und die Vorteile gehen weit über die reine Compliance hinaus. Discover Studio Hamburg unterstützt dich beim Audit, bei der technischen Umsetzung und beim barrierefreien Relaunch deiner Website – BFSG-konform und zukunftssicher.