Barrierefreie Website testen: 10 Prüfungen zum Selbermachen

Barrierefreie Website oder nicht? Die wichtigsten Barrieren finden Sie in einer Stunde selbst: mit der Tastatur, dem Zoom Ihres Browsers und zwei kostenlosen Werkzeugen. Die zehn Prüfungen unten decken ab, woran Menschen ohne Maus, mit Sehschwäche oder mit Screenreader am häufigsten scheitern. Alle zehn eignen sich zum Selbermachen. Sie ersetzen kein Audit nach EN 301 549. Aber Sie wissen danach, wo Ihre Website steht und womit Sie anfangen. Jede Prüfung nennt das passende Kriterium der WCAG 2.2, des Standards, auf den sich das Barrierefreiheitsstärkungsgesetz (BFSG) stützt.

Warum selbst testen

Seit dem 28. Juni 2025 gilt das BFSG für Websites und Apps, über die Verbraucher Verträge schließen: Onlineshops, Buchungen, Terminvereinbarungen mit Vertrag. Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Mio. € Jahresumsatz oder Bilanzsumme sind bei Dienstleistungen ausgenommen. Zuständig für die Aufsicht ist die gemeinsame Marktüberwachungsstelle der Länder in Magdeburg. Dort kann jeder Barrieren melden.

Auch ohne Pflicht lohnt der Blick: Eine Website, die mit der Tastatur funktioniert und gut lesbar ist, funktioniert für alle besser. Am Smartphone in der Sonne, mit Lesebrille, mit einer Hand am Kinderwagen.

Was automatische Werkzeuge leisten

Werkzeuge wie WAVE (öffnet in neuem Tab) oder die Browser-Erweiterung axe DevTools prüfen eine Seite in Sekunden. Sie finden fehlende Alternativtexte, zu schwache Kontraste und Formularfelder ohne Beschriftung. Das ist ein guter Anfang.

Aber nicht mehr. Der Hersteller Deque hat ausgewertet, dass automatische Tests rund 57 % der Probleme finden, gemessen an der Menge. Der britische Government Digital Service hat 2017 zehn Werkzeuge auf eine Testseite mit 143 eingebauten Barrieren losgelassen. Alle zusammen fanden 71 %. Ob ein Alternativtext das Bild sinnvoll beschreibt oder ob man aus einem Menü wieder herauskommt, kann nur ein Mensch beurteilen. Deshalb setzen die zehn Prüfungen auf Ihre Hände und Augen.

Die zehn Prüfungen

Haken Sie ab, was Ihre Website besteht. Der Stand bleibt in Ihrem Browser gespeichert, Sie können also zwischendurch aufhören.

Zum Abhaken

Barrierefreiheit selbst testen: 10 Prüfungen

Nehmen Sie sich die Startseite und eine wichtige Unterseite vor, etwa das Kontaktformular oder ein Produkt. Haken setzen, wenn beide Seiten die Prüfung bestehen.

0 von 10 Prüfungen bestanden

1. Prüfung 1Alles mit der Tastatur erreichbar

   Maus zur Seite legen. Mit der Tabulatortaste vorwärts, mit Umschalt und Tab zurück, mit Enter auslösen. Kommen Sie an jeden Link, jeden Knopf, jedes Menü und wieder heraus?

   WCAG 2.1.1 Tastatur (Stufe A)

2. Prüfung 2Fokus immer sichtbar und nicht verdeckt

   Sehen Sie bei jedem Tab-Schritt einen deutlichen Rahmen um das aktive Element? Verschwindet er nie hinter einer festen Kopfzeile oder einem Banner?

   WCAG 2.4.7 Fokus sichtbar und 2.4.11 Fokus nicht verdeckt (Stufe AA)

3. Prüfung 3Cookie-Banner kommt zuerst und lässt sich bedienen

   Seite neu laden und sofort Tab drücken. Landet der Fokus im Banner, und können Sie ablehnen oder zustimmen, ohne erst durch die ganze Seite zu tabben?

   WCAG 2.4.3 Fokus-Reihenfolge (Stufe A)

4. Prüfung 4Zoom auf 400 % ohne seitliches Scrollen

   Mit Strg und Plus (Mac: Cmd und Plus) auf 200 % und dann 400 % vergrößern. Ist noch alles lesbar und bedienbar, ohne dass Sie nach rechts scrollen müssen?

   WCAG 1.4.4 Text vergrößern und 1.4.10 Umfließen (Stufe AA)

5. Prüfung 5Kontraste reichen

   Hellgraue Schrift auf Weiß ist der Klassiker. Prüfen Sie Text und Knöpfe mit dem Contrast Checker von WebAIM: Fließtext braucht 4,5 zu 1, große Schrift und Bedienelemente 3 zu 1.

   WCAG 1.4.3 Kontrast und 1.4.11 Nicht-Text-Kontrast (Stufe AA)

6. Prüfung 6Bilder haben sinnvolle Alternativtexte

   WAVE zeigt jedes Bild mit seinem Alternativtext. Beschreibt der Text, was das Bild für die Seite bedeutet? Reine Schmuckbilder dürfen einen leeren Alternativtext haben.

   WCAG 1.1.1 Nicht-Text-Inhalte (Stufe A)

