Barrierefreie Website: Checkliste mit 5 Tests

Wie barrierefrei ist deine Website eigentlich? Das kannst du selbst herausfinden, ohne Fachwissen und ohne gleich eine Prüfung in Auftrag zu geben.

Diese Checkliste besteht aus fünf Tests. Du brauchst dafür nur Tastatur, Kontrast-Checker und Browser-Zoom, und nach einer Sitzung weißt du, wo Besucher hängen bleiben.

Ein vollständiges Urteil ist das nicht. Das W3C entwickelt die Webstandards und weist bei seinen eigenen Einsteiger-Checks darauf hin, dass eine Seite sie bestehen und trotzdem erhebliche Barrieren haben kann. Die Tests funktionieren unabhängig davon, ob für dich eine gesetzliche Pflicht gilt.

Welche Seiten du testest und was du dafür brauchst

Du musst nicht jede Unterseite prüfen. Barrieren stören dort am meisten, wo fast alle Besucher vorbeikommen oder etwas erledigen wollen. Teste deshalb diese vier Bereiche:

• die Startseite
• eine typische Inhalts- oder Leistungsseite
• die Seite mit deinem Kontaktformular
• Hauptmenü und Cookie-Banner, die auf jeder Seite auftauchen

Dazu brauchst du einen Desktop-Browser wie Chrome oder Firefox, eine Tastatur und einen kostenlosen Online-Kontrast-Checker. Für die Ergebnisse legst du dir eine Notiztabelle an, mit den Spalten Seite, Test und Befund.

Die Bundesfachstelle Barrierefreiheit nennt Schnelltests „keine vollständigen Tests“, sie böten nur einen groben Eindruck. Genau diesen Eindruck liefern die fünf Tests, und zwar als Liste, mit der du weiterarbeiten kannst.

Test 1: Die Website nur mit der Tastatur bedienen

Klick in die Adresszeile und leg die Maus weg. Mit der Tab-Taste springst du vorwärts durch Links, Buttons und Felder, mit Umschalt und Tab zurück. Enter öffnet einen Link oder löst einen Button aus.

Die Stelle, an der du gerade bist, heißt Fokus. Sie sollte immer durch einen Rahmen oder eine Hervorhebung sichtbar sein, und die Reihenfolge sollte der Leserichtung folgen.

Nicht bestanden hat deine Website den Test in diesen Fällen:

• Der Fokus wird unsichtbar oder verschwindet hinter einem fixierten Kopfbereich oder dem Cookie-Banner.
• Untermenüs öffnen sich nur, wenn du mit der Maus darüberfährst.
• Du kommst aus einem Banner, Popup oder Menü nicht mehr heraus. Das nennt man Tastaturfalle.

Die WCAG 2.2 sind die Richtlinien des W3C für barrierefreie Webinhalte. Sie zählen Tastaturbedienung und das Fehlen von Tastaturfallen zur Grundstufe A, den sichtbaren Fokus zur Stufe AA.

Test 2: Kontrast von Text und Hintergrund messen

Die WCAG 2.2 verlangen auf Stufe AA mindestens 4,5:1 für normalen Text und 3:1 für große Schrift. Trag Text- und Hintergrundfarbe in den Kontrast-Checker ein und lies das Verhältnis ab. Oder du nimmst das kostenlose Prüftool WAVE, das Kontrastfehler direkt auf der Seite markiert.

Schau zuerst auf hellgrauen Fließtext, Text auf Fotos oder Farbverläufen, weiße Schrift auf Buttons in der Markenfarbe und kleine Links im Footer. Bei Text auf Bildern messen Tools oft unzuverlässig, weil der Hintergrund wechselt. Dann entscheidet dein Auge, und im Zweifel notierst du die Stelle als Befund.

Test 3: Alt-Texte nach dem Zweck des Bildes prüfen

