Barrierefreie Website erstellen: BFSG-Leitfaden

Was bedeutet Barrierefreiheit im Web – und warum ist sie jetzt Pflicht?

Barrierefreiheit im Web bedeutet, dass Inhalte wahrnehmbar, bedienbar, verständlich und robust sind – das sind die vier Prinzipien der WCAG 2.1. Das BFSG (Barrierefreiheitsstärkungsgesetz) setzt die EU-Richtlinie 2019/882 (European Accessibility Act) in deutsches Recht um und verpflichtet Unternehmen, digitale Dienstleistungen barrierefrei anzubieten. Klingt nach viel Technik – ist es aber nicht, wenn Sie die vier Prinzipien als Leitplanke verstehen.

Bevor eine Website online geht, braucht sie eine Adresse, unter der Besucher sie finden. Hier lässt sich die passende Wunschdomain – also die persönliche Internetadresse – aus über 220 Endungen auswählen, von der klassischen.de bis zu branchenspezifischen Endungen. Eine klare, gut lesbare Domain ist dabei nicht nur eine Frage der Wiedererkennung, sondern trägt auch zur verständlichen Orientierung für alle Nutzergruppen bei.

Worauf achten bei Barrierefreiheit im Web:

• Wahrnehmbarkeit: Inhalte müssen in alternativer Form bereitgestellt werden – etwa Alt-Texte für Bilder oder Untertitel für Videos. Wer ein Bild ohne Beschreibung einstellt, schließt Screenreader-Nutzer aus.
• Bedienbarkeit: Navigation und Interaktion funktionieren per Tastatur, ohne Zeitdruck und ohne blinkende Elemente, die Anfälle auslösen können (WCAG 2.3).
• Verständlichkeit: Texte sind lesbar, Formulare vorhersehbar, Fehlermeldungen hilfreich. Ein Kontaktformular, das bei falscher Eingabe nur rot blinkt, hilft niemandem.
• Robustheit: Der Code ist so aufgebaut, dass assistive Technologien – also Screenreader, Braillezeilen oder Sprachsteuerungen – ihn korrekt interpretieren können.

BFSG, EAA und BITV 2.0 – welches Gesetz gilt für wen?

Drei Regelwerke tauchen in der Diskussion um barrierefreie Websites immer wieder auf – und sie gelten für unterschiedliche Adressaten. Das BFSG richtet sich an privatwirtschaftliche Unternehmen, die Dienstleistungen im elektronischen Geschäftsverkehr anbieten: Online-Shops, Buchungsportale, Banking-Apps. Die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) gilt dagegen für öffentliche Stellen des Bundes – also Behörden-Websites und staatliche Portale. Der European Accessibility Act (EAA) ist die übergeordnete EU-Richtlinie, die beide nationalen Regelungen rahmt. Für Selbstständige und kleine Unternehmen mit Webshop oder Online-Dienstleistung ist das BFSG das maßgebliche Gesetz.

Wen betrifft das Barrierefreiheitsstärkungsgesetz – und wer ist ausgenommen?

Das BFSG betrifft alle Unternehmen, die Dienstleistungen im elektronischen Geschäftsverkehr erbringen – dazu zählen Online-Shops, Buchungsportale, Bankdienstleistungen und Messenger-Dienste. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen – nicht jedoch bei Produkten. Diese Unterscheidung ist entscheidend: Wer als Solo-Selbstständige eine Beratung online anbietet, fällt unter die Ausnahme. Wer im gleichen Rahmen physische Produkte verkauft, bleibt verpflichtet.

Vorteile der Kleinstunternehmen-Ausnahme:

• Entlastung: Vereine und Solo-Selbstständige mit geringem Umsatz fallen bei reinen Dienstleistungen nicht unter die Pflicht – das schafft Planungssicherheit ohne Bürokratie.
• Einschränkung bei Produkten: Wer physische Produkte (z. B. Hardware, Unterhaltungselektronik) in Verkehr bringt, bleibt unabhängig von der Unternehmensgröße verpflichtet.
• Freiwillige Umsetzung lohnt sich: Barrierefreiheit erweitert die Zielgruppe und verbessert die Nutzererfahrung – auch ohne gesetzliche Pflicht ein handfester Vorteil.

