WCAG 2.2: Kriterien, Regeln und manuelle Prüfungen

Aufgezeichnete reine Audioinhalte (Podcast, Soundclip) und reine Videoinhalte (stummer Produktclip, Animation ohne Ton) suchen. Bestanden: Direkt neben jedem Element ist ein Transkript oder eine gleichwertige Text- bzw. Audioalternative verlinkt. Nicht anwendbar, wenn der Shop keine solchen Medien hat.

Jedes aufgezeichnete Video mit Sprache abspielen (Produktdemos, Imagefilme, eingebettete YouTube- oder Vimeo-Videos). Bestanden: Untertitel sind über eine CC-Schaltfläche, ein <track kind="captions"> oder als offene Untertitel verfügbar und korrekt. Ungeprüfte, automatisch erzeugte Untertitel bestehen nicht.

Für jedes aufgezeichnete Video, dessen Bild Informationen enthält, die nicht im Ton vorkommen (eingeblendeter Text, Handhabung des Produkts, gezeigte, aber nicht gesprochene Schritte). Bestanden: Eine Fassung mit Audiodeskription oder eine vollständige Textalternative (ein Transkript, das auch das Bild beschreibt) wird bereitgestellt.

Nur für Live-Videos mit Ton (Live-Shopping-Events, gestreamte Produktstarts). Bestanden: Während des Streams gibt es Untertitel in Echtzeit. Nicht anwendbar für Shops ohne Live-Video.

Für aufgezeichnete Videos mit informativen Bildinhalten, die die Tonspur nicht abdeckt. Bestanden: Es gibt eine Audiodeskriptionsspur oder eine Fassung des Videos mit Audiodeskription. Eine Textalternative allein erfüllt 1.2.3, aber nicht dieses Kriterium.

