Aktuelle barrierefreie Website Checkliste nach WCAG 2.2

Barrierefreie Website Checkliste nach WCAG 2.2

Zur Orientierung sind die Erfolgskriterien nach den vier WCAG-Prinzipien Wahrnehmbar, Bedienbar, Verständlich und Robust gegliedert. Jedes Kriterium ist mit Nummer, Name, Konformitätsstufe (A, AA, AAA) und einer kurzen Beschreibung versehen. Die hinzugekommenen Kriterien der WCAG 2.2 sind zusätzlich als (Neu) markiert.

1. Wahrnehmbar

Dieses Prinzip stellt sicher, dass Informationen und die Benutzeroberfläche so präsentiert werden, dass sie von allen Nutzern wahrgenommen werden können.

• 1.1 Textalternativen
  • 1.1.1 Nicht-Text-Inhalt (A): Bieten Sie für alle Nicht-Text-Inhalte eine Textalternative an, die deren Zweck erfüllt.
• 1.2 Zeitbasierte Medien
  • 1.2.1 Nur-Audio und Nur-Video (Prerecorded) (A): Bieten Sie eine Alternative für aufgezeichnete Audio- oder Videoinhalte.
  • 1.2.2 Untertitel (Prerecorded) (A): Untertitel für aufgezeichnete Audio-Inhalte in synchronisierten Medien.
  • 1.2.3 Audiodeskription oder Medien-Alternative (Prerecorded) (A): Audiodeskription für aufgezeichnete Videos.
  • 1.2.4 Untertitel (Live) (AA): Untertitel für Live-Audioinhalte.
  • 1.2.5 Audiodeskription (Prerecorded) (AA): Audiodeskription für aufgezeichnete Videos.
  • 1.2.6 Gebärdensprache (Prerecorded) (AAA): Gebärdensprach-Dolmetschung für aufgezeichnete Videos.
  • 1.2.7 Erweiterte Audiodeskription (Prerecorded) (AAA): Wenn die Pausen im Video nicht ausreichen, muss eine erweiterte Audiodeskription bereitgestellt werden.
  • 1.2.8 Medien-Alternative (Prerecorded) (AAA): Bieten Sie eine Textalternative für alle aufgezeichneten synchronisierten Medien an.
  • 1.2.9 Nur-Audio (Live) (AAA): Bieten Sie eine Alternative für Live-Audio-only-Inhalte an.
• 1.3 Anpassbar
  • 1.3.1 Informationen und Beziehungen (A): Struktur und Beziehungen von Inhalten müssen programmatisch erkennbar sein.
  • 1.3.2 Sinnvolle Reihenfolge (A): Die Lesereihenfolge muss programmatisch korrekt sein.
  • 1.3.3 Sensorische Merkmale (A): Anweisungen dürfen nicht nur auf sensorischen Merkmalen (Farbe, Grösse etc.) basieren.
  • 1.3.4 Ausrichtung (AA): Inhalte dürfen nicht auf eine einzige Display-Ausrichtung beschränkt sein.
  • 1.3.5 Zweck der Eingabe (AA): Der Zweck von Eingabefeldern (z. B. «Name», «Adresse») muss programmatisch erkennbar sein.
  • 1.3.6 Zweck identifizieren (AAA): Der Zweck von UI-Komponenten, Icons und Regionen muss programmatisch erkennbar sein.
