Website auf Barrierefreiheit testen: Gratis-Tools und manuelle Prüfungen

Diese Geschichte hören wir oft. Jemand lässt Lighthouse laufen, bekommt eine grüne 100 für Barrierefreiheit und hakt das Thema ab. Eine Woche später schreibt eine Kundin, sie habe nicht bezahlen können, weil sich das Kartenformular nicht mit der Tastatur erreichen lässt. Beides stimmt. Die automatische Prüfung fiel positiv aus, und trotzdem kam ein echter Mensch mit der Website nicht zurecht.

Dieser Leitfaden zeigt, wie Sie mit kleinem Budget gründlich testen: welche kostenlosen Tools Sie nutzen, eine manuelle Routine von 15 Minuten, ein erster Versuch mit dem Screenreader und wann sich ein bezahltes Audit lohnt.

Kann ein automatischer Checker sagen, ob meine Website barrierefrei ist?

Nein. Automatische Checker finden manche Probleme schnell, aber viele Fragen der Barrierefreiheit kann nur ein Mensch beantworten. Als der Government Digital Service der britischen Regierung 10 Tools an einer Seite mit 143 bekannten Fehlern testete, fand das beste 41 %. Das W3C sagt es deutlich: Prüfwerkzeuge „können Barrierefreiheit nicht feststellen, sie können nur dabei helfen“.

Der GDS-Test (öffnet in einem neuen Tab) stammt vom Februar 2017, und die 41 % (von Asqatasun) schlossen die Hinweise des Tools auf manuelle Prüfungen ein. Die Tools sind seitdem besser geworden, aber die Lücke hat dieselbe Ursache. Software erkennt, dass einem Bild der Alternativtext fehlt. Sie erkennt nicht, dass „rotes Kleid“ die falsche Beschreibung für das Foto eines blauen Anzugs ist oder ob Ihre Fokus-Reihenfolge Sinn ergibt.

Sehen Sie einen Checker also als Rauchmelder, nicht als Baugutachten. Laufen lassen sollten Sie ihn trotzdem: Der Scan WebAIM Million 2026 (öffnet in einem neuen Tab) fand auf 95,9 % der 1 Million meistbesuchten Startseiten erkennbare Fehler; auf den meisten Websites lässt sich also schon mit wenig Aufwand viel verbessern. Oder wie es im Leitfaden des W3C zur Auswahl von Tools (öffnet in einem neuen Tab) heißt: „Menschliches Urteilsvermögen ist erforderlich.“

Welche kostenlosen Tools für Barrierefreiheitstests sollte ich nutzen?

Nutzen Sie ein oder zwei automatische Checker, einen Kontrast-Checker und einen Screenreader. Die Tools wenden unterschiedliche Regeln an und berichten unterschiedlich; zwei Checker finden also meist mehr als einer. Jedes Tool unten hat eine kostenlose Version. Prüfen Sie die aktuellen Bedingungen, bevor Sie sich darauf verlassen, denn Namen, Funktionen und Preise ändern sich.

Was kann ich in 15 Minuten manuell prüfen?

Eine ganze Menge. Die Easy Checks (öffnet in einem neuen Tab) des W3C umfassen Seitentitel, Alternativtexte, Überschriften, Kontrast, Sprunglinks, sichtbaren Tastaturfokus, Sprache der Seite, Zoom, Untertitel und Formularbeschriftungen. Nehmen Sie eine wichtige Seite, etwa eine Produktseite oder Ihr Buchungsformular, und geben Sie jeder Prüfung ein oder zwei Minuten. Sie werden Dinge finden, die kein Checker meldet.

Laut W3C decken diese Prüfungen „nur einige wenige Barrierefreiheitsprobleme ab“, eine vollständige Bewertung sind sie also nicht. Trotzdem ist es die beste Viertelstunde, die Sie investieren können:

