Alle WCAG-2.2-Regeln einfach erklärt

Die WCAG 2.2 haben 86 Regeln, genannt Erfolgskriterien. Jede Regel erklärt eine Sache, die eine Website können muss. Wähle eine Regel, um Beispiel, Praxis-Tipp und Vorlese-Funktion zu sehen.

Du suchst nach Bedeutung statt Stichwort? Nutze die Suche nach Bedeutung.

Prinzip 1: Wahrnehmbar

Alle Inhalte müssen mit mindestens einem Sinn erfassbar sein: sehen, hören oder fühlen.

Richtlinie 1.1: Textalternativen

Alles, was kein Text ist, bekommt eine Beschreibung in Textform.

  • 1.1.1Nicht-Text-Inhalt

    Stufe A

    Bilder, Icons, Diagramme und andere Nicht-Text-Inhalte brauchen eine Textalternative, die denselben Zweck erfüllt. Rein dekorative Bilder werden für Hilfsmittel versteckt.

Richtlinie 1.2: Zeitbasierte Medien

Audio und Video brauchen Untertitel, Beschreibungen oder Transkripte.

Richtlinie 1.3: Anpassbar

Struktur und Bedeutung stecken im Code – nicht nur im Aussehen.

  • 1.3.1Info und Beziehungen

    Stufe A

    Was optisch wie eine Überschrift, Liste, Tabelle oder ein Formularfeld aussieht, muss auch im Code so ausgezeichnet sein. Nur so erkennen Hilfsmittel die Struktur.

  • 1.3.2Bedeutungstragende Reihenfolge

    Stufe A

    Die Reihenfolge im Code ergibt Sinn. Ein Screenreader liest in Code-Reihenfolge vor – nicht so, wie es auf dem Bildschirm angeordnet ist.

  • 1.3.3Sensorische Eigenschaften

    Stufe A

    Anleitungen verlassen sich nicht nur auf Form, Farbe, Größe, Position oder Ton. „Klicke den runden Knopf rechts“ hilft nicht, wenn man ihn nicht sieht.

  • 1.3.4Ausrichtung

    Stufe AA

    Inhalte funktionieren im Hoch- und im Querformat. Manche Menschen haben ihr Gerät fest am Rollstuhl montiert und können es nicht drehen.

  • 1.3.5Eingabezweck bestimmen

    Stufe AA

    Formularfelder für persönliche Daten sagen im Code, was hinein soll. Dann kann der Browser sie automatisch ausfüllen.

  • 1.3.6Zweck bestimmen

    Stufe AAA

    Der Zweck von Bereichen, Knöpfen und Links ist im Code erkennbar. Hilfsmittel können dann zum Beispiel vertraute Symbole einblenden oder Unwichtiges ausblenden.

Richtlinie 1.4: Unterscheidbar

Inhalte sind gut zu sehen und zu hören: Kontrast, Größe, Abstände.

  • 1.4.1Benutzung von Farbe

    Stufe A

    Farbe ist nie das einzige Mittel, um etwas mitzuteilen. Etwa jeder zwölfte Mann sieht Rot und Grün schlecht.

  • 1.4.2Audio-Steuerelement

    Stufe A

    Ton, der von selbst startet und länger als 3 Sekunden läuft, lässt sich pausieren oder leiser stellen. Sonst übertönt er den Screenreader.

  • 1.4.3Kontrast (Minimum)

    Stufe AA

    Text hebt sich deutlich vom Hintergrund ab: mindestens 4,5:1 bei normalem Text und 3:1 bei großem Text (ab 24 px oder 18,66 px fett).

  • 1.4.4Textgröße ändern

    Stufe AA

    Text lässt sich auf 200 % vergrößern, ohne dass Inhalte oder Funktionen verloren gehen.

  • 1.4.5Bilder eines Textes

    Stufe AA

    Text ist echter Text und kein Bild von Text. Echter Text lässt sich vergrößern, umfärben und vorlesen. Logos sind ausgenommen.

  • 1.4.6Kontrast (erhöht)

    Stufe AAA

    Für besonders gute Lesbarkeit: mindestens 7:1 bei normalem Text und 4,5:1 bei großem Text.

  • 1.4.8Visuelle Präsentation

    Stufe AAA

    Menschen können Textblöcke so einstellen, dass sie angenehm zu lesen sind: eigene Farben, höchstens 80 Zeichen pro Zeile, kein Blocksatz, Zeilenabstand mindestens 1,5-fach, größerer Absatzabstand und 200 % Vergrößerung ohne seitliches Scrollen.

  • 1.4.10Umbruch (Reflow)

    Stufe AA

    Bei 320 CSS-Pixel Breite (das entspricht 1280 Pixel bei 400 % Zoom) muss niemand in zwei Richtungen scrollen, um Inhalte zu lesen. Ausgenommen sind Inhalte, die zwei Dimensionen brauchen, etwa Datentabellen, Karten und Diagramme.

  • 1.4.11Nicht-Text-Kontrast

    Stufe AA

    Auch Bedienelemente und wichtige Grafiken brauchen Kontrast: mindestens 3:1 für Rahmen von Eingabefeldern, Icons, Fokusrahmen und Diagrammlinien.

  • 1.4.12Textabstand

    Stufe AA

    Menschen können Abstände vergrößern, ohne dass Text abgeschnitten wird oder sich überlappt: Zeilenabstand 1,5-fach, Absatzabstand 2-fach, Zeichenabstand 0,12-fach und Wortabstand 0,16-fach der Schriftgröße.

  • 1.4.13Eingeblendete Inhalte bei Hover oder Fokus

    Stufe AA

    Tooltips und Aufklapp-Inhalte, die bei Hover oder Fokus erscheinen, lassen sich schließen (Esc), bleiben stehen, wenn man mit der Maus darauf fährt, und verschwinden nicht von selbst.