• 1.4 Unterscheidbar
  • 1.4.1 Verwendung von Farbe (A): Farbe darf nicht das einzige Mittel zur Informationsvermittlung sein.
  • 1.4.2 Audio-Kontrolle (A): Automatisch startende Audios müssen gestoppt oder stumm geschaltet werden können.
  • 1.4.3 Kontrast (Minimum) (AA): Text muss einen Kontrast von mindestens 4.5:1 haben.
  • 1.4.4 Textgrösse anpassen (AA): Text muss auf 200 % vergrösserbar sein.
  • 1.4.5 Bilder von Text (AA): Verwenden Sie Text anstelle von Bildern von Text, es sei denn, es ist unverzichtbar.
  • 1.4.6 Kontrast (Enhanced) (AAA): Text muss einen Kontrast von mindestens 7:1 haben.
  • 1.4.7 Audio-Hintergrund (AAA): Der Hintergrundton muss mindestens 20 Dezibel leiser als die Hauptsprache sein.
  • 1.4.8 Visuelle Präsentation (AAA): Nutzer müssen die visuelle Darstellung von Textblöcken anpassen können.
  • 1.4.9 Bilder von Text (No Exception) (AAA): Bilder von Text dürfen nur für rein dekorative Zwecke verwendet werden.
  • 1.4.10 Umbruch (Reflow) (AA): Inhalte müssen bei 400 % Vergrösserung ohne horizontale Bildlaufleisten lesbar sein.
  • 1.4.11 Nicht-Text-Kontrast (AA): UI-Komponenten und Grafiken müssen einen Kontrast von mindestens 3:1 haben.
  • 1.4.12 Textabstand (AA): Inhalte müssen lesbar bleiben, wenn Nutzer den Textabstand anpassen.
  • 1.4.13 Inhalt bei Hover oder Fokus (AA): Zusätzliche Inhalte, die bei Hover oder Fokus erscheinen, müssen persistent und schliessbar sein.

2. Bedienbar

Dieses Prinzip stellt sicher, dass die Benutzeroberfläche und die Navigation bedienbar sind.

• 2.1 Tastatur-Zugänglichkeit
  • 2.1.1 Tastatur (A): Alle Funktionen müssen über die Tastatur bedienbar sein.
  • 2.1.2 Keine Tastaturfalle (A): Nutzer dürfen nicht auf der Seite «gefangen» sein.
  • 2.1.3 Tastatur (No Exception) (AAA): Alle Funktionen müssen ohne zeitliche Einschränkungen über die Tastatur bedienbar sein.
  • 2.1.4 Tastaturkürzel (Character Key Shortcuts) (A): Ein-Zeichen-Tastaturkürzel müssen deaktivierbar oder anpassbar sein.
• 2.2 Genug Zeit
  • 2.2.1 Zeitlich einstellbar (A): Zeitlimits müssen vom Nutzer anpassbar sein.
  • 2.2.2 Pause, Stopp, Verbergen (A): Sich bewegende oder automatisch aktualisierende Inhalte müssen steuerbar sein.
  • 2.2.3 Kein Zeitlimit (AAA): Timing ist kein wesentlicher Teil des Inhalts.
  • 2.2.4 Unterbrechungen (AAA): Unterbrechungen können vom Nutzer aufgeschoben oder unterdrückt werden.
  • 2.2.5 Re-Authentifizierung (AAA): Daten dürfen bei erneuter Anmeldung nicht verloren gehen.
  • 2.2.6 Timeouts (A): Nutzer werden vor Datenverlust durch Inaktivität gewarnt.
• 2.3 Anfälle und physische Reaktionen
  • 2.3.1 Drei Flashes oder Below Threshold (A): Inhalte dürfen nicht mehr als dreimal pro Sekunde blinken.
  • 2.3.2 Drei Flashes (AAA): Inhalte dürfen nicht mehr als dreimal pro Sekunde blinken.
  • 2.3.3 Animationen von Interaktionen (AAA): Animationen, die durch Interaktionen ausgelöst werden, können deaktiviert werden.
