Die meisten Checklisten zu diesem Thema sind nach Regelwerk sortiert: Erfolgskriterium 1.4.3, Stufe AA, und daneben ein Satz, den man nur versteht, wenn man ihn ohnehin schon kannte. Das hilft beim Nachweisen, aber nicht beim Nachschauen.
Diese Liste ist deshalb anders sortiert: nach der Art, wie geprüft wird. Alles, was Sie mit der Tastatur finden, steht zusammen. Alles, was Sie mit den Augen finden, steht zusammen. Sie brauchen kein Prüfprogramm, keine Erweiterung und keine Vorkenntnisse — einen Rechner, ein Handy und etwa eine Stunde.
Wie Sie diese Liste durcharbeiten
Prüfen Sie nicht die ganze Website, sondern je einen Vertreter jeder Seitenart: Startseite, eine Leistungsseite, ein Blogbeitrag, die Kontaktseite und, falls vorhanden, eine Produkt- und die Kassenseite. Was auf einer Leistungsseite kaputt ist, ist auf allen kaputt, weil sie aus derselben Vorlage kommen.
Schreiben Sie jeden Fund mit Seite und Stelle auf, statt sofort etwas zu ändern. Eine Liste mit zwölf konkreten Zeilen ist ein Arbeitsauftrag, den jede Agentur abarbeiten kann. „Die Seite ist nicht barrierefrei“ ist keiner. Die sechs Blöcke sind:
- Bedienung nur mit der Tastatur — der aufwendigste Block und der, der am meisten findet
- Kontrast und Schriftgröße — mit den Augen, am besten draußen
- Struktur und Überschriften — indem Sie die Seite überfliegen statt lesen
- Bilder und Alternativtexte — eine Bestandsaufnahme, keine Messung
- Formulare und Fehlermeldungen — der Block, der direkt Anfragen kostet
- Medien und Bewegung — Video, Karussell, Animation
1. Bedienung nur mit der Tastatur
Schieben Sie die Maus außer Reichweite. Nicht danebenlegen — außer Reichweite, sonst greifen Sie nach fünf Minuten unbewusst danach. Sie brauchen die Tabulatortaste zum Vorwärtsspringen, Umschalt plus Tabulator zurück, Enter und Leertaste zum Auslösen, die Pfeiltasten in Auswahllisten und Escape zum Schließen.
- Startseite neu laden, einmal Tabulator drücken. Erscheint zuerst ein Sprunglink wie „Zum Inhalt springen“? Er ist keine Pflicht, aber ohne ihn tabben Sie auf jeder Unterseite erst durch das komplette Menü, bevor Sie am Text ankommen
- Falls ein Cookie-Banner erscheint: Erreichen Sie „Ablehnen“ mit der Tastatur, und liegt es genauso nah wie „Alle akzeptieren“? Lässt sich der Banner überhaupt verlassen, ohne zu klicken?
- Tabben Sie durch die Kopfzeile und sehen Sie bei jedem Schritt hin. Schauen Sie einmal bewusst weg und wieder hin: Finden Sie in einer Sekunde wieder, wo Sie stehen? Ein kaum erkennbarer Farbwechsel reicht dafür nicht
- Untermenüs: Öffnen sie sich per Tastatur, erreichen Sie die Punkte darin, und schließen sie wieder — mit Escape oder indem Sie weitertabben?
- Achten Sie auf die Reihenfolge. Folgt der Fokus dem, was Sie sehen, oder springt er mitten im Text in die Fußzeile und wieder zurück?
- Achten Sie auf Leerlauf: Drücken Sie mehrfach Tabulator, ohne dass sich sichtbar etwas bewegt? Dann steht der Fokus in etwas Ausgeblendetem — einem geschlossenen Menü, einem verborgenen Slider. Für jemanden ohne Maus ist das eine Sackgasse
- Öffnen Sie ein Pop-up oder eine Bildergalerie. Landet der Fokus darin, bleibt er darin, und kommen Sie mit Escape wieder heraus? Und landet er danach dort, wo Sie vorher waren, statt am Seitenanfang?
- Prüfen Sie alles, was aussieht wie ein Bedienelement, aber keines ist: Akkordeon-Aufklapper, Reiter, Filter, Sternebewertungen, Mengen-Plus-und-Minus. Reagieren sie auf Enter und auf die Leertaste?
- Karussells und Slider: Kommen Sie an alle Inhalte, auch an die gerade nicht sichtbaren Folien?
- Gehen Sie ins Kontaktformular. Von Feld zu Feld, Auswahllisten mit den Pfeiltasten, Datumsfeld ohne Kalender-Klick, die Datenschutz-Checkbox mit der Leertaste
- Schicken Sie das Formular einmal wirklich ab. Wohin springt der Fokus danach? Erfahren Sie ohne Scrollen, dass es geklappt hat?
- Wiederholen Sie die Runde einmal auf einer Unterseite und einmal auf dem Handy mit einer angeschlossenen Tastatur, falls Sie eine haben
Zwei Funde sind mit Abstand die häufigsten: ein Fokus, den der Entwurf „weil er stört“ unsichtbar gemacht hat, und ein Overlay, aus dem man ohne Maus nicht mehr herauskommt. Beide sind vergleichsweise schnell zu beheben — vorausgesetzt, jemand weiß, dass es sie gibt.
Das betrifft nicht nur Menschen, die keine Maus benutzen können. Es betrifft jeden, dessen Trackpad gerade streikt, jeden, der ein Formular schnell mit der Tastatur durchfüllt, und jeden, der Ihre Seite über eine Fernbedienung oder ein Auto-Display ansieht.
2. Kontrast und Schriftgröße
Dieser Block geht am schnellsten und wird am seltensten ernst genommen, weil das Problem am eigenen Bildschirm im abgedunkelten Büro nie auftritt.
- Gehen Sie mit dem Handy nach draußen und lesen Sie Ihren Fließtext bei Tageslicht. Hellgrau auf Weiß fällt hier sofort durch
- Machen Sie einen Screenshot und sehen Sie ihn in Graustufen an — auf dem Handy über einen Schwarz-Weiß-Filter, am Rechner über die Druckvorschau in Graustufen. Was dabei verschwindet, war nur durch Farbe unterscheidbar
- Text auf Fotos und Farbverläufen ist der schwierigste Fall, weil der Kontrast von Bildstelle zu Bildstelle wechselt. Prüfen Sie hier die hellste Stelle hinter dem Text, nicht den Durchschnitt
- Sind Links im Fließtext auch ohne Farbe erkennbar, also unterstrichen oder deutlich hervorgehoben?
- Der Platzhaltertext in Formularfeldern ist fast immer zu hell. Er ist gleichzeitig oft die einzige Beschriftung — dazu mehr in Block 5
- Ziehen Sie die Seite auf dem Handy mit zwei Fingern auf. Wenn nichts passiert, ist das Vergrößern gesperrt. Das ist eine Einstellung, die jemand aktiv gesetzt hat, und sie lässt sich zurücknehmen
- Vergrößern Sie am Rechner nur die Schrift, nicht die ganze Seite (im Browser unter Zoom die Option, nur Text zu vergrößern), und stellen Sie 200 Prozent ein. Reine Seitenvergrößerung sieht fast immer gut aus; erst reiner Textzoom zeigt, ob das Layout mitwächst oder Text abgeschnitten wird
- Prüfen Sie lange Blöcke in Großbuchstaben und sehr dünne Schriftschnitte. Beides ist Gestaltung, die Lesbarkeit kostet, und beides fällt in der Entwurfsansicht nie auf
Kontrast ist der Punkt mit dem breitesten Nutzen überhaupt. Er hilft Menschen mit eingeschränktem Sehen, aber genauso jedem, der im Sommer draußen auf sein Handy schaut, jedem über 45 ohne Lesebrille und jedem mit einem fünf Jahre alten Bildschirm.
3. Struktur und Überschriften
Struktur ist unsichtbar, solange alles funktioniert, und deshalb der Block, den man am ehesten überspringt. Sie prüfen ihn, indem Sie die Seite überfliegen statt sie zu lesen — genau das, was ein Screenreader tut, und zufällig auch das, was eine Suchmaschine tut.
- Lesen Sie nur die Überschriften der Seite, von oben nach unten. Ergeben sie zusammen ein sinnvolles Inhaltsverzeichnis? Wenn nicht, fehlen Zwischenüberschriften oder sie sagen nichts
- Gibt es genau eine Hauptüberschrift, und ist sie das Thema der Seite und nicht der Firmenname?
- Öffnen Sie die Leseansicht des Browsers (in Safari und Firefox eingebaut). Fehlt darin Inhalt, kommt er in falscher Reihenfolge oder lässt sie sich gar nicht aktivieren, ist die Struktur nicht sauber ausgezeichnet, sondern nur größer und fetter gemacht
- Lesen Sie alle Linktexte einer Seite hintereinander, ohne den Satz drumherum. Acht Mal „Mehr erfahren“ ist eine Liste ohne Information — für Screenreader-Nutzer, die genau so navigieren, und für alle, die querlesen
- Vergleichen Sie die Titel in den Browser-Tabs mehrerer Unterseiten. Sind sie unterschiedlich und sagen sie, wo man ist?
- Stehen Tabellen als echte Tabelle mit Kopfzeile da oder als Bild?
- Prüfen Sie, ob der Browser Ihnen eine Übersetzung anbietet, obwohl die Seite deutsch ist. Das ist ein Hinweis darauf, dass die Sprache der Seite falsch hinterlegt ist — was auch die Aussprache im Screenreader ruiniert
Der Nebeneffekt ist der Grund, warum dieser Block sich immer lohnt: Eine saubere Überschriftenstruktur und aussagekräftige Linktexte sind exakt das, was Suchmaschinen auswerten. Sie arbeiten hier an zwei Themen gleichzeitig.
4. Bilder und Alternativtexte
Alternativtexte sind unsichtbar, also lässt sich dieser Block nicht durch Hinsehen prüfen. Zwei Wege gibt es trotzdem ohne Zusatzsoftware: Sie schalten in den Browser-Einstellungen für diese Website Bilder ab und laden neu — dann steht dort, was hinterlegt ist. Oder Sie gehen die Bilder inhaltlich durch.
- Fragen Sie bei jedem Bild: Trägt es Information, die nicht auch im Text steht? Nur dann braucht es eine Beschreibung
- Reine Schmuckbilder brauchen keinen Alternativtext — ein leerer ist hier richtig. Falsch ist der Dateiname: „IMG-4471“ vorgelesen zu bekommen ist schlechter als Stille
- Versuchen Sie, Text in Bildern mit der Maus zu markieren. Geht das nicht, existiert dieser Text für Screenreader, für Google und für die Übersetzungsfunktion nicht
- Der häufigste und teuerste Fall davon: Öffnungszeiten, Preislisten und Speisekarten als Grafik oder als eingescanntes PDF. Diese Angaben werden am häufigsten gesucht und sind ausgerechnet die, die niemand kopieren kann
- Buttons, die nur ein Symbol zeigen — Lupe, Hamburger-Menü, Telefonhörer, Warenkorb — brauchen eine hinterlegte Bezeichnung, sonst heißen sie vorgelesen schlicht „Schaltfläche“
- Bei Diagrammen und Infografiken: Steht die Kernaussage einmal als Satz im Fließtext? Das ist ohnehin die bessere Lösung als ein 200 Zeichen langer Alternativtext
- Bildunterschriften ersetzen keinen Alternativtext, und der Alternativtext ersetzt keine Bildunterschrift. Sie haben verschiedene Aufgaben
5. Formulare und Fehlermeldungen
Dieser Block ist der einzige, bei dem sich jeder Fund direkt in Geld übersetzt, denn hier steht Ihre Anfrage. Ein Formular mit drei Feldern wird ausgefüllt, eines mit zwölf nicht — und ein Formular, das nach dem Absenden nur rot leuchtet, ohne zu sagen warum, wird kein zweites Mal versucht.
- Klicken Sie auf die Beschriftung, nicht ins Feld. Springt der Cursor ins Feld? Wenn nicht, sind Beschriftung und Feld technisch nicht verbunden — und die Klickfläche ist am Handy unnötig klein
- Fangen Sie an zu tippen: Verschwindet die Beschriftung? Dann war sie ein Platzhalter und war die einzige. Wer beim Ausfüllen unterbrochen wird, weiß danach nicht mehr, was in welches Feld gehört
- Sind Pflichtfelder in Worten gekennzeichnet und nicht nur durch ein farbiges Sternchen?
- Steht vor dem Tippen da, welches Format erwartet wird — Telefonnummer mit oder ohne Vorwahl, Datum in welcher Schreibweise?
- Schicken Sie das Formular einmal leer ab. Sagt die Meldung, welches Feld gemeint ist und was daran fehlt, oder nur „Fehler“? Steht sie beim Feld oder nur ganz oben, außerhalb des Sichtbereichs?
- Ist der Fehler auch ohne Farbe erkennbar? Ein rot umrandetes Feld ohne Text ist für rot-grün-blinde Nutzer eine leere Meldung
- Bleiben die bereits eingegebenen Daten nach dem Fehler erhalten? Ein geleertes Formular ist der Punkt, an dem Menschen aufgeben
- Gibt es neben einem Captcha einen zweiten Weg, Sie zu erreichen — eine Telefonnummer oder eine E-Mail-Adresse, die dasteht und nicht als Bild versteckt ist?
- Ist die Erfolgsmeldung nach dem Absenden Text und nicht nur ein grünes Häkchen, und ist sie ohne Scrollen zu sehen?
Machen Sie diesen Block einmal am Handy mit einer Hand, unterwegs, in Eile. Das ist die Situation, in der die meisten Ihrer Anfragen tatsächlich entstehen — und der schnellste Weg, ein Formular zu beurteilen.
6. Medien und Bewegung
Der letzte Block betrifft alles, was sich von selbst bewegt. Er ist kurz, aber er enthält die zwei Punkte, über die sich Besucher am häufigsten ohne Rückmeldung ärgern: Ton, den sie nicht bestellt haben, und Inhalte, die weiterspringen, bevor sie zu Ende gelesen sind.
- Startet irgendwo ein Video automatisch mit Ton? Das ist die zuverlässigste Art, jemanden im Großraumbüro sofort zu vertreiben
- Sehen Sie Ihre Videos einmal ohne Ton an. Verstehen Sie sie? Wer im Zug oder in der Mittagspause schaut, schaut ohne Ton — Untertitel sind hier kein Sonderfall, sondern der Normalfall
- Gibt es zu längeren Videos oder Podcasts einen Text zum Mitlesen? Der ist nebenbei das Einzige an einem Video, das eine Suchmaschine lesen kann
- Läuft ein Karussell von selbst weiter? Falls ja: Lässt es sich anhalten, und reicht die Zeit, um eine Folie zu Ende zu lesen? Messen Sie das nicht am eigenen Text, den Sie auswendig kennen
- Aktivieren Sie in den Systemeinstellungen Ihres Rechners oder Handys „Bewegung reduzieren“ und laden Sie die Seite neu. Ändert sich nichts, ignoriert Ihre Website diesen Wunsch — obwohl das Betriebssystem ihn ausdrücklich weitergibt
- Gibt es Elemente, die blinken oder schnell aufflackern? Das ist der einzige Punkt in dieser Liste, der ein akutes gesundheitliches Risiko darstellt, und der einzige, den Sie sofort abstellen sollten
- Lässt sich der Videoplayer mit der Tastatur bedienen — starten, pausieren, Lautstärke?
Starke Bewegung beim Scrollen, oft Parallaxe genannt, löst bei einem Teil der Besucher echten Schwindel aus. Sie sehen das nie in Ihren Zahlen, weil diese Menschen die Seite einfach schließen — ein Absprung sieht wie jeder andere aus.
Die Checkliste auf einen Blick
Zum Ausdrucken oder Abhaken. Die dritte Spalte ist die, die in Besprechungen am meisten hilft: Fast jeder Punkt verbessert die Seite für Besucher, an die beim Thema Barrierefreiheit niemand denkt.
| Was Sie prüfen | Wie Sie es testen | Wem es außerdem hilft |
|---|---|---|
| Sichtbarer Fokus | Tabulator drücken, wegschauen, wieder hinschauen — finden Sie die Stelle wieder? | Jedem, der Formulare mit der Tastatur durchfüllt, statt zu klicken |
| Ausweg aus Menü und Pop-up | Overlay öffnen, Escape drücken, weitertabben | Jedem, dessen Trackpad oder Maus gerade nicht mitspielt |
| Kontrast des Fließtextes | Handy bei Tageslicht draußen; Screenshot in Graustufen ansehen | Allen bei Sonnenlicht, auf alten Bildschirmen und ohne Lesebrille |
| Vergrößern am Handy | Mit zwei Fingern aufziehen — passiert etwas? | Allen, die kurz etwas genauer sehen wollen, etwa eine Hausnummer |
| Textzoom auf 200 Prozent | Im Browser nur den Text vergrößern, nicht die ganze Seite | Allen auf kleinen Displays, weil dieselben Umbrüche greifen |
| Überschriftenstruktur | Nur die Überschriften lesen; Leseansicht des Browsers öffnen | Suchmaschinen und allen, die querlesen statt lesen |
| Aussagekräftige Linktexte | Alle Linktexte ohne den umgebenden Satz hintereinander lesen | Jedem, der eine Seite überfliegt, um den einen Link zu finden |
| Text in Bildern | Versuchen, ihn mit der Maus zu markieren | Der Google-Suche, dem Kopieren einer Adresse, jeder Übersetzung |
| Beschriftung am Feld | Auf die Beschriftung klicken statt ins Feld | Allen am Handy — die Trefferfläche wird deutlich größer |
| Verständliche Fehlermeldungen | Formular einmal leer und einmal falsch ausgefüllt abschicken | Jedem, der sonst abbricht, statt nachzufragen |
| Untertitel und Text zum Video | Das Video einmal ohne Ton ansehen | Allen im Zug, im Büro und nachts neben einem schlafenden Kind |
| Selbstlaufende Bewegung | Systemeinstellung „Bewegung reduzieren“ aktivieren und neu laden | Menschen, denen davon schwindelig wird, und schwachen Geräten |
Was Sie mit den Ergebnissen machen
Sie werden mehr finden, als Sie an einem Nachmittag beheben können. Das ist normal und kein Grund, die Liste wegzulegen. Arbeiten Sie in dieser Reihenfolge, sortiert nach Schaden, nicht nach Aufwand:
- Alles, was blinkt oder schnell flackert. Sofort, unabhängig von allem anderen
- Alles, was einen Kaufabschluss oder eine Anfrage blockiert: Formularfehler ohne Erklärung, Overlays ohne Ausweg, gesperrtes Vergrößern
- Kontraste im Fließtext und in Buttons. Meist eine Änderung an wenigen Farbwerten, die sofort auf der ganzen Seite wirkt
- Sichtbarer Fokus und Reihenfolge beim Tabben. Einmal in der Vorlage gelöst, überall gelöst
- Überschriftenstruktur und Linktexte. Aufwand in Redaktionsarbeit, Wirkung auch in der Suche
- Alternativtexte und Text aus Bildern herausholen. Am besten nebenbei, wenn Sie die Seiten ohnehin überarbeiten
Und ein Hinweis, der Ihnen Frust erspart: Ein Teil der Funde liegt nicht an Ihren Inhalten, sondern an der verwendeten Vorlage, an einem Erweiterungsmodul oder am Baukasten. Sie erkennen das daran, dass derselbe Fehler auf allen Seiten identisch auftritt. Diese Punkte gehören auf die Liste für den nächsten Relaunch, nicht auf Ihre To-do-Liste für morgen.
Häufige Fragen zur Checkliste
Sechs Blöcke decken den größten Teil ab: Bedienung nur mit der Tastatur, Kontrast und Schriftgröße, Überschriftenstruktur, Bilder und Alternativtexte, Formulare und Fehlermeldungen sowie Medien und Bewegung. Sortiert nach Prüfart statt nach Regelwerk lässt sich die Liste an einem Vormittag abarbeiten. Prüfen Sie dabei je einen Vertreter jeder Seitenart, nicht jede einzelne Seite.
Für diese Liste nicht. Browser, Handy und Tastatur reichen. Automatische Prüfwerkzeuge finden zuverlässig Kontrastwerte und fehlende Alternativtexte, aber sie können nicht beurteilen, ob ein Alternativtext das Bild beschreibt oder ob die Reihenfolge beim Tabben sinnvoll ist. Genau dieser Teil bleibt menschliche Beurteilung, und er ist der größere.
Für eine Website mit fünf bis zehn Seiten rechnen Sie mit einer bis eineinhalb Stunden. Die Tastaturrunde ist der längste Teil und braucht etwa fünfzehn Minuten pro Seitenvorlage. Kontrast, Struktur und Medien gehen danach schnell, weil Sie nur noch stichprobenartig prüfen.
Zuerst alles, was blinkt, dann alles, was eine Anfrage oder einen Kauf blockiert, dann Kontraste, dann Fokus und Tastaturbedienung, danach Struktur und Alternativtexte. Sortieren Sie nach Schaden, nicht nach Aufwand. Punkte, die in der Seitenvorlage sitzen, wirken nach einer einzigen Korrektur auf der ganzen Website.
Daran erkennbar, dass derselbe Fehler auf jeder Seite identisch auftritt. Manches lässt sich in den Einstellungen des Themes ändern, etwa Farben und Schriftgrößen. Fokusrahmen, Tastaturbedienung von Menüs und die Struktur der Überschriften stecken dagegen oft im Baukasten selbst — das ist dann ein Thema für den nächsten Relaunch und keine Aufgabe, die Sie über Inhalte lösen können.
Kostenloses Beratungsgespräch
Wir schauen uns Ihre Website vorab an und zeigen Ihnen die größten Hebel für mehr Anfragen.