Die Seite mit dem Screenreader von oben nach unten lesen (Pfeiltasten / Lesemodus) und mit der visuellen Reihenfolge vergleichen. Bestanden: Produkttitel, Preis, Variantenauswahl und „In den Warenkorb“ folgen in sinnvoller Reihenfolge; per CSS umsortierte Raster, Seitenleisten und Mega-Menüs bringen die Lesereihenfolge nicht durcheinander. Screenreader: Windows: NVDA (kostenlos, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Anleitungen und Hinweise nach Verweisen durchsuchen, die sich allein auf Form, Farbe, Größe, Position oder Ton stützen: „Klicken Sie auf den grünen Button“, „das Feld rechts“, „siehe Kasten unten“, „achten Sie auf den Signalton“. Bestanden: Jede solche Anleitung nennt auch das Bedienelement oder gibt einen Hinweis in Textform.

Auf einem Smartphone oder Tablet (oder mit der Geräteemulation der Entwicklertools) Startseite, eine Produktseite, den Warenkorb und den ersten Checkout-Schritt öffnen und jeweils zwischen Hoch- und Querformat wechseln. Bestanden: Inhalte und Bedienelemente bleiben in beiden Ausrichtungen verfügbar und nutzbar, und nichts fordert dazu auf, das Gerät zu drehen. Nur Inhalte, die eine bestimmte Ausrichtung brauchen, um zu funktionieren, dürfen diese festlegen; in einem Shop ist das selten.

Jede Stelle prüfen, an der Farbe eine Bedeutung trägt: ausgewähltes Farbfeld einer Variante (braucht Rahmen, Häkchen oder Text, nicht nur eine Farbänderung), Formularfehler (Icon oder Text, nicht nur ein roter Rahmen), Links im Fließtext (Unterstreichung oder Kontrast von 3:1 plus Hinweis bei Hover/Fokus), Verfügbarkeitsanzeigen (grüner/roter Punkt braucht Text). Bestanden: Jede Bedeutung wird auch ohne Farbe vermittelt.

Auf 400 % zoomen und Hero-Banner, Aktions-Badges, „Sale“-Grafiken und Kategorie-Kacheln ansehen. Jeder Text, der dabei unscharf wird, ist ein Bild von Text. Bestanden: Text ist echter Text (Logos und Markenzeichen ausgenommen) oder das Bild ist unverzichtbar (etwa ein bedrucktes Etikett, das als Produktfoto gezeigt wird). Erzeugt der Shop PDF-Rechnungen oder -Belege, eine davon öffnen: Sie muss textbasiert sein (der Text lässt sich markieren), kein gescanntes Bild.

Auf 400 % zoomen (Strg und + bis 400 % oder ein etwa 320 px breiter Viewport in den Entwicklertools). Bestanden: Kein horizontales Scrollen nötig, um Inhalte zu lesen (Datentabellen ausgenommen); Menü, Preise und „In den Warenkorb“ sind weiterhin vorhanden und nutzbar; nichts überlappt oder verschwindet; Formularbeschriftungen bleiben bei ihren Feldern. Die automatische Prüfung vs-reflow erkennt nur horizontales Scrollen.

Jedes Pop-up auslösen, das bei Hover oder Fokus erscheint: Tooltips, Mega-Menüs, Größentabellen, Vorschauen des Mini-Warenkorbs, Produkt-Schnellansicht. Bestanden: Es lässt sich mit Esc schließen, ohne den Mauszeiger zu bewegen, der Mauszeiger lässt sich auf das Pop-up bewegen, ohne dass es sich schließt, und es bleibt offen, bis es geschlossen wird oder Hover bzw. Fokus es verlassen.

Die Maus abziehen oder ignorieren; nur Tab, Shift+Tab, Enter, Leertaste, Pfeiltasten und Esc verwenden. Die Startseite mit Tab von oben nach unten durchgehen. Jedes Menü, Burger-Menü und Dropdown öffnen und schließen (Enter/Leertaste öffnet, Esc schließt). Eine Produktseite öffnen, eine Variante (Größe/Farbe) wählen und in den Warenkorb legen. Den Warenkorb öffnen, eine Menge ändern und einen Artikel entfernen. Bestanden: Alles ist erreichbar und bedienbar, und man weiß jederzeit, wo man sich befindet.

Jedes Modal und Pop-up öffnen (Newsletter, Cookie-Banner, Größentabelle, Schnellansicht, Anmeldung). Bestanden: Der Fokus springt hinein, Esc schließt es, und der Fokus kehrt an die vorherige Stelle zurück. Eindeutig nicht bestanden, wenn sich die Seite hinter dem Modal mit Tab erreichen lässt. Beim Cookie-Banner selbst: Ablehnen und Akzeptieren sind beide allein mit der Tastatur erreichbar und bedienbar, und nichts hält den Fokus darin gefangen.

Mit dem Fokus im Seiteninhalt (nicht in einem Feld) einzelne Buchstaben und Satzzeichen drücken, etwa /, s, k, ?. Bestanden: Kein Tastenkürzel aus einem einzelnen Zeichen ist aktiv; oder es lässt sich abschalten oder neu belegen; oder es wirkt nur, solange das zugehörige Bedienelement den Fokus hat.

Jedes automatisch abspielende Video, animierte Banner und GIF, jeden Countdown-Timer und jeden Hover-Effekt 10 Sekunden lang beobachten. Bestanden: Nichts blitzt mehr als dreimal pro Sekunde auf, und keine große Fläche flackert wie ein Stroboskop. Außerdem prüfen, ob sich jedes automatisch laufende Karussell anhalten lässt.

Beim Durchgang mit der Tastatur beobachten, wohin der Fokus springt. Bestanden: Die Tab-Reihenfolge folgt dem visuellen Layout; nach dem Schließen eines Menüs oder Modals kehrt der Fokus zum Auslöser zurück; nach einer Änderung im Warenkorb, einer Live-Suche oder einem Wechsel im Karussell bleibt der Fokus dort, wo man ihn hingesetzt hat, und verschwindet nicht an den Seitenanfang.

Sicherstellen, dass es mindestens zwei Wege zu jeder Seite gibt: Shopsuche plus Navigationsmenü, eine Sitemap, Breadcrumbs oder Links zu ähnlichen Produkten. Eine Suche ausführen und ein Ergebnis öffnen. Bestanden: Zwei voneinander unabhängige Wege funktionieren. Seiten, die Schritte eines Prozesses sind (Checkout), sind ausgenommen.

Die Überschriftenliste (Taste H im Screenreader oder die Gliederung im Browser) und die Formularbeschriftungen lesen. Bestanden: Überschriften beschreiben ihren Abschnitt (die h1 der PDP ist der Produktname, Überschriften der PLP nennen die Kategorie, kein „Abschnitt 1“ und kein Platzhaltertext) und Beschriftungen beschreiben den Zweck des Feldes („E-Mail-Adresse“, nicht „Feld“ oder „Eingabe“). Screenreader: Windows: NVDA (kostenlos, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Den Durchgang mit der Tastatur wiederholen und auf die Fokusmarkierung achten. Bestanden: Jedes fokussierte Element zeigt eine sichtbare Markierung (Umriss, Rahmen, Unterstreichung oder deutliche Farbänderung), sodass man jederzeit ohne Raten auf den Bildschirm zeigen und sagen kann „da ist der Fokus“, und die Markierung bleibt auch mit zusammengekniffenen Augen vor ihrem Hintergrund erkennbar. Die automatische Prüfung vs-focus-visible kann nicht beurteilen, wie gut die Änderung zu sehen ist.

Mehrpunkt- oder pfadbasierte Gesten suchen: Zoomen mit zwei Fingern auf Produktbildern, Karussells, die sich per Wischen bedienen lassen, Wischen zum Löschen im Warenkorb, Galerien, die sich durch Ziehen scrollen lassen. Bestanden: Für jede gibt es eine Alternative mit einem einzelnen Zeiger (Zoom-Schaltflächen, Bedienelemente für Vor und Zurück, eine Schaltfläche zum Entfernen).

Die Maustaste auf Bedienelementen wie „In den Warenkorb“, „Entfernen“ und „Zahlungspflichtig bestellen“ drücken, den Zeiger vom Element wegbewegen und loslassen. Bestanden: Nichts passiert (Aktionen werden erst beim Loslassen ausgelöst), oder die Aktion lässt sich rückgängig machen.

Mit dem Screenreader zu Schaltflächen und Links mit sichtbarem Text gehen („In den Warenkorb“, „Zur Kasse“, „Gutschein einlösen“). Bestanden: Der angesagte Name enthält den sichtbaren Text; ein aria-label wie „Jetzt kaufen“ auf einem sichtbaren „In den Warenkorb“ besteht nicht. Screenreader: Windows: NVDA (kostenlos, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Nach Funktionen suchen, die über Bewegungen des Geräts gesteuert werden: Schütteln zum Rückgängigmachen, Kippen zum Drehen eines Produkts, bewegungsgesteuerte AR-Vorschauen. Bestanden: Ein Bedienelement auf dem Bildschirm leistet dasselbe, und die Steuerung per Bewegung lässt sich abschalten. Für die meisten Shops nicht anwendbar.

Passagen in einer anderen Sprache als der Seitensprache suchen: englische Slogans oder Produktnamen in einem deutschen oder dänischen Shop, englische Begriffe in Rechtstexten, ein Sprachumschalter, der die Sprachen in ihrer eigenen Bezeichnung auflistet. Bestanden: Solche Passagen tragen ein lang-Attribut (in den Entwicklertools prüfen), und falls es einen Sprachumschalter gibt, wird das Umschalten angesagt und funktioniert. Eigennamen und einzelne Lehnwörter sind ausgenommen.

Mit Tab durch die gesamte Seite gehen, einschließlich Suchfeldern, Auswahllisten und Cookie-Banner. Bestanden: Das bloße Fokussieren eines Elements öffnet nie ein Menü, sendet kein Formular ab, verschiebt den Fokus nicht und navigiert nicht zu einer anderen Seite.

Mit der Tastatur Auswahllisten, Radiobuttons und Checkboxen ändern: Variante (mit den Pfeiltasten durch die Optionen), Land, Versandart, Menge, Sortierung. Bestanden: Das Ändern eines Werts sendet nichts ohne Vorwarnung automatisch ab und navigiert nicht ohne Vorwarnung; aktualisiert sich die Seite, wird das vorher angekündigt, oder eine Schaltfläche löst die Änderung aus. Variantenauswahlen, die schon beim Drücken einer Pfeiltaste navigieren, sind ein häufiger Fehler in Shops.

Startseite, Kategorie, Produkt, Warenkorb und Checkout vergleichen. Bestanden: Header, Hauptnavigation, Suche, Breadcrumbs und Footer erscheinen auf jeder Seite in derselben relativen Reihenfolge (der Checkout darf die Navigation reduzieren, das Verbleibende aber nicht umsortieren). Die 404-Seite und eine Produktseite mit ausverkauftem Artikel einbeziehen: Beide bleiben navigierbar und tragen das Markendesign. Die automatische Prüfung vs-consistent-help deckt nur die Position des Hilfe-Links ab.

Prüfen, ob dieselbe Funktion überall gleich beschriftet ist: „In den Warenkorb“ vs. „In den Einkaufswagen“, der Name des Warenkorb-Icons, die Suchschaltfläche, „Wunschliste“ vs. „Merkzettel“, der Link zum Kundenkonto. Bestanden: Gleiche Funktionen haben in allen Templates gleiche Namen und Icons.

Mit dem Screenreader im Checkout (und bei Anmeldung und Registrierung) ein leeres Formular absenden und eines mit ungültiger E-Mail-Adresse und Postleitzahl. Bestanden: Fehler werden angesagt, sobald sie erscheinen, benennen das fehlerhafte Feld und sagen, was falsch ist. Screenreader: Windows: NVDA (kostenlos, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Mit dem Screenreader per Tab durch jedes Feld in Checkout, Adresse, Anmeldung und Newsletter gehen. Bestanden: Jedes Feld sagt seine Beschriftung an; Pflichtfelder geben sich als erforderlich zu erkennen (nicht allein durch Farbe oder ein unerklärtes Sternchen); Formathinweise (Datum, Postleitzahl, Telefon) stehen vor der Eingabe. Screenreader: Windows: NVDA (kostenlos, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Eine fehlerhafte E-Mail-Adresse, eine Postleitzahl im falschen Format und ein Ablaufdatum der Karte eingeben, das in der Vergangenheit liegt. Bestanden: Jede Fehlermeldung schlägt vor, wie sich der Fehler beheben lässt („Geben Sie eine Postleitzahl wie 10115 ein“, „Die E-Mail-Adresse muss ein @ enthalten“), statt nur „Ungültige Eingabe“ zu melden, es sei denn, ein Vorschlag würde die Sicherheit gefährden.

Den Checkout bis zum letzten Schritt durchlaufen, ohne zu bezahlen. Bestanden: Bevor die Bestellung abgeschickt wird, gibt es einen Prüfschritt mit Artikeln, Mengen, Summen, Adressen und Zahlungsart, alles lässt sich ändern, und die abschließende Aktion ist klar beschriftet (etwa „Jetzt kaufen“). Außerdem prüfen, ob das Löschen des Kundenkontos oder einer Adresse eine Bestätigung verlangt.

Mit dem Screenreader den Weg bis zur Zahlung gehen, beginnend bei der Shopsuche. Bestanden: Das Suchfeld sagt seinen Zweck an und die Ergebnisse werden angesagt, sodass man ein Produkt erreicht; Farb- und Größenfelder der Varianten sagen Namen und Auswahlzustand an, Mengenregler und Akkordeons ihre Rolle und ihren Zustand; der Warenkorb sagt Inhalt, Mengen und Gesamtsumme der Reihe nach an; Kartenfelder in iframes (Stripe oder ähnliche Anbieter) sagen an, welches Feld Kartennummer, Ablaufdatum und CVC ist. Die richtige Größe und Farbe muss sich kaufen lassen, ohne hinzusehen. Screenreader: Windows: NVDA (kostenlos, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Mit dem Screenreader Statusänderungen auslösen, ohne den Fokus zu bewegen: „In den Warenkorb gelegt“, Anzahl im Warenkorb, Trefferzahlen von Suche und Filtern, Preis- oder Bestandsänderung bei der Variantenauswahl, eingelöster Gutschein, gespeichertes Formular und zum Schluss die Bestellbestätigung. Bestanden: Jede Änderung wird angesagt (Live-Region), ohne den Fokus zu verschieben; Kundinnen und Kunden müssen erfahren, dass ihr Kauf abgeschlossen ist. Die automatische Prüfung vs-live-updates deckt nur die Produktseite ab. Screenreader: Windows: NVDA (kostenlos, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.