7. Prüfung 7Überschriften bilden eine Gliederung

   Gibt es genau eine Hauptüberschrift, und folgen die Zwischenüberschriften einer Ordnung? WAVE zeigt die Gliederung unter „Structure“. Fett gesetzter Text ist keine Überschrift.

   WCAG 1.3.1 Info und Beziehungen (A) und 2.4.6 Überschriften und Beschriftungen (AA)

8. Prüfung 8Formulare sind beschriftet und erklären Fehler

   Hat jedes Feld eine sichtbare Beschriftung, nicht nur einen grauen Platzhalter? Schicken Sie das Formular leer ab: Steht beim Feld in Worten, was fehlt, nicht nur ein roter Rahmen?

   WCAG 3.3.2 Beschriftungen und 3.3.1 Fehlererkennung (Stufe A)

9. Prüfung 9Links sagen, wohin sie führen

   Lesen Sie nur die Linktexte. Verstehen Sie, wohin jeder führt? „Hier klicken“ und dreimal „Mehr erfahren“ nebeneinander helfen niemandem, der sich Links vorlesen lässt.

   WCAG 2.4.4 Linkzweck im Kontext (Stufe A)

10. Prüfung 10Videos haben Untertitel, Bewegung lässt sich anhalten

    Haben Videos mit Ton Untertitel? Lassen sich Slider, Lauftexte und Animationen, die länger als 5 Sekunden laufen, anhalten?

    WCAG 1.2.2 Untertitel und 2.2.2 Pausieren, Beenden, Ausblenden (Stufe A)

Schnellcheck anfragen↗ Ihr Stand und die offenen Punkte stehen schon in der Nachricht.

Ein Beispiel aus der Praxis

Bei Lang Maschinenpark habe ich die Website vollständig nach EN 301 549 geprüft. Drei Befunde hätten Sie mit den Prüfungen oben selbst gefunden:

• Prüfung 1: Die Karten des Themes ließen sich nicht mit der Tastatur ansteuern. Wer ohne Maus surft, kam an Teile des Angebots nicht heran.
• Prüfung 3: Der Cookie-Banner hatte keinen Fokus-Trap und war im Quelltext weit unten eingebunden. Wer mit der Tastatur unterwegs war, musste erst durch die ganze Seite, bevor er den Banner erreichte.
• Für den Screenreader: Ein Hinweis wie „nicht verfügbar“ blieb stumm. Dafür braucht es den Test mit Screenreader unten.

Wie sich der Befund zum Cookie-Banner anfühlt, zeigt diese schematische Demo:

StartAngebotServiceKontakt

Karte 1Karte 2Karte 3

ImpressumDatenschutzKarriere

Cookies Alle akzeptieren Nur notwendige

Tab ×0

Ohne Fokus-Trap Mit Fokus-Trap (so sollte es sein)

Die Agentur Rocks Online und ich haben die Befunde danach gemeinsam abgearbeitet, einen nach dem anderen.

Fünf Minuten mit dem Screenreader

Wer eine Prüfung mehr machen will: Schalten Sie einen Screenreader ein und hören Sie sich Ihre Startseite an. Auf dem Mac startet VoiceOver mit Cmd und F5. Unter Windows ist NVDA (öffnet in neuem Tab) kostenlos. Auf Android heißt der eingebaute Screenreader TalkBack.

Es wird sich ungewohnt anfühlen, und die Stimme ist schneller, als Ihnen lieb ist. Achten Sie nur auf drei Dinge: Wird die Seite in der richtigen Sprache vorgelesen? Ergeben die Linktexte allein einen Sinn? Erfahren Sie, wenn sich etwas auf der Seite ändert, etwa eine Fehlermeldung im Formular?

Wo Selbsttests an Grenzen stoßen

• Sie prüfen Stichproben. Zwei Seiten sind nicht die ganze Website. Vorlagen wiederholen sich aber, ein Fehler im Menü steckt meist auf jeder Seite.
• Manche Kriterien brauchen Erfahrung. Ob eine Fehlermeldung für Screenreader angesagt wird oder ob die Lesereihenfolge stimmt, ist ohne Übung schwer zu beurteilen.
• Ein Selbsttest ist kein Nachweis. Für das BFSG müssen Sie Informationen zur Barrierefreiheit veröffentlichen, die beschreiben, wie Ihre Website die Anforderungen erfüllt. Dafür ist ein Audit nach EN 301 549 die solide Grundlage.

So fangen Sie an

Nehmen Sie sich diese Woche eine Stunde, Ihre Startseite und das Kontaktformular. Gehen Sie die zehn Prüfungen durch und notieren Sie, was hakt. Die meisten Befunde aus den Prüfungen 1 bis 3 und 8 kann die Agentur oder Person, die Ihre Website betreut, gezielt beheben. Wie das mit dem Gesetz zusammenhängt, erklärt der Artikel Was bedeutet digitale Barrierefreiheit für Unternehmen?

Wenn Sie eine zweite Meinung möchten: Ich biete einen Schnellcheck und Audits nach EN 301 549 an, für kleine Betriebe und für Agenturen.