Web Accessibility Checklist
Vier Startpunkte, die Befunde sichtbar machen
Titel und Kontrast überall; Bilder und Formulare dort, wo sie vorkommen.
Prüfen, was Menschen erleben
Die Checkliste folgt dem Zustand der Seite
Ein Formular vor und nach dem Absenden ist technisch dieselbe Seite, aber eine andere Prüfsituation. Diese Route verfolgt einen vollständigen Vorgang vom Laden bis zur Rückmeldung.
Sechs Zustände, sechs Nachweise
- 1
Seite geladenTab-Titel beschreibt das Thema; Sprache und Hauptüberschrift sind bestimmt.
- 2
Navigation im FokusAlle Ziele sind per Tastatur erreichbar; Reihenfolge und Fokus bleiben sichtbar.
- 3
Formular noch leerJedes Feld hat Name, Anleitung und erwartetes Eingabeformat.
- 4
Formular mit FehlerText benennt Feld, Problem und Korrektur; die Zuordnung ist im Code vorhanden.
- 5
Dialog geöffnetFokus liegt im Dialog, bleibt dort und kehrt nach Escape sinnvoll zurück.
- 6
Ergebnis erschienenDie Rückmeldung ist sichtbar und wird als Status vermittelt, ohne den Fokus zu versetzen.
Ein Zustand quer durch alle Größen
Bei 400 Prozent bleibt der Inhalt eine Leseroute
400 Prozent Zoom bei 1280 Pixel Ausgangsbreite entsprechen 320 CSS-Pixeln. Text und Bedienelemente ordnen sich dann in eine Spalte; einzelne zweidimensionale Inhalte dürfen eine eigene Scrollfläche benötigen.
Vier Blickwinkel ergeben den Erstbefund
Kein einzelner Blickwinkel deckt die Route ab. Die Kombination zeigt technische Muster, tatsächliche Bedienung und verständliche Rückmeldungen.
Ergebnis: ein belegter erster Befund. Für eine vollständige Bewertung braucht es einen festgelegten Umfang, repräsentative Seiten und eine systematische Prüfung nach WCAG.
Nicht nur abhaken
Jeder offene Punkt braucht einen reproduzierbaren Beleg
- Zustand
- Formular mit Fehler
- Aktion
- Postleitzahl „1011“ eingeben und absenden
- Erwartet
- Fehler nennt fünf erforderliche Ziffern und ist dem Feld zugeordnet
- Beobachtet
- Nur ein roter Rahmen; kein Fehlertext im Barrierefreiheitsbaum
- Ergebnis
- Offen · Text und technische Zuordnung ergänzen
Quellen für die Prüfrunde
So prüfen Sie es
- Wählen Sie eine wichtige Aufgabe und notieren Sie jeden sichtbaren Zustand der Route.
- Durchlaufen Sie jeden Zustand nur mit Tastatur und dokumentieren Sie den Fokus.
- Wiederholen Sie die Route bei 400 Prozent Zoom und mit einem Vorleseprogramm.
- Halten Sie offene Punkte mit Zustand, Aktion, Erwartung und Beobachtung fest.
Aus dem Prüfbericht
Vier Punkte, vier Befunde
Kritisch Formularfelder ohne Beschriftung Regel label
Der Platzhalter verschwindet beim Tippen und ist kein Name. Ein label mit for steht dauerhaft am Feld.
Kritisch Blasser Text in der Fußzeile Regel color-contrast
Hellgrau auf Weiß fällt bei Sonnenlicht aus. Normaler Text braucht mindestens 4,5:1 zum Hintergrund.
Kritisch Bilder ohne Textalternative Regel image-alt
Ohne alt liest ein Vorleseprogramm den Dateinamen. Jedes img bekommt alt, dekorative Bilder ein leeres.
Kritisch Der Seitentitel im Browser-Tab Regel document-title
Ein leeres title-Element macht die Seite unter vielen offenen Tabs unauffindbar. Der Titel nennt das Thema.
Zum Mitnehmen
Die Startseite, korrigiert
Ein Titel, ein Alt-Text, eine Beschriftung, ein Farbwert.
Korrektur in 3 Schritten ansehen
Titel und Titelbild benennen
Der Dokumenttitel nennt das Thema, das alt-Attribut nennt, was das Bild beiträgt. Der Dateiname leistet beides nicht.
KorrekturvergleichSchritt 1 · HTML Vorher
<head> <title></title> </head> <body> <img src="hero-2026.jpg"> </body>Nachher
<head> <title>Praxis Seidel: Termine und Sprechzeiten</title> </head> <body> <img src="hero-2026.jpg" alt="Wartezimmer mit Anmeldung"> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Seite in einem zweiten Tab und blenden Sie Bilder aus. Beide Texte erscheinen.
Das Suchfeld beschriften
Der Platzhalter verschwindet beim Tippen und ist kein Name. Das label bleibt stehen und gehört technisch zum Feld.
KorrekturvergleichSchritt 2 · HTML Vorher
<input type="search" name="q" placeholder="Suchen">Nachher
<label for="suche">Website durchsuchen</label> <input id="suche" type="search" name="q" placeholder="z. B. Sprechzeiten">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf die Beschriftung. Springt der Cursor ins Feld, sitzt die Verbindung.
Die Fußzeile lesbar machen
Ein dunkleres Grau auf Weiß bringt den Fußzeilentext über 4,5:1. Größe und Schriftart bleiben, wie sie sind.
KorrekturvergleichSchritt 3 · CSS Vorher
.fusszeile p { color: #9aa0a6; background: #ffffff; }Nachher
.fusszeile p { color: #4a4f54; background: #ffffff; }Markierte Zeilen wurden geändert
So prüfen Sie es Drehen Sie die Bildschirmhelligkeit herunter. Die Fußzeile bleibt lesbar.