Journal Typografisches Sternchen als Worttrenner BFSG-Checkliste 2025: Ist deine Website bereit für digitale Barrierefreiheit?

Juni 2025

BFSG-Checkliste 2025: Ist deine Website bereit für digitale Barrierefreiheit?

Barrierefreiheitsstärkungsgesetz Webdesign

Lesezeit: 4 min

Mit über 15 Jahren Erfahrungen berichten wir über Themen rund um Branding, Webdesign und Online-Marketing.

BFSG-Checkliste 2025: Ist deine Website bereit für digitale Barrierefreiheit?

Wer ist vom BFSG betroffen?

Das BFSG gilt grundsätzlich für alle Unternehmen und Selbstständige, die digitale Produkte oder Dienstleistungen für Verbraucherinnen und Verbraucher anbieten. Konkret bedeutet das: Betreiber von Onlineshops, Banken, Versicherungen, Transportdienstleister, medizinische Praxen, Bildungseinrichtungen und sogar kleinere Unternehmen, sofern sie Online-Interaktionen anbieten, sind betroffen.Wichtig: Kleinstunternehmen mit weniger als zehn Beschäftigten und weniger als 2 Mio. Euro Jahresumsatz sind von einigen Regelungen ausgenommen, allerdings nur teilweise.

  • Online-Handel und elektronische Geschäftsabwicklung
  • Webseiten
  • Apps
  • Digitale Medien wie eBooks, PDFs und Online-Magazine

Eine erste Einschätzung, ob du vom BFSG betroffen bist, erhältst du mit unserem kostenfreien QuickCheck – oder lade dir unser Whitepaper zum Thema „Barrierefreie Webseiten“ herunter.

Gesetzliche Grundlagen: WCAG und EN 301 549

Die Barrierefreiheitsanforderungen basieren auf international anerkannten Standards, insbesondere auf den Web Content Accessibility Guidelines (WCAG). Konkret fordert das BFSG die Einhaltung der WCAG 2.1 auf den Konformitätsstufen A und AA. Diese Richtlinien stellen sicher, dass digitale Inhalte wahrnehmbar, bedienbar, verständlich und robust sind.

Zusätzlich verweist das BFSG auf die europäische Norm EN 301 549. Diese Norm erweitert die WCAG und präzisiert Anforderungen für Produkte und Dienstleistungen der Informations- und Kommunikationstechnologie (IKT). Unternehmen, die diese Standards einhalten, profitieren von einer rechtlichen Konformitätsvermutung und erhöhen gleichzeitig die Nutzerfreundlichkeit ihres Angebots erheblich.

Checkliste: Die wichtigsten Anforderungen an barrierefreie Websites

Wahrnehmbarkeit – Inhalte für jeden sichtbar machen

  • Alternativtexte für Bilder und Grafiken: Jedes Bild, das wichtige Informationen enthält, benötigt einen aussagekräftigen Alternativtext (Alt-Text). Screenreader nutzen diese Texte, um Inhalte vorzulesen. Beispiel: Statt „logo.png“ besser „Logo der Zahnarztpraxis Müller“. Checke deine Bilder regelmäßig mit Accessibility-Tools, um uninformative Alt-Texte wie „Bild1.jpg“ zu vermeiden.
  • Untertitel und Transkripte für Audio und Video: Videos mit Ton müssen zwingend untertitelt werden. Podcasts brauchen ein Texttranskript, damit gehörlose Personen ebenfalls Zugang zum Inhalt haben. Tipp: YouTube bietet automatische Untertitel – bearbeite diese nach, um Fehler zu korrigieren. Für wichtige Videos empfehlen wir zusätzlich Audiodeskriptionen, auch wenn sie nicht verpflichtend sind.
  • Beschreibungen für Icons und Buttons: Icons wie die Lupe bei der Suche sollten immer textlich beschrieben sein. Nutze dafür aria-label oder versteckten Screenreader-Text. Ein häufiger Fehler sind Icons ohne zugängliche Beschriftung. Prüfe dies unbedingt mit Tools wie WAVE.
  • Farbkontraste prüfen: Texte und wichtige Elemente müssen klar vom Hintergrund unterscheidbar sein. Das vorgeschriebene Kontrastverhältnis beträgt mindestens 4,5:1 (bei großen Texten mindestens 3:1). Benutze Tools wie „Colour Contrast Analyser“, um deine Farbkombinationen zu testen und gegebenenfalls anzupassen.
  • Skalierbarkeit und responsive Gestaltung: Stelle sicher, dass deine Website-Inhalte bei 200% Zoom immer noch problemlos nutzbar sind. Verwende relative Maßeinheiten (em, rem) im CSS, damit die Skalierung funktioniert.
  • Keine epilepsieauslösenden Effekte: Blinkende oder flackernde Inhalte mit mehr als drei Blitzen pro Sekunde sind ein No-Go. Verzichte darauf oder kennzeichne sie deutlich.