Bußgelder und Marktüberwachung – welche Konsequenzen drohen?

Verstöße gegen das BFSG können mit Bußgeldern bis zu 100.000 Euro geahndet werden. Zuständig für Beschwerden und Kontrollen ist die Marktüberwachungsstelle der Länder. Verbraucher können sich direkt an diese Stelle wenden, wenn eine Website oder ein Online-Shop die Anforderungen nicht erfüllt. Stichprobenartige Prüfungen sind bereits angelaufen. Neben dem Bußgeld droht ein Vertriebsverbot für nicht konforme Produkte – ein Risiko, das gerade für E-Commerce-Anbieter existenzbedrohend sein kann.

WCAG 2.1 AA – die technische Grundlage für barrierefreies Webdesign

Die WCAG 2.1 auf Konformitätsstufe AA ist der technische Maßstab, den das BFSG über die harmonisierte Norm EN 301 549 referenziert. Wer diese Kriterien erfüllt, erfüllt die gesetzlichen Anforderungen. Die gute Nachricht: Die meisten Fehler, die auf Websites auftreten, fallen in wenige wiederkehrende Kategorien – und lassen sich mit überschaubarem Aufwand beheben.

Ein großer Teil der Kriterien betrifft die Bedienung auf kleinen Bildschirmen. Was Responsive Design praktisch bedeutet und worauf dabei zu achten ist, deckt sich in weiten Teilen mit dem, was WCAG unter Bedienbarkeit versteht.

Worauf achten bei WCAG 2.1 AA:

• Kontraste: Text-Hintergrund-Verhältnis mindestens 4,5:1 bei normalem Text, mindestens 3:1 bei großem Text. Ein hellgrauer Text auf weißem Grund fällt durch.
• Tastaturzugänglichkeit: Alle interaktiven Elemente – Buttons, Links, Menüs – sind per Tab-Taste erreichbar und bedienbar, ohne dass eine Maus nötig ist.
• Alternativtexte: Jedes informative Bild erhält einen beschreibenden Alt-Text; rein dekorative Bilder werden mit leerem alt="" gekennzeichnet.
• Formulare: Eingabefelder sind mit sichtbaren Labels verknüpft; Fehlermeldungen benennen das Problem und zeigen den Lösungsweg.
• Responsive Design: Inhalte sind bei 200 % Zoom ohne horizontales Scrollen nutzbar – das hilft sehbehinderten Nutzern ebenso wie Smartphone-Besuchern.

Gut zu wissen: Laut WebAIM Million Report entfallen 96 % aller automatisch erkennbaren Fehler auf nur sechs Kategorien – geringer Kontrast, fehlende Alt-Texte, fehlende Labels, leere Links, fehlende Dokumentsprache und leere Buttons. Wer diese sechs Punkte behebt, beseitigt den Großteil der Barrieren.

Barrierefreiheit-Checkliste – die wichtigsten Maßnahmen für eine barrierefreie Webseite

Eine barrierefreie Webseite entsteht nicht durch ein einzelnes Plugin, sondern durch die Summe vieler kleiner Maßnahmen in Design, Struktur und Inhalt. Die folgende Checkliste deckt die Kernbereiche ab, die laut WebAIM-Analyse die meisten Fehler verursachen. Sie können jeden Punkt einzeln abarbeiten – keiner erfordert Programmierkenntnisse.

Barrierefreiheit-Checkliste:

