Alle 55 Kriterien, verständlich erklärt.

Die WCAG 2.2 haben 55 Erfolgskriterien der Stufen A und AA. Hier steht zu jedem, was es verlangt, wem es hilft, woran Websites oft scheitern und wie Sie es beheben.

Vier Prinzipien, 55 Kriterien

1. Wahrnehmbar 20 Kriterien
2. Bedienbar 20 Kriterien
3. Verständlich 13 Kriterien
4. Robust 2 Kriterien

Kurz gesagt

Die WCAG 2.2 haben auf den Stufen A und AA 55 Erfolgskriterien, geordnet nach vier Prinzipien: wahrnehmbar, bedienbar, verständlich, robust. Stufe AA ist der Maßstab, auf den die EN 301 549 für Websites verweist. Jede Seite unten erklärt ein Kriterium: was es bedeutet, wem es hilft, typische Fehler und wie wir es prüfen.

1. Wahrnehmbar

1.1.1 A

Nicht-Text-Inhalt

Bilder, Icons und Grafiken brauchen eine Textalternative, die denselben Zweck erfüllt. Rein dekorative Bilder werden für Hilfsmittel ausgeblendet.
1.2.1 A

Nur Audio und nur Video (aufgezeichnet)

Aufgezeichnete Audiodateien brauchen ein Transkript. Stumme Videos brauchen eine Textbeschreibung oder eine Tonspur mit denselben Informationen.
1.2.2 A

Untertitel (aufgezeichnet)

Aufgezeichnete Videos mit Ton brauchen Untertitel, die alles Gesprochene und wichtige Geräusche zeitgleich als Text zeigen.
1.2.3 A

Audiodeskription oder Medienalternative (aufgezeichnet)

Was in aufgezeichneten Videos nur zu sehen ist, muss auch als Audiodeskription oder als vollständige Textfassung verfügbar sein.
1.2.4 AA

Untertitel (live)

Live-Übertragungen mit Bild und Ton, etwa Webinare oder Livestreams, brauchen Untertitel in Echtzeit.
1.2.5 AA

Audiodeskription (aufgezeichnet)

Aufgezeichnete Videos brauchen eine Audiodeskription, wenn das Bild Informationen zeigt, die der Ton nicht vermittelt.
1.3.1 A

Info und Beziehungen

Überschriften, Listen, Tabellen und Formulare müssen im Code als solche ausgezeichnet sein, nicht nur optisch so aussehen.
1.3.2 A

Bedeutungstragende Reihenfolge

Wenn die Reihenfolge für das Verständnis wichtig ist, muss die Lesereihenfolge im Code dieselbe sein wie auf dem Bildschirm.
1.3.3 A

Sensorische Eigenschaften

Anleitungen dürfen sich nicht nur auf Form, Farbe, Größe, Position oder Ton stützen; nennen Sie zusätzlich Text oder Namen.
1.3.4 AA

Bildschirmausrichtung

Ihre Website muss im Hoch- und im Querformat funktionieren und darf sich nicht auf eine Bildschirmausrichtung festlegen.
1.3.5 AA

Eingabezweck bestimmen

Formularfelder für persönliche Angaben wie Name, E-Mail, Telefon oder Adresse brauchen den passenden autocomplete-Wert.
1.4.1 A

Benutzung von Farbe

Farbe darf nicht das einzige Mittel sein, um Informationen zu zeigen, Aktionen anzuzeigen oder Elemente zu unterscheiden.
1.4.2 A

Audio-Steuerelement

Ton, der automatisch länger als drei Sekunden spielt, muss sich anhalten, stoppen oder unabhängig von der Systemlautstärke leiser stellen lassen.
1.4.3 AA

Kontrast (Minimum)

Text braucht genug Kontrast zum Hintergrund: mindestens 4,5:1, große Schrift mindestens 3:1.
1.4.4 AA

Textgröße ändern

Text muss sich ohne Hilfsmittel auf 200 % vergrößern lassen, ohne dass Inhalte oder Funktionen verloren gehen.
1.4.5 AA

Bilder eines Textes

Verwenden Sie echten Text statt Bildern von Text, außer bei Logos oder wenn die Darstellung als Bild wesentlich ist.
1.4.10 AA