Bedienbarkeit – Navigation und Nutzung für alle ermöglichen

  • Tastaturzugänglichkeit: Deine Website muss vollständig mit der Tastatur navigierbar sein. Prüfe regelmäßig, ob du alle Inhalte und Funktionen per Tab- und Enter-Tasten erreichen kannst und ob der Fokus stets sichtbar bleibt.
  • Fokusreihenfolge und Skip-Links: Die Reihenfolge der Tastaturnavigation muss logisch sein. Integriere zudem Skip-Links, die Tastaturnutzern das direkte Springen zum Hauptinhalt ermöglichen.
  • Keine Keyboard-Traps: Achte darauf, dass Nutzer niemals im Tastaturfokus gefangen sind. Modale Fenster sollten mit der Escape-Taste schließbar sein und den Fokus korrekt zurücksetzen.
  • Zeitsteuerungen und Updates kontrollierbar machen: Zeitgesteuerte Inhalte wie Karussells oder Logout-Timer müssen pausierbar sein oder genug Zeit bieten. Nutzer müssen zudem über eventuelle Abläufe informiert werden.

Verständlichkeit – Inhalte klar und logisch aufbauen

  • Klare Struktur mit Überschriften: Nutze die Überschrift-Hierarchie (H1, H2, H3), um Inhalte klar zu gliedern. Tabellen und Listen gehören korrekt mit HTML-Tags ausgezeichnet und nicht nur optisch eingerückt.
  • Einfache Sprache verwenden: Formuliere Inhalte einfach und verständlich. Komplexe Themen kannst du zusätzlich in Leichter Sprache anbieten, um noch mehr Nutzer zu erreichen.
  • Barrierefreie Formulare: Jedes Formularfeld braucht ein klares Label, verständliche Hilfetexte und gut sichtbare Fehlermeldungen. Vermeide Platzhaltertexte als alleinige Beschriftungen und setze stets auf kontextbezogene Fehlermeldungen.
  • Konsistenz und Vorhersehbarkeit: Bleib einheitlich in Navigation und Begrifflichkeiten. Verzichte auf überraschende Kontextwechsel (z.B. unerwartetes Öffnen neuer Tabs ohne Hinweis).

Robustheit – Technische Grundlage sicherstellen

  • Valides HTML und semantische Struktur: Halte dich strikt an die HTML-Standards und verwende semantische Tags (z.B. <header>, <nav>, <main>). So stellst du sicher, dass assistive Technologien Inhalte richtig interpretieren.
  • ARIA-Attribute gezielt einsetzen: Nutze ARIA-Attribute nur, wenn HTML keine nativen Lösungen bietet. Teste deren Effektivität regelmäßig mit Screenreadern wie NVDA oder VoiceOver.
  • Kompatibilität mit Assistenztechnologien testen: Teste deine Website regelmäßig mit Screenreadern, Spracheingaben und in verschiedenen Browsern und Geräten. Achte darauf, dass Inhalte auch ohne CSS und JavaScript noch zugänglich bleiben.
  • Responsive Design und Mobiloptimierung: Teste gründlich, ob deine Website auch mobil barrierefrei funktioniert. Achte besonders auf Touch-Gesten und Navigation per Screenreader.
  • Performance verbessern: Optimierte Ladezeiten und stabile Inhalte sind essenziell für eine barrierefreie Nutzung. Vermeide Content-Jumps und Abstürze, die Nutzer frustrieren könnten.