• Farbkontraste prüfen: Werkzeuge wie den WAVE-Checker oder den Contrast Checker nutzen, um Kontrastverhältnisse zu messen. Ein Klick genügt, um zu sehen, ob Ihre Farbkombination besteht.
• Überschriftenhierarchie einhalten: H1 bis H6 logisch verschachteln, keine Ebenen überspringen. Eine Seite beginnt mit genau einer H1, darunter folgen H2, dann H3.
• Alt-Texte vergeben: Jedes informative Bild beschreiben; dekorative Bilder mit leerem alt="" kennzeichnen. Der Alt-Text beantwortet die Frage: Was zeigt dieses Bild?
• Tastaturnavigation testen: Die gesamte Seite nur mit Tab, Enter und Escape bedienen. Bleibt der Fokus irgendwo hängen, liegt ein Fehler vor.
• Sprache im HTML-Dokument angeben: Das lang-Attribut im html-Tag setzen (z. B. lang="de"), damit Screenreader die richtige Aussprache wählen.

Barrierefreie Webseite erstellen – drei Wege je nach Erfahrungsstand

Der Weg zur barrierefreien Website hängt vom technischen Vorwissen ab. Für Einsteiger ohne Programmierkenntnisse eignen sich Managed-WordPress-Lösungen mit barrierefreien Themes; für Fortgeschrittene bieten CMS-Systeme mit Ein-Klick-Installation die nötige Flexibilität. Und wer maximale Kontrolle braucht, lässt individuell entwickeln oder arbeitet mit einer Agentur.

Barrierefreiheit beginnt nicht beim Code, sondern bei der Gliederung. Welche fünf Seiten praktisch jede Website braucht und wie sich daraus eine klare Struktur ergibt, ist die Grundlage, auf der Screenreader und Tastaturnavigation überhaupt funktionieren.

Wer noch keine Website hat, stellt sich zuerst die Frage, wie das Ganze technisch überhaupt funktionieren soll. Diese Sorge nimmt ein Homepage-Baukasten, der Schritt für Schritt und ohne eine einzige Zeile Code zur eigenen Website führt – gerade für Selbstständige und kleine Unternehmen, die sich bislang nicht an das Thema herangetraut haben. So lässt sich das barrierefreie Grundgerüst von Anfang an mitdenken, statt es später mühsam nachzurüsten.

Barrierefreiheit von Anfang an mitplanen: Wer beim Erstellen einer Website direkt auf ein barrierefreies Theme, korrekte Überschriftenstruktur und ausreichende Kontraste achtet, spart sich spätere Nachrüstung. Managed-WordPress-Hosting, Homepage-Baukästen oder individuell entwickelte Lösungen bieten jeweils eigene Zugänge – entscheidend ist, dass die WCAG-2.1-AA-Kriterien von Beginn an als Maßstab dienen.

Worauf bei der Theme- und Plugin-Wahl achten?

Barrierefreie Themes erkennen Sie an der Kennzeichnung „Accessibility Ready" im WordPress-Theme-Verzeichnis. Plugins wie „WP Accessibility" ergänzen fehlende Skip-Links und ARIA-Attribute – also unsichtbare Hinweise im Code, die Screenreadern die Seitenstruktur erklären. Entscheidend bleibt, dass das Grundgerüst (Überschriften, Formulare, Navigation) korrekt aufgebaut ist. Kein Plugin kann ein schlecht strukturiertes Theme vollständig reparieren.

Worauf achten bei der Theme-Wahl:

• „Accessibility Ready"-Tag: Nur Themes mit dieser Kennzeichnung erfüllen die WordPress-Barrierefreiheitsrichtlinien. Ohne dieses Tag fehlen grundlegende Strukturen.
• Kontrastverhältnisse im Standard-Design: Farben des Themes vor der Anpassung prüfen – ein schönes Design mit zu geringem Kontrast ist nicht barrierefrei.
• Tastaturnavigation im Menü: Mobile Menüs müssen auch per Tastatur auf- und zuklappbar sein. Testen Sie das vor der Entscheidung.

Barrierefreiheit und SEO – warum beides zusammengehört