Den Alt-Text liest ein Screenreader statt des Bildes vor, etwa bei blinden Menschen. Die WCAG verlangen Textalternativen auf Stufe A, aber nicht jedes Bild braucht eine Beschreibung. Der Entscheidungsbaum des W3C richtet sich nach dem Zweck:

• Ein rein dekoratives Bild bekommt einen leeren Alt-Text.
• Ein Bild in einem Link oder Button beschreibt, wohin der Link führt oder was der Button tut.
• Ein informatives Bild beschreibt kurz, was es aussagt.

Die Alt-Texte siehst du in der Medienverwaltung deines CMS oder mit WAVE direkt auf der Seite. Typische Fehler sind Dateinamen, aneinandergereihte Suchbegriffe und ein bloßes „Bild“ oder „Logo“. Dazu kommen fehlende Texte bei Grafiken, die Informationen tragen. Ob ein Alt-Text im Zusammenhang passt, kann laut der Landesfachstelle für Barrierefreiheit Sachsen-Anhalt nur ein Mensch beurteilen.

Test 4: Auf 200 Prozent zoomen

Drück Strg und Plus, auf dem Mac Cmd und Plus, bis der Browser 200 Prozent anzeigt. Die WCAG 2.2 verlangen auf Stufe AA, dass sich Text bis 200 Prozent vergrößern lässt, ohne dass Inhalt oder Funktion verloren gehen. Laut W3C ist der seitenweite Browser-Zoom ein gültiger Weg, das zu erfüllen. Dein Test ist also aussagekräftig.

Die Fehlerbilder beschreibt das W3C selbst: Text, Bilder oder Bedienelemente werden abgeschnitten oder verdeckt, Formularfelder wachsen nicht mit. Wiederhol bei 200 Prozent kurz den Tastaturtest. Das Menü kann bei dieser Größe in die mobile Variante wechseln, und die verhält sich mit der Tastatur nicht immer wie die große.

Test 5: Sind alle Formularfelder beschriftet?

Am Kontaktformular kann eine Barriere direkt eine Anfrage kosten. Die WCAG verlangen auf Stufe A Beschriftungen oder Anweisungen für Eingabefelder. Drei Schritte reichen für den Test:

1. Steht über oder neben jedem Feld eine sichtbare Beschriftung, die beim Tippen stehen bleibt? Ein grauer Platzhaltertext im Feld verschwindet beim Tippen und reicht als einzige Beschriftung nicht.
2. Klick auf die Beschriftung. Springt der Cursor ins Feld, ist sie technisch mit dem Feld verknüpft. Passiert nichts, fehlt diese Verknüpfung wahrscheinlich, und ein Screenreader kann den Text dem Feld nicht sicher zuordnen.
3. Schick das Formular einmal leer ab. Pflichtfelder sollten vorher erkennbar sein, und zwar nicht nur über eine Farbe. Die Fehlermeldung sollte sagen, was fehlt.

Wenn insgesamt zu wenige Anfragen kommen, ist das Formular nur eine von mehreren möglichen Ursachen.

Was automatische Prüftools finden und was nicht

Tools wie WAVE, Lighthouse in Chrome oder axe DevTools prüfen eine Seite in Sekunden. Laut W3C können solche Tools Barrierefreiheit aber nicht feststellen, sondern nur dabei helfen. Sie können auch falsche oder irreführende Ergebnisse liefern.

Wie groß die Lücke sein kann, zeigt ein Test des Barrierefreiheitsteams der britischen Regierungsplattform GOV.UK aus dem Jahr 2017. Das Team ließ zehn Tools auf eine eigens gebaute Testseite mit 143 Barrieren los. 29 Prozent davon fand kein einziges Tool. Heutige Tools können besser abschneiden.

Bei Kontrast und fehlenden Alt-Texten sind Tools eine echte Hilfe. Wo sie dort an Grenzen stoßen, steht schon in Test 2 und Test 3. Bei den übrigen drei Tests liegt die Arbeit fast ganz bei dir:

