BFSG-Checkliste: 15 Prüfpunkte für Ihre Website
Diese BFSG-Checkliste beantwortet eine einzige Frage: Was genau prüfe ich an meiner Website und wie mache ich das selbst? Kein Kriterienkatalog zum Nachschlagen, sondern 15 Prüfpunkte, die Sie mit Tastatur, Browser und zwei kostenlosen Erweiterungen abarbeiten können. Für jeden Punkt steht dabei, woran Sie erkennen, dass er durchgefallen ist.
Wir prüfen und bauen Websites in Ibbenbüren, Münster und Osnabrück und arbeiten diese Liste bei jedem Audit ab. Die Reihenfolge ist bewusst gewählt: Die ersten Punkte kosten wenige Minuten und finden erfahrungsgemäß die meisten Treffer. Ob Ihre Seite überhaupt unter das Gesetz fällt, klärt unser Ratgeber zu BFSG und barrierefreier Website. Eine Rechtsauskunft ist diese Liste nicht, sie ist eine technische Prüfhilfe.
Wie Sie diese BFSG-Checkliste abarbeiten
Nehmen Sie sich nicht die ganze Website vor, sondern die Seiten, die zusammen alles abdecken, was Ihre Seite kann:
- die Startseite
- eine typische Leistungs- oder Inhaltsseite
- das Kontaktformular bis zur Bestätigungsseite
- eine Produkt- oder Detailseite, falls vorhanden
- die Bestell- oder Buchungsstrecke, falls vorhanden
Was auf diesen Seiten stimmt, stimmt in der Regel auch auf den übrigen, weil sie dieselben Bausteine benutzen. Was hier bricht, bricht überall.
Für eine Firmenwebsite mit fünf bis acht Unterseiten brauchen Sie beim ersten Durchgang zwei bis drei Stunden, inklusive Einrichten der Browser-Erweiterungen. Prüfen können Sie alle 15 Punkte selbst, dafür ist die Liste gemacht. Beim Beheben teilt es sich, dazu weiter unten mehr.
Die Prüfpunkte verweisen jeweils auf das zugehörige Kriterium der WCAG 2.1, also der Web Content Accessibility Guidelines, auf die das BFSG in der Praxis hinausläuft. Wir nennen die Nummern ohne Stufenangabe, weil Stufe AA die Kriterien der Stufe A vollständig einschließt. Wer AA erfüllen will, muss beides erfüllen. Was hinter den Nummern steckt, ist auf unserer Seite zur Barrierefreiheit nach BFSG und WCAG erklärt.
Notieren Sie jeden Treffer mit Seite und Stelle. Am Ende haben Sie eine Mängelliste, mit der man arbeiten kann, statt eines Gefühls, dass da was nicht stimmt.
Bedienung ohne Maus (Punkte 1 bis 4)
Der Teil, der ohne Werkzeug funktioniert und trotzdem am meisten findet. Legen Sie die Maus beiseite. Wirklich beiseite.
1. Die komplette Seite mit der Tastatur bedienen
Springen Sie mit der Tabulatortaste durch die Seite. Enter und Leertaste lösen aus, Escape schließt. Alles, was mit der Maus geht, muss auch so gehen (Kriterien 2.1.1 und 2.1.2):
- Menü öffnen und Untermenüs erreichen
- Slider und Karussells weiterschalten
- Cookie-Banner bestätigen oder ablehnen
- Formularfelder füllen und die Anfrage abschicken
- Overlays und Bildergalerien wieder schließen
Durchgefallen, wenn der Fokus in einem Element hängen bleibt und nicht mehr herauskommt (klassisch bei Cookie-Bannern und Bildergalerien) oder wenn ein Aufklapp-Menü sich nur bei Mouseover öffnet.
2. Sehen, wo der Fokus steht
Beim Durchtabben muss zu jedem Zeitpunkt erkennbar sein, welches Element gerade aktiv ist. Ein deutlicher Rahmen oder ein Farbwechsel, der auffällt (Kriterium 2.4.7). Viele Designer entfernen den Standard-Umriss des Browsers, weil er ihnen nicht gefällt, und ersetzen ihn durch nichts.
Durchgefallen, wenn Sie beim Tabben raten müssen, wo Sie sind, oder wenn die Markierung auf farbigen Flächen verschwindet.
3. Reihenfolge und Sprungmarke zum Inhalt
Die Fokusreihenfolge soll der Leserichtung folgen, also von oben nach unten und links nach rechts, nicht von der Kopfzeile in den Footer und zurück (Kriterium 2.4.3). Außerdem braucht es einen Weg, die wiederkehrende Navigation zu überspringen (Kriterium 2.4.1). Ein Skip-Link, der beim ersten Tab erscheint, ist der zuverlässigste. Ausreichend sind auch ARIA-Landmarks oder eine saubere Überschriftenstruktur. Fehlt jeder dieser Wege, tabbt sich jemand auf jeder Unterseite erneut durch dreißig Menüpunkte, bevor er beim Text ankommt.
Durchgefallen, wenn es keinen dieser Wege gibt, um die Navigation zu überspringen, oder wenn der Fokus wild über die Seite springt.
4. Zeitfallen, Autoplay und Bewegung
Zeitlimits müssen abschaltbar oder verlängerbar sein. Eine Warnung allein genügt nicht: Wer verlängern soll, braucht dafür mindestens 20 Sekunden Zeit und muss das mindestens zehnmal tun können (Kriterium 2.2.1). Alles, was länger als fünf Sekunden von allein läuft, braucht eine Pausierfunktion, also Slider und Laufschriften (Kriterium 2.2.2). Automatisch startender Ton, der länger als drei Sekunden spielt, ist ein eigener Verstoß (Kriterium 1.4.2).
Durchgefallen, wenn ein Slider ohne Pausenknopf durchläuft oder eine Sitzung nach fünfzehn Minuten abläuft, ohne dass sich das Limit verlängern lässt, und das halb gefüllte Formular mitnimmt.
Sehen und Lesen (Punkte 5 bis 8)
Hier kommen die Werkzeuge ins Spiel, und hier liegen die Punkte, die am häufigsten am Corporate Design hängen. Ein zu helles Firmengelb bekommt eine dunklere Variante für Text, das Logo bleibt wie es ist.
5. Kontrast von Text und Hintergrund
Normaler Fließtext braucht ein Kontrastverhältnis von 4,5:1 gegen seinen Hintergrund. Für große Schrift ab 24 Pixeln oder ab 18,66 Pixeln in fett genügen 3:1 (Kriterium 1.4.3). Messen können Sie das mit der Farbwähler-Funktion der Browser-Entwicklertools, die den Wert direkt anzeigt, oder mit WAVE.
Durchgefallen, wenn hellgraue Schrift auf weißem Grund steht, Text über einem Foto ohne abdunkelnde Fläche liegt oder Platzhaltertexte in Formularfeldern kaum zu erkennen sind.
6. Kontrast von Bedienelementen und Grafiken
Nicht nur Text muss sich abheben. Rahmen von Eingabefeldern, Icons, Schaltflächenkanten und Diagrammlinien brauchen 3:1 gegen ihre Umgebung, wenn man sie zum Verstehen oder Bedienen braucht (Kriterium 1.4.11). Ein hellgrauer 1-Pixel-Rahmen auf Weiß erfüllt das nicht.
Durchgefallen, wenn nicht zu erkennen ist, wo ein Eingabefeld anfängt und aufhört, oder wenn ein Icon ohne Text die einzige Beschriftung eines Buttons ist und dabei blass bleibt.
7. Farbe als einziger Hinweis
Information darf nicht ausschließlich über Farbe laufen (Kriterium 1.4.1). Rot umrandete Pflichtfelder, grüne Verfügbarkeitspunkte, farbige Linien in einer Statistik: Wer Farben schlecht unterscheidet, sieht davon nichts. Es braucht zusätzlich Text oder ein Symbol. Der schnellste Test läuft über die Entwicklertools, die eine Graustufen-Ansicht simulieren können.
Durchgefallen, wenn die Seite in Graustufen ihre Bedeutung verliert, etwa weil Fehlermeldungen nur noch farblos gerahmt sind.
8. Zoom auf 200 Prozent und Reflow
Drücken Sie Strg und Plus, bis der Browser 200 Prozent anzeigt. Die Schrittweite pro Tastendruck unterscheidet sich je nach Browser. Der Text muss größer werden, ohne dass Inhalte abgeschnitten werden oder sich überlappen (Kriterium 1.4.4). Danach weiter bis 400 Prozent bei einem 1280 Pixel breiten Fenster, das entspricht einer Anzeigebreite von 320 Pixeln: Der Inhalt muss umbrechen, ohne dass waagerecht gescrollt werden muss (Kriterium 1.4.10). Ausgenommen sind Inhalte, die zwei Dimensionen brauchen, also Tabellen, Karten und Diagramme.
Durchgefallen, wenn ein waagerechter Scrollbalken auftaucht, Text aus seinem Kasten läuft oder ein festes Menü beim Zoomen den halben Bildschirm belegt.
Inhalte und Struktur (Punkte 9 bis 11)
Diese drei Punkte betreffen Ihre Redaktion, nicht Ihren Entwickler. Sie entstehen beim Einpflegen von Inhalten und verschwinden auch dort wieder.
9. Alternativtexte für Bilder
Jedes Bild, das Information trägt, braucht einen Alternativtext, der diese Information wiedergibt (Kriterium 1.1.1). Rein dekorative Bilder bekommen ein leeres Attribut, damit der Screenreader sie überspringt. Prüfen lässt sich das mit WAVE, das jedes fehlende und jedes vorhandene Alternativtext-Attribut auf der Seite markiert.
Durchgefallen, wenn ein Alternativtext "IMG_4712" lautet, "Bild" heißt, das Firmenlogo als "Logo" beschrieben wird statt mit dem Firmennamen, oder wenn ein Foto mit Öffnungszeiten keinen Text hat, der diese Öffnungszeiten nennt.
10. Überschriftenhierarchie
Screenreader-Nutzer springen von Überschrift zu Überschrift, so wie Sehende die Seite überfliegen. Dafür muss die Überschriftenstruktur die Gliederung der Seite abbilden (Kriterium 1.3.1), und die Überschriften müssen beschreiben, worum es im folgenden Abschnitt geht (Kriterium 2.4.6). Eine einzelne H1 pro Seite und eine Abstufung ohne Sprung von H2 auf H4 schreibt die WCAG nicht wörtlich vor, in der Praxis ist das aber der zuverlässigste Weg dorthin. Überschriften sind Struktur, kein Stilmittel für große Schrift. Die Gliederung sehen Sie in WAVE unter "Structure" oder in den Entwicklertools.
Durchgefallen, wenn ein Fließtextabsatz als H2 ausgezeichnet ist, damit er größer wirkt, oder wenn eine Seite fünf H1 hat, weil jede Kachel eine bekommen hat, oder wenn Überschriften wie "Mehr" nichts über ihren Abschnitt sagen.
11. Sprachauszeichnung im HTML
Im Quelltext muss die Seitensprache stehen, also <html lang="de"> (Kriterium 3.1.1). Ohne diese Angabe liest eine Vorlesesoftware deutschen Text mit englischer Aussprache vor, was von unverständlich bis unfreiwillig komisch reicht. Fremdsprachige Passagen im Text bekommen zusätzlich ihre eigene Auszeichnung (Kriterium 3.1.2). Sichtbar wird das mit einem Rechtsklick und "Seitenquelltext anzeigen" in der ersten Zeile.
Durchgefallen, wenn das Attribut fehlt oder auf "en" steht, weil das Theme aus einer englischen Vorlage stammt.
Formulare (Punkte 12 und 13)
Formulare sind die Stelle, an der Barrierefreiheit direkt aufs Geschäft durchschlägt. Wer die Anfrage nicht abschicken kann, wird kein Kunde. Prüfen Sie jedes Formular, das Sie haben, und zwar einmal komplett bis zur Bestätigungsseite.
12. Beschriftungen, die mit dem Feld verbunden sind
Jedes Eingabefeld braucht eine sichtbare Beschriftung, die technisch mit dem Feld verknüpft ist (Kriterien 3.3.2 und 4.1.2). Ein Platzhalter im Feld genügt nicht, denn er verschwindet beim Tippen. Testen können Sie das ohne Werkzeug: Klicken Sie auf die Beschriftung. Springt der Cursor ins zugehörige Feld, ist die Verknüpfung da. Bleibt er stehen, schauen Sie in den Entwicklertools nach einem aria-labelledby am Feld, das erfüllt die Anforderung ebenfalls.
Durchgefallen, wenn weder ein Klick auf den Text noch ein Blick in die Entwicklertools eine Verknüpfung zeigt, wenn Pflichtfelder nur durch ein Sternchen ohne Erklärung markiert sind oder wenn ein Suchfeld gar keine Beschriftung hat.
13. Fehlermeldungen, die weiterhelfen
Schicken Sie das Formular absichtlich falsch ab: Pflichtfeld leer, kaputte E-Mail-Adresse, Datum im falschen Format. Die Meldung muss benennen, welches Feld betroffen ist und was erwartet wird (Kriterien 3.3.1 und 3.3.3). Sie muss außerdem als Text vorhanden sein, nicht nur als rote Umrandung, sonst bekommt eine Vorlesesoftware davon nichts mit.
Durchgefallen, wenn die Antwort "Ungültige Eingabe" lautet, ohne zu sagen wo, oder wenn die Meldung erst am Seitenanfang steht und der Fokus im Feld ganz unten bleibt.
Medien und Dokumente (Punkte 14 und 15)
Die beiden Punkte, die am häufigsten vergessen werden, weil sie nicht wie Website aussehen. Ein PDF ist trotzdem Teil Ihres Angebots, wenn Ihre Preisliste nur dort steht.
14. Untertitel und Alternativen bei Videos
Aufgezeichnete Videos mit Ton brauchen Untertitel (Kriterium 1.2.2). Automatisch erzeugte Untertitel von YouTube sind ein Anfang, aber bei Fachbegriffen, Eigennamen und Dialekt liegen sie regelmäßig daneben. Nachbearbeiten kostet pro Minute Video wenige Minuten Arbeit. Wenn im Video etwas rein visuell gezeigt wird, das im Ton nicht vorkommt, braucht es zusätzlich eine Beschreibung (Kriterium 1.2.5).
Durchgefallen, wenn Ihr Imagefilm ohne Untertitel läuft oder wenn die eingeblendeten Kontaktdaten am Ende nirgends als Text stehen.
15. PDFs und andere Downloads
Dokumente, die Teil Ihres Angebots sind, fallen unter die gleichen Anforderungen wie die Seite selbst. Ein PDF muss also getaggt sein und eine Lesereihenfolge haben (Kriterium 1.3.1), Alternativtexte für Bilder mitbringen (Kriterium 1.1.1) und durchsuchbaren Text enthalten. Für Dokumente konkretisiert die Norm PDF/UA diese Anforderungen. Sie ist selbst kein WCAG-Kriterium. Der Schnelltest: Öffnen Sie das PDF und markieren Sie einen Satz mit der Maus. Geht das nicht, ist es ein Bild.
Durchgefallen, wenn Ihr Prospekt ein eingescanntes Blatt ist. Das war Papier und ist danach nur noch ein Foto von Papier.
Oft ist die schnellere Lösung, den Inhalt zusätzlich als normale HTML-Seite anzubieten, statt das PDF aufwendig nachzurüsten. Das hilft nebenbei bei Google, weil der Text dann indexierbar ist.
Website barrierefrei testen: welche Werkzeuge reichen
Für die komplette Liste brauchen Sie nichts, was Geld kostet. Fünf Werkzeuge und die Tastatur decken alles ab, was ohne Fachwissen prüfbar ist.
| Werkzeug | Wofür es taugt |
|---|---|
| Tabulatortaste | Punkte 1 bis 4, findet die meisten Treffer |
| Browser-Entwicklertools (F12) | Kontrastwerte messen, Quelltext und Sprachattribut prüfen |
| WAVE (Browser-Erweiterung) | Fehler direkt auf der Seite markiert, Überschriften-Gliederung |
| axe DevTools (Browser-Erweiterung) | technische Prüfung mit Bezug zum jeweiligen Kriterium |
| Lighthouse (in Chrome enthalten) | Schnellüberblick als Punktwert, gut für Vorher-Nachher |
| NVDA (Windows, kostenlos) | Screenreader-Test, unter Firefox oder Chrome |
Der Screenreader-Test ist der unangenehmste und der lehrreichste. NVDA ist kostenlos, unter macOS ist VoiceOver ohnehin dabei. Schalten Sie den Bildschirm aus oder schauen Sie weg und versuchen Sie, über Ihre Seite eine Anfrage zu schicken. Nach zwanzig Minuten haben Sie ein anderes Verhältnis zu Ihrer Navigation. Rechnen Sie damit, dass die ersten Versuche vor allem Ihre eigene Ungeübtheit zeigen, das legt sich.
Was automatische Tests nicht finden
Ein grüner Lighthouse-Wert von 100 heißt nicht, dass Ihre Website barrierefrei ist. Er heißt, dass die von Lighthouse geprüften Regeln erfüllt sind. Maschinell ließe sich mehr abdecken, und Lighthouse führt einen Teil der Punkte nur als manuell zu prüfen auf, ohne sie in den Wert einzurechnen. Etwa die Hälfte der Kriterien lässt sich nur manuell prüfen, weil dabei Sinn und Zusammenhang beurteilt werden müssen.
Ein Werkzeug erkennt, dass ein Alternativtext vorhanden ist. Ob er das Bild beschreibt, erkennt es nicht. Es sieht, dass Überschriften-Tags benutzt werden. Ob die Gliederung dem Inhalt entspricht, sieht es nicht. Es prüft Kontrastwerte von Text, kommt aber bei Text über Bildern und bei Hover-Zuständen an seine Grenzen. Und es kann nicht beurteilen, ob eine Fehlermeldung verständlich ist oder ob die Bestellstrecke mit dem Screenreader durchläuft.
Was ebenfalls nichts löst, ist ein Overlay. Ein Overlay legt eine Schicht über die Seite und bietet Schaltflächen für Kontrast oder Schriftgröße. Die Ursache im Quellcode bleibt: Eine Navigation, die per Tastatur nicht erreichbar ist, wird durch ein Widget nicht bedienbar. Das Geld ist in der Behebung besser angelegt.
Deshalb steht in dieser Checkliste bei fast jedem Punkt ein Handgriff und kein Werkzeugname. Wenn Sie die Liste durchhaben und die Mängel zu tief im Theme oder im Baukasten sitzen, wird aus der Prüfung ein Entwicklungsprojekt. Wo dabei die Grenze zwischen Nachbessern und Relaunch liegt, hängt vom Zustand der Seite ab und schlägt sich im Budget nieder. Größenordnungen dafür stehen in unserem Ratgeber Was kostet eine Website, die Arbeitsweise dahinter unter Webdesign.
Sie wollen Ihre Website barrierefrei machen, ohne selbst in den Code zu greifen? Für die BFSG Umsetzung übernehmen wir beides: die vollständige Prüfung nach WCAG‑Kriterien inklusive Screenreader und die Behebung im Code. Am Ende steht ein Bericht mit priorisierter Mängelliste und die Barrierefreiheitserklärung, die auf jeder betroffenen Website vorgeschrieben ist. Hinein gehören der Geltungsbereich, der zugrunde liegende Standard (in der Praxis WCAG 2.1 Stufe AA), die bekannten nicht konformen Teile mit Begründung, ein Kontaktweg für Rückmeldungen und das Datum der letzten Prüfung.
Danach hört es nicht auf. Nach jeder größeren Änderung und mindestens einmal im Jahr gehört die Liste erneut abgearbeitet, denn ein Theme-Update oder ein neues Plugin kann Barrieren einführen, die vorher nicht da waren. Wenn Sie lieber reden als lesen, geht das über unser Kontaktformular oder telefonisch.
Häufige Fragen zur BFSG-Prüfung
Reicht ein automatischer Test aus, um die BFSG-Anforderungen zu erfüllen?
Nein. WAVE, axe und Lighthouse finden maschinell messbare Fehler, etwa fehlende Alternativtexte oder zu geringe Kontrastwerte. Etwa die Hälfte der Kriterien lässt sich nur manuell prüfen. Ob ein Alternativtext das Bild beschreibt oder nur IMG_4712 enthält, entscheidet kein Werkzeug. Ein grüner Lighthouse-Wert ist ein Startpunkt der BFSG-Prüfung, kein Nachweis.
Wie lange dauert es, diese Checkliste für eine Website abzuarbeiten?
Für eine Firmenwebsite mit fünf bis acht Unterseiten brauchen Sie beim ersten Durchgang zwei bis drei Stunden, inklusive Einrichten der Browser-Erweiterungen. Geübt geht dieselbe Seite in unter einer Stunde. Eine vollständige BFSG-Prüfung mit Screenreader und dem Bestellprozess eines Shops liegt bei mehreren Tagen, weil jede Strecke einzeln durchgespielt wird.
Macht ein Accessibility-Overlay meine Website barrierefrei?
Nein. Ein Overlay legt eine Schicht über die Seite und bietet Schaltflächen für Kontrast oder Schriftgröße. Die Ursache im Quellcode bleibt: Eine Navigation, die per Tastatur nicht erreichbar ist, wird durch ein Widget nicht bedienbar. Screenreader-Nutzer bringen ihre eigenen Hilfsmittel mit und schalten solche Zusätze oft ab. Als BFSG-Nachweis taugt das nicht.
Was gehört in eine Barrierefreiheitserklärung?
Eine Erklärung ist auf jeder betroffenen Website vorgeschrieben. Hinein gehören der Geltungsbereich, der zugrunde liegende Standard (in der Praxis WCAG 2.1 Stufe AA), die bekannten nicht konformen Teile mit Begründung, ein Kontaktweg für Rückmeldungen und das Datum der letzten Prüfung. Ein offen genannter Mangel, etwa ein altes PDF, schadet dabei nicht.
Wie oft sollte ich die Barrierefreiheit meiner Website neu prüfen?
Nach jeder größeren Änderung und mindestens einmal im Jahr. Ein Theme-Update, ein neues Plugin oder ein Redakteur, der zwanzig Bilder ohne Alternativtext hochlädt, kann Barrieren einführen, die vorher nicht da waren. Wir empfehlen pro Quartal einen kurzen Durchlauf der Punkte 1 bis 8 und eine vollständige Prüfung jährlich.
Kann ich die Punkte selbst abarbeiten oder brauche ich einen Entwickler?
Prüfen können Sie alle 15 Punkte selbst, dafür ist die Liste gemacht. Beim Beheben teilt es sich: Alternativtexte, Überschriften und Formulartexte pflegen Sie im Redaktionssystem selbst. Fokus-Stile, Kontrastwerte im Design und die Tastaturbedienung eines Menüs liegen im Quellcode oder Theme, dafür brauchen Sie jemanden, der das System kennt.