Barrierefreiheit und Suchmaschinenoptimierung teilen sich zentrale technische Grundlagen. Saubere Überschriftenstruktur, beschreibende Alt-Texte, schnelle Ladezeiten und semantisches HTML verbessern sowohl die Zugänglichkeit als auch das Google-Ranking. Wer eine barrierefreie Website baut, investiert gleichzeitig in bessere Sichtbarkeit – ohne zusätzlichen Aufwand.

Verständliche Sprache ist kein Nebenschauplatz der Barrierefreiheit, sondern ihr Kern. Wie sich Texte aufbauen lassen, die Besucher führen statt zu überfordern, zahlt damit doppelt ein – auf Zugänglichkeit und auf Ranking.

Ein Beispiel: Alt-Texte beschreiben Bilder für Screenreader-Nutzer. Gleichzeitig nutzt Google genau diese Texte, um Bildinhalte zu indexieren und in der Bildersuche auszuspielen. Semantische Überschriften helfen Screenreadern bei der Navigation – und signalisieren Suchmaschinen die inhaltliche Struktur einer Seite. Responsive Design ermöglicht sehbehinderten Nutzern den Zoom auf 200 % ohne Informationsverlust und erfüllt gleichzeitig Googles Mobile-First-Indexierung.

Worauf achten bei Barrierefreiheit und SEO:

• Alt-Texte doppelt nutzen: Beschreibend für Screenreader formulieren und dabei relevante Suchbegriffe natürlich einbinden.
• Überschriften als Gliederung: Eine logische H1-H2-H3-Struktur hilft Screenreadern und Crawlern gleichermaßen bei der Orientierung.
• Ladezeit optimieren: Komprimierte Bilder und sauberer Code beschleunigen die Seite – das verbessert Core Web Vitals und reduziert Barrieren für Nutzer mit langsamer Verbindung.

Kosten und Aufwand – was Barrierefreiheit für kleine Unternehmen bedeutet

Die Kosten für eine barrierefreie Website hängen vom Ausgangszustand ab. Wer von Anfang an ein barrierefreies Theme wählt und grundlegende Regeln beachtet, erzeugt kaum Mehrkosten. Nachträgliche Anpassungen bestehender Websites sind aufwendiger, lassen sich aber schrittweise umsetzen – Sie müssen nicht alles an einem Tag erledigen.

Hinweis: Die Kostenangaben sind typische Marktpreise auf Basis aktueller Agentur- und Dienstleisterangebote und dienen der Orientierung.

Vorteile frühzeitiger Barrierefreiheit:

• Geringere Gesamtkosten: Barrierefreiheit im Neubau kostet einen Bruchteil der Nachrüstung. Wer erst nach dem Launch umbauen muss, zahlt für Design, Entwicklung und erneutes Testing.
• Größere Zielgruppe: Rund 7,8 Millionen schwerbehinderte Menschen leben in Deutschland – hinzu kommen temporäre Einschränkungen (gebrochener Arm, grelles Sonnenlicht) und ältere Nutzer.
• Rechtssicherheit: Wer die WCAG-2.1-AA-Kriterien erfüllt, ist vor Bußgeldern und Abmahnrisiken geschützt.
• Bessere Nutzererfahrung: Klare Struktur, gute Kontraste und logische Navigation kommen allen Besuchern zugute – nicht nur Menschen mit Behinderung.

Trends – wie sich digitale Barrierefreiheit weiterentwickelt

