Zurück zu Design
Design & Nutzererfahrung

Barrierefreie Webseite: BFSG, Checkliste & Tools

Wer ist vom BFSG betroffen? So prüfen Sie Ihre Webseite mit Lighthouse, WAVE und Checkliste – inklusive Erklärung zur Barrierefreiheit.

Aktualisiert am 9 Min. Lesezeit

Eine barrierefreie Webseite können möglichst viele Menschen nutzen – unabhängig davon, wie gut sie sehen, hören oder eine Maus bedienen können, und auch mit Hilfsmitteln wie Screenreadern. Dieser Ratgeber erklärt Inhabern kleiner Betriebe, was Barrierefreiheit konkret bedeutet, für wen das Barrierefreiheitsstärkungsgesetz (BFSG) gilt und wie Sie Ihre Seite mit Tools und einer Checkliste selbst prüfen. Außerdem erfahren Sie, was in eine Erklärung zur Barrierefreiheit gehört und wann sich Leichte Sprache lohnt.

Das Wichtigste in Kürze

  • Barrierefrei heißt unter anderem: ausreichender Kontrast, klare Struktur, Bedienbarkeit per Tastatur, Alternativtexte für Bilder und verständliche Formulare.
  • Das BFSG gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen für Verbraucher, etwa Online-Shops. Reine Informationsseiten sind in der Regel nicht direkt betroffen.
  • Lighthouse, WAVE und axe finden viele Fehler automatisch, ersetzen aber keinen Test mit Tastatur und Screenreader.
  • Eine Erklärung zur Barrierefreiheit ist für manche Pflicht und für alle anderen eine sinnvolle Ergänzung.
  • Leichte Sprache lohnt sich vor allem bei Behörden, sozialen Trägern und komplexen Themen; verständliche Alltagssprache ist immer sinnvoll.

Was bedeutet Barrierefreiheit im Web?

Barrierefreiheit (englisch: Accessibility) bedeutet, dass Menschen Ihre Webseite unabhängig von Einschränkungen beim Sehen, Hören oder Bedienen nutzen können. Konkret heißt das:

  • Texte: kontrastreiche Darstellung, eine sinnvolle Überschriftenstruktur und keine wichtigen Informationen, die nur in Bildern stehen.
  • Navigation: vollständig per Tastatur bedienbar, mit gut sichtbarer Markierung des aktuell ausgewählten Elements (Fokus) und einer logischen Reihenfolge.
  • Medien: Alternativtexte für Bilder, Untertitel oder Transkripte für Videos.
  • Formulare: beschriftete Felder, verständliche Fehlermeldungen und keine zu knappen Zeitlimits.

Messbare Kriterien dafür liefern die Web Content Accessibility Guidelines (WCAG), etwa für Kontrastverhältnisse oder die Bedienbarkeit ohne Maus. Als gängiger Maßstab gilt die Stufe AA.

Warum sich Barrierefreiheit für jedes Unternehmen lohnt

  • Besser für alle: Klare Struktur, gut lesbare Schrift und verständliche Formulare helfen jedem Besucher, nicht nur Menschen mit Einschränkungen.
  • Gut für Suchmaschinen: Suchmaschinen werten ähnliche Signale aus wie Screenreader, etwa Überschriften, Alternativtexte und sauberes, semantisches HTML. Barrierefreiheit und technisches SEO gehen deshalb oft Hand in Hand – mehr dazu im Ratgeber Technisches SEO: Meta-Daten, Struktur und strukturierte Daten.
  • Größere Zielgruppe: Sie erreichen Menschen, die an schlecht zugänglichen Seiten scheitern, und zeigen Verantwortung.
  • Professioneller Auftritt: Eine gut bedienbare Seite wirkt durchdacht und seriös.

Barrierefreiheitsstärkungsgesetz (BFSG): Wer ist betroffen?

Das Barrierefreiheitsstärkungsgesetz setzt EU-Vorgaben zur Barrierefreiheit, den sogenannten European Accessibility Act, in deutsches Recht um. Seine Anforderungen gelten seit dem 28. Juni 2025. Das Gesetz betrifft nicht jede Firmenwebseite, sondern Unternehmen, die bestimmte Produkte und Dienstleistungen für Verbraucher anbieten. Für Webseiten ist vor allem der elektronische Geschäftsverkehr relevant – also Angebote, über die Verbraucher online einen Vertrag abschließen können.