Barrierefreiheitserklärung – das gehört unbedingt auf deine Website

Jede Website, die dem BFSG unterliegt, benötigt zwingend eine eigene Seite mit einer sogenannten Barrierefreiheitserklärung. Diese informiert transparent darüber, inwieweit deine Webseite aktuell barrierefrei gestaltet ist und welche Bereiche möglicherweise noch Barrieren enthalten. Zudem sollte die Erklärung konkrete Hinweise enthalten, wie Nutzer bestehende Mängel melden können, und einen direkten Kontakt zur verantwortlichen Person bieten. Du bist verpflichtet, diese Erklärung leicht auffindbar – idealerweise im Footer – zu verlinken. Wichtig ist, dass du regelmäßig prüfst, ob die Angaben aktuell und korrekt sind, da falsche oder fehlende Informationen rechtliche Konsequenzen nach sich ziehen können. Nutze hierfür am besten ein standardisiertes Muster, beispielsweise das von der Bundesfachstelle Barrierefreiheit bereitgestellte, um rechtlich auf der sicheren Seite zu sein und deine Nutzer klar und verständlich zu informieren.

Häufige Fehlerquellen gezielt vermeiden

Obwohl viele Website-Betreiber bemüht sind, ihre Inhalte barrierefrei zu gestalten, schleichen sich immer wieder typische Fehler ein. Oft übersehen werden beispielsweise nicht aussagekräftige Linktexte wie „hier klicken“, die vor allem für Screenreader-Nutzer verwirrend sind. Besser sind konkrete Bezeichnungen wie „Zum Kontaktformular“ oder „Jetzt Termin vereinbaren“. Ähnlich verhält es sich bei Captchas: Klassische Bild-Rätsel sind für Nutzer mit Sehbehinderung nahezu unlösbar. Setze deshalb auf barrierefreie Alternativen wie einfache Rechenaufgaben oder Honeypot-Felder.

Ein weiterer häufiger Stolperstein sind PDFs. Viele denken, ein PDF sei automatisch barrierefrei, doch das stimmt nicht. Beim Erstellen neuer PDF-Dokumente solltest du unbedingt den PDF/UA-Standard nutzen, um getaggte Inhalte, Alternativtexte für Bilder und eine korrekte Lesereihenfolge sicherzustellen. Zudem wird oft unterschätzt, wie wichtig es ist, Informationen nicht nur über Farbe zu vermitteln. Wenn du beispielsweise auf fehlende Eingaben in Formularen hinweist, nutze zusätzlich Symbole oder erklärende Texte, denn farbenblinde Menschen könnten sonst Hinweise leicht übersehen. Achte bei neuen Inhalten grundsätzlich auf klare Strukturen und verständliche Formulierungen, um von Anfang an Barrieren zu vermeiden.

  • Aussagekräftige Linktexte statt „hier klicken“
  • PDFs barrierefrei anbieten (PDF/UA Standard)
  • Captchas durch barrierefreie Alternativen ersetzen
  • Fokus immer sichtbar machen
  • Autoplay für Audio/Video abschalten oder kontrollierbar machen
  • Informationen nicht nur durch Farbe darstellen
  • Inhalte übersichtlich strukturieren

Testing – so prüfst du deine Barrierefreiheit