Test	Das erkennt ein Tool	Das beurteilst du selbst
Tastatur	wenig	Erreichbarkeit, sichtbarer Fokus, Tastaturfallen
Zoom	wenig	abgeschnittene oder verdeckte Inhalte
Formular	Felder ohne technische Beschriftung	sichtbare Beschriftungen, verständliche Fehlermeldungen

Mach deshalb zuerst die fünf Tests von Hand und lass danach WAVE oder Lighthouse ergänzend über dieselben Seiten laufen. Ein hoher Lighthouse-Wert heißt nicht, dass die Seite barrierefrei ist.

Wer tiefer gehen will, testet mit dem kostenlosen Screenreader NVDA. Die Bundesfachstelle empfiehlt ihn ergänzend. Oder du lässt eine vollständige Prüfung machen, etwa den BITV-Test.

Warum ein Overlay-Plugin keine Abkürzung ist

Ein Overlay ist ein Skript oder Plugin, das eine Werkzeugleiste über deine Seite legt und Barrieren automatisch beheben soll. Die Überwachungsstellen von Bund und Ländern halten in ihrer gemeinsamen Einschätzung zu Overlay-Tools fest: Solche Tools können eine Website mit Barrieren derzeit nicht vollständig barrierefrei darstellen. Die Einschätzung stammt vom März 2025.

Für Menschen, die assistive Technik wie Screenreader nutzen, können Overlays die Lage laut der Einschätzung sogar verschlechtern. Automatisch erzeugte Alt-Texte erfassen außerdem den Zweck eines Bildes nicht, also genau den Punkt aus Test 3. Aktion Mensch hält ein Overlay allenfalls als Übergangslösung für denkbar und empfiehlt einen barrierefrei gestalteten Auftritt.

Vorsicht bei Versprechen wie „mit einem Klick barrierefrei“ oder „WCAG-konform“. In den USA musste der Anbieter accessiBe nach einer Anordnung der Behörde FTC vom 22. April 2025 eine Million US-Dollar zahlen, wegen falscher oder unbelegter Behauptungen, sein Plugin mache jede Website WCAG-konform. Das ist ein US-Fall, als Warnsignal taugt er trotzdem.

Setz deshalb kein Overlay als Ersatz ein. Dein Budget ist besser angelegt, wenn du die Befunde aus den fünf Tests an der Quelle behebst.

Was du selbst behebst und was du übergibst

Befund	Wer es behebt
Alt-Text fehlt oder passt nicht	du, in der Medienverwaltung oder im Editor deines CMS
Dekoratives Bild braucht leeren Alt-Text	du, sofern dein CMS das anbietet
Beschriftungstexte im Formular unklar	oft du, in den Einstellungen des Formular-Plugins
Einzelne Textfarbe zu hell	teilweise du, sonst Design
Markenfarben zu kontrastarm	Design, weil das Farbsystem betroffen ist
Fokus unsichtbar, Hover-Menü, Tastaturfalle	Entwicklung
Beschriftung nicht mit dem Feld verknüpft	Entwicklung
Inhalte bei 200 Prozent abgeschnitten	Entwicklung am responsiven Layout

Häufen sich die Befunde bei Farbsystem, Menü und Layout, geht es nicht mehr um Einzelkorrekturen. Dann stellt sich die Frage, ob sich eine Optimierung noch lohnt oder ein Relaunch sinnvoller ist. Die Überwachungsstellen halten fest, dass Barrierefreiheit von Anfang an in die Konzeption gehört. Bei einem Neubau planst du sie deshalb gleich mit.

Plan dir eine Sitzung ein und geh die fünf Tests auf den vier Prüfbereichen durch. Trag jeden Befund mit Seite und Test in deine Notiztabelle ein und ordne ihn nach der Tabelle oben zu. Was bei dir liegt, erledigst du direkt im CMS. Den Rest gibst du als Liste an deinen Webdesigner, und wenn du dafür niemanden hast, schau ich mir die Liste gern mit dir an.