Checkliste
WCAG 2.2 AA als Liste zum Abarbeiten
Alle 55 Erfolgskriterien der Stufen A und AA — die Menge, auf die EN 301 549 und der EAA zeigen. Getrennt nach der einzigen Unterscheidung, die Ihren Nachmittag verändert: was ein Scanner belegen kann und was ein Mensch ansehen muss.
23 automatisierbar · 32 brauchen einen Menschen
So nutzen Sie das
- 1. Führen Sie zuerst einen Scan aus. Er erledigt die meisten der 23 automatisierbaren Kriterien in einer Minute, und für eine Seite ist er kostenlos.
- 2. Arbeiten Sie die manuelle Liste mit Tastatur und Screenreader ab. Rechnen Sie mit einer Stunde pro Template, nicht pro Seite.
- 3. Schreiben Sie auf, was Sie nicht beheben konnten, und warum. Diese Liste ist Ihre Barrierefreiheitserklärung, und sie ist das, was eine Aufsichtsbehörde zuerst liest.
Das kann ein Scanner belegen
Jedes davon wird bei jedem Scan automatisch geprüft. Ein sauberes Ergebnis hier ist echter Nachweis, und es ist der billigste, den Sie bekommen.
Alles, was kein Text ist — ein Bild, ein Icon, ein Diagramm — braucht eine Textfassung, die dasselbe sagt.
image-alt · input-image-alt · aria-meter-name · aria-progressbar-name
Reine Tonaufnahmen und reine Videoaufnahmen brauchen eine Alternative, die dieselben Informationen trägt.
audio-caption
Aufgezeichnetes Video mit Ton braucht Untertitel.
video-caption
Struktur, die Sie im Layout zeigen — Überschriften, Listen, Tabellen, Gruppen — muss auch im Markup existieren.
aria-hidden-body · aria-required-children · aria-required-parent · td-has-header
Sperren Sie die Seite nicht auf eine Bildschirmausrichtung.
css-orientation-lock
Felder, die nach den eigenen Daten des Menschen fragen, sollten im Code sagen, welche Angabe sie wollen.
autocomplete-valid
Farbe allein darf keine Bedeutung tragen.
link-in-text-block
Ton, der länger als drei Sekunden von selbst läuft, braucht eine Möglichkeit, ihn zu stoppen.
no-autoplay-audio
Text braucht mindestens 4,5:1 Kontrast zu seinem Hintergrund — 3:1, wenn er groß ist.
color-contrast
Text muss eine Vergrößerung auf 200 % überstehen, ohne Inhalt oder Funktion zu verlieren.
meta-viewport
Die Seite muss weiter funktionieren, wenn der Lesende Zeilenhöhe und Zeichenabstand erhöht.
avoid-inline-spacing
Alles, was mit der Maus geht, muss auch mit der Tastatur gehen.
frame-focusable-content · scrollable-region-focusable · server-side-image-map
Wenn etwas an einer Uhr hängt, muss man sie abschalten, anpassen oder verlängern können.
meta-refresh
Alles, was sich länger als fünf Sekunden von selbst bewegt, blinkt, scrollt oder aktualisiert, braucht eine Pause-Bedienung.
blink · marquee
Geben Sie Menschen einen Weg an den Blöcken vorbei, die sich auf jeder Seite wiederholen.
bypass
Jede Seite braucht einen Titel, der sagt, was diese Seite ist.
document-title
Der Text eines Links muss sagen, wohin er führt.
area-alt · link-name
Der zugängliche Name eines Bedienelements muss die Wörter enthalten, die darauf stehen.
label-content-name-mismatch
Tippziele brauchen mindestens 24 × 24 CSS-Pixel — oder genug Abstand zueinander.
target-size
Die Seite muss angeben, in welcher Sprache sie ist.
html-has-lang · html-lang-valid · html-xml-lang-mismatch
Zeichnen Sie Passagen aus, die in einer anderen Sprache als die Seite sind.
valid-lang
Jedes Eingabefeld braucht eine Beschriftung — und eine Anweisung, wo das Format nicht offensichtlich ist.
form-field-multiple-labels
Jedes Bedienelement muss preisgeben, was es ist, wie es heißt und in welchem Zustand es sich befindet.
area-alt · aria-allowed-attr · aria-hidden-body · aria-required-attr
Das braucht einen Menschen
Darüber entscheidet kein Werkzeug. Es geht um Bedeutung und Verhalten — ob der Alternativtext das Richtige sagt, ob die Fokusreihenfolge zur Seite passt, ob sich ein eigenes Widget wie das Muster verhält, das es nachahmt. Wer volle Abdeckung behauptet, zählt das hier nicht mit.
Aufgezeichnetes Video braucht entweder eine Audiodeskription des Gezeigten oder eine Textalternative.
Ob der Ton alles transportiert, was das Video zeigt, ist eine menschliche Entscheidung.
Live übertragene Toninhalte brauchen Live-Untertitel.
Von Hand prüfen: nutzen sie einen live-untertiteldienst — bei allem, wo viel auf dem spiel steht, eine schriftdolmetscherin.
Aufgezeichnetes Video braucht eine Audiodeskriptionsspur.
Von Hand prüfen: ergänzen sie eine audiodeskriptionsspur — oder nehmen sie die erzählung neu auf, sodass sie beschreibt, was passiert.
Die Reihenfolge, in der Inhalt gelesen wird, muss Sinn ergeben.
Ein Scanner kann nicht wissen, welche Reihenfolge Sie gemeint haben. Lesen Sie die Seite einmal mit abgeschaltetem CSS.
Erklären Sie nichts allein über Form, Größe, Position oder Ton.
Das ist vollständig eine Leseaufgabe. Kein Werkzeug findet es.
Nehmen Sie echten Text, keine Bilder von Text.
Ein Scanner kann keinen Text in einem Bild sehen. Hier braucht es Augen.
Inhalt muss in ein 320 px breites Fenster umbrechen, ohne waagerechte Bildlaufleiste.
Von Hand prüfen: bauen sie das layout so, dass es umbricht. wer schon responsiv ist, hat den großteil hinter sich.
Bedienelemente und bedeutungstragende Grafiken brauchen 3:1 Kontrast, nicht nur Text.
Von Hand prüfen: bringen sie ränder, fokusrahmen und icons auf mindestens 3:1 gegen das, was dahinterliegt.
Inhalt, der bei Hover oder Fokus erscheint, muss schließbar, überfahrbar und beständig sein.
Von Hand prüfen: halten sie es offen, solange der zeiger über dem auslöser oder über dem aufklapper steht.
Der Tastaturfokus darf nie irgendwo hängen bleiben, von wo aus man nicht weiterkommt.
Fallen findet man beim Durchtabben, nicht beim Scannen.
Ein Kurzbefehl aus einem einzelnen Buchstaben muss abschaltbar oder umlegbar sein.
Von Hand prüfen: verlangen sie eine zusatztaste (strg, alt, cmd), oder hören sie nur zu, solange das betreffende element den fokus hat, oder lassen sie kurzbefehle abschalten.
Nichts darf öfter als dreimal pro Sekunde blitzen.
Von Hand prüfen: bleiben sie unter drei blitzen pro sekunde oder unter den grenzwerten für allgemeine und rote blitze.
Der Fokus muss sich in einer Reihenfolge bewegen, die die Bedeutung erhält.
Tabben Sie durch die Seite und schauen Sie, wohin der Fokusrahmen wandert. Das ist der ganze Test.
Bieten Sie mehr als einen Weg an, eine Seite zu finden.
Von Hand prüfen: ergänzen sie suche, sitemap oder brotkrumenpfad. zwei beliebige wege erfüllen das.
Überschriften und Beschriftungen müssen beschreiben, was auf sie folgt.
Ein Werkzeug sieht, dass eine Überschrift da ist — nicht, ob sie etwas beschreibt.
Man muss sehen können, wo der Tastaturfokus steht.
Von Hand prüfen: entfernen sie die outline nie, ohne sie zu ersetzen. stylen sie `:focus-visible`, statt `:focus` zu löschen.
Eine klebende Kopf- oder Fußleiste darf das fokussierte Element nicht vollständig verdecken.
Von Hand prüfen: ergänzen sie `scroll-margin-top` in höhe der kopfleiste — oder verkleinern sie das klebende element beim scrollen.
Alles, was mit Mehrfinger- oder Pfadgesten geht, muss auch mit einem einzelnen Tippen gehen.
Von Hand prüfen: ergänzen sie schlichte schaltflächen neben der geste: hinein-/herauszoomen, vor/zurück.
Eine Aktion darf nicht beim Drücken auslösen — man braucht die Möglichkeit, zurückzurudern.
Von Hand prüfen: lösen sie bei `click` beziehungsweise beim loslassen aus — oder bieten sie ein rückgängig an.
Wenn Schütteln oder Kippen des Geräts etwas auslöst, muss es dafür auch ein Bedienelement geben.
Von Hand prüfen: ergänzen sie das gleichwertige bedienelement und lassen sie die bewegungssteuerung abschalten.
Alles, was durch Ziehen funktioniert, muss auch ohne Ziehen funktionieren.
Von Hand prüfen: ergänzen sie schaltflächen, ein menü oder ein textfeld, das dieselbe aufgabe erledigt.
Etwas zu fokussieren darf die Seite nicht von selbst verändern.
Von Hand prüfen: handeln sie bei der aktivierung — klick, enter oder eine ausdrückliche schaltfläche — nie beim fokus allein.
Einen Wert zu ändern darf nicht ohne Vorwarnung etwas Unerwartetes tun.
Von Hand prüfen: ergänzen sie eine absenden-schaltfläche, oder sagen sie vorher, was das element tun wird.
Navigation, die sich über Seiten wiederholt, muss in derselben Reihenfolge bleiben.
Von Hand prüfen: halten sie die relative reihenfolge stabil. einen punkt zu ergänzen ist in ordnung; umzumischen nicht.
Dasselbe muss überall gleich heißen.
Von Hand prüfen: wählen sie einen namen je begriff und nutzen sie ihn in jeder beschriftung, schaltfläche, meldung und überschrift.
Wenn auf mehreren Seiten Hilfe angeboten wird, muss sie überall an derselben Stelle stehen.
Von Hand prüfen: halten sie hilfsangebote auf jeder seite, die sie hat, in derselben relativen reihenfolge.
Wird eine Eingabe abgelehnt, sagen Sie in Text, welches Feld und was falsch ist.
Von Hand prüfen: nennen sie feld und problem: „postleitzahl: fünf ziffern, zum beispiel 10115“.
Wenn erkennbar ist, was gemeint war, schlagen Sie die Korrektur vor.
Von Hand prüfen: sagen sie, was gültig wäre: „format tt.mm.jjjj, zum beispiel 24.06.2026“.
Rechtlich oder finanziell bindende und datenverändernde Absendungen müssen umkehrbar, geprüft oder bestätigungspflichtig sein.
Von Hand prüfen: ergänzen sie einen prüfschritt, ein zeitfenster zum rückgängigmachen oder eine ausdrückliche bestätigung. eines der drei genügt.
Lassen Sie Menschen dieselbe Angabe nicht zweimal im selben Vorgang eintippen.
Von Hand prüfen: vorbelegen, ein übernehmen-häkchen anbieten oder einen früheren wert auswählen lassen.
Verlangen Sie zum Anmelden kein Rätsel und kein Erinnern.
Von Hand prüfen: erlauben sie einfügen und lassen sie passwortmanager das feld füllen.
Meldungen, die ohne Fokuswechsel erscheinen, müssen angesagt werden.
Von Hand prüfen: nehmen sie `role="status"` (höflich) oder `role="alert"` (bestimmt) für alles dringende.
Der Kriterientext stammt aus den Web Content Accessibility Guidelines 2.2 des W3C. Stufe AAA ist ausgenommen: sie ist nicht das, wonach der EAA fragt, und das W3C empfiehlt sie nicht als Ziel für eine ganze Website. Die 31 AAA-Kriterien haben eigene Seiten in der vollständigen Referenz.