Prinzip 2: Bedienbar

Alles muss sich bedienen lassen – mit Tastatur, Maus, Touch, Sprache oder Hilfsmitteln, und ohne Zeitdruck.

Richtlinie 2.1: Per Tastatur zugänglich

Alles funktioniert auch ganz ohne Maus.

  • 2.1.1Tastatur

    Stufe A

    Alles lässt sich allein mit der Tastatur bedienen. Viele Menschen nutzen keine Maus: wegen einer Lähmung, eines Tremors, Blindheit – oder einfach, weil es schneller ist.

  • 2.1.2Keine Tastaturfalle

    Stufe A

    Der Tastaturfokus bleibt nirgends stecken. Wer mit Tab in einen Bereich hineinkommt, kommt mit der Tastatur auch wieder heraus.

  • 2.1.4Tastaturkürzel mit Zeichentasten

    Stufe A

    Tastaturkürzel aus nur einem Buchstaben, einer Ziffer oder einem Zeichen lassen sich abschalten, ändern oder sind nur aktiv, solange das Element den Fokus hat. Sonst lösen Spracheingabe oder ein Verrutschen versehentlich Aktionen aus.

Richtlinie 2.2: Ausreichend Zeit

Menschen bekommen die Zeit, die sie brauchen.

  • 2.2.1Zeiteinteilung anpassbar

    Stufe A

    Zeitlimits lassen sich abschalten, anpassen oder verlängern. Manche Menschen brauchen zum Lesen und Tippen deutlich länger.

  • 2.2.2Pausieren, Stoppen, Ausblenden

    Stufe A

    Was sich von selbst bewegt, blinkt oder scrollt, länger als 5 Sekunden läuft und neben anderem Inhalt steht, lässt sich pausieren, stoppen oder ausblenden. Dasselbe gilt für Inhalte, die sich automatisch aktualisieren. Bewegung lenkt stark ab.

  • 2.2.3Keine Zeiteinteilung

    Stufe AAA

    Es gibt überhaupt keine Zeitlimits. Ausnahmen sind echte Live-Ereignisse und Medien, die nun einmal ablaufen.

  • 2.2.4Unterbrechungen

    Stufe AAA

    Unterbrechungen wie Pop-ups und Benachrichtigungen lassen sich aufschieben oder abschalten. Nur Notfälle dürfen stören.

  • 2.2.6Zeitüberschreitungen

    Stufe AAA

    Menschen erfahren vorab, nach wie viel Untätigkeit Daten verloren gehen – außer die Daten bleiben länger als 20 Stunden erhalten.

Richtlinie 2.3: Anfälle und körperliche Reaktionen

Nichts blitzt oder bewegt sich so, dass es krank machen kann.

  • 2.3.1Grenzwert von dreimaligem Blitzen oder weniger

    Stufe A

    Nichts blitzt mehr als dreimal pro Sekunde – oder das Blitzen ist so klein und schwach, dass es unter den Grenzwerten bleibt. Starkes Blitzen kann epileptische Anfälle auslösen – das kann lebensgefährlich sein.

  • 2.3.2Drei Blitze

    Stufe AAA

    Es blitzt nie mehr als dreimal pro Sekunde – ganz ohne Ausnahme für kleine oder dunkle Flächen.

  • 2.3.3Animation durch Interaktionen

    Stufe AAA

    Bewegungseffekte, die durch Scrollen oder Klicken ausgelöst werden, lassen sich abschalten. Parallax und Zoom-Effekte können Schwindel und Übelkeit auslösen.