1. Seitentitel (1 Minute). Steht im Browser-Tab, um welche Seite es geht, etwa „Tisch reservieren | Rosas Küche“, statt überall „Startseite“?
2. Bilder (2 Minuten). Lassen Sie sich die Alternativtexte mit WAVE oder einem ähnlichen Tool anzeigen. Stimmen sie? Werden dekorative Bilder übersprungen?
3. Überschriften (2 Minuten). Listen Sie die Überschriften auf und lesen Sie sie für sich. Funktionieren sie als Inhaltsverzeichnis?
4. Kontrast (2 Minuten). Prüfen Sie Fließtext, kleinen grauen Text, Button-Text und Text über Bildern.
5. Tastatur (4 Minuten). Legen Sie die Maus beiseite und gehen Sie mit der Tabulatortaste durch die Seite (siehe nächster Abschnitt).
6. Zoom (2 Minuten). Können Sie bei 200 % und dann bei 400 % noch alles lesen und das Menü ohne seitliches Scrollen bedienen?
7. Formulare und Sprache (2 Minuten). Klicken Sie auf die Beschriftung jedes Felds; in einem gut gebauten Formular springt der Cursor dann ins Feld. Sehen Sie im Bericht des Tools nach, ob die Sprachangabe der Seite fehlt.

Wie teste ich mit der Tastatur?

Legen Sie die Maus weg. Mit Tab gehen Sie vorwärts, mit Umschalt+Tab zurück, mit Enter folgen Sie Links, mit Leertaste oder Enter drücken Sie Buttons, und mit den Pfeiltasten bewegen Sie sich in Menüs und Optionsfeldern. Jedes interaktive Element sollte erreichbar sein, Sie sollten immer sehen, wo Sie sind, und nirgends hängen bleiben.

Auf dem Mac überspringt Safari beim Drücken der Tabulatortaste Links, bis Sie in den erweiterten Einstellungen die Option einschalten, mit der die Tabulatortaste alle Objekte einer Webseite hervorhebt. Dann prüfen Sie:

• Sehen Sie immer, wo Sie sind? Verschwindet der Fokusrahmen, ist ein Tastaturnutzer verloren.
• Ist die Reihenfolge logisch? Der Fokus sollte der Lesereihenfolge folgen.
• Wird etwas verdeckt? Ein fixierter Header oder ein Cookie-Banner, das das fokussierte Element verdeckt, verstößt gegen das WCAG-2.2-Kriterium Fokus nicht verdeckt.
• Kommen Sie wieder heraus? Öffnen Sie jedes Menü, jedes Pop-up und jede Datumsauswahl und versuchen Sie dann, sie wieder zu verlassen. Escape sollte Dialoge schließen.
• Funktioniert der ganze Ablauf? Legen Sie ein Produkt in den Warenkorb, ändern Sie die Menge, lösen Sie einen Gutschein ein und gelangen Sie ohne Maus bis zur Zahlung.

Notieren Sie jeden Fehler genau: „Die Größenauswahl auf der Produktseite lässt sich nicht mit Enter oder Leertaste öffnen“ wird viel schneller behoben als „Tastatur geht nicht“.

Wie teste ich zum ersten Mal mit einem Screenreader?

Beginnen Sie mit dem Screenreader, den Ihr Gerät schon mitbringt, oder mit NVDA unter Windows, und hören Sie sich eine einzige Seite an. Sie müssen ihn nicht wie ein Profi bedienen. Sie prüfen, ob Überschriften, Links, Buttons, Bilder und Formularfelder mit sinnvollen Namen angesagt werden und ob nichts Wichtiges stumm bleibt.

• Mac: Befehlstaste+F5 schaltet VoiceOver ein und aus; Control+Wahltaste+U öffnet den Rotor, eine Liste der Überschriften, Links und Formularelemente.
• Windows: In NVDA springen Sie mit H von Überschrift zu Überschrift, Einfg+F7 listet Links und Überschriften auf.
• Smartphone: Schalten Sie VoiceOver (iPhone) oder TalkBack (Android) ein und wischen Sie nach rechts, um von Element zu Element zu gehen. Lernen Sie vorher, wie Sie es wieder ausschalten.

Achten Sie auf das, was am meisten zählt. In der Screenreader-Umfrage von WebAIM 2024 (öffnet in einem neuen Tab) gaben 71,6 % der Befragten an, sich auf einer langen Seite zuerst über die Überschriften zu bewegen. Fangen Sie also dort an. Rufen Sie dann die Linkliste auf: Fünf Links namens „Weiterlesen“ sagen niemandem etwas. „In den Warenkorb, marineblauer Pullover“ ist ein nützlicher Button; „Schalter“ nicht. Füllen Sie zum Schluss ein Formular aus und prüfen Sie, ob jedes Feld und jeder Fehler vorgelesen wird.

