WCAG 2.2 Checkliste
Vier Punkte, die fast jede Seite betreffen
Schaltflächen, Text, Bilder, Formularfelder: vier Stellen jeder Seite.
Prüfroute für A und AA
20 Kriterien, vier Durchgänge, eine Seite
Prüfen Sie dieselbe Seite nacheinander auf Struktur, Tastatur, Darstellung und Eingaben. So wird aus 20 Einzelpunkten eine wiederholbare Route.
Ein bestandenes Teilset weist die vollständige Erfüllung nicht nach. Für AA müssen alle anwendbaren Kriterien der Stufen A und AA erfüllt sein.
Struktur & Bedeutung
Mit Quelltext und Barrierefreiheitsbaum.
- 1.1.1 · A Nicht-Text-Inhalt
Jedes
imgprüfen: passendesalt, bei Dekorationalt="". - 1.3.1 · A Info und Beziehungen
Überschriften, Listen, Tabellen und Feldgruppen im Barrierefreiheitsbaum vergleichen.
- 1.3.5 · AA Eingabezweck bestimmen
Persönliche Datenfelder auf den richtigen
autocomplete-Wert prüfen. - 3.1.1 · A Sprache der Seite
Am
html-Element steht die Hauptsprache, etwalang="de". - 4.1.2 · A Name, Rolle, Wert
Eigene Bedienelemente melden im Barrierefreiheitsbaum Name, Rolle und Zustand.
Tastatur & Fokus
Ein Durchgang ohne Maus oder Touch.
- 2.1.1 · A Tastatur
Jede Funktion nur mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten bedienen.
- 2.1.2 · A Keine Tastaturfalle
Aus Dialog, Karte und Player wieder mit Tastaturbefehlen herauskommen.
- 2.4.1 · A Blöcke umgehen
Seite neu laden und Tab drücken: Der Sprunglink führt direkt zum Hauptinhalt.
- 2.4.4 · A Linkzweck im Kontext
Linkliste lesen: Ziele werden aus Linktext und zugehörigem Kontext verständlich.
- 2.4.7 · AA Fokus sichtbar
Beim vollständigen Tab-Weg bleibt an jeder Station eine sichtbare Markierung.
Darstellung & Zoom
Mit Messwerkzeug und schmalem Ansichtsfenster.
- 1.4.3 · AA Kontrast (Minimum)
Textfarben messen: normaler Text 4,5:1, großer Text 3:1.
- 1.4.10 · AA Reflow
1280 CSS-Pixel Breite auf 400 % zoomen: Inhalt bleibt ohne Scrollen in zwei Richtungen nutzbar.
- 1.4.11 · AA Nicht-Text-Kontrast
Erkennbare Grenzen und Zustände von Bedienelementen gegen angrenzende Farben messen.
- 2.4.11 · AA · neu Fokus nicht verdeckt
Durch klebende Kopf- und Fußleisten tabben: Das fokussierte Element bleibt teilweise sichtbar.
- 2.5.8 · AA · neu Zielgröße (Minimum)
Kleine Ziele messen: 24 × 24 CSS-Pixel oder eine der definierten Ausnahmen nachweisen.
Formulare & Zustände
Leer, ausgefüllt, fehlerhaft und wiederholt.
- 2.5.7 · AA · neu Ziehbewegungen
Für Schieberegler und Sortierflächen eine Bedienung ohne Ziehbewegung finden.
- 3.2.6 · A · neu Konsistente Hilfe
Drei Seiten vergleichen: Wiederholte Hilfen erscheinen in derselben relativen Reihenfolge.
- 3.3.2 · A Beschriftungen oder Anweisungen
Jedes Feld hat die nötige sichtbare Beschriftung; Formatvorgaben stehen vor der Eingabe.
- 3.3.7 · A · neu Redundante Eingabe
Einen mehrstufigen Prozess durchlaufen: Bereits eingegebene Daten werden übernommen oder auswählbar.
- 3.3.8 · AA · neu Zugängliche Authentifizierung
Passwortmanager und Einfügen testen; ein Rätsel hat eine zugängliche Alternative.
Die sechs neuen A-/AA-Punkte in dieser Route
- 2.4.11Fokus nicht verdeckt
- 2.5.7Ziehbewegungen
- 2.5.8Zielgröße
- 3.2.6Konsistente Hilfe
- 3.3.7Redundante Eingabe
- 3.3.8Zugängliche Authentifizierung
Aus Häkchen werden Fundstellen
Notieren Sie bei jedem nicht erfüllten Punkt Seite, Zustand, Element und Kriteriumsnummer. Prüfen Sie danach weitere Seitentypen und vollständige Prozesse; eine einzelne Beispielseite reicht als vollständiger Nachweis nicht.
Aus dem Prüfbericht
Vier Punkte, vier Befunde
Kritisch Die Symbolschalter sind zu klein Regel target-size
18 mal 18 Pixel trifft kein Finger sicher. 24 mal 24 sind die Untergrenze, 44 sind bequem.
Kritisch Die Bildunterschrift verschwindet Regel color-contrast
Graugrüne Schrift auf graugrüner Fläche ergibt 1,17 zu 1. Für normalen Text sind 4,5 zu 1 gefordert.
Kritisch Katalogbilder ohne alt-Attribut Regel image-alt
Ohne alt liest ein Vorleseprogramm den Dateinamen vor. Jedes img braucht ein alt, bei Dekoration ein leeres.
Kritisch Das Suchfeld hat keinen Namen Regel label
Der Platzhalter verschwindet beim Tippen und ist kein Name. Ein label mit for verbindet den sichtbaren Text mit dem Feld.
Zum Mitnehmen
Die vier Punkte, korrigiert
Ein Mindestmaß, eine Farbe, ein alt und ein label.
Korrektur in 3 Schritten ansehen
Klickziele auf 44 Pixel bringen
Ein Mindestmaß aus CSS vergrößert die Trefferfläche, ohne das Symbol selbst zu vergrößern.
KorrekturvergleichSchritt 1 · CSS Vorher
.symbol-schalter { width: 18px; height: 18px; }Nachher
.symbol-schalter { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }Markierte Zeilen wurden geändert
So prüfen Sie es Tippen Sie mit dem Daumen auf das Symbol. Sie treffen den Nachbarn nicht mehr.
Den Text vom Hintergrund abheben
Weiß auf derselben Fläche erreicht 5,31 zu 1. Nur die Schriftfarbe ändert sich, Fläche und Größe bleiben.
KorrekturvergleichSchritt 2 · CSS Vorher
.bildunterschrift { color: #58635f; background: #626e69; }Nachher
.bildunterschrift { color: #ffffff; background: #626e69; }Markierte Zeilen wurden geändert
So prüfen Sie es Drehen Sie die Bildschirmhelligkeit herunter. Der Satz bleibt lesbar.
Bild und Suchfeld benennen
Das alt beschreibt, was das Bild beiträgt. Das label gibt dem Suchfeld einen Namen, der beim Tippen stehen bleibt.
KorrekturvergleichSchritt 3 · HTML Vorher
<img src="katalog-01.jpg"> <input type="search" name="q" placeholder="Suchbegriff">Nachher
<img src="katalog-01.jpg" alt="Offener Katalog mit handschriftlichen Notizen"> <label for="q">Katalog durchsuchen</label> <input id="q" type="search" name="q" placeholder="z. B. Signatur">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Katalog durchsuchen“. Der Cursor springt in das Feld.