Als grobe Orientierung:

  • Reine Informationswebseite: Eine klassische Firmenwebseite, die Ihre Leistungen vorstellt und Kontaktmöglichkeiten bietet, fällt nach verbreiteter Auffassung in der Regel nicht direkt unter das BFSG.
  • Online-Shop oder Vertragsabschluss im Netz: Können Verbraucher über Ihre Webseite bestellen, buchen oder auf andere Weise Verträge abschließen, sollten Sie genau prüfen lassen, ob die Pflichten für Sie gelten.
  • Kleinstunternehmen: Für Kleinstunternehmen, die Dienstleistungen anbieten, sieht das Gesetz eine Ausnahme vor. Gemeint sind Betriebe mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme.
  • Öffentliche Stellen: Für Behörden und andere öffentliche Einrichtungen gelten eigene Vorschriften zur digitalen Barrierefreiheit.

Welche Anforderungen im Einzelnen gelten, ergibt sich aus dem Gesetz, einer zugehörigen Verordnung und technischen Normen. In der Praxis orientiert man sich an den WCAG 2.1 auf Stufe AA: ausreichender Kontrast, skalierbare Schrift, Bedienbarkeit per Tastatur, eine sinnvolle Struktur für Screenreader sowie verständliche Formulare und Fehlermeldungen. Auch wer öffentliche Aufträge anstrebt, sollte das Thema im Blick haben, denn Barrierefreiheit kann in Ausschreibungen eine Rolle spielen. Ob Ihr Angebot unter das BFSG fällt, sollte im Einzelfall rechtlich geklärt werden – unabhängig davon verbessert Barrierefreiheit die Nutzbarkeit für alle Besucher.

Barrierefreiheit prüfen: Diese Tools helfen

Ob Ihre Seite zugänglich ist, lässt sich mit Tools und einer strukturierten Checkliste prüfen. So finden Sie Schwachstellen und können gezielt nachbessern.

Google Lighthouse

Lighthouse ist in die Entwicklertools des Chrome-Browsers eingebaut: Rechtsklick auf die Seite, „Untersuchen“ wählen und den Reiter „Lighthouse“ öffnen. Das Tool prüft automatisch viele WCAG-relevante Punkte wie Kontraste, Alternativtexte, die Überschriftenstruktur sowie die Namen von Links und Buttons. Der Accessibility-Score von 0 bis 100 und die Liste der gefundenen Probleme geben einen schnellen Überblick – ideal für regelmäßige Checks zusammen mit Performance und SEO. Wie Sie Lighthouse insgesamt für die Qualitätssicherung nutzen, zeigt der Ratgeber Qualitätssicherung: Webseite mit Lighthouse und Co. prüfen.

WAVE

WAVE (Web Accessibility Evaluation Tool) gibt es als Browser-Erweiterung und online unter wave.webaim.org. Es analysiert eine einzelne Seite und markiert Fehler, Warnungen und Verbesserungsmöglichkeiten direkt in der Seitenansicht. So sehen Sie genau, wo ein Problem sitzt – etwa welches Bild keinen Alternativtext hat. Die Ergebnisse sind auch für Nicht-Entwickler gut verständlich.

axe DevTools

Die Browser-Erweiterung axe DevTools, etwa für Chrome, fügt sich in die Entwicklertools ein und prüft die Seite gegen WCAG-Kriterien. Die Ergebnisse sind nach Schweregrad und Kategorie sortiert und enthalten oft konkrete Hinweise zum Code. Das Tool eignet sich vor allem für Entwickler, die Fehler direkt im Markup beheben wollen.

Manuell prüfen: Tastatur und Screenreader