Umbruch (Reflow)

Bei 320 CSS-Pixel Breite (das entspricht 400 % Zoom) muss der Inhalt ohne horizontales Scrollen lesbar und bedienbar sein.
1.4.11 AA

Nicht-Text-Kontrast

Ränder von Eingabefeldern, Icons, Fokusanzeigen und Diagrammteile brauchen mindestens 3:1 Kontrast zu ihrer Umgebung.
1.4.12 AA

Textabstand

Wenn Nutzende Zeilen-, Absatz-, Buchstaben- und Wortabstand vergrößern, darf kein Text abgeschnitten werden oder überlappen.
1.4.13 AA

Eingeblendete Inhalte bei Hover oder Fokus

Inhalte, die bei Hover oder Fokus erscheinen, müssen sich schließen lassen, mit der Maus erreichbar sein und sichtbar bleiben.

2. Bedienbar

2.1.1 A

Tastatur

Jede Funktion Ihrer Website muss sich allein mit der Tastatur bedienen lassen, ohne Maus und ohne Touchscreen.
2.1.2 A

Keine Tastaturfalle

Der Tastaturfokus darf nie in einem Bereich festsitzen. Besucher müssen jedes Element mit der Tastatur auch wieder verlassen können.
2.1.4 A

Tastaturkurzbefehle

Kurzbefehle aus nur einer Taste (Buchstabe, Zahl, Zeichen) müssen sich abschalten oder umbelegen lassen oder nur bei Fokus wirken.
2.2.1 A

Zeitbegrenzung anpassbar

Zeitlimits auf Ihrer Website müssen sich abschalten, anpassen oder vor Ablauf verlängern lassen, außer in wenigen Ausnahmefällen.
2.2.2 A

Pausieren, beenden, ausblenden

Bewegte, blinkende oder sich selbst aktualisierende Inhalte müssen sich pausieren, beenden oder ausblenden lassen.
2.3.1 A

Grenzwert von dreimaligem Blitzen oder weniger

Nichts auf Ihrer Website darf öfter als dreimal pro Sekunde blitzen, außer das Blitzen bleibt unter den festgelegten Grenzwerten.
2.4.1 A

Blöcke umgehen

Besucher müssen Bereiche, die sich auf vielen Seiten wiederholen, wie die Hauptnavigation, überspringen können.
2.4.2 A

Seite mit Titel

Jede Seite braucht einen Titel, der Thema oder Zweck beschreibt und sie von anderen Seiten unterscheidet.
2.4.3 A

Fokus-Reihenfolge

Wer per Tab-Taste durch die Seite geht, muss die Elemente in einer Reihenfolge erreichen, die Sinn und Bedienung erhält.
2.4.4 A

Linkzweck (im Kontext)

Der Zweck jedes Links muss aus dem Linktext allein oder zusammen mit seinem direkten Umfeld erkennbar sein.
2.4.5 AA

Verschiedene Methoden

Besucher brauchen mehr als einen Weg, eine Seite innerhalb Ihrer Website zu finden, etwa Menü plus Suche oder Sitemap.
2.4.6 AA

Überschriften und Beschriftungen

Überschriften und Beschriftungen müssen Thema oder Zweck des Inhalts beschreiben, der darauf folgt.
2.4.7 AA

Fokus sichtbar

Wer per Tastatur arbeitet, muss jederzeit sehen, welches Element gerade den Fokus hat.
2.4.11 AA neu in WCAG 2.2

Fokus nicht verdeckt (Minimum)

Ein Element, das den Tastaturfokus erhält, darf nicht vollständig von anderen Inhalten wie Kopfzeile oder Cookie-Hinweis verdeckt sein.
2.5.1 A

Zeigergesten

Funktionen mit Mehrfinger- oder Wischgesten müssen auch mit einem einfachen Tippen oder Klicken bedienbar sein.
2.5.2 A

Zeigeraktion abbrechen

Aktionen per Maus oder Finger sollen erst beim Loslassen auslösen oder sich abbrechen bzw. rückgängig machen lassen.
2.5.3 A

Beschriftung im Namen

Der zugängliche Name eines Bedienelements muss den sichtbaren Text seiner Beschriftung enthalten, am besten am Anfang.
2.5.4 A