Richtlinie 2.4: Navigierbar

Menschen finden sich zurecht und wissen immer, wo sie sind.

  • 2.4.1Blöcke umgehen

    Stufe A

    Wiederkehrende Bereiche wie die Navigation lassen sich überspringen. Niemand muss auf jeder Seite 30-mal Tab drücken, um zum Inhalt zu kommen.

  • 2.4.2Seite mit Titel versehen

    Stufe A

    Jede Seite hat einen Titel, der Thema oder Zweck beschreibt. Er steht im Browser-Tab und wird vom Screenreader zuerst vorgelesen.

  • 2.4.3Fokus-Reihenfolge

    Stufe A

    Mit der Tab-Taste wandert der Fokus in einer sinnvollen Reihenfolge – in der Regel von oben nach unten und von links nach rechts.

  • 2.4.4Linkzweck (im Kontext)

    Stufe A

    Aus dem Linktext – zusammen mit dem Satz oder Absatz drumherum – wird klar, wohin der Link führt.

  • 2.4.5Verschiedene Methoden

    Stufe AA

    Es gibt mindestens zwei Wege, eine Seite zu finden – zum Beispiel Navigation und Suche oder Navigation und Sitemap. Ausgenommen sind Seiten, die ein Schritt in einem Ablauf sind, etwa im Bestellvorgang.

  • 2.4.6Überschriften und Beschriftungen

    Stufe AA

    Überschriften und Beschriftungen sagen klar, worum es geht. Screenreader-Nutzende springen von Überschrift zu Überschrift, um eine Seite zu überfliegen.

  • 2.4.7Fokus sichtbar

    Stufe AA

    Man sieht immer, welches Element gerade den Tastaturfokus hat. Ohne sichtbaren Fokus ist Tastaturbedienung wie Mausbedienung ohne Mauszeiger.

  • 2.4.8Position

    Stufe AAA

    Menschen erkennen, wo sie sich innerhalb der Website befinden.

  • 2.4.9Linkzweck (reiner Link)

    Stufe AAA

    Der Linktext ist schon für sich allein verständlich – ganz ohne den Text drumherum. Screenreader können Links als reine Liste anzeigen.

  • 2.4.11Fokus nicht verdeckt (Minimum)

    Stufe AANeu in 2.2

    Das fokussierte Element ist nicht komplett verdeckt – zum Beispiel durch einen fest stehenden Kopfbereich, ein Cookie-Banner oder ein Chat-Fenster.

  • 2.4.13Fokus-Erscheinungsbild

    Stufe AAANeu in 2.2

    Der Fokusrahmen ist groß und kontrastreich genug: mindestens so groß wie ein 2 Pixel dicker Rahmen um das Element, mit einem Kontrast von 3:1 zwischen fokussiert und nicht fokussiert.

Richtlinie 2.5: Eingabemodalitäten

Bedienung per Touch, Zeiger und Bewegung ist einfach und fehlertolerant.

  • 2.5.1Zeigergesten

    Stufe A

    Funktionen, die Mehrfinger- oder Wischgesten brauchen, gibt es auch als einfaches Tippen oder Klicken.

  • 2.5.2Zeigerabbruch

    Stufe A

    Eine Aktion wird erst beim Loslassen ausgelöst, nicht schon beim Herunterdrücken. So lässt sich ein Fehlklick abbrechen: einfach wegziehen.

  • 2.5.3Beschriftung im Namen

    Stufe A

    Der sichtbare Text eines Bedienelements steckt auch in seinem Namen im Code. Sonst funktioniert Sprachsteuerung nicht: „Klicke Senden“ findet den Knopf nicht.

  • 2.5.4Bewegungsaktivierung

    Stufe A

    Funktionen, die durch Schütteln oder Neigen des Geräts ausgelöst werden, gibt es auch als Knopf – und die Bewegungssteuerung lässt sich abschalten.

  • 2.5.7Ziehbewegungen

    Stufe AANeu in 2.2

    Alles, was man durch Ziehen erledigt, geht auch mit einfachen Klicks. Ziehen mit gedrückter Taste ist bei Tremor oder mit Mundstab kaum möglich.

  • 2.5.8Zielgröße (Minimum)

    Stufe AANeu in 2.2

    Klick- und Tippflächen sind mindestens 24 × 24 CSS-Pixel groß – oder haben so viel Abstand, dass man nicht versehentlich das Nachbarelement trifft.

Prinzip 3: Verständlich

Texte und Bedienung müssen klar und vorhersehbar sein. Fehler lassen sich leicht vermeiden und beheben.

Richtlinie 3.1: Lesbar