Die Anforderungen an barrierefreie Websites werden in den kommenden Jahren steigen. Die WCAG 3.0 (Arbeitstitel „W3C Accessibility Guidelines") befindet sich in Entwicklung und wird das Bewertungssystem grundlegend verändern. Gleichzeitig verschärft die EU die Durchsetzung des European Accessibility Act. Wer heute die WCAG 2.1 AA umsetzt, baut auf einem soliden Fundament – und muss bei künftigen Änderungen nur nachjustieren statt von vorn beginnen.

• WCAG 3.0: Führt ein neues Scoring-Modell ein, das Bronze-, Silber- und Gold-Konformität unterscheidet – statt der bisherigen A/AA/AAA-Stufen. Die Bewertung wird granularer und praxisnäher.
• KI-gestützte Prüftools: Automatisierte Tests decken aktuell nur einen Teil der Barrieren auf; KI-basierte Lösungen verbessern die Erkennungsrate, ersetzen aber keine manuelle Prüfung.
• Overlay-Widgets unter Kritik: Sogenannte Accessibility-Overlays – JavaScript-Widgets, die Barrierefreiheit per Klick versprechen – erfüllen die WCAG-Anforderungen nicht zuverlässig und ersetzen keine strukturelle Umsetzung.
• Marktüberwachung wird aktiver: Die zuständigen Stellen nehmen seit Inkrafttreten des BFSG Beschwerden entgegen und prüfen Websites stichprobenartig.

Barrierefreiheit umsetzen – der nächste Schritt für Gründer und Selbstständige

Digitale Barrierefreiheit ist kein optionales Extra, sondern gesetzliche Anforderung und Qualitätsmerkmal zugleich. Wer heute eine Website erstellt, sollte von Beginn an ein barrierefreies Theme wählen, die WCAG-2.1-AA-Kriterien als Leitplanke nutzen und die eigene Seite regelmäßig mit kostenlosen Tools wie WAVE oder Lighthouse prüfen. Der Aufwand ist bei einem Neubau gering – und das Ergebnis eine Website, die mehr Menschen erreicht, besser bei Google rankt und rechtlich auf sicherem Boden steht. Starten Sie mit der Checkliste aus diesem Artikel, arbeiten Sie die Punkte nacheinander ab, und prüfen Sie das Ergebnis per Tastaturnavigation. Mehr braucht es fürs Erste nicht.

Quellen:

• Bundesfachstelle Barrierefreiheit (2025): Barrierefreiheitsstärkungsgesetz (BFSG). URL: www.bundesfachstelle-barrierefreiheit.de/DE/Barrierefreiheitsstaerkungsgesetz (Zugriff am 19.08.2026).
• WebAIM / Utah State University (2026): The WebAIM Million – The 2026 report on the accessibility of the top 1,000,000 home pages. URL: webaim.org/projects/million/ (Zugriff am 19.08.2026).
• Statistisches Bundesamt (Destatis) (2026): 7,8 Millionen schwerbehinderte Menschen leben in Deutschland. URL: www.destatis.de/DE/Presse/Pressemitteilungen/2026/07/PD26_246_227.html (Zugriff am 19.08.2026).
• Grant Thornton Germany (2025): Barrierefreiheit wird Pflicht: Was Unternehmen bis Juni 2025 umsetzen müssen. URL: www.grantthornton.de/themen/2025/barrierefreiheit-wird-pflicht-was-unternehmen-bis-juni-2025-umsetzen-mussen/ (Zugriff am 19.08.2026).
• Aktion Mensch e. V. (2025): Barrierefreie Website 2025: Pflichten und Fristen. URL: www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreie-website/gesetzliche-pflichten (Zugriff am 19.08.2026).
• Aktion Mensch / Google / Stiftung Pfennigparade (2024): Test zur Barrierefreiheit deutscher Online-Shops – Zweiter Testbericht. URL: www.aktion-mensch.de/inklusion/studien/test-barrierefreie-webshops (Zugriff am 19.08.2026).
• IHK München und Oberbayern (2025): Barrierefreiheitsstärkungsgesetz. URL: www.ihk-muenchen.de/ratgeber/recht/werbung-fairer-wettbewerb/barrierefreiheitsstaerkungsgesetz/ (Zugriff am 19.08.2026).
• Bundesverwaltung / W3C (o. J.): Web Content Accessibility Guidelines 2.1 (WCAG 2.1). URL: www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/gesetze-und-richtlinien/wcag/wcag-artikel.html (Zugriff am 19.08.2026).