Betätigung durch Bewegung

Funktionen, die durch Schütteln, Neigen oder andere Bewegungen ausgelöst werden, brauchen eine Bedienalternative und eine Abschaltung.
2.5.7 AA neu in WCAG 2.2

Ziehbewegungen

Alles, was sich per Ziehen mit Maus oder Finger erledigen lässt, muss auch mit einfachem Klicken oder Tippen gehen.
2.5.8 AA neu in WCAG 2.2

Zielgröße (Minimum)

Klick- und Tippziele müssen mindestens 24 × 24 CSS-Pixel groß sein oder genügend Abstand zu anderen Zielen haben.

3. Verständlich

3.1.1 A

Sprache der Seite

Die Hauptsprache jeder Seite muss im Code angegeben sein, damit Screenreader und Übersetzer den Text richtig aussprechen und erkennen.
3.1.2 AA

Sprache von Teilen

Textstellen in einer anderen Sprache als der Seitensprache müssen im Code markiert sein, etwa ein englisches Zitat auf einer deutschen Seite.
3.2.1 A

Bei Fokus

Wenn ein Element den Fokus erhält, darf sich nichts Grundlegendes ändern: kein Absenden, kein neues Fenster, kein Sprung auf eine andere Seite.
3.2.2 A

Bei Eingabe

Wer ein Feld ausfüllt, eine Auswahl trifft oder ein Kästchen anhakt, darf nicht ungefragt auf eine andere Seite oder in einen anderen Zusammenhang geraten.
3.2.3 AA

Konsistente Navigation

Navigation, die auf mehreren Seiten vorkommt, steht überall in derselben Reihenfolge, damit sich Besucher auf jeder Seite sofort zurechtfinden.
3.2.4 AA

Konsistente Erkennung

Elemente mit derselben Aufgabe heißen auf allen Seiten gleich, etwa immer „Suche“ statt mal „Suche“, mal „Finden“, mal „Los“.
3.2.6 A neu in WCAG 2.2

Konsistente Hilfe

Gibt es auf mehreren Seiten Hilfe wie Telefon, Kontaktformular, Chat oder FAQ, steht sie überall an derselben Stelle im Verhältnis zum übrigen Inhalt.
3.3.1 A

Fehlererkennung

Erkennt ein Formular eine fehlerhafte Eingabe, muss es das betroffene Feld benennen und den Fehler in Textform beschreiben, nicht nur mit roter Farbe.
3.3.2 A

Beschriftungen oder Anweisungen

Jedes Formularfeld braucht eine sichtbare Beschriftung oder Anleitung, inklusive Hinweisen auf Pflichtfelder und verlangte Formate.
3.3.3 AA

Fehlerempfehlung

Wird ein Eingabefehler erkannt und ist eine Korrektur bekannt, schlägt die Fehlermeldung sie vor, etwa das richtige Datumsformat.
3.3.4 AA

Fehlervermeidung (rechtlich, finanziell, Daten)

Bestellungen, Verträge, Zahlungen und das Ändern oder Löschen gespeicherter Daten lassen sich vor dem Absenden prüfen, korrigieren oder rückgängig machen.
3.3.7 A neu in WCAG 2.2

Redundante Eingabe

Angaben, die jemand im selben Vorgang schon gemacht hat, werden nicht erneut abgefragt, sondern automatisch übernommen oder zur Auswahl angeboten.
3.3.8 AA neu in WCAG 2.2

Barrierefreie Authentifizierung (Minimum)

Die Anmeldung darf keine Gedächtnis- oder Rätselaufgabe verlangen, außer es gibt eine Alternative oder Hilfe wie Passwortmanager und Einfügen.

4. Robust

4.1.2 A

Name, Rolle, Wert

Jedes Bedienelement teilt Hilfsmitteln mit, wie es heißt, was es ist und in welchem Zustand es ist, etwa „Menü, Schalter, ausgeklappt“.
4.1.3 AA

Statusmeldungen

Statusmeldungen wie „In den Warenkorb gelegt“ oder „12 Treffer“ werden von Screenreadern angesagt, ohne dass der Fokus dorthin springen muss.