Die Sprache ist im Code angegeben und Text ist verständlich.

  • 3.1.1Sprache der Seite

    Stufe A

    Die Hauptsprache der Seite steht im Code. Nur dann liest ein Screenreader mit der richtigen Aussprache vor – sonst klingt Deutsch wie von einer englischen Stimme gesprochen.

  • 3.1.5Leseniveau

    Stufe AAA

    Ist ein Text schwerer zu lesen als nach etwa 9 Schuljahren zu erwarten, gibt es eine einfachere Fassung oder eine Zusammenfassung.

  • 3.1.6Aussprache

    Stufe AAA

    Wo die Bedeutung eines Wortes von der Aussprache abhängt, wird die Aussprache angegeben.

Richtlinie 3.2: Vorhersehbar

Seiten verhalten sich so, wie Menschen es erwarten.

  • 3.2.1Bei Fokus

    Stufe A

    Nur weil ein Element den Fokus bekommt, passiert nichts Unerwartetes: kein Seitenwechsel, kein neues Fenster, kein Absenden.

  • 3.2.2Bei Eingabe

    Stufe A

    Eine Auswahl oder Eingabe löst nicht von selbst etwas Unerwartetes aus – außer es wurde vorher angekündigt.

  • 3.2.5Änderung auf Anfrage

    Stufe AAA

    Größere Änderungen passieren nur, wenn jemand sie auslöst – oder sie lassen sich abschalten. Keine automatischen Weiterleitungen, keine ungefragt neuen Fenster.

  • 3.2.6Konsistente Hilfe

    Stufe ANeu in 2.2

    Wenn Hilfe-Angebote wie Kontakt, Chat oder häufige Fragen auf mehreren Seiten vorkommen, stehen sie überall an derselben Stelle in der Reihenfolge der Seite.

Richtlinie 3.3: Hilfestellung bei der Eingabe

Formulare helfen, Fehler zu vermeiden und zu korrigieren.

  • 3.3.1Fehlererkennung

    Stufe A

    Bei einem Eingabefehler wird in Textform gesagt, welches Feld betroffen ist und was falsch ist. Ein roter Rahmen allein reicht nicht.

  • 3.3.3Fehlerempfehlung

    Stufe AA

    Fehlermeldungen sagen nicht nur, dass etwas falsch ist, sondern auch, wie es richtig geht.

  • 3.3.5Hilfe

    Stufe AAA

    Zu Eingabefeldern und Aufgaben gibt es Hilfe direkt an Ort und Stelle.

  • 3.3.6Fehlervermeidung (alle)

    Stufe AAA

    Bei allen Formularen – nicht nur bei wichtigen – kann man Eingaben prüfen, korrigieren oder rückgängig machen.

  • 3.3.7Redundante Eingabe

    Stufe ANeu in 2.2

    Was jemand in einem Ablauf schon einmal eingegeben hat, muss er nicht noch einmal tippen. Es wird vorausgefüllt oder zur Auswahl angeboten.

  • 3.3.8Barrierefreie Authentifizierung (Minimum)

    Stufe AANeu in 2.2

    Die Anmeldung verlangt keinen Gedächtnis- oder Denktest: kein Passwort aus dem Kopf abtippen, kein Rätsel lösen – außer es gibt eine Alternative oder Hilfe. Erlaubt bleiben auf dieser Stufe: Objekte erkennen und selbst hochgeladene Bilder wiedererkennen.

Prinzip 4: Robust

Inhalte müssen mit Browsern und Hilfsmitteln wie Screenreadern zuverlässig funktionieren – heute und morgen.

Richtlinie 4.1: Kompatibel

Bedienelemente geben Name, Rolle und Zustand an Hilfsmittel weiter.

  • 4.1.1Syntaxanalyse

    Stufe AEntfallen

    Diese Regel wurde mit WCAG 2.2 gestrichen. Sie verlangte korrekt geschlossene und verschachtelte Elemente, keine doppelten Attribute und eindeutige IDs. Heutige Browser und Hilfsmittel kommen mit solchen Code-Fehlern zurecht; echte Probleme decken andere Regeln ab.

  • 4.1.2Name, Rolle, Wert

    Stufe A

    Jedes Bedienelement teilt Hilfsmitteln mit, wie es heißt (Name), was es ist (Rolle) und in welchem Zustand es ist (Wert) – zum Beispiel „Menü, Schalter, ausgeklappt“.

  • 4.1.3Statusmeldungen

    Stufe AA

    Meldungen wie „Gespeichert“, „3 Treffer“ oder „In den Warenkorb gelegt“ werden vom Screenreader angesagt, ohne dass der Fokus dorthin springen muss.