WCAG 2.2 im Online-Shop: was die neuen Kriterien für Händler bedeuten

WCAG 2.2 bringt auf den Stufen A und AA sechs neue Erfolgskriterien. Für Online-Shops sind sie besonders relevant, denn sie betreffen typische Shop-Elemente: Cookie-Banner und Sticky Header, die den Fokus verdecken, Preisregler, kleine Buttons, die Position von Hilfe und Chat, doppelte Adresseingaben und den Login. Mit der europäischen Norm EN 301 549 V4.1.1, die im September 2026 veröffentlicht wurde, rücken diese Kriterien auch in der EU in den Mittelpunkt.

Warum WCAG 2.2 jetzt wichtig wird

Für die Barrierefreiheit nach dem European Accessibility Act und dem BFSG orientiert man sich an der harmonisierten Norm EN 301 549. Derzeit harmonisiert ist V3.2.1, die auf WCAG 2.1 verweist. Die neue Fassung V4.1.1 baut auf WCAG 2.2 auf; ihre Bekanntmachung im Amtsblatt der EU wird für Ende 2026 erwartet. Wer heute einen Shop baut oder umbaut, sollte deshalb direkt WCAG 2.2 AA ansetzen. Die Kriterien von WCAG 2.1 AA bleiben fast vollständig enthalten; entfernt wurde nur 4.1.1 „Syntaxanalyse“.

Die sechs neuen Kriterien im Shop-Alltag

2.4.11 Fokus nicht verdeckt (Minimum) – Stufe AA

Worum es geht: Wenn ein Element per Tastatur den Fokus erhält, darf es nicht vollständig von anderen Inhalten verdeckt werden.

Typisch im Shop: Ein Cookie-Banner am unteren Bildschirmrand, ein Sticky Header oder eine „Jetzt kaufen“-Leiste verdeckt den Link oder das Formularfeld, das gerade fokussiert ist. Tastaturnutzer sehen nicht mehr, wo sie sind.

Lösung: Beim Fokus genügend Abstand halten (zum Beispiel mit scroll-padding), Banner schließbar machen, Sticky-Elemente niedrig halten.

2.5.7 Ziehbewegungen – Stufe AA

Worum es geht: Funktionen, die Ziehen erfordern, brauchen eine Alternative mit einfachem Zeigen oder Tippen – es sei denn, Ziehen ist unverzichtbar.

Typisch im Shop: Ein Preisfilter mit Schieberegler, ein Bildvergleich zum Ziehen, sortierbare Wunschlisten.

Lösung: Eingabefelder für Mindest- und Höchstpreis neben dem Regler, Plus-/Minus-Schaltflächen oder Pfeiltasten.

2.5.8 Zielgröße (Minimum) – Stufe AA

Worum es geht: Klickziele müssen mindestens 24 × 24 CSS-Pixel groß sein oder ausreichend Abstand zu anderen Zielen haben. Es gibt Ausnahmen, etwa für Links im Fließtext.

Typisch im Shop: Kleine Farbfelder für Varianten, das „x“ zum Entfernen eines Artikels im Warenkorb, Mengen-Buttons, Social-Icons im Footer.

Lösung: Klickfläche vergrößern, auch wenn das Symbol klein bleibt, oder Abstände erhöhen.

3.2.6 Konsistente Hilfe – Stufe A

Worum es geht: Wenn Hilfe angeboten wird – Kontaktdaten, Kontaktformular, Chat, FAQ –, steht sie auf allen Seiten an derselben relativen Stelle.

Typisch im Shop: Der Chat erscheint auf Produktseiten unten rechts, in der Kasse fehlt er oder steht woanders; der Link „Hilfe“ wandert zwischen Header und Footer.

Lösung: Einheitliche Position im Template festlegen.

3.3.7 Redundante Eingaben – Stufe A

Worum es geht: Informationen, die Nutzer im selben Vorgang bereits eingegeben haben, werden automatisch übernommen oder zur Auswahl angeboten.

Typisch im Shop: In der Kasse muss die Rechnungsadresse erneut eingetippt werden, obwohl sie der Lieferadresse entspricht.

Lösung: Option „Rechnungsadresse entspricht Lieferadresse“, vorausgefüllte Felder, gespeicherte Angaben im Kundenkonto.

3.3.8 Barrierefreie Authentifizierung (Minimum) – Stufe AA

Worum es geht: Anmeldung darf keine kognitive Aufgabe wie das Merken oder Abtippen eines Codes erfordern, sofern es keine Alternative oder Hilfe gibt.

Typisch im Shop: Ein Passwortfeld, in das man nicht einfügen darf; ein Rätsel-Captcha ohne Alternative; ein Einmalcode, der nicht eingefügt werden kann.

Lösung: Einfügen und Passwortmanager erlauben, autocomplete-Attribute setzen, Login per E-Mail-Link oder Passkey anbieten, Captchas mit barrierefreier Alternative.

Was eine automatische Prüfung davon erkennt

Die neuen Kriterien zeigen besonders deutlich, warum eine automatisierte Prüfung kein vollständiges Audit ist. Die meisten betreffen Abläufe und Zustände, nicht einzelne Attribute. Wie Sie automatische und manuelle Prüfung kombinieren, erklärt unser Beitrag automatisch oder manuell prüfen.

Ein kurzer Test für Ihren Shop

Nehmen Sie sich eine halbe Stunde und gehen Sie einmal durch Ihren Shop:

1. Tastatur: Von der Startseite bis zur Zahlungsauswahl nur mit Tab und Enter. Verdeckt der Cookie-Banner oder ein Sticky Header irgendwo den Fokus? (2.4.11)
2. Filter: Lässt sich der Preisfilter ohne Ziehen einstellen? (2.5.7)
3. Smartphone: Treffen Sie Farbfelder, Mengen-Buttons und das Entfernen-Symbol im Warenkorb sicher? (2.5.8)
4. Hilfe: Steht der Kontakt- oder Chat-Zugang auf Produktseite, Warenkorb und Kasse an derselben Stelle? (3.2.6)
5. Kasse: Müssen Sie eine Adresse zweimal eingeben? (3.3.7)
6. Login: Funktioniert Ihr Passwortmanager? Gibt es ein Captcha ohne Alternative? (3.3.8)

Alle weiteren AA-Kriterien mit Shop-Bezug finden Sie in unserer WCAG-2.2-Checkliste.

Was das rechtlich bedeutet

Für Shops, die unter das BFSG fallen, ist die harmonisierte Norm der praktische Maßstab. Solange V3.2.1 harmonisiert ist, liegt der Schwerpunkt formal auf WCAG 2.1 AA; mit der erwarteten Bekanntmachung von V4.1.1 verschiebt er sich zu WCAG 2.2 AA. Wer jetzt WCAG 2.2 AA umsetzt, muss später nicht nachbessern. Den rechtlichen Rahmen erklärt der BFSG-Leitfaden. Dieser Beitrag ist keine Rechtsberatung.

Wie wir helfen

Wir prüfen Ihren Shop automatisiert nach WCAG 2.2 AA, erklären jedes Ergebnis mit einer Regelkarte inklusive Anleitung für Shopify, WooCommerce, PrestaShop und Shoptet und zeigen, welche Punkte zusätzlich manuell geprüft werden sollten. Das ist eine automatisierte Prüfung, kein vollständiges Audit. Mehr unter So funktioniert es.

Quellen

• Web Content Accessibility Guidelines (WCAG) 2.2 beim W3C
• Was ist neu in WCAG 2.2 – W3C Web Accessibility Initiative