Bleiben Sie bei Ihren Schlüssen bescheiden. Klingt es für Sie kaputt, ist es das wahrscheinlich auch; klingt es gut, ist das noch kein Beweis. Wie erfahrene Nutzer tatsächlich arbeiten, lesen Sie in Wie Menschen mit Behinderungen das Web nutzen.

Wie prüfe ich Zoom, Umfluss und Textabstand?

Zoomen Sie Ihren Browser auf 200 % und prüfen Sie, ob der Text größer wird, ohne abgeschnitten zu werden oder sich zu überlappen. Testen Sie dann den Umfluss (Reflow): Bei 400 % Zoom in einem 1.280 Pixel breiten Fenster sollten die Inhalte ohne seitliches Scrollen passen. Vergrößern Sie zum Schluss die Abstände zwischen Buchstaben, Wörtern, Zeilen und Absätzen und prüfen Sie, ob nichts kaputtgeht oder verschwindet.

Das entspricht den WCAG-Kriterien Textgröße ändern (1.4.4), Umfluss (1.4.10) (öffnet in einem neuen Tab) und Textabstand (1.4.12) (öffnet in einem neuen Tab). Der Umfluss geht von einer Breite von 320 CSS-Pixeln aus, was laut W3C „einer anfänglichen Viewport-Breite von 1280 CSS-Pixeln bei 400 % Zoom entspricht“. Beim Textabstand darf nichts verloren gehen, wenn jemand die Zeilenhöhe auf das 1,5-Fache der Schriftgröße setzt, den Absatzabstand auf das 2-Fache, den Buchstabenabstand auf das 0,12-Fache und den Wortabstand auf das 0,16-Fache.

Ein Bookmarklet für den Textabstand, also ein kleines Skript, das als Lesezeichen gespeichert ist, setzt alle vier Werte mit einem Klick. Achten Sie auf Text, der aus Buttons herausläuft, und auf Beschriftungen, die am Rand abgeschnitten werden. Bei 400 % Zoom zeigt ein Laptop ungefähr das, was ein kleines Smartphone zeigt; eine gut gebaute responsive Website besteht also vieles davon schon.

Wie prüfe ich Formulare, Fehlermeldungen und den Checkout?

Füllen Sie jedes wichtige Formular dreimal aus: einmal korrekt, einmal mit lauter leeren Feldern und einmal mit absichtlichen Fehlern. Jedes Feld sollte eine sichtbare Beschriftung haben, jeder Fehler sollte neben seinem Feld in Worten erklärt werden, und in Passwort- und Bestätigungscode-Felder sollten Sie etwas einfügen können.

• Fehler. „Ungültige Eingabe“ in Rot reicht nicht. „Geben Sie das Ablaufdatum im Format MM/JJ ein“ direkt neben dem Feld schon. Nach dem Absenden sollte der Fokus zur Fehlerübersicht oder zum ersten fehlerhaften Feld springen.
• Logins und Codes. Nach dem WCAG-2.2-Kriterium zur barrierefreien Authentifizierung (öffnet in einem neuen Tab) fällt durch, wer Einfügen oder Passwort-Manager blockiert, sofern es keinen anderen Weg hinein gibt.
• CAPTCHAs und Zeitlimits. Screenreader-Nutzer nannten CAPTCHAs in der WebAIM-Umfrage das problematischste Element im Web. Prüfen Sie, ob es eine barrierefreie Alternative gibt und ob sich Zeitlimits verlängern lassen.

Unsere Checkliste für barrierefreie Websites enthält eine ausführlichere Liste für Shops, einschließlich Cookie-Bannern und Pop-ups.

Was gehört zu einem professionellen Barrierefreiheits-Audit, und wann brauche ich eines?