• 2.4 Navigierbar
  • 2.4.1 Blöcke umgehen (A): Ein Mechanismus zum Überspringen von wiederholten Inhalten muss vorhanden sein.
  • 2.4.2 Seitentitel (A): Jede Seite muss einen klaren Titel haben.
  • 2.4.3 Fokus-Reihenfolge (A): Die Fokus-Reihenfolge muss logisch sein.
  • 2.4.4 Link-Zweck (In Context) (A): Der Zweck eines Links muss aus dem Linktext oder dem Kontext erkennbar sein.
  • 2.4.5 Mehrere Wege (AA): Es muss mehr als einen Weg geben, um eine Seite zu finden.
  • 2.4.6 Überschriften und Labels (AA): Überschriften und Beschriftungen müssen ihren Zweck beschreiben.
  • 2.4.7 Fokus sichtbar (AA): Die Tastaturfokus-Anzeige muss immer sichtbar sein.
  • 2.4.8 Standort (AAA): Informationen über den aktuellen Standort auf der Website müssen verfügbar sein.
  • 2.4.9 Link-Zweck (Link Only) (AAA): Der Zweck eines Links muss allein aus dem Linktext erkennbar sein.
  • 2.4.10 Abschnitts-Überschriften (AAA): Inhalte müssen durch Überschriften strukturiert sein.
  • 2.4.11 Fokus nicht verdeckt (Minimum) (AA) (Neu): Fokussierte Elemente dürfen nicht vollständig von anderen Inhalten verdeckt werden.
  • 2.4.12 Fokus nicht verdeckt (Enhanced) (AAA) (Neu): Fokussierte Elemente dürfen in keiner Weise verdeckt werden.
  • 2.4.13 Fokus-Erscheinung (AAA) (Neu): Die Fokus-Markierung muss einen ausreichenden Kontrast und eine Mindestgrösse haben.
• 2.5 Eingabemodalitäten
  • 2.5.1 Zeiger-Gesten (A): Komplexe Gesten müssen auch mit einer einfachen Zeigeraktion bedienbar sein.
  • 2.5.2 Zeiger-Abbruch (A): Aktionen, die beim Niederdrücken eines Pointers ausgelöst werden, müssen abbrechbar sein.
  • 2.5.3 Label im Namen (A): Das sichtbare Label eines Bedienelements muss im programmatischen Namen enthalten sein.
  • 2.5.4 Bewegungsauslösung (A): Funktionen, die durch Bewegung ausgelöst werden, müssen auch über UI-Komponenten bedienbar sein.
  • 2.5.5 Zielgrösse (Enhanced) (AAA): Interaktive Elemente müssen mindestens 44 x 44 CSS-Pixel gross sein.
  • 2.5.6 Gleichzeitige Eingabemechanismen (AAA): Die Nutzung verschiedener Eingabemethoden auf einer Plattform darf nicht eingeschränkt werden.
  • 2.5.7 Ziehbewegungen (AA) (Neu): Drag-and-Drop-Funktionen müssen auch über eine einfache Zeigeraktion bedienbar sein.
  • 2.5.8 Zielgrösse (Minimum) (AA) (Neu): Interaktive Elemente müssen mindestens 24 x 24 CSS-Pixel gross sein.

3. Verständlich

Dieses Prinzip stellt sicher, dass Informationen und die Bedienung verständlich sind.

• 3.1 Lesbar
  • 3.1.1 Sprache der Seite (A): Die Standardsprache der Seite muss programmatisch bestimmt werden können.
  • 3.1.2 Sprache von Teilen (AA): Sprachwechsel innerhalb eines Textes müssen programmatisch erkennbar sein.
  • 3.1.3 Ungewöhnliche Wörter (AAA): Definitionen für ungewöhnliche oder umgangssprachliche Wörter müssen verfügbar sein.
  • 3.1.4 Abkürzungen (AAA): Erläuterungen für Abkürzungen müssen verfügbar sein.
  • 3.1.5 Leselevel (AAA): Text sollte ein niedriges Leseniveau haben oder eine leichtere Version muss verfügbar sein.
  • 3.1.6 Aussprache (AAA): Die Aussprache von Wörtern muss programmatisch bestimmt werden können.
