Barrierefreie Website testen: zehn Prüfungen, die du selbst machen kannst

Du kannst deine Website in etwa einer Stunde selbst auf Barrierefreiheit testen, mit kostenlosen Werkzeugen und ohne Vorwissen. Die zehn Prüfungen unten decken die Fehler ab, die wir in Audits am häufigsten finden, und jede sagt dir, was sie findet und was sie nicht findet.

Der Anlass ist bekannt: Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz, und für betroffene Websites ist der Maßstab WCAG 2.1 auf Stufe AA. Ob deine Seite überhaupt darunterfällt, klärt unser BFSG-Check in drei Fragen. Dieser Beitrag beginnt danach: bei der Frage, wie gut die Seite heute ist.

Was findet ein Werkzeug, und was findet es nicht?

Ein automatischer Prüfer findet zuverlässig, was sich aus dem Code ablesen lässt: fehlende Alternativtexte, fehlende Formularbeschriftungen, falsche ARIA-Rollen, zu geringe Kontraste bei einfarbigen Flächen, fehlende Sprachangaben. Er findet nicht, ob ein Alternativtext sinnvoll ist, ob die Tab-Reihenfolge der Leserichtung folgt, ob eine Fehlermeldung verständlich ist oder ob ein Text auf einem Foto lesbar bleibt.

Wie groß die Lücke ist, haben wir an unserer eigenen Website gemessen. Unser Kontrastprüfer, der die gerenderten Pixel misst, meldete über 104 Seiten null Verstöße. Am selben Abend fand axe, der Prüfer des Herstellers Deque, auf denselben Seiten eine Menürolle ohne passende Kinder, elf seitlich scrollende Tabellen ohne Tastaturzugang, Kennzahlen in Teal mit 2,8:1 und einen Link im Fließtext, der nur an der Farbe erkennbar war. Umgekehrt sieht axe kein Foto hinter einem Text und keine Glasfläche. Deshalb gehören Werkzeug und Hand zusammen, und deshalb stehen unten beide.

Prüfung 1: Kommst du mit der Tastatur überall hin?

Leg die Maus weg und drück Tab. Jedes Element, das sich klicken lässt, muss so erreichbar sein, in der Reihenfolge, in der es auf der Seite steht, und es muss immer sichtbar sein, wo du gerade bist. Enter öffnet Links und Knöpfe, die Pfeiltasten bedienen Auswahlfelder, Escape schließt Menüs und Dialoge.

Was du dabei findest: Menüs, die sich nur bei Mausberührung öffnen, Elemente ohne sichtbaren Fokusrahmen, und Dialoge, aus denen man nicht mehr herauskommt. Der Fokusrahmen ist der häufigste Befund. Viele Vorlagen entfernen ihn, weil er beim Klicken mit der Maus stört. Nach dem Web Almanac 2025 von HTTP Archive ist er auf 67 Prozent der gemessenen Seiten entfernt.

Prüfung 2: Übersteht die Seite 200 Prozent Zoom?

Drück Strg und Plus, bis der Browser 200 Prozent anzeigt. Die Seite muss lesbar bleiben, ohne dass Text abgeschnitten wird oder Elemente übereinander liegen. Danach verkleiner das Fenster auf 320 Pixel Breite, das entspricht etwa 400 Prozent Zoom auf einem Bildschirm. Auch dann darf kein Text seitlich aus dem Bild laufen, nur Tabellen und Bilder dürfen einen Scrollbereich haben.

Was du findest: feste Breiten, Texte in Kästen mit abgeschnittenen Enden, und Navigationen, die bei Vergrößerung unbrauchbar werden. Auf unserer Seite ragten bei 320 Pixeln eine Tabelle, ein zweispaltiges Raster und eine Knopfleiste über den Rand, alle drei bei 375 Pixeln unauffällig.

Prüfung 3: Reicht der Kontrast?

Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text ab etwa 24 Pixeln oder ab 19 Pixeln in Fettschrift mindestens 3:1. Für Symbole und Rahmen von Bedienelementen gelten ebenfalls 3:1. Die Entwicklerwerkzeuge von Chrome und Firefox zeigen das Verhältnis an, wenn du eine Farbe im Stil-Bereich anklickst.

Was du findest: hellgraue Hinweistexte, farbige Überschriften auf Weiß und weiße Schrift auf hellen Markenfarben. Unser eigenes Teal hat auf Weiß nur 2,8:1 und ist deshalb als Textfarbe verboten, dafür gibt es einen dunkleren Ton mit 5,5:1.

Prüfung 4: Haben Bilder einen Alternativtext, der etwas sagt?

Jedes Bild, das Inhalt trägt, braucht einen Alternativtext, der den Inhalt in einem Satz beschreibt. Rein dekorative Bilder bekommen einen leeren Alternativtext, damit die Vorlesehilfe sie überspringt. In der Praxis liest sich das so: Ein Foto des Teams heißt nicht „Bild“ oder „team-final-2.jpg“, sondern „Drei Personen im Besprechungsraum am Hamburger Standort“.

Ein Werkzeug findet fehlende Texte, aber keine schlechten. Die Prüfung von Hand: Lies nur die Alternativtexte, ohne die Bilder. Ergibt die Seite noch Sinn?

Prüfung 5: Sind Formularfelder beschriftet?

Klick auf die Beschriftung eines Feldes. Springt der Cursor ins Feld, ist die Beschriftung technisch verknüpft. Springt er nicht, fehlt die Verknüpfung, und eine Vorlesehilfe nennt nur „Eingabefeld“. Dazu gehören Fehlermeldungen, die sagen, welches Feld betroffen ist und was fehlt, statt nur ein Feld rot zu färben.