Tools erfassen nicht alles. Ob Texte verständlich sind, ob die Reihenfolge beim Durchspringen sinnvoll ist und ob Formulare in der Praxis funktionieren, prüfen Sie am besten selbst:

  1. Legen Sie die Maus beiseite und bedienen Sie die Seite nur mit der Tastatur: Tab springt zum nächsten Element, Umschalt und Tab zurück, Enter löst Links und Buttons aus, Escape schließt Dialoge und Menüs.
  2. Achten Sie darauf, ob Sie jederzeit sehen, wo Sie sich gerade befinden, und ob Sie jedes Menü und jedes Formularfeld erreichen.
  3. Testen Sie die wichtigsten Seiten mit einem Screenreader, zum Beispiel NVDA unter Windows oder VoiceOver, das auf Mac und iPhone bereits eingebaut ist.

Checkliste: die wichtigsten Prüfpunkte

  1. Überschriften: Jede Seite hat eine H1, danach folgen H2, H3 und so weiter in logischer Reihenfolge, ohne Ebenen zu überspringen.
  2. Seitenbereiche: Kopfbereich, Navigation, Hauptinhalt und Fußbereich sind im Code als solche ausgezeichnet, etwa mit den HTML-Elementen header, nav, main und footer. Das erleichtert Screenreader-Nutzern die Orientierung.
  3. Listen: Aufzählungen sind technisch als Listen umgesetzt, nicht nur optisch.
  4. Alternativtexte: Alle aussagekräftigen Bilder haben einen beschreibenden Alternativtext, rein dekorative Bilder ein leeres Alt-Attribut, damit Screenreader sie überspringen.
  5. Videos: Es gibt Untertitel oder ein Transkript, und der Player lässt sich per Tastatur bedienen.
  6. Kontrast: Fließtext erreicht mindestens 4,5:1, größere Schrift mindestens 3:1 (WCAG-Stufe AA).
  7. Lesbarkeit: Schriftgröße und Zeilenabstand sind großzügig, und Informationen werden nicht allein über Farbe vermittelt.
  8. Tastatur: Alle Links, Buttons und Formularfelder sind per Tab-Taste erreichbar.
  9. Sichtbarer Fokus: Das aktuell ausgewählte Element ist deutlich markiert, etwa durch einen Rahmen. Diese Markierung darf nicht ersatzlos entfernt werden.
  10. Keine Tastaturfalle: Aus Dialogfenstern, Pop-ups und Menüs kommt man per Tastatur wieder heraus, etwa mit Escape oder Tab.
  11. Formularfelder: Jedes Feld hat eine sichtbare Beschriftung, die technisch mit dem Feld verknüpft ist.
  12. Fehlermeldungen: Sie sind verständlich formuliert, dem betroffenen Feld zugeordnet und werden auch von Screenreadern angesagt.
  13. Zeitlimits: Niemand wird durch zu kurze Zeitbegrenzungen beim Ausfüllen gestoppt.
  14. Linktexte: Links sind aussagekräftig beschriftet, nicht nur mit „Hier klicken“ oder „Mehr“ ohne Zusammenhang.
  15. Buttons und Links: Buttons lösen Aktionen aus, Links führen zu einer anderen Seite oder Ressource – beides ist semantisch korrekt eingesetzt.

Wie Sie Schrift, Farben und Kontraste gut lesbar gestalten, erklärt der Ratgeber Schrift, Farben und Lesbarkeit auf der Webseite.

Prüfung in den Ablauf einbauen

Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess:

  • Vor dem Start: Prüfen Sie mindestens die wichtigsten Seiten mit Lighthouse und WAVE und beheben Sie kritische Fehler wie fehlende Alternativtexte oder zu schwachen Kontrast. Die Launch-Checkliste für den Go-live hilft, dabei nichts zu vergessen.
  • Bei größeren Umbauten: Nach einem Redesign erneut prüfen und die Checkliste durchgehen.
  • Regelmäßig: Einmal im Jahr oder nach vielen neuen Inhalten einen vollständigen Check durchführen – auch mit Tastatur und Screenreader.

Erklärung zur Barrierefreiheit: Wann nötig, was gehört hinein?