• 3.2 Vorhersehbar
  • 3.2.1 Bei Fokus (A): Eine Fokusänderung darf keinen unerwarteten Kontextwechsel verursachen.
  • 3.2.2 Bei Eingabe (A): Eine Eingabe in einem Formularfeld darf keinen unerwarteten Kontextwechsel verursachen.
  • 3.2.3 Konsistente Navigation (AA): Die Navigation muss auf allen Seiten konsistent sein.
  • 3.2.4 Konsistente Identifizierung (AA): Komponenten mit gleicher Funktionalität müssen einheitlich benannt sein.
  • 3.2.5 Änderung auf Anfrage (AAA): Kontextänderungen dürfen nur auf Nutzeranfrage erfolgen.
  • 3.2.6 Konsistente Hilfe (A) (Neu): Hilfsmechanismen müssen auf allen Seiten an der gleichen relativen Position platziert sein.
• 3.3 Eingabeunterstützung
  • 3.3.1 Fehleridentifizierung (A): Eingabefehler müssen in Textform identifiziert werden.
  • 3.3.2 Beschriftungen oder Anweisungen (A): Formularelemente müssen Labels oder Anweisungen haben.
  • 3.3.3 Fehlervorschlag (AA): Vorschläge zur Fehlerkorrektur müssen bereitgestellt werden.
  • 3.3.4 Fehlervermeidung (Legal, Financial, Data) (AA): Bei sensiblen Daten muss es eine Möglichkeit zur Überprüfung, Bestätigung oder Umkehrung geben.
  • 3.3.5 Hilfe (AAA): Kontexthilfe muss verfügbar sein.
  • 3.3.6 Fehlervermeidung (All) (AAA): Alle Fehler können durch Überprüfung oder Korrektur vermieden werden.
  • 3.3.7 Redundante Eingabe (A) (Neu): Zuvor eingegebene Informationen müssen automatisch ausgefüllt oder zur Auswahl verfügbar sein.
  • 3.3.8 Zugängliche Authentifizierung (Minimum) (AA) (Neu): Die Authentifizierung darf keine kognitiven Tests erfordern, es sei denn, es gibt eine Alternative.
  • 3.3.9 Zugängliche Authentifizierung (Enhanced) (AAA) (Neu): Authentifizierungsmechanismen dürfen generell keine kognitiven Tests erfordern.

4. Robust

Dieses Prinzip stellt sicher, dass Inhalte von einer Vielzahl von User Agents und assistiven Technologien zuverlässig interpretiert werden können.

Inhalte müssen robust genug sein, um von einer Vielzahl von User Agents, einschliesslich assistiver Technologien, zuverlässig interpretiert zu werden.

• 4.1 Kompatibel
  • 4.1.2 Name, Rolle, Wert (A): Name, Rolle und Wert von UI-Komponenten müssen programmatisch erkennbar sein.
  • 4.1.3 Statusmeldungen (AA): Statusmeldungen müssen programmatisch erkennbar sein.

WCAG 2.2 als zentraler Leitfaden für digitale Barrierefreiheit

Mit der Integration von neuen Kriterien in WCAG 2.2 wird der Fokus klar auf die Verbesserung der Zugänglichkeit für mobile Geräte, Menschen mit kognitiven Behinderungen und Sehbehinderungen gelegt.

In unserem Beitrag Unterschied WCAG 2.1 und WCAG 2.2 findest du zudem alle wesentlichen Unterschiede einfach und übersichtlich aufgelistet.

Die Web Content Accessibility Guidelines 2.2 sind ein dynamischer Standard, der sich kontinuierlich weiterentwickelt, um den sich ändernden Technologien und den Bedürfnissen aller Nutzer gerecht zu werden.

Diese umfassende Checkliste dient als Leitfaden, um sicherzustellen, dass deine digitalen Inhalte den aktuellsten Anforderungen entsprechen. Die Einhaltung der WCAG 2.2 ist nicht nur eine gesetzliche oder ethische Verpflichtung, sondern auch ein entscheidender Schritt, um eine wirklich inklusive Nutzererfahrung zu schaffen, die allen zugutekommt.