Barrierefreie Website testen: 12 Prüfungen in je zwei Minuten
Sie brauchen kein Werkzeug und keine Schulung, um die häufigsten Barrieren auf Ihrer eigenen Website zu finden — Sie brauchen eine Tastatur, einen Browser und eine halbe Stunde. Laut WebAIM Million Report 2026 haben 95,9 % der meistbesuchten Startseiten mindestens einen automatisch erkennbaren Fehler; Kontraste, Alternativtexte und Formularbeschriftungen führen die Liste an — und genau die decken die zwölf Prüfungen hier ab. Jede Prüfung steht mit dem WCAG-Kriterium dabei, das sie abdeckt, und mit dem, was ein Durchfaller praktisch bedeutet. Für alle, die vor einem Angebot wissen wollen, worüber sie eigentlich reden.
Bevor Sie anfangen
Drei Dinge, die die halbe Stunde effizienter machen.
Wählen Sie fünf Seiten, keine fünfzig. Startseite, eine typische Inhaltsseite, eine Übersichtsseite, das Kontaktformular und — falls vorhanden — die Bestell- oder Buchungsstrecke. Was auf diesen fünf durchfällt, fällt fast immer auf allen durch, weil dieselben Bausteine überall stecken.
Schreiben Sie mit. Ein Zweispalter reicht: Seite und Fundstelle. Diese Liste ist später Ihr Leistungsverzeichnis.
Fangen Sie mit dem Cookie-Banner an. Es ist das Erste, was jeder Besucher sieht, und es fällt nach unserer Erfahrung bei den Prüfungen 1 bis 3 besonders oft durch. Wenn es nicht mit der Tastatur schließbar ist, endet der Besuch für einen Teil Ihrer Nutzer genau dort.
Die zwölf Prüfungen im Überblick
- 1. Einmal mit Tab durch die Seite — kommen Sie überall hin und wieder heraus?
- 2. Sehen Sie bei jedem Tab-Schritt, wo Sie sind?
- 3. Bleibt der Fokus sichtbar, oder verdeckt ihn ein Banner?
- 4. Auf 200 % zoomen — bleibt alles lesbar und bedienbar?
- 5. Fenster auf 320 Pixel Breite ziehen — muss man seitlich scrollen?
- 6. Textkontrast: mindestens 4,5:1, bei großem Text 3:1
- 7. Kontrast von Bedienelementen und Symbolen: mindestens 3:1
- 8. Alternativtexte: Bilder ausschalten und lesen, was übrig bleibt
- 9. Überschriften: ergeben sie allein gelesen eine Gliederung?
- 10. Formulare: sichtbares Label an jedem Feld, verständliche Fehlermeldung
- 11. Klick- und Tippziele mindestens 24 × 24 Pixel
- 12. Videos mit Untertiteln, PDFs mit Struktur oder HTML-Alternative
1. Tastaturbedienung — einmal mit Tab durch
So testen Sie es: Klicken Sie einmal in die Adresszeile, drücken Sie dann nur noch Tab (zurück: Umschalt + Tab), Enter und die Leertaste. Gehen Sie so durch die ganze Seite: Navigation, Cookie-Banner, Suche, Akkordeons, Karussell, Formular, Footer.
Was ein Durchfaller bedeutet: Erreichen Sie ein Element nicht, existiert es für jeden nicht, der keine Maus benutzen kann — aus motorischen Gründen, wegen einer vorübergehenden Verletzung oder weil ein Screenreader im Spiel ist. Kommen Sie irgendwo hinein, aber nicht wieder heraus (klassisch: ein Video-Einbettung, ein modales Fenster, ein Cookie-Banner), ist die Seite ab dort zu Ende.
Abgedeckt: WCAG 2.2, SC 2.1.1 Keyboard (Stufe A) und SC 2.1.2 No Keyboard Trap (Stufe A).
Achten Sie besonders auf: Cookie-Banner, Dropdown-Menüs, selbstgebaute Auswahlfelder, Modals, Karussell-Pfeile, „Mehr laden“-Schaltflächen.
2. Sichtbarer Fokus — sehen Sie, wo Sie sind?
So testen Sie es: Derselbe Tab-Durchgang wie in Prüfung 1, aber mit der Frage: Ist bei jedem Schritt erkennbar, welches Element gerade dran ist? Ein Rahmen, eine Umrandung, eine Farbänderung — irgendetwas muss sich sichtbar verändern.
Was ein Durchfaller bedeutet: Ohne sichtbaren Fokus ist Tastaturbedienung Blindflug. Sie drücken Enter und wissen nicht, was passiert. Das ist der Fehler, der am häufigsten mit Absicht entsteht: Der unsichtbare Fokus ist eine gestalterische Entscheidung, die jemand einmal getroffen hat, weil der Standardrahmen des Browsers nicht ins Layout passte.
Abgedeckt: WCAG 2.2, SC 2.4.7 Focus Visible (Stufe AA).
Achten Sie besonders auf: Schaltflächen mit farbigem Hintergrund — dort verschwindet ein dunkler Fokusrahmen gern im Untergrund.
3. Fokus nicht verdeckt — bleibt er sichtbar?
So testen Sie es: Scrollen Sie in die Mitte einer langen Seite und tabben Sie dort weiter. Beobachten Sie, ob das gerade fokussierte Element unter einer fixierten Kopfzeile, einem Cookie-Banner oder einer Chat-Schaltfläche verschwindet.
Was ein Durchfaller bedeutet: Der Fokus ist da, aber unsichtbar — praktisch derselbe Effekt wie Prüfung 2, nur schwerer zu finden, weil er nur an bestimmten Scrollpositionen auftritt. Typisch bei fixierten Kopfzeilen, die beim Tabben nicht mitrechnen.
Abgedeckt: WCAG 2.2, SC 2.4.11 Focus Not Obscured (Minimum) (Stufe AA, neu in WCAG 2.2).
4. Zoom auf 200 % — bleibt alles lesbar?
So testen Sie es: Strg + Plus (Mac: Cmd + Plus) so oft drücken, bis der Browser 200 % anzeigt. Dann durch die Seite scrollen und prüfen: Ist alles noch da? Überlappt nichts? Sind alle Schaltflächen noch erreichbar?
Was ein Durchfaller bedeutet: Vergrößern ist keine Randerscheinung — es zoomen nicht nur Menschen mit Sehbehinderung, sondern viele, die auf einem großen Monitor aus Entfernung lesen. Wenn Text bei 200 % abgeschnitten wird, hinter anderen Elementen verschwindet oder in einem Kasten mit fester Höhe stecken bleibt, geht Inhalt verloren.
Abgedeckt: WCAG 2.2, SC 1.4.4 Resize Text (Stufe AA) — Text muss sich auf 200 % vergrößern lassen „without loss of content or functionality“.
Achten Sie besonders auf: Kästen mit fester Pixelhöhe, Tabellen, Preisboxen, Buttons mit Text in einer Zeile.
5. Umbruch bei 320 Pixeln — muss man seitlich scrollen?
So testen Sie es: Ziehen Sie das Browserfenster so schmal wie möglich, oder zoomen Sie auf einem 1280-Pixel-Bildschirm auf 400 %. Beides ergibt rechnerisch dieselbe Situation wie ein kleines Smartphone. Dann: Müssen Sie nach rechts scrollen, um einen Satz zu Ende zu lesen?
Was ein Durchfaller bedeutet: Horizontales Scrollen beim Lesen ist die zuverlässigste Art, eine Seite unbenutzbar zu machen — jede Zeile braucht zwei Scrollbewegungen. Auf Telefonen trifft es alle, nicht nur Nutzer mit Einschränkungen.
Abgedeckt: WCAG 2.2, SC 1.4.10 Reflow (Stufe AA) — Inhalt muss sich bei 320 CSS-Pixeln Breite ohne Scrollen in zwei Richtungen darstellen lassen.
Achten Sie besonders auf: breite Tabellen, eingebettete Karten, Code-Blöcke, Bilder mit fester Breite. Tabellen dürfen in einem eigenen scrollbaren Bereich stecken — die Seite selbst darf nicht seitlich scrollen.
6. Textkontrast — 4,5:1, bei großem Text 3:1
So testen Sie es: Rechtsklick auf einen Text, „Untersuchen“, dann im Stil-Bereich auf das kleine Farbfeld neben der Textfarbe klicken. Chrome und Firefox zeigen dort den Kontrastwert und markieren, ob er die AA-Schwelle erreicht. Prüfen Sie drei Stellen: Fließtext, graue Hilfstexte, Text auf farbigen Flächen.
Was ein Durchfaller bedeutet: Zu schwacher Kontrast ist der mit Abstand häufigste Fehler im WebAIM-Bericht. Er trifft nicht nur Menschen mit Sehbehinderung, sondern jeden bei Sonnenlicht auf dem Telefon — und er ist meist in einer einzigen Zeile Gestaltungsdefinition behoben.
Abgedeckt: WCAG 2.2, SC 1.4.3 Contrast (Minimum) (Stufe AA): mindestens 4,5:1, bei großem Text (ab etwa 24 Pixel oder 19 Pixel fett) mindestens 3:1.
Achten Sie besonders auf: hellgraue Fließtexte, Platzhaltertext in Formularfeldern, weiße Schrift auf hellen Markenfarben, Text über Bildern.
7. Kontrast von Bedienelementen — 3:1
So testen Sie es: Dieselbe Methode wie in Prüfung 6, aber diesmal nicht auf Text angewendet, sondern auf die Ränder von Eingabefeldern, auf Symbole ohne Beschriftung, auf Schaltflächenumrisse und auf den Fokusrahmen selbst.
Was ein Durchfaller bedeutet: Ein Eingabefeld, dessen Rand man nicht sieht, ist ein Eingabefeld, das man nicht findet. Dieser Punkt wird fast immer übersehen, weil er nicht nach „Text“ aussieht — er betrifft die Bedienbarkeit direkt.
Abgedeckt: WCAG 2.2, SC 1.4.11 Non-text Contrast (Stufe AA): mindestens 3:1 gegenüber angrenzenden Farben.
Achten Sie besonders auf: Eingabefelder mit hellgrauem Rand auf weißem Grund, Icon-Schaltflächen ohne Beschriftung, Häkchen in Auswahlkästchen, Diagrammfarben.
8. Alternativtexte — schalten Sie die Bilder aus
So testen Sie es: Zwei Minuten, zwei Wege. Schneller Weg: Rechtsklick auf ein Bild, „Untersuchen“, und im Markup nachsehen, ob ein alt-Attribut vorhanden ist und was drinsteht. Gründlicher Weg: In den Browsereinstellungen das Laden von Bildern abschalten und die Seite neu laden — was dann übrig bleibt, ist das, was ein Screenreader vorliest.
Was ein Durchfaller bedeutet: Ein fehlendes alt-Attribut lässt Screenreader den Dateinamen vorlesen. Ein alt="Bild" oder alt="Header-Grafik" ist genauso wertlos wie keines. Und der teuerste Fall: ein Bild, das eine Information trägt, die nirgends sonst steht — ein Preis, ein Datum, ein Ablaufdiagramm.
Die Regel, an der die meisten scheitern: Der Alternativtext beschreibt nicht das Bild, sondern transportiert seinen Zweck. Ein rein dekoratives Bild bekommt ein leeres alt="" — das ist richtig, nicht faul. Ein Bild, das eine Aussage trägt, bekommt diese Aussage als Text.
Abgedeckt: WCAG 2.2, SC 1.1.1 Non-text Content (Stufe A).
9. Überschriften — ergeben sie allein gelesen eine Gliederung?
So testen Sie es: Rechtsklick, „Seitenquelltext anzeigen“, dann im Quelltext nach <h1, <h2, <h3 suchen und die gefundenen Texte in dieser Reihenfolge lesen. Alternativ öffnen Sie in den Entwicklerwerkzeugen die Suche und geben h1, h2, h3, h4 ein.
Zwei Fragen dabei: Gibt es genau eine H1? Und folgt die Nummerierung ohne Sprünge — also nie H2 direkt gefolgt von H4?
Was ein Durchfaller bedeutet: Screenreader-Nutzer springen von Überschrift zu Überschrift, so wie Sehende die Seite überfliegen. Ist die Struktur nach Schriftgröße statt nach Bedeutung gewählt, ist dieser Weg kaputt — die Seite lässt sich nur noch von oben nach unten linear abhören. Bei einer langen Seite ist das der Unterschied zwischen zwanzig Sekunden und fünf Minuten.
Abgedeckt: WCAG 2.2, SC 1.3.1 Info and Relationships (Stufe A) und SC 2.4.6 Headings and Labels (Stufe AA). Genau eine H1 und Ebenen ohne Sprünge verlangen beide nicht wörtlich — es ist die bewährte Art, die geforderte Gliederung abzubilden.
Häufigster Fund: eine H3, die nur deshalb H3 ist, weil H2 zu groß aussah.
10. Formulare — Label und Fehlermeldung
So testen Sie es: Drei Handgriffe pro Formular. Erstens: Klicken Sie auf den Beschriftungstext neben einem Feld — springt der Cursor ins Feld, ist das Label korrekt verknüpft. Zweitens: Tippen Sie etwas ins Feld — verschwindet die Beschriftung dabei, war sie nur ein Platzhalter und kein Label. Drittens: Schicken Sie das Formular absichtlich falsch ab und lesen Sie die Fehlermeldung.
Was ein Durchfaller bedeutet: Ohne verknüpftes Label sagt der Screenreader „Eingabefeld“ und sonst nichts. Bei Platzhaltertext als einziger Beschriftung wissen auch Sehende nach dem Tippen nicht mehr, was in dem Feld stehen sollte. Und eine Fehlermeldung wie „Ungültige Eingabe“ ohne Angabe des betroffenen Feldes ist in einem zehnfeldrigen Formular eine Sackgasse.
Die Fehlermeldung muss drei Dinge tun: das Feld benennen, den Fehler benennen, den Weg heraus zeigen. „Bitte geben Sie eine Telefonnummer mit Vorwahl ein, zum Beispiel 09075 5923957“ statt „Ungültig“.
Abgedeckt: SC 3.3.2 Labels or Instructions (Stufe A), SC 3.3.1 Error Identification (Stufe A), SC 3.3.3 Error Suggestion (Stufe AA).
Wichtig bei Shops: § 19 BFSGV nennt Identifizierungs-, Authentifizierungs-, Sicherheits- und Zahlungsfunktionen ausdrücklich. Der Checkout ist kein Randbereich, sondern Pflichtumfang.
11. Zielgrößen — 24 × 24 Pixel
So testen Sie es: Rechtsklick auf eine kleine Schaltfläche, „Untersuchen“ — der Browser zeigt beim Überfahren die Maße des Elements an. Prüfen Sie die kleinsten Ziele auf der Seite: Schließen-Kreuze, Symbole in der Fußzeile, Pfeile im Karussell, Sternebewertungen, Häkchen.
Was ein Durchfaller bedeutet: Zu kleine Ziele treffen Menschen mit Tremor, Menschen im fahrenden Zug und jeden mit großen Fingern auf einem kleinen Display. Der Fehler tritt am häufigsten beim Schließen-Kreuz von Bannern und Modals auf — also genau dort, wo man ihn am wenigsten gebrauchen kann.
Abgedeckt: WCAG 2.2, SC 2.5.8 Target Size (Minimum) (Stufe AA, neu in WCAG 2.2): mindestens 24 × 24 CSS-Pixel, mit Ausnahmen unter anderem für ausreichend weit auseinanderliegende Ziele und für Links im Fließtext.
12. Videos und PDFs — die beiden teuren Nachzügler
So testen Sie Videos: Spielen Sie jedes eingebettete Video an und schalten Sie die Untertitel ein. Gibt es keine, ist der Punkt beantwortet. Gibt es automatisch erzeugte, lesen Sie dreißig Sekunden mit — automatische Untertitel scheitern zuverlässig an Eigennamen, Fachbegriffen und Zahlen.
Was ein Durchfaller bedeutet: Ohne Untertitel ist der Inhalt für gehörlose und schwerhörige Nutzer nicht zugänglich — und für alle, die das Video ohne Ton im Büro oder in der Bahn ansehen.
Abgedeckt: WCAG 2.2, SC 1.2.2 Captions (Prerecorded) (Stufe A).
So testen Sie PDFs: Öffnen Sie das Dokument und versuchen Sie, Text mit der Maus zu markieren. Geht das nicht, ist es ein Scan ohne Textebene — für Screenreader ein leeres Blatt. Geht es, prüfen Sie zusätzlich, ob im Dokument eine Überschriftenstruktur und Lesezeichen vorhanden sind.
Was ein Durchfaller bedeutet: Ein gescanntes PDF ist der härteste Fall überhaupt, weil dort kein einziges Wort ankommt. Ein getaggtes PDF nachzurüsten ist Handarbeit pro Dokument — bei größeren Beständen ist es fast immer günstiger, die wichtigsten Dokumente als HTML-Seite neu zu bauen, als sie zu sanieren.
Die gute Nachricht steht im Gesetz: Nach § 1 Abs. 4 BFSG sind aufgezeichnete zeitbasierte Medien und Dateiformate von Büro-Anwendungen ausgenommen, die vor dem 28. Juni 2025 veröffentlicht wurden. Ihr Bestand von damals muss nicht rückwirkend saniert werden. Was Sie danach veröffentlichen, fällt unter die Anforderungen; ein altes Dokument, das Sie überarbeitet neu hochladen, behandeln Sie sicherheitshalber wie ein neues.
Was Sie mit der Fundstellenliste machen
Sortieren Sie nach Wirkung, nicht nach Aufwand. Die Reihenfolge, die sich bei uns bewährt hat:
- Alles, was in einem Baustein steckt, zuerst. Fokusdarstellung, Kontraste, Formularbeschriftungen — einmal korrigiert, auf allen Seiten behoben.
- Dann die Abschlussstrecke. Formular, Login, Checkout. Dort hängt Umsatz, und dort ist der Pflichtumfang nach § 19 BFSGV am eindeutigsten.
- Dann die Inhalte. Alternativtexte und Linktexte kann Ihre Redaktion über Wochen verteilt selbst nacharbeiten.
- Zuletzt Dokumente und Medien. Der aufwendigste und meist kleinste Hebel — und der, bei dem die gesetzlichen Ausnahmen am meisten sparen.
Was Sie danach haben, ist kein Prüfbericht. Aber es ist die Grundlage für ein Gespräch über Aufwand statt über Pauschalen — die Rechnung dazu steht in Was eine barrierefreie Website kostet.
Häufig gestellte Fragen
Nein. Er findet die häufigsten Fehler, aber er ersetzt weder eine vollständige Prüfung gegen alle AA-Kriterien noch die Informationen nach Anlage 3 BFSG, die das Gesetz von betroffenen Dienstleistungserbringern verlangt. Er ist die Vorarbeit, mit der Sie den Umfang einschätzen — und die Grundlage, um ein Angebot zu beurteilen.
Für diese zwölf Prüfungen nicht. Elf davon laufen mit Tastatur und Browser, die zwölfte mit einem PDF-Reader. Ein Screenreader-Durchlauf findet zusätzliche Dinge — vor allem, ob Vorgelesenes überhaupt Sinn ergibt — aber er ist nicht der erste Schritt, sondern der dritte.
Nach jeder wesentlichen Änderung. § 14 Abs. 3 BFSG verlangt von betroffenen Dienstleistungserbringern, dass die Anforderungen stets erfüllt sind, nicht nur einmal zum Stichtag. Praktisch heißt das: nach jedem Relaunch, nach jedem neuen Seitentyp, nach jeder Änderung am Formular oder am Checkout. Für laufende Inhalte reicht es, wenn die Redaktion die Regeln kennt.
Nützlich als erster Durchlauf, aber sie sehen nur einen Teil. Ob ein Alternativtext das Bild vermittelt, ob die Fokusreihenfolge einem Sinn folgt, ob eine Fehlermeldung weiterhilft — das kann kein Werkzeug beurteilen. Nehmen Sie die automatische Prüfung als Vorsortierung und die zwölf Handgriffe hier als das, was sie nicht kann.
Nein. Die Überwachungsstellen von Bund und Ländern halten in einer gemeinsamen Einschätzung fest, dass ein Overlay einen nicht barrierefreien Auftritt „nicht zwingend barrierefrei“ macht — formuliert für öffentliche Stellen, technisch gilt es für jede Website. Fahren Sie die zwölf Prüfungen einmal mit eingeschaltetem Overlay — in der Regel bestehen Sie damit genauso wenige wie ohne.
Es ist der schlimmste Ort für einen Durchfaller, weil er vor allem anderen kommt. Ein Banner, das sich nicht mit der Tastatur schließen lässt, macht die gesamte Seite unbenutzbar, egal wie gut der Rest ist. Wenn Sie nach diesem Test nur eine Sache reparieren, dann diese.
Wann sich Unterstützung lohnt
Wenn der Durchgang eine Handvoll Fundstellen ergibt und jemand im Haus Templates anfassen kann, kommen Sie selbst weit. Sinnvoll wird Hilfe, wenn:
- die Liste länger ist als eine Bildschirmseite und die Reihenfolge unklar ist
- Checkout, Login oder eine Bezahlstrecke durchfallen
- dieselben Fehler auf jeder Seite wieder auftauchen — dann sitzt die Ursache im Baustein, nicht im Inhalt
- Sie einen Nachweis brauchen, den Sie vorlegen können
- Ihr CMS die barrierefreie Ausgabe technisch nicht hergibt
