Seit dem 28. Juni 2025 ist digitale Barrierefreiheit für viele Websites in Deutschland Pflicht. Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Unternehmen, die elektronische Dienstleistungen an Verbraucher anbieten, ihre Websites barrierefrei zu gestalten. Trotzdem sind die meisten Mittelstands-Websites noch nicht compliant. Kein Wunder: Das Thema barrierefreie Website klingt nach juristischem Minenfeld, technischer Mammutaufgabe und hohen Kosten.
Dabei ist die Realität weniger dramatisch, als viele befürchten. In diesem Ratgeber zeigen wir Dir, was das BFSG konkret von Deiner Website verlangt, ob Du überhaupt betroffen bist und wie Du die wichtigsten Anforderungen mit WordPress und Elementor pragmatisch umsetzt. Ohne Panik, mit Checkliste und klaren nächsten Schritten.
Was das BFSG von Deiner Website verlangt
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die deutsche Umsetzung des European Accessibility Act (EAA). Es verpflichtet Unternehmen, die elektronische Dienstleistungen an Endverbraucher (B2C) erbringen, ihre digitalen Angebote barrierefrei zugänglich zu machen. Der technische Maßstab dafür sind die Web Content Accessibility Guidelines in der Version 2.1, Level AA (WCAG 2.1).
Wen betrifft das Gesetz?
Das BFSG gilt für Unternehmen, die elektronische Dienstleistungen direkt an Verbraucher anbieten. Das umfasst unter anderem:
- E-Commerce: Online-Shops mit Bestellprozess
- Online-Buchungssysteme: Terminbuchung, Reservierungen, Ticketing
- Kontaktformulare für Verbraucherservices: Wenn Endkunden darüber Dienstleistungen anfragen
- Digitale Bankdienstleistungen: Online-Banking, Zahlungsdienste
- Telekommunikationsservices: Digitale Kommunikationsdienste
Nicht betroffen sind:
- Reine B2B-Unternehmen: Wer ausschließlich an Geschäftskunden verkauft, fällt nicht unter das BFSG
- Kleinstunternehmen: Weniger als zehn Beschäftigte und weniger als 2 Millionen Euro Jahresumsatz
- Rein informative Websites: Eine einfache Unternehmenswebsite ohne interaktive Verbraucherservices
Den vollständigen Gesetzestext findest Du auf bfsg-gesetz.de.
Die vier Prinzipien der WCAG 2.1
Die WCAG 2.1 basiert auf vier Grundprinzipien. Jede barrierefreie Website muss diese erfüllen:
- Wahrnehmbar: Alle Inhalte müssen so dargestellt werden, dass Nutzende sie wahrnehmen können. Textalternativen für Bilder, Untertitel für Videos, ausreichende Farbkontraste.
- Bedienbar: Die Website muss vollständig per Tastatur navigierbar sein. Keine Zeitlimits, die Nutzende unter Druck setzen. Klare Navigation und Orientierung.
- Verständlich: Texte müssen lesbar und vorhersehbar sein. Formulare brauchen klare Beschriftungen und hilfreiche Fehlermeldungen.
- Robust: Inhalte müssen zuverlässig von verschiedenen Hilfstechnologien (z. B. Screenreadern) interpretiert werden können. Sauberer HTML-Code und korrekte ARIA-Attribute sind die Basis.
Bin ich betroffen? Der Schnelltest
Ob Dein Unternehmen unter das BFSG fällt, lässt sich mit drei Fragen klären:
Frage 1: Bietest Du über Deine Website Dienstleistungen direkt an Verbraucher an?
Gemeint sind interaktive Services: Online-Shops, Buchungssysteme, Kontaktformulare für Verbraucheranfragen, Kundenportale, digitale Bezahlvorgänge. Wenn Deine Website rein informativ ist (Unternehmensdarstellung ohne Transaktionsfunktion), bist Du voraussichtlich nicht betroffen.
Frage 2: Richtest Du Dich an Endverbraucher (B2C)?
Das BFSG zielt auf den Verbraucherschutz. Unternehmen, die ausschließlich an andere Unternehmen verkaufen (reines B2B), fallen nicht unter die Regelung. Aber Vorsicht: Wenn Du sowohl B2B als auch B2C bedienst, gilt das Gesetz für den B2C-Anteil.
Frage 3: Bist Du ein Kleinstunternehmen?
Kleinstunternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens 2 Millionen Euro sind ausgenommen. Beide Kriterien müssen gleichzeitig erfüllt sein.
Ergebnis: Wenn Du Frage 1 und 2 mit Ja beantwortest und Frage 3 mit Nein, bist Du verpflichtet, Deine Website barrierefrei zu gestalten.
Tipp: Auch wenn Du nicht direkt betroffen bist, lohnt sich Barrierefreiheit. Sie verbessert die Nutzererfahrung für alle Besuchenden, stärkt Dein SEO und macht Deine Website zukunftssicher. Und: Die Ausnahme für Kleinstunternehmen kann sich bei Wachstum schnell ändern.
Die 10 wichtigsten WCAG-Kriterien für Mittelstands-Websites
Statt Dich durch die über 50 Erfolgskriterien der WCAG 2.1 AA zu arbeiten, konzentriere Dich auf die zehn Punkte, die bei Mittelstands-Websites am häufigsten scheitern:
1. Ausreichende Farbkontraste
Was es bedeutet: Text muss sich deutlich vom Hintergrund abheben. Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1, großer Text (ab 18 pt oder 14 pt fett) mindestens 3:1.
So prüfst Du es: Nutze den WebAIM Contrast Checker oder den integrierten Farbkontrast-Prüfer in den Chrome DevTools.
WordPress/Elementor-Fix: Passe Deine Farben in den globalen Elementor-Einstellungen unter „Site Settings“ an. Achte besonders auf helle Grautöne auf weißem Hintergrund, die sind fast immer zu kontrastarm.
2. Alt-Texte für Bilder
Was es bedeutet: Jedes informative Bild braucht einen beschreibenden Alternativtext. Dekorative Bilder erhalten ein leeres alt-Attribut (alt="").
So prüfst Du es: Im Browser-Inspektor das alt-Attribut prüfen oder mit dem WAVE-Tool scannen.
WordPress/Elementor-Fix: Alt-Texte direkt in der WordPress-Mediathek hinterlegen. Bei Elementor-Bildwidgets das Alt-Text-Feld befüllen. Faustregel: Beschreibe, was das Bild zeigt, in maximal 125 Zeichen.
3. Tastatur-Navigation
Was es bedeutet: Alle interaktiven Elemente (Links, Buttons, Formulare, Menüs) müssen per Tastatur erreichbar und bedienbar sein. Die Tab-Reihenfolge muss logisch sein.
So prüfst Du es: Navigiere Deine Website nur mit der Tab-Taste. Erreichst Du alle Elemente? Kannst Du sie mit Enter aktivieren?
WordPress/Elementor-Fix: Vermeide div-Elemente mit Click-Handlern. Nutze stattdessen native HTML-Buttons und Links. Bei Elementor: Verwende die eingebauten Button- und Link-Widgets statt benutzerdefinierter Lösungen.
4. Überschriften-Hierarchie
Was es bedeutet: Überschriften müssen in logischer Reihenfolge stehen: H1, dann H2, dann H3. Keine Ebene überspringen. Pro Seite nur ein H1.
So prüfst Du es: Die HeadingsMap-Browser-Extension zeigt Dir die Überschriften-Struktur jeder Seite.
WordPress/Elementor-Fix: In Elementor die Heading-Widgets mit korrektem Level verwenden. Nicht nach Schriftgröße, sondern nach inhaltlicher Hierarchie wählen. Visuelle Größe separat über die Style-Einstellungen regeln.
5. Formular-Labels
Was es bedeutet: Jedes Eingabefeld braucht ein sichtbares, programmatisch verknüpftes Label. Placeholder-Text allein reicht nicht aus, denn er verschwindet beim Tippen.
So prüfst Du es: Klicke auf das Label-Text: Springt der Cursor ins Eingabefeld? Falls ja, ist die Verknüpfung korrekt.
WordPress/Elementor-Fix: Bei Elementor Forms die Label-Option aktivieren (nicht nur Placeholder setzen). Bei Contact Form 7 oder WPForms die Label-Tags korrekt verwenden.
6. Beschreibende Linktexte
Was es bedeutet: Linktexte müssen auch ohne umgebenden Kontext verständlich sein. „Hier klicken“ oder „Mehr erfahren“ sagen Screenreader-Nutzenden nichts.
So prüfst Du es: Lies nur die Linktexte Deiner Seite. Verstehst Du, wohin jeder Link führt?
WordPress/Elementor-Fix: Statt „Hier klicken“ lieber „WCAG-Checkliste herunterladen“ oder „Barrierefreiheits-Audit anfragen“. Das hilft gleichzeitig Deinem SEO.
7. Videountertitel
Was es bedeutet: Videos mit gesprochenen Inhalten brauchen Untertitel. Live-Videos brauchen mindestens automatische Untertitel.
So prüfst Du es: Spiele Deine eingebetteten Videos ab und prüfe, ob Untertitel verfügbar sind.
WordPress/Elementor-Fix: YouTube und Vimeo bieten automatische Untertitel-Generierung. Prüfe und korrigiere die automatisch erstellten Untertitel manuell. Bei selbst gehosteten Videos: SRT- oder VTT-Dateien einbinden.
8. Responsives Design
Was es bedeutet: Die Website muss auf allen Bildschirmgrößen ohne horizontales Scrollen funktionieren. Inhalte dürfen bei 200 % Zoom nicht abgeschnitten werden.
So prüfst Du es: Zoome im Browser auf 200 %. Sind alle Inhalte noch zugänglich und lesbar?
WordPress/Elementor-Fix: Elementors responsive Breakpoints konsequent nutzen. Mobile, Tablet und Desktop separat testen. Feste Pixelwerte bei Schriften durch relative Einheiten (rem/em) ersetzen. Mehr dazu in unserem Artikel über Core Web Vitals bei WordPress.
9. Fokus-Indikatoren
Was es bedeutet: Aktuell fokussierte Elemente müssen visuell hervorgehoben sein. Der typische blaue Rahmen um Links und Buttons bei Tab-Navigation darf nicht per CSS entfernt werden.
So prüfst Du es: Navigiere per Tab-Taste und achte darauf, ob Du immer siehst, welches Element gerade aktiv ist.
WordPress/Elementor-Fix: Entferne niemals outline: none ohne einen gleichwertigen Ersatz zu setzen. Gestalte eigene Fokus-Styles per CSS, die zum Design passen, z. B.: *:focus-visible { outline: 3px solid #0066CC; outline-offset: 2px; }.
10. Klare Fehlermeldungen
Was es bedeutet: Wenn ein Formular nicht abgeschickt werden kann, muss die Fehlermeldung erklären, was falsch ist und wie es korrigiert werden kann. Allgemeine Meldungen wie „Fehler“ oder rote Rahmen ohne Text reichen nicht.
So prüfst Du es: Sende ein Formular mit absichtlich falschen oder fehlenden Angaben ab. Sind die Fehlermeldungen verständlich und hilfreich?
WordPress/Elementor-Fix: Bei Elementor Forms unter „Validation“ die Fehlermeldungen anpassen. Bei WPForms und Gravity Forms die Custom-Error-Messages nutzen. Fehlermeldungen immer direkt beim betroffenen Feld platzieren.
Barrierefreiheit mit WordPress und Elementor umsetzen
Wenn Deine Website auf WordPress und Elementor läuft, hast Du gute Voraussetzungen für eine barrierefreie Umsetzung. WordPress selbst folgt vielen Accessibility-Standards, und Elementor hat in den letzten Versionen deutlich nachgebessert.
Barrierefreies Theme wählen
Das Theme bildet das Fundament. Setze auf Themes, die explizit als „accessibility-ready“ gekennzeichnet sind. Das WordPress Theme Directory filtert danach. Wenn Du Elementors Hello Theme nutzt, hast Du eine leichtgewichtige Basis, die wenig in den Weg legt. Individuelle Themes sollten von Anfang an mit Barrierefreiheit im Blick entwickelt werden, idealerweise von einem erfahrenen WordPress-Entwicklungsteam.
Elementor-Accessibility-Einstellungen
Elementor bietet unter „Elementor > Einstellungen > Experimentell“ einige Barrierefreiheits-Features:
- Verbesserter DOM-Output: Reduziert unnötige Wrapper-Elemente
- Optimierte Elementstruktur: Semantischeres HTML
- Skip-to-Content-Link: Ermöglicht es Tastaturnutzenden, direkt zum Hauptinhalt zu springen
Aktiviere alle verfügbaren Accessibility-Optionen in den Elementor-Einstellungen.
Hilfreiche Plugins
- WP Accessibility: Behebt häufige Barrierefreiheitsprobleme automatisch (Skip-Links, Fokus-Outlines, Tabindex-Korrekturen)
- One Click Accessibility: Fügt einen Accessibility-Toolbar hinzu, mit dem Nutzende Schriftgröße, Kontrast und Links anpassen können
- Jeweils prüfen: Kein Plugin allein macht eine Website barrierefrei. Plugins können Lücken füllen, ersetzen aber keine saubere Umsetzung
Testtools für die Praxis
Bevor Du Deine Website als barrierefrei betrachtest, teste sie:
- WAVE: Browser-Extension, die Barrierefreiheitsprobleme direkt in der Seite markiert. Kostenlos und sofort nutzbar.
- axe DevTools: Browser-Extension von Deque, findet WCAG-Verstöße im Code. Die Gratisversion reicht für die wichtigsten Prüfungen.
- Lighthouse: In Chrome DevTools integriert, hat einen eigenen Accessibility-Score.
- Manueller Test: Navigiere Deine Website nur mit der Tastatur. Nutze einen Screenreader (VoiceOver auf Mac, NVDA auf Windows). Das zeigt Probleme, die kein automatisches Tool findet.
Wichtig: Automatische Tools finden etwa 30 bis 40 % der Barrierefreiheitsprobleme. Den Rest decken nur manuelle Tests und ein professionelles Audit auf.
Was Barrierefreiheit kostet
Eine der häufigsten Fragen: Was kostet es, eine bestehende Website barrierefrei zu machen? Die Antwort hängt vom Umfang ab, aber hier sind realistische Orientierungswerte:
| Leistung | Kostenrahmen |
|---|---|
| Barrierefreiheits-Audit (Ist-Analyse + Maßnahmenkatalog) | 1.000 bis 3.000 € |
| Nachbesserung einer bestehenden Website (typische Mittelstands-Website, 10 bis 30 Seiten) | 3.000 bis 10.000 € |
| Neuentwicklung mit Barrierefreiheit (von Anfang an mitgedacht) | 12.000 bis 35.000 € |
| Laufende Überwachung und Wartung (jährlich) | 1.000 bis 3.000 € |
Diese Zahlen variieren je nach Komplexität der Website, Anzahl der Templates und interaktiven Elemente. Eine einfache Unternehmenswebsite mit fünf Seitentypen liegt am unteren Ende. Ein Online-Shop mit Konfigurator und Kundenportal am oberen.
Der Return on Investment: Eine barrierefreie Website erreicht mehr Menschen (in Deutschland leben rund 7,9 Millionen Menschen mit einer anerkannten Schwerbehinderung), verbessert die Nutzererfahrung für alle Besuchenden und stärkt Dein SEO. Dazu kommt: Wer jetzt investiert, vermeidet spätere Bußgelder und aufwändige Nachbesserungen unter Zeitdruck.
Wenn Du wissen willst, was eine Website insgesamt kostet, lies unseren ausführlichen Ratgeber: Website erstellen lassen: Was kostet es wirklich?
Warum Barrierefreiheit auch Deinem SEO hilft
Barrierefreiheit und Suchmaschinenoptimierung überschneiden sich stärker, als viele denken. Vieles, was Du für die WCAG umsetzt, verbessert gleichzeitig Dein Google-Ranking:
Überschriften-Hierarchie: Eine saubere H1-H2-H3-Struktur hilft Screenreadern und Googles Crawlern gleichermaßen. Beide brauchen eine logische Inhaltsstruktur, um eine Seite zu verstehen.
Alt-Texte: Google kann Bilder nicht sehen. Alt-Texte liefern den Kontext, den die Bildersuche und die reguläre Suche brauchen. Gute Alt-Texte sind gleichzeitig barrierefreie Alt-Texte.
Beschreibende Linktexte: „KI-Beratung für KMU“ als Linktext ist besser als „hier klicken“, für Screenreader und für Googles Verständnis des Linkziels. Mehr zu effektivem Linkbuilding findest Du in unserem SEO-und-GEO-Angebot.
Sauberes HTML: Valider, semantischer HTML-Code wird von Screenreadern korrekt interpretiert und von Google effizienter gecrawlt. Weniger DOM-Bloat bedeutet schnellere Ladezeiten und bessere Core Web Vitals.
Tastatur-Navigation: Websites, die per Tastatur navigierbar sind, haben typischerweise eine klarere Interaktionsstruktur. Das führt zu besseren User-Experience-Signalen: geringere Absprungrate, längere Verweildauer.
Responsive Design: Mobile-Friendliness ist seit Jahren ein Google-Rankingfaktor. WCAG fordert das Gleiche: Inhalte müssen auf allen Geräten zugänglich sein.
Fazit: Wer in Barrierefreiheit investiert, investiert gleichzeitig in SEO. Das ist kein Nebeneffekt, sondern eine logische Konsequenz aus gemeinsamen technischen Grundlagen. Wenn Du Deine Website ohnehin neu aufsetzen oder relaunchen willst, integriere Barrierefreiheit von Anfang an. Unsere Website-Relaunch-Checkliste zeigt Dir, wie Du dabei vorgehst.
Häufig gestellte Fragen
Gilt das BFSG auch für B2B-Websites?
Nein, das BFSG richtet sich an Unternehmen, die elektronische Dienstleistungen an Endverbraucher (B2C) anbieten. Reine B2B-Websites sind nicht betroffen. Aber: Wenn Du sowohl B2B als auch B2C bedienst, gilt das Gesetz für den B2C-Teil. Und unabhängig vom Gesetz verbessert Barrierefreiheit die Nutzererfahrung für alle Besuchenden.
Was passiert bei Verstößen gegen das BFSG?
Die Marktüberwachungsbehörden der Bundesländer können bei Verstößen verschiedene Maßnahmen ergreifen: Abmahnungen, Bußgelder bis zu 100.000 Euro und im Extremfall die Anordnung, das nicht-konforme digitale Angebot vom Markt zu nehmen. Die Durchsetzung wird schrittweise intensiviert. Wer jetzt handelt, hat gute Chancen, Probleme zu vermeiden.
Muss meine bestehende Website sofort barrierefrei sein?
Das Gesetz ist seit dem 28. Juni 2025 in Kraft. Für bestehende Websites gibt es keine offizielle Übergangsfrist. Das bedeutet: Rechtlich gesehen müssen betroffene Websites bereits jetzt die Anforderungen erfüllen. Praktisch empfehlen wir, schnellstmöglich mit einem Audit zu starten und die kritischsten Probleme zuerst zu beheben. Dokumentiere Deinen Fortschritt, das zeigt im Zweifelsfall guten Willen.
Reicht ein Plugin für Barrierefreiheit?
Nein. Overlay-Plugins, die einen Accessibility-Button auf die Website setzen, erfüllen die WCAG-Anforderungen nicht. Sie ändern nur die Darstellung im Browser, nicht den zugrundeliegenden Code. Barrierefreiheit muss im Design, im HTML, in der Informationsarchitektur und in den Inhalten verankert sein. Plugins wie WP Accessibility können einzelne Lücken schließen, ersetzen aber keine saubere Umsetzung. Mehr zu aktuellen Designstandards erfährst Du in unserem Artikel zu den Webdesign-Trends 2026.
Nächster Schritt: Barrierefreiheits-Check für Deine Website
Ob Deine Website die BFSG-Anforderungen erfüllt, zeigt ein professionelles Audit. snutig prüft Deine Website auf WCAG-2.1-Konformität, erstellt einen konkreten Maßnahmenkatalog und setzt die Anpassungen mit Dir um, in WordPress, Elementor oder bei einem kompletten Relaunch mit Barrierefreiheit.
Das beinhaltet:
- Ist-Analyse: Automatisierte und manuelle Prüfung Deiner Website
- Maßnahmenkatalog: Priorisierte Liste aller Anpassungen
- Umsetzung: Technische Implementierung der barrierefreien Elemente
- Dokumentation: Erklärung zur Barrierefreiheit für Deine Website
Du willst wissen, wo Deine Website steht? Jetzt kostenloses Erstgespräch anfragen und Barrierefreiheits-Check starten.