Was du findest: Platzhaltertexte, die als einzige Beschriftung dienen und beim Tippen verschwinden, Pflichtfelder ohne Kennzeichnung, und Fehlermeldungen, die nur aus Farbe bestehen. Nach dem Web Almanac 2025 sind nur 35 Prozent der Formularfelder korrekt beschriftet.

Prüfung 6: Stimmt die Überschriftenstruktur?

Eine Seite hat genau eine Hauptüberschrift, darunter folgen die Ebenen ohne Sprung: nach einer H2 kommt eine H3, keine H4. Vorlesehilfen bieten die Überschriften als Inhaltsverzeichnis an, und wer damit navigiert, merkt jeden Sprung. Die Erweiterung HeadingsMap oder die Gliederungsansicht der Entwicklerwerkzeuge zeigt die Struktur in Sekunden.

Was du findest: Überschriften, die nur wegen der Schriftgröße gewählt wurden, mehrere H1 aus Vorlagen, und Menüs, die vor der eigentlichen Überschrift eine H4 tragen.

Prüfung 7: Ist die Sprache der Seite angegeben?

Im Quelltext steht ganz oben <html lang="de">. Fehlt die Angabe oder steht dort „en“, liest eine Vorlesehilfe deutschen Text mit englischer Aussprache vor. Das ist in fünf Sekunden geprüft und in einer Minute behoben, und es fehlt trotzdem auf vielen Seiten, die sonst in Ordnung sind.

Prüfung 8: Lässt sich Bewegung anhalten?

Alles, was sich von selbst bewegt und länger als fünf Sekunden läuft, braucht eine Möglichkeit zum Anhalten: Slider, Videos, Laufschriften, animierte Hintergründe. Prüf außerdem, ob die Seite die Systemeinstellung „Bewegung reduzieren“ beachtet. Auf unserer Startseite wechseln Referenzen in einem Rahmen durch, sie halten unter der Maus an, lassen sich per Punkt anspringen und bleiben stehen, wenn das Betriebssystem weniger Bewegung wünscht.

Prüfung 9: Sind Schaltflächen groß genug?

Seit WCAG 2.2 gilt: Klickbare Elemente sollen mindestens 24 mal 24 Pixel groß sein oder genug Abstand zueinander haben. Das betrifft vor allem Symbolknöpfe, Punkte in Slidern, Kreuze zum Schließen und Links in Fußzeilen. Auf dem Handy entscheidet das darüber, ob jemand den richtigen Knopf trifft.

Was du findest: Schließen-Kreuze mit 16 Pixeln, Punkte mit 8 Pixeln und Textlinks in 11 Pixel Schrift. Unsere Slider-Punkte waren 10 Pixel groß, mit einer unsichtbaren Trefferfläche drumherum. axe misst den sichtbaren Kasten, also sind die Knöpfe jetzt 24 Pixel und der Punkt sitzt in der Mitte.

Prüfung 10: Wie klingt die Seite vorgelesen?

Zehn Minuten mit einer Vorlesehilfe zeigen mehr als jede Checkliste. Unter Windows ist NVDA kostenlos, auf dem iPhone ist VoiceOver eingebaut. Lass dir die Startseite vorlesen, spring per Überschrift durch die Seite, füll das Kontaktformular aus. Du hörst sofort, wo ein Link „hier“ heißt, wo ein Symbolknopf keinen Namen hat und wo eine Tabelle zu einem Zahlenbrei wird.

Womit prüfst du automatisch?

Zwei kostenlose Werkzeuge reichen für den Anfang. Die Browsererweiterung axe DevTools prüft die geöffnete Seite gegen die WCAG-Regeln und erklärt jeden Fund mit Codestelle und Lösung. Lighthouse in den Chrome-Werkzeugen liefert eine Barrierefreiheitswertung, die auf denselben Regeln beruht, aber weniger Fälle abdeckt. Beide finden, was im Code steht. Was sie nicht finden, steht in den zehn Prüfungen oben.

Was kein Werkzeug ist: ein Overlay. Diese Bedienleisten legen sich über die Seite und versprechen Barrierefreiheit per Skript. Sie beheben keinen der Fehler im Code, und für Menschen, die bereits assistive Technik nutzen, stören sie oft mehr, als sie helfen.

Was tun mit den Ergebnissen?

Sortier die Funde nach zwei Fragen: Sperrt der Fehler jemanden aus, oder macht er es nur mühsam? Und steckt er in einer Vorlage, die auf jeder Seite liegt, oder in einem einzelnen Inhalt? Ein fehlender Fokusrahmen sperrt Tastaturnutzer aus und liegt in der Vorlage, das ist der erste Fix. Ein schwacher Alternativtext auf einem Beitragsbild ist Inhaltspflege für später.

Was das Gesetz verlangt und wen es trifft, steht in BFSG: Wann deine Website barrierefrei sein muss. Wenn du die Funde nicht selbst beheben willst oder die Seite ohnehin neu gebaut wird, prüfen wir sie vollständig und setzen die Ergebnisse im Code um: Barrierefreie Website nach BFSG.

Quellen

• Web Content Accessibility Guidelines 2.1 (W3C)
• Web Content Accessibility Guidelines 2.2 (W3C)
• Barrierefreiheitsstärkungsgesetz im Volltext (BFSG)
• W3C Web Accessibility Initiative: Easy Checks
• axe-core von Deque, Prüfregeln als offener Quellcode
• NVDA, kostenlose Vorlesehilfe für Windows
• HTTP Archive: Web Almanac 2025, Kapitel Accessibility