Barrierefreiheit ist kein Zustand, den man einmal erreicht und dann abhakt – sie muss regelmäßig geprüft, getestet und angepasst werden. Automatisierte Tools wie WAVE, axe DevTools oder Lighthouse (integriert in Google Chrome) bieten einen schnellen Überblick über gängige Fehler wie fehlende Alt-Texte, mangelhafte Kontraste oder fehlerhafte ARIA-Attribute. Diese Tools sind ein super Einstieg und helfen dir, technische Probleme schnell zu identifizieren – sie decken aber meist nur etwa 30–50 % der tatsächlichen Barrieren ab. Deshalb gilt: Verlass dich nicht allein auf Automatisierung.

Mindestens genauso wichtig sind manuelle Tests. Navigiere deine Seite ausschließlich mit der Tastatur und einem Screenreader (z. B. NVDA für Windows oder VoiceOver auf Apple-Geräten). Teste verschiedene Endgeräte und Auflösungen, simuliere Farbenblindheit oder lasse dir deine Seite im Graustufen-Modus anzeigen. Das macht erfahrbar, wie sich deine Seite für Menschen mit Einschränkungen wirklich anfühlt.

Besonders wertvoll ist auch das Feedback von echten Nutzer*innen mit Behinderungen. Es gibt Communitys, Agenturen und Initiativen, die User-Tests mit Betroffenen anbieten. Ihre Rückmeldungen zeigen oft ganz neue Perspektiven auf und helfen dir, praxisrelevante Barrieren zu identifizieren, die technische Tools nie finden würden.

Wenn du es ganz offiziell angehen möchtest, kannst du die Barrierefreiheit deiner Website auch von zertifizierten Prüfstellen kontrollieren lassen – etwa über die Bundesfachstelle Barrierefreiheit, über TÜV-Zertifizierungen oder durch spezialisierte Accessibility-Audits. Eine solche Prüfung kann dir nicht nur ein Qualitätssiegel bringen, sondern auch rechtlich als Nachweis dienen, dass du deiner Sorgfaltspflicht nachkommst.

Unser Tipp: Führe regelmäßig Tests durch – gerade nach größeren Updates – und dokumentiere sie. Eine lückenlose Dokumentation hilft dir im Zweifelsfall bei Kontrollen durch Behörden und zeigt, dass du Barrierefreiheit ernst nimmst.

Mindestanforderungen vs. Best Practices

Aktuell schreibt das BFSG die Einhaltung der WCAG 2.1 auf Level AA als gesetzliches Minimum vor. Doch schon jetzt ist absehbar, dass künftig die WCAG 2.2 zur neuen verbindlichen Grundlage wird – viele öffentliche Stellen und Vorreiter setzen sie bereits um. Deshalb empfehlen wir: Wer heute schon auf Nummer sicher gehen will, richtet sich an den aktualisierten Standard 2.2. Er bringt zusätzliche Kriterien mit, die insbesondere Menschen mit motorischen oder kognitiven Einschränkungen zugutekommen. Darüber hinaus lohnt es sich, freiwillig weitere Maßnahmen umzusetzen – etwa eine Version in Leichter Sprache, eine Gebärdensprachübersetzung oder ein Dark Mode für bessere Lesbarkeit. Diese sogenannten Best Practices sind zwar (noch) keine Pflicht, verbessern aber die Nutzerfreundlichkeit enorm.

Fazit und nächste Schritte

Das BFSG fordert klare Maßnahmen – aber diese sind machbar! Prüfe jetzt deine Website mit unserer Checkliste und stell sicher, dass du optimal vorbereitet bist. Noch Fragen? Lass dich jetzt von unseren Experten beraten, erfahre mehr über barrierefreie Webseiten oder lade unser kostenloses Whitepaper herunter. Nutze unseren kostenlosen Quick-Check, um sicherzugehen, ob deine Website vom BFSG betroffen ist. Mach deine Website fit für die digitale Zukunft!

vanAchibald
Autor
vanAchibald
Design, Programmierung
und Marketing
Schau dir unsere Leistungen an.