Eine interaktive WCAG 2.2 Checkliste mit allen 55 Erfolgskriterien der Stufen A und AA, jeweils mit verständlicher Bedeutung, einem Test und einer Lösung, dazu ein WCAG-Kontrastrechner für Farben.
Eine WCAG-Checkliste für die meisten Websites umfasst die 55 Erfolgskriterien der Stufen A und AA in WCAG 2.2 (4.1.1 Syntaxanalyse wurde entfernt). Die wichtigsten Prüfungen: Textkontrast von mindestens 4.5:1 (3:1 für großen Text), vollständige Bedienung per Tastatur, sichtbarer Fokus, beschriftete Felder, Untertitel und Zielflächen von mindestens 24 mal 24 CSS-Pixeln.
WCAG 2.2 auf einen Blick
Dies ist die Arbeitsversion einer Barrierefreiheitsprüfung: jedes Erfolgskriterium der Stufen A und AA in WCAG 2.2, gruppiert nach Prinzip, jeweils mit seiner Bedeutung in einfachen Worten, einem Test in wenigen Minuten und einer Code-Lösung, wo Code hilft. Hake Punkte beim Durchgehen ab, filtere nach Stufe oder Prinzip und drucke das Ergebnis aus.
Konformität mit Stufe AA bedeutet, 55 Kriterien zu erfüllen: 31 der Stufe A und 24 der Stufe AA. Rechnet man die 31 Punkte der Stufe AAA hinzu, hat WCAG 2.2 insgesamt 86 Kriterien, nachdem 4.1.1 Syntaxanalyse als überholt markiert und entfernt wurde.
Kriterium 1.4.3 verlangt 4.5:1 zwischen normalem Text und seinem Hintergrund und 3:1 für großen Text, also mindestens 18 Punkt (24 CSS-Pixel) oder 14 Punkt fett (etwa 18.66 CSS-Pixel). Kriterium 1.4.11 verlangt 3:1 für Icons, Rahmen von Eingabefeldern und Fokusindikatoren.
Das kann keine Checkliste versprechen. Gesetze unterscheiden sich nach Land und Branche, und manche beziehen sich auf WCAG 2.1 oder eigene Standards. Nutze diese Seite, um Barrieren zu finden und zu beheben, und hol dir für Fragen zur Konformität rechtlichen Rat.
WCAG 2.2 hat neun Kriterien hinzugefügt, sechs davon auf Stufe A oder AA: Fokus nicht verdeckt (Minimum), Ziehbewegungen, Zielgröße (Minimum), Konsistente Hilfe, Redundante Eingaben und Barrierefreie Authentifizierung (Minimum). Außerdem wurde 4.1.1 Syntaxanalyse entfernt.
Jede Farbe wird in relative Leuchtdichte umgerechnet, indem die Kanäle Rot, Grün und Blau linearisiert und mit 0.2126, 0.7152 und 0.0722 gewichtet werden. Das Verhältnis ist die hellere Leuchtdichte plus 0.05, geteilt durch die dunklere plus 0.05, und ergibt einen Wert von 1:1 bis 21:1.
Verborgen, bis er den Fokus erhält, dann oben angezeigt. Drück im Ergebnis Tab, um ihn zu sehen.
focus-visible zeigt den Rahmen für Tastaturnutzer. Die Farbe der outline sollte gegenüber dem Hintergrund 3:1 erreichen.
scroll-padding reserviert Platz, damit fokussierte Elemente, die in den sichtbaren Bereich gescrollt werden, nicht unter der Leiste verschwinden.
Vergrößere kleine Icon-Buttons per Padding auf 24 mal 24 CSS-Pixel. 44 Pixel sind das strengere AAA-Ziel und auf Handys angenehmer.
Füge das in die Entwicklertools ein. Das sind die Werte, die das Kriterium nennt; Inhalte müssen mit ihnen lesbar bleiben.
Die Meldung ist Text, steht neben dem Feld, sagt, wie man den Fehler behebt, und ist mit aria-describedby verknüpft.
Ein Bereich mit role=status wird höflich angesagt, wenn sich sein Text ändert, ohne den Fokus zu verschieben.
Automatisch ablaufende Bewegung für Menschen zu stoppen, die weniger Bewegung wünschen, hilft auch bei Pausieren, Beenden, Ausblenden.
Korrekte autocomplete-Werte und kein Blockieren des Einfügens lassen Menschen sich anmelden, ohne sich an ein Passwort erinnern zu müssen.
Bilder, Icons und Bedienelemente haben eine Textalternative; Dekoration ist verborgen.
Prüfe jedes img-alt, jeden Namen eines Icon-Buttons und jede Diagrammzusammenfassung.
Reines Audio bekommt ein Transkript; stummes Video bekommt ein Transkript oder eine Tonspur.
Finde jeden Podcast und jeden stummen Clip und such nach der Alternative.
Aufgezeichnetes Video mit Ton hat synchronisierte Untertitel.
Spiel Videos mit eingeschalteten Untertiteln ab; prüfe die Genauigkeit, nicht nur das Vorhandensein.
Rein visuelle Informationen im Video werden beschrieben oder als Text angeboten.
Schau mit geschlossenen Augen zu; geht etwas Wichtiges verloren?
Livestreams mit Ton haben Untertitel.
Prüfe, ob der Live-Player oder Dienst Echtzeit-Untertitel unterstützt.
Aufgezeichnetes Video hat eine Audiodeskription, wo Bilder Bedeutung tragen.
Such nach einer beschriebenen Version oder einem Sprecher, der Text auf dem Bildschirm abdeckt.
Überschriften, Listen, Tabellen und Labels sind ausgezeichnet, nicht nur gestaltet.
Untersuche Überschriften, Listen, Tabellenköpfe und Label-Zuordnungen.
Die Lesereihenfolge im Code entspricht der Bedeutung.
Schalte CSS ab oder nutze den Lesemodus eines Screenreaders und lies von oben nach unten.
Anweisungen stützen sich nicht nur auf Form, Farbe, Größe, Position oder Ton.
Durchsuche die Texte nach Formulierungen wie der runde Button oder rechts.
Inhalte funktionieren im Hoch- und Querformat, außer eines ist unerlässlich.
Dreh ein Handy oder emuliere beide Ausrichtungen.
Felder für persönliche Daten geben ihren Zweck an, damit Browser automatisch ausfüllen können.
Prüfe, ob Felder für Name, E-Mail, Telefon und Adresse autocomplete-Werte haben.
Farbe ist nie das einzige Mittel, um Bedeutung, Zustand oder einen Link anzuzeigen.
Betrachte die Seite in Graustufen; sind Fehler und Links noch unterscheidbar?
Ton, der von selbst länger als 3 Sekunden läuft, kann pausiert oder stummgeschaltet werden.
Lade jede Seite mit eingeschaltetem Ton.
Der Textkontrast beträgt mindestens 4.5:1, oder 3:1 für großen Text.
Miss Paare aus Text und Hintergrund mit dem Kontrastrechner unten.
Text lässt sich auf 200 Prozent skalieren, ohne dass Inhalt oder Funktion verloren gehen.
Zoome auf 200 Prozent; nichts darf abgeschnitten sein oder sich überlappen.
Echter Text wird statt Bildern von Text verwendet, Logos ausgenommen.
Such nach Bannern und Buttons, die Bilder sind.
Inhalte passen in 320 CSS-Pixel Breite, ohne in zwei Richtungen zu scrollen.
Zoome bei 1280 Pixeln Breite auf 400 Prozent.
Icons, Feldrahmen, Fokusrahmen und Diagrammteile erreichen 3:1.
Miss Rahmen und Icons gegen ihre Umgebung.
Nichts bricht, wenn Zeilen-, Absatz-, Buchstaben- und Wortabstände vergrößert werden.
Wende das Bookmarklet für Textabstände oder die CSS-Überschreibung unten an.
Tooltips lassen sich schließen, mit der Maus erreichen und bleiben, bis man sich wegbewegt.
Fahr über einen Tooltip, beweg dich hinein, drück Escape.
Alles funktioniert allein mit der Tastatur.
Zieh die Maus ab und erledige jede Aufgabe.
Der Fokus kann jede Komponente immer wieder verlassen.
Navigiere mit Tab in Widgets, Einbettungen und Dialoge und wieder heraus.
Kurzbefehle mit einer einzelnen Taste lassen sich abschalten, umbelegen oder funktionieren nur bei Fokus.
Liste Kurzbefehle auf, die einen Buchstaben oder eine Zahl ohne Modifikatortaste nutzen.
Zeitlimits lassen sich abschalten, anpassen oder verlängern.
Finde Sitzungs-Timeouts und zeitgesteuerte Schritte.
Bewegte, blinkende oder sich automatisch aktualisierende Inhalte lassen sich pausieren.
Such nach Karussells, Tickern und animierten Hintergründen.
Nichts blitzt öfter als dreimal pro Sekunde.
Prüfe Videos und Animationen auf Stroboskopeffekte.
Ein Skip-Link oder Landmarks lassen Nutzer wiederholte Blöcke überspringen.
Drück nach dem Laden einmal Tab und such nach Zum Inhalt springen.
Jede Seite hat einen Titel, der sie beschreibt.
Lies die Titel in den Browser-Tabs auf der ganzen Website.
Der Fokus bewegt sich in einer Reihenfolge, die Bedeutung und Bedienbarkeit erhält.
Geh mit Tab durch und achte auf Sprünge.
Der Linktext sagt mit seinem Kontext, wohin der Link führt.
Liste alle Links auf; markiere ein nacktes Hier klicken und Mehr lesen.
Es gibt mehr als einen Weg, eine Seite zu finden, etwa Menü und Suche oder Sitemap.
Prüfe, ob es eine Suche, eine Sitemap oder ein vollständiges Menü gibt.
Überschriften und Beschriftungen beschreiben ihr Thema oder ihren Zweck.
Lies nur die Gliederung der Überschriften; ergibt sie Sinn?
Der Fokusindikator der Tastatur ist sichtbar.
Geh mit Tab durch; du solltest immer sehen, wo du bist.
Ein fokussiertes Element wird nicht vollständig von fixierten Leisten oder Bannern verdeckt.
Navigiere mit Tab, während ein Cookie-Banner und ein fixierter Header sichtbar sind.
Pfad- oder Mehrpunktgesten haben eine Alternative mit einem einzelnen Zeiger.
Prüfe Interaktionen mit Zoomen, Wischen und Zeichnen auf Buttons als Alternative.
Aktionen werden beim Loslassen ausgelöst oder lassen sich abbrechen oder rückgängig machen.
Drücken, wegziehen, loslassen; nichts sollte ausgelöst werden.
Der zugängliche Name enthält den sichtbaren Beschriftungstext.
Vergleiche sichtbare Beschriftungen mit den berechneten Namen in den Entwicklertools.
Funktionen per Schütteln oder Neigen haben eine Button-Alternative und lassen sich abschalten.
Such nach Funktionen, die auf Gerätebewegung reagieren.
Alles, was per Ziehen geht, lässt sich auch mit einzelnen Klicks oder Taps erledigen.
Probiere Schieberegler, sortierbare Listen und Karten ohne Ziehen aus.
Zielflächen sind mindestens 24 mal 24 CSS-Pixel groß oder so verteilt, dass sich ein Kreis von 24 Pixeln nicht mit anderen überschneidet, mit Ausnahmen.
Miss kleine Icons und Inline-Bedienelemente.
Die Seite gibt ihre Hauptsprache an.
Prüfe das lang-Attribut am html-Element.
Passagen in einer anderen Sprache sind mit lang ausgezeichnet.
Finde Zitate oder Wendungen in anderen Sprachen.
Das Fokussieren eines Elements ändert nicht den Kontext.
Navigiere mit Tab auf jedes Bedienelement; nichts darf absenden oder navigieren.
Das Ändern einer Einstellung ändert den Kontext nicht ohne Vorwarnung.
Ändere Auswahllisten und Radiobuttons; achte auf überraschende Navigation.
Wiederholte Navigation behält dieselbe relative Reihenfolge.
Vergleiche die Menüs auf mehreren Seiten.
Komponenten mit derselben Funktion sind gleich beschriftet.
Vergleiche Bedienelemente für Suche, Warenkorb und Download über mehrere Seiten.
Wiederkehrende Hilfeangebote erscheinen in derselben relativen Reihenfolge.
Vergleiche, wo Links zu Kontakt, Chat oder Hilfe auf jeder Seite stehen.
Eingabefehler werden erkannt und in Textform beschrieben.
Sende Formulare leer und mit falschen Daten ab.
Felder haben Beschriftungen oder Anweisungen, wo eine Eingabe nötig ist.
Prüfe, ob jedes Feld eine sichtbare Beschriftung und Formathinweise hat.
Wenn eine Korrektur bekannt ist, schlägt die Fehlermeldung sie vor.
Lies die Fehlertexte; sagen sie, wie man die Eingabe korrigiert?
Wichtige Übermittlungen lassen sich rückgängig machen, prüfen oder bestätigen.
Geh den Checkout und das Löschen eines Kontos durch.
Informationen, die in einem Prozess schon eingegeben wurden, sind vorausgefüllt oder auswählbar.
Such nach wiederholten Adress- oder E-Mail-Feldern in einem Ablauf.
Die Anmeldung verlangt keinen Gedächtnis- oder Rätseltest ohne Alternative, und Einfügen ist erlaubt.
Versuche, ein Passwort einzufügen; prüfe, ob es eine Option ohne Rätsel gibt.
Eigene Bedienelemente geben Name, Rolle und Zustand an assistive Technologien weiter.
Untersuche eigene Widgets im Barrierefreiheitsbaum.
Statusmeldungen werden angesagt, ohne den Fokus zu verschieben.
Löse In den Warenkorb oder Suchergebnisse aus und hör zu.
Wahrnehmbar
Bedienbar
Verständlich
Robust
Interaktive WCAG 2.2 Checkliste für A und AA
Drucken oder als PDF speichern
Nach Stufe filtern
Nach Prinzip filtern
Alle Stufen
Stufe {level}
Alle Prinzipien
{ticked} von {shown} angezeigten Kriterien abgehakt. Die Haken bleiben nur erhalten, solange dieser Tab geöffnet ist.
Test:
Bestanden
Nicht bestanden
Farbwähler {label}
Hex {label}
WCAG-Kontrastrechner für Farben
Nutzt die Formel für relative Leuchtdichte aus den Definitionen von WCAG 2.2. Gib sechsstellige Hex-Farben ein.
Text
Hintergrund
Beispiel für normalen Text, 16 Pixel regulär.
Beispiel für großen Text, 24 Pixel.
Kontrastverhältnis {ratio}:1
Gib zwei gültige Hex-Farben wie #1f2937 ein.
Ergebnis im Vergleich zu den AA-Schwellenwerten
Einsatz
Benötigt
Ergebnis
Normaler Text (1.4.3)
Großer Text (1.4.3)
Icons, Rahmen, Fokusrahmen (1.4.11)
Normaler Text, AAA (1.4.6)
Kostenlos starten · Keine Kreditkarte nötig