Ein Barrierefreiheits-Audit ist eine strukturierte Prüfung durch Fachleute anhand einer benannten Norm, meist WCAG 2.1 oder 2.2 Stufe AA. Es kombiniert automatische Scans mit manuellen Tests und Tests mit assistiven Technologien für Ihre wichtigsten Templates und Abläufe und endet mit einem priorisierten Bericht. Sie brauchen eines, wenn das Gesetz für Sie gilt, vor einem großen Launch oder wenn Kunden Nachweise verlangen.

Bevor Sie einem Preis zustimmen, fragen Sie:

• Nach welcher Norm, Version und Stufe wird geprüft?
• Welche Templates und Abläufe sind enthalten? Bei einem Shop: Startseite, Kategorie, Produkt, Warenkorb, Checkout, Kontoseiten und Formulare.
• Testen Sie manuell mit Screenreadern, Tastatur und Zoom, und auf welchen Browsern und Geräten?
• Ordnet der Bericht die Probleme nach Schwere, verortet sie und schlägt Lösungen vor?
• Ist ein Nachtest enthalten?

Die Preise schwanken stark je nach Anbieter, Land und Umfang; vergleichen Sie also, was enthalten ist. Fallen Sie unter den European Accessibility Act, in Deutschland unter das BFSG, stützt ein Audit außerdem Ihre öffentliche Erklärung; wer erfasst ist, erklärt unser Leitfaden zum BFSG und EAA.

Warum mit Menschen mit Behinderungen testen?

Weil eine Norm zu erfüllen und leicht bedienbar zu sein nicht dasselbe ist. Ein Checkout kann jedes WCAG-Kriterium bestehen und einen Screenreader-Nutzer trotzdem zwanzig Minuten kosten. Das W3C sagt, dass eine Bewertung mit Nutzern mit Behinderungen „Probleme der Gebrauchstauglichkeit aufdeckt, die eine reine Konformitätsprüfung nicht findet“, und sie zeigt Ihrem Team, wie Menschen die Website wirklich nutzen.

Ein Labor brauchen Sie nicht. Eine Handvoll Sitzungen zu Ihrer wichtigsten Aufgabe, etwa ein Produkt finden und bezahlen, lehrt Sie mehr als eine weitere Runde Scans. Finden Sie Teilnehmende über Behindertenverbände, Marktforschungsagenturen oder Ihre eigene Kundschaft, und bezahlen Sie die Menschen für ihre Zeit. Lassen Sie sie ihre eigenen Geräte und Einstellungen verwenden. Der Leitfaden des W3C zur Einbeziehung von Nutzern in die Bewertung (öffnet in einem neuen Tab) behandelt die praktische Seite.

Was mache ich mit den Ergebnissen?

Ordnen Sie die Probleme danach, wie stark sie Menschen blockieren und wo sie auftreten, beheben Sie sie im Code und in den Inhalten der Website selbst, testen Sie erneut und halten Sie fest, was noch offen ist. Ein unbeschriftetes Feld im Checkout wiegt schwerer als ein Kontrastfehler im Footer, und eine Korrektur in einem gemeinsamen Template repariert jede Seite, die es nutzt.

1. Priorisieren. Zuerst Blocker in den wichtigsten Abläufen (Checkout, Buchung, Registrierung), dann gemeinsame Templates, dann einzelne Seiten.
2. An der Quelle beheben. Ändern Sie Theme, Komponente oder Inhalt, nicht nur das Symptom.
3. Erneut testen. Wiederholen Sie dieselben Prüfungen, manuell und mit Tools.
4. Dokumentieren. Führen Sie bekannte Probleme mit Datum in Ihrer Erklärung zur Barrierefreiheit auf. Unser Leitfaden zu WCAG 2.2 erklärt die neueren Kriterien.
5. Wiederholen. Machen Sie eine Tastaturprüfung und einen Scan zum Teil jedes Releases.

Wenn Sie ein Barrierefreiheits-Widget oder -Plugin nutzen, auch unseres, testen Sie mit geschlossenem Panel. Ein Panel wie SiteAccessible gibt Besuchern zusätzliche Möglichkeiten, die Seite anzupassen, aber die WCAG fragen, ob die Seite im Standardzustand funktioniert. Manche Prüfverfahren bewerten keine Seiten, auf denen ein Overlay-Skript läuft; klären Sie das also vorher mit Ihren Prüfern.