Eine Erklärung zur Barrierefreiheit (englisch: Accessibility Statement) beschreibt, wie zugänglich Ihre Webseite ist und wie Nutzer Barrieren melden können. Öffentliche Stellen sind verpflichtet, eine solche Erklärung zu veröffentlichen. Unternehmen, die unter das BFSG fallen, müssen ebenfalls darüber informieren, wie ihr Angebot die Anforderungen an die Barrierefreiheit erfüllt – eine Erklärung auf der Webseite ist dafür ein naheliegender Weg. Für alle anderen ist sie freiwillig, kann aber Vertrauen und Transparenz schaffen.

Diese Angaben gehören hinein:

  • Ziel: Welcher Standard wird angestrebt, zum Beispiel WCAG 2.1 Stufe AA?
  • Stand: Ist die Webseite vollständig, teilweise oder nicht barrierefrei, und welche Einschränkungen sind bekannt?
  • Feedback: Wie können Nutzer Barrieren melden, etwa per E-Mail oder Formular, und wer ist Ansprechpartner?
  • Datum: Wann wurde die Erklärung zuletzt aktualisiert?

Wo die Erklärung verpflichtend ist, können weitere Angaben vorgeschrieben sein. Formulieren Sie kurz, verständlich und ehrlich – ohne leere Versprechen. Verlinkt wird die Erklärung üblicherweise im Footer, neben Impressum und Datenschutzerklärung, damit sie jeder findet, der danach sucht. Was dort sonst noch stehen muss, erklärt der Ratgeber Impressum und Datenschutz: Pflichtangaben für Webseiten.

Leichte Sprache: Wann lohnt sie sich?

Leichte Sprache nutzt kurze Sätze, einfache Wörter und eine klare Struktur. Sie hilft Menschen mit Lernschwierigkeiten, geringen Deutschkenntnissen oder kognitiven Einschränkungen. Typisch sind:

  • kurze Sätze mit nur einem Gedanken pro Satz
  • bekannte, konkrete Wörter; Fremdwörter werden vermieden oder erklärt
  • übersichtliche Absätze, Zwischenüberschriften und bei Bedarf unterstützende Bilder

Für Leichte Sprache gibt es Regelwerke, etwa vom Netzwerk Leichte Sprache, an denen Sie sich orientieren können.

Sinnvoll ist Leichte Sprache vor allem im öffentlichen Sektor und bei sozialen Trägern, wo sie oft gefordert oder erwünscht ist, bei komplexen Themen wie Gesundheit, Recht oder Behördenangelegenheiten sowie bei lokalen Angeboten, die gezielt Menschen mit Lese- oder Sprachbarrieren erreichen wollen – etwa Integrationsprojekte oder inklusive Angebote.

Für eine normale Firmenwebseite mit Leistungsbeschreibungen ist Leichte Sprache meist kein Muss, verständliche Alltagssprache dagegen immer. Echte Leichte Sprache erfordert Know-how und Zeit; schlecht umgesetzt wirkt sie bevormundend oder unnatürlich. Wenn Sie sie anbieten möchten, lassen Sie die Texte nach Regelwerk erstellen – oder wählen Sie bewusst „einfache Sprache“, die weniger streng ist, und kennzeichnen Sie das entsprechend.

Fazit

Barrierefreiheit macht Ihre Webseite für alle besser nutzbar und stärkt zugleich die technische Grundlage für Suchmaschinen. Ob das BFSG für Sie gilt, hängt vor allem davon ab, ob Verbraucher über Ihre Seite Verträge abschließen können und wie groß Ihr Betrieb ist – im Zweifel sollten Sie das im Einzelfall klären lassen. Unabhängig davon lohnt es sich, mit Lighthouse, WAVE und der Checkliste zu starten und Schritt für Schritt nachzubessern.

Dieser Beitrag ist ein allgemeiner Überblick und ersetzt keine Rechtsberatung.

Wie wirkt Ihre Webseite auf Kunden?

Schicken Sie mir Ihre Webadresse: Ich schaue mir Gestaltung, Lesbarkeit und Kontaktwege an und wir besprechen im kostenlosen Erstgespräch, was sich verbessern lässt.

Ihre Eingabe wird nicht auf dieser Webseite gespeichert – die Nachricht öffnet sich vorausgefüllt in WhatsApp bzw. Ihrem E-Mail-Programm.

Lieber direkt anrufen oder schreiben →