Checkliste auf Klemmbrett neben Kompassnadel, Teal und Navy Farbtöne, strukturierter Prüfprozess, lotse-cms.de

BFSG Checkliste: 15 Punkte, die deine Website erfüllen muss

15 konkrete Prüfpunkte, drei kostenlose Tools und klare Antworten auf die Frage: Was musst du als nächstes tun?

Dennis Schwenker-Sanders 8 Min. Lesezeit 33 Aufrufe

Seit Juni 2025 gelten neue Regeln. Hier ist die Checkliste, die dir zeigt, wo du stehst.

Das Barrierefreiheitsstärkungsgesetz ist in Kraft. Die Marktüberwachungsbehörde MLBF kontrolliert seit September 2025 aktiv. Erste Abmahnungen sind dokumentiert.

Statt langer Erklärungen bekommst du hier eine direkte Checkliste mit 15 Punkten, die du selbst durchgehen kannst. Gruppiert nach den vier WCAG-Grundprinzipien: wahrnehmbar, bedienbar, verständlich, robust.

Wen das BFSG konkret betrifft, welche Ausnahmen für Kleinstunternehmen gelten und was bei Verstößen droht, erfährst du im ausführlichen Ratgeber: Barrierefreiheitsstärkungsgesetz einfach erklärt.


Die 15-Punkte-BFSG-Checkliste

Gruppe 1: Wahrnehmbar

Alle Inhalte müssen so aufbereitet sein, dass Nutzer sie wahrnehmen können, auch ohne Sehen oder Hören.

Punkt 1: Alt-Texte für Bilder
Jedes inhaltstragende Bild auf deiner Website braucht einen beschreibenden Alt-Text. Screenreader lesen ihn vor. Öffne deine Website, klicke mit der rechten Maustaste auf ein Bild, wähle "Untersuchen" und suche nach dem alt-Attribut. Ist es leer oder fehlt es bei einem inhaltlichen Bild, ist das eine Barriere. Rein dekorative Bilder bekommen alt="", damit Screenreader sie überspringen.

Punkt 2: Ausreichende Farbkontraste
Text und Hintergrund müssen ein Kontrastverhältnis von mindestens 4,5:1 haben (normaler Text) beziehungsweise 3:1 (großer Text ab 18pt oder 14pt fett). Teste deine Farbkombinationen mit dem WebAIM Contrast Checker unter webaim.org/resources/contrastchecker. Hellgrauer Text auf weißem Hintergrund scheitert fast immer.

Punkt 3: Untertitel für Videos
Wenn du Videos mit gesprochenem Inhalt auf deiner Website einbindest, brauchen sie Untertitel. Das gilt auch für eingebettete YouTube-Videos, sofern du die Kontrolle über die Einbindung hast. Automatisch generierte Untertitel auf YouTube sind ein Anfang, aber keine vollständige Lösung für hörbeeinträchtigte Nutzer.

Punkt 4: Zoom bis 200 Prozent ohne Inhaltsverlust
Zoome deinen Browser auf 200 Prozent. Ist deine Website noch vollständig nutzbar? Überlappt Text? Verschwinden Inhalte hinter anderen Elementen? Wird die Navigation unbrauchbar? Ein Viewport-Meta-Tag mit user-scalable=no ist verboten, er verhindert das Zoomen.


Gruppe 2: Bedienbar

Jede Funktion muss ohne Maus bedienbar sein.

Punkt 5: Vollständige Tastatur-Navigation
Lege die Maus weg. Navigiere nur mit der Tabulatortaste durch deine Website. Erreichst du alle Links, Buttons, Formulare und interaktiven Elemente? Kannst du Menüs öffnen und schließen? Kannst du Formulare ausfüllen und absenden? Jeder Bereich muss erreichbar sein.

Punkt 6: Sichtbarer Fokus-Indikator
Wenn du mit der Tabulatortaste navigierst, siehst du, welches Element gerade aktiv ist? Der Fokus-Indikator muss klar sichtbar sein, üblicherweise ein Rahmen oder eine Umrandung um das aktive Element. Viele Themes entfernen diesen Indikator aus ästhetischen Gründen mit outline: none. Das ist eine ernsthafte Barriere für Tastatur-Nutzer.

Punkt 7: Skip-Link am Seitenanfang
Ein Skip-Link ermöglicht es Tastatur-Nutzern, direkt zum Hauptinhalt zu springen, ohne sich durch die gesamte Navigation zu tabben. Er muss beim ersten Tastendruck sichtbar werden. Prüfe ihn, indem du auf einer neuen Seite sofort die Tabulatortaste drückst. Erscheint ein "Zum Inhalt springen"-Link? Wenn nicht, fehlt er.

Punkt 8: Keine problematischen Zeitlimits
Wenn deine Website Zeitlimits hat, zum Beispiel bei Formularen oder Sitzungen, müssen Nutzer diese verlängern oder deaktivieren können. Automatisch wechselnde Slider oder Animationen, die sich nicht stoppen lassen, sind ebenfalls problematisch. Nutzer mit motorischen Einschränkungen brauchen mehr Zeit.


Gruppe 3: Verständlich

Inhalte und Funktionen müssen verständlich und vorhersehbar sein.

Punkt 9: Sprache im HTML deklariert
Prüfe den Quellcode deiner Website. Das öffnende <html>-Tag muss ein lang-Attribut haben, zum Beispiel <html lang="de">. Screenreader nutzen diese Information, um die richtige Aussprache zu wählen. Fehlt die Sprachdeklaration, kann eine deutsche Website auf Englisch vorgelesen werden.

Punkt 10: Konsistente Navigation
Navigation, Suchfunktion und wiederkehrende Elemente müssen auf jeder Seite an derselben Stelle erscheinen und dieselben Namen haben. Wenn dein Hauptmenü auf einer Seite oben links und auf einer anderen Seite oben rechts ist, ist das eine Barriere. Nutzer mit kognitiven Einschränkungen sind auf Vorhersehbarkeit angewiesen.

Punkt 11: Aussagekräftige Fehlermeldungen
Wenn ein Nutzer ein Formular falsch ausfüllt, muss die Fehlermeldung klar sagen, was falsch ist und wie es korrigiert werden kann. "Fehler" ist keine ausreichende Meldung. "Bitte gib eine gültige E-Mail-Adresse ein" schon. Prüfe dein Kontaktformular mit einer ungültigen E-Mail-Adresse.

Punkt 12: Formular-Labels korrekt verknüpft
Jedes Eingabefeld braucht ein sichtbares Label, das programmatisch verknüpft ist. Platzhaltertexte im Feld ("Dein Name") sind kein Ersatz, sie verschwinden beim Tippen. Prüfe im Quellcode, ob <label for="feldname"> korrekt auf das zugehörige <input id="feldname"> verweist. Fehlt diese Verknüpfung, ist das Feld für Screenreader-Nutzer nicht identifizierbar.


Gruppe 4: Robust

Der technische Code muss sauber sein, damit assistive Technologien damit umgehen können.

Punkt 13: Valides HTML
Fehlerhafter HTML-Code führt dazu, dass Screenreader Inhalte falsch interpretieren. Prüfe deine Website mit dem W3C Markup Validation Service unter validator.w3.org. Nicht jeder Fehler ist kritisch, aber doppelte IDs, fehlende schließende Tags und falsch verschachtelte Elemente können Screenreader verwirren.

Punkt 14: ARIA-Attribute korrekt eingesetzt
ARIA-Attribute helfen Screenreadern, Inhalte zu verstehen. Falsch eingesetzte ARIA-Attribute sind aber schlimmer als gar keine. Prüfe, ob role-Attribute sinnvoll gesetzt sind und ob aria-label-Texte inhaltlich stimmen. Ein Button mit aria-label="Schließen", der tatsächlich etwas öffnet, ist eine ernsthafte Barriere.

Punkt 15: Vollständige mobile Nutzbarkeit
Deine Website muss auf mobilen Geräten vollständig bedienbar sein. Das betrifft nicht nur das responsive Layout, sondern auch Touch-Targets, die groß genug sind (mindestens 44×44 Pixel), und Formulare, die auf mobilen Tastaturen korrekt funktionieren. Teste auf einem echten Smartphone, nicht nur im Browser-Simulator.


Selbsttest: Drei kostenlose Tools

Diese drei Tools helfen dir beim schnellen Einstieg in die technische Prüfung. Sie ersetzen keine manuelle Prüfung, decken aber viele häufige Fehler automatisch auf.

WAVE Web Accessibility Evaluation Tool
Erreichbar unter wave.webaim.org. Gib deine URL ein und bekomme eine visuelle Übersicht aller gefundenen Fehler und Warnungen direkt auf deiner Website. WAVE markiert Barrieren direkt im Seiteninhalt, was die Zuordnung erleichtert. Besonders gut für Alt-Text-Prüfung, Kontraste und Formular-Labels.

Google Lighthouse
Eingebaut in den Chrome-Browser unter Entwicklertools (F12) im Tab "Lighthouse". Führe einen Accessibility-Audit durch. Lighthouse gibt eine Punktzahl und listet konkrete Probleme mit Erklärungen. Gut als schneller Einstieg, aber nicht vollständig: Lighthouse findet automatisch etwa 30 bis 40 Prozent aller WCAG-Fehler.

axe DevTools Browser-Erweiterung
Verfügbar für Chrome und Firefox. Die kostenlose Version findet die häufigsten automatisch prüfbaren Barrieren und erklärt, was falsch ist und warum. axe gilt als besonders präzise mit sehr niedriger Fehlerquote bei falschen Positivmeldungen.

Wichtiger Hinweis: Automatische Tools finden nur Fehler, die maschinell erkennbar sind. Tastatur-Navigation, Verständlichkeit von Texten und Logik von Fehlermeldungen müssen manuell geprüft werden. Ein Tool-Ergebnis ohne manuelle Prüfung ist kein vollständiger WCAG-Audit.


Bestanden? Nicht bestanden?

Wenn du alle 15 Punkte erfüllst: Gut aufgestellt. Lass die Checkliste trotzdem regelmäßig durchlaufen, bei jedem neuen Inhalt, neuen Bildern oder strukturellen Änderungen. Barrierefreiheit ist kein einmaliges Projekt.

Wenn du einzelne Punkte nicht erfüllst: Priorisiere nach Schwere. Fehlende Alt-Texte und fehlender Fokus-Indikator sind kritisch und schnell behebbar. Valides HTML erfordert je nach Ausgangslage mehr Aufwand. Fang mit den Punkten an, die du selbst beheben kannst, und hol dir für die technischen Baustellen Unterstützung.

Wenn viele Punkte fehlen: Dann ist es sinnvoll, grundsätzlicher zu schauen. Oft liegt das Problem nicht an einzelnen Fehlern, sondern an einer technischen Basis, die Barrierefreiheit strukturell erschwert. In diesem Fall lohnt sich der Blick auf ein System, das die Grundlage von Anfang an richtig setzt.


Wie ein barrierefreies CMS hilft

Viele der 15 Punkte sind keine inhaltlichen, sondern technische Anforderungen. Semantisches HTML, korrekte ARIA-Attribute, sichtbare Fokus-Indikatoren, verknüpfte Formular-Labels. Das sind Eigenschaften des generierten Codes, nicht des Textes, den du einpflegst.

Ein CMS, das diese Punkte strukturell richtig umsetzt, löst sie automatisch für dich. Du pflegst Inhalte ein, das System liefert korrekten Code. Das ist der Unterschied zwischen Barrierefreiheit als technischer Grundlage und Barrierefreiheit als Nachrüstprojekt.

Welche Systeme das gut lösen und welche Baustellen bleiben, zeigt der direkte Vergleich: Barrierefreies CMS Vergleich 2026.

Was du als Inhaltspfleger trotzdem selbst tun musst: Alt-Texte für neue Bilder vergeben, PDFs vor dem Upload barrierefrei gestalten, Videos mit Untertiteln versehen. Das liegt immer beim Menschen, nicht beim System.


Fazit

15 Punkte, vier Gruppen, drei kostenlose Tools. Das reicht für einen ersten ehrlichen Selbsttest.

Wenn du danach weißt, wo du stehst, und Unterstützung bei der Umsetzung brauchst: Melde dich. Ich schaue mir deine Website an und sage dir konkret, was zu tun ist.

Kostenlosen Website-Check anfragen

Den vollständigen Hintergrundartikel zum BFSG, wer betroffen ist, welche Ausnahmen gelten und was bei Verstößen droht, findest du hier:

Barrierefreiheitsstärkungsgesetz einfach erklärt