Website Accessibility Checklist
Vier Kontrollen vor dem Release
Kontrast, Bilder, Formularfelder, Links: vier Kontrollen vor der Freigabe.
Prüfroute für eine geänderte Seite
Nicht Kriterien abhaken – Zustände durchfahren
Eine Website zeigt ihre Barrieren oft erst nach Tab, Zoom oder einem Fehlversuch. Diese Route ordnet zehn Kontrollen den Momenten zu, in denen Sie sie tatsächlich beobachten können.
Eine Seite, fünf Prüfstationen
- 01–02Laden
Seitentitel und Sprache passen. Der erste Tab zeigt einen Sprunglink zum Hauptinhalt.
- 03–05Lesen
Überschriften bilden die Gliederung. Bilder haben zweckgerechte Alternativtexte. Linkziele sind im Kontext verständlich.
- 06–07Vergrößern
Text und Bedienelemente bleiben kontrastreich. Bei 320 CSS-Pixeln fließt linearer Inhalt ohne seitliches Scrollen um.
- 08Bedienen
Alle Funktionen sind per Tastatur erreichbar. Fokus bleibt sichtbar und gerät in keine Falle.
- 09–10Absenden
Felder behalten sichtbare Namen und Hinweise. Fehler werden benannt, zugeordnet und erreichbar gemacht.
Der Durchgang
Fünf Handlungen, zehn Kontrollen
Prüfen Sie die geänderte Seite und jeden neuen Zustand: geöffnetes Menü, Dialog, Formularfehler und Erfolgsmeldung gehören als eigene Station dazu.
- LadenNeu laden, dann einmal Tab drücken.Entwicklung
Dokumentieren Sie Seitentitel, Hauptsprache, Ziel des Sprunglinks und das Element, das danach Fokus erhält.
- LesenÜberschriften-, Bild- und Linkliste ansehen.Redaktion
Prüfen Sie Reihenfolge und Zweck im Seitenkontext. Ein vorhandenes
altkann trotzdem unpassend sein. - ZoomAuf 320 CSS-Pixel verengen oder bei 1280 Pixeln auf 400 Prozent zoomen.Design · Test
Text muss lesbar bleiben. Für Inhalte, die zweidimensional bleiben müssen, halten Sie die begründete Ausnahme fest.
- TastaturMaus weglegen und den vollständigen Weg gehen.Test
Nutzen Sie Tab und Umschalt+Tab; für das jeweilige Element außerdem Enter, Leertaste, Pfeiltasten oder Esc.
- FehlerFormular unvollständig und mit falschem Format absenden.Entwicklung
Erfassen Sie sichtbare Meldung, Zuordnung zum Feld, Fokusziel und den Weg zurück zur Korrektur.
Beleg statt Häkchen
Ein Eintrag, den die Nachprüfung wiederfindet
Ein Ergebnis ohne URL, Zustand und Fundstelle lässt sich nicht reproduzieren. Kopieren Sie dieses kurze Schema in Ihren Release-Vermerk.
Prüfpunkt:
URL und Zustand:
Viewport / Zoom:
Bedienweg:
Erwartet:
Beobachtet:
Ergebnis: erfüllt | offen | nicht vorhanden
Beleg: Screenshot, DOM-Ausschnitt oder Video
Zuständig:
Nachprüfung:Die Liste ist ein fokussierter Release-Durchgang
Sie deckt häufige Barrieren auf, ersetzt aber keine Konformitätsbewertung. Dafür werden Umfang und Zielstandard festgelegt, repräsentative Seiten und Zustände ausgewählt, vollständig bewertet und nachvollziehbar berichtet.
Aus dem Prüfbericht
Vier Kontrollen, vier Befunde
Kritisch Der Hinweistext im Formular Regel color-contrast
Hellgrau auf Weiß liegt unter 4,5:1. Gerade der Hinweis vor dem Absenden muss lesbar bleiben.
Kritisch Bilder aus dem Redaktionssystem Regel image-alt
Bilder aus dem Redaktionssystem kommen ohne alt in die Seite. Jedes img braucht das Attribut, dekorative ein leeres.
Kritisch Die Felder im Bestellformular Regel label
Platzhalter statt Beschriftung: der Name verschwindet beim Tippen. Ein label mit for bleibt stehen.
Kritisch „Mehr“ am Ende jeder Kachel Regel link-name
Vier gleich benannte Links führen an vier Ziele. Der Linktext nennt das Ziel selbst.
Zum Mitnehmen
Die Freigaberunde, korrigiert
Ein Farbwert, eine Beschriftung, zwei Linktexte.
Korrektur in 3 Schritten ansehen
Den Hinweistext dunkler setzen
Farbe und Fläche zählen als Paar. Ein dunkleres Grau bringt den Hinweis über 4,5:1, ohne das Layout zu ändern.
KorrekturvergleichSchritt 1 · CSS Vorher
.formular .hinweis { color: #b0b4b8; background: #ffffff; }Nachher
.formular .hinweis { color: #55595e; background: #ffffff; }Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie den Hinweis bei heruntergedimmtem Bildschirm. Er bleibt erkennbar.
Platzhalter durch Beschriftung ersetzen
Der Platzhalter verschwindet beim Tippen und ist kein Name. Das label bleibt sichtbar und gehört technisch zum Feld.
KorrekturvergleichSchritt 2 · HTML Vorher
<input id="plz" type="text" name="plz" placeholder="Postleitzahl">Nachher
<label for="plz">Postleitzahl</label> <input id="plz" type="text" name="plz" placeholder="z. B. 10115">Markierte Zeilen wurden geändert
So prüfen Sie es Tippen Sie etwas ins Feld. Die Beschriftung steht weiterhin darüber.
Kachel-Links und Kachelbild benennen
Vier gleiche „Mehr“ nennen kein Ziel. Der Linktext benennt es, das dekorative Kachelbild bekommt ein leeres alt.
KorrekturvergleichSchritt 3 · HTML Vorher
<img src="kachel-3.jpg"> <a href="/kurse/toepfern">Mehr</a>Nachher
<img src="kachel-3.jpg" alt=""> <a href="/kurse/toepfern">Zum Töpferkurs</a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag ist unterscheidbar.