WCAG 2.2: Die 9 neuen Erfolgskriterien für Ihren Shop

Am 5. Oktober 2023 veröffentlichte das W3C die Web Content Accessibility Guidelines (WCAG) 2.2 als offiziellen Web-Standard. Für Online-Shops ist dieses Update besonders relevant: Mit 9 neuen Erfolgskriterien adressiert WCAG 2.2 exakt die Barrieren, die Kunden mit kognitiven, motorischen und visuellen Einschränkungen im Kaufprozess erleben. Die EN 301 549 - die harmonisierte Norm hinter dem BFSG und dem European Accessibility Act - wird voraussichtlich Anfang 2026 auf WCAG 2.2 aktualisiert (ETSI). In diesem Artikel analysieren wir jedes neue Kriterium mit konkreten Code-Beispielen für die technische Umsetzung.

WCAG 2.2 vs. 2.1: Was hat sich geändert?

WCAG 2.2 ist abwärtskompatibel zu WCAG 2.1 - das heißt, alle bisherigen Erfolgskriterien bleiben erhalten. Die wesentlichen Unterschiede: WCAG 2.2 enthält 86 statt 78 Erfolgskriterien (9 neue, 1 entfernt). Das entfernte Kriterium 4.1.1 Parsing gilt als obsolet, da moderne Browser HTML-Fehler inzwischen zuverlässig korrigieren.

Aktuelle Ausgangslage: Websites und Barrierefreiheit

Die Realität zeigt: Die meisten Websites erfüllen selbst grundlegende Accessibility-Anforderungen nicht. Laut dem WebAIM Million Report 2025 weisen 96,3% der Top-1-Million-Websites automatisch erkennbare WCAG-Fehler auf. Im Durchschnitt finden sich 51 Fehler pro Startseite (WebAIM). Für E-Commerce-Betreiber bedeutet das: Der Handlungsbedarf ist erheblich - und mit WCAG 2.2 kommen weitere Anforderungen hinzu.

Besonders relevant: 69% aller Accessibility-Klagen in den USA betreffen Online-Shops (UsableNet). Mit dem European Accessibility Act steigt der regulatorische Druck auch in der EU. Wer bereits BFSG-konform arbeitet, sollte die neuen WCAG 2.2 Kriterien zeitnah integrieren.

Die 6 neuen AA-Kriterien im Detail

Für die meisten Online-Shops ist Level AA der relevante Compliance-Standard. WCAG 2.2 bringt 6 neue AA-Kriterien (2 auf Level A, 4 auf Level AA), die wir im Folgenden mit konkreten Umsetzungsbeispielen vorstellen.

1. Focus Not Obscured (Minimum) - SC 2.4.11 (AA)

Wenn ein Element den Tastaturfokus erhält, darf es nicht vollständig von anderen Inhalten verdeckt werden. Typische Problemstellen in Online-Shops sind Sticky-Header, Cookie-Banner und Chat-Widgets, die fokussierte Elemente überlagern. Besonders der Checkout-Prozess ist anfällig, wenn fixierte Navigationselemente Formularfelder verdecken.

/* Sticky-Header: Scroll-Padding für Fokus-Sichtbarkeit */
html {
  scroll-padding-top: 80px; /* Höhe des Sticky-Headers */
}

/* Cookie-Banner: Fokussierte Elemente nicht überdecken */
.cookie-banner {
  position: fixed;
  bottom: 0;
  z-index: 1000;
}

/* Sicherstellen, dass fokussierte Elemente sichtbar bleiben */
main :focus-visible {
  scroll-margin-top: 100px;
  scroll-margin-bottom: 120px;
}

2. Dragging Movements - SC 2.5.7 (A)

Funktionen, die Zieh-Bewegungen (Drag & Drop) erfordern, müssen auch mit einem einfachen Zeiger-Input bedienbar sein. Für Online-Shops betrifft dies typischerweise Bildergalerien mit Swipe-Gesten, Preis-Slider in Filtern und sortierbare Warenkörbe. Menschen mit motorischen Einschränkungen oder Tremor können Drag-Gesten oft nicht ausführen.

<!-- Preis-Slider mit Drag + Eingabefeld-Alternative -->
<div class="price-filter">
  <label for="price-range">Preis bis:</label>
  <input type="range" id="price-range"
         min="0" max="500" value="250"
         aria-valuetext="250 Euro">

  <!-- WCAG 2.5.7: Einfache Zeiger-Alternative -->
  <div class="price-inputs">
    <label for="price-min">Von:</label>
    <input type="number" id="price-min"
           min="0" max="500" value="0"> &euro;
    <label for="price-max">Bis:</label>
    <input type="number" id="price-max"
           min="0" max="500" value="250"> &euro;
  </div>
</div>

3. Target Size Minimum - SC 2.5.8 (AA)

Interaktive Elemente müssen eine Mindestgröße von 24 x 24 CSS-Pixeln haben. WCAG 2.1 kannte dieses Kriterium nur auf AAA-Level mit 44px. Die neue AA-Anforderung ist ein Kompromiss, der in der Praxis viele Shop-Elemente betrifft: Mengenselektoren, Farbauswahl, Paginierung und Filter-Checkboxen sind häufig zu klein. Ausnahmen gelten für Inline-Links in Fließtexten und nicht vom Autor modifizierte Browser-Standardelemente.

/* WCAG 2.5.8: Mindest-Target-Size 24x24px */
button,
a:not(p a), /* Inline-Links in Text sind ausgenommen */
input[type="checkbox"],
input[type="radio"],
select,
.interactive-element {
  min-width: 24px;
  min-height: 24px;
}

/* Icon-Buttons: Padding für 24px Klickfläche */
.icon-btn {
  padding: 4px; /* 16px Icon + 2x4px Padding = 24px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Shop: Mengenfeld im Warenkorb */
.quantity-btn {
  min-width: 36px;
  min-height: 36px;
  font-size: 18px;
}

/* Primäre Aktionen: Komfortgröße 44px empfohlen */
.btn-add-to-cart,
.btn-checkout {
  min-height: 44px;
  padding: 12px 24px;
}

4. Consistent Help - SC 3.2.6 (A)

Hilfe-Mechanismen, die auf mehreren Seiten wiederholt werden, müssen in derselben relativen Reihenfolge erscheinen. Das bedeutet: Wenn Ihre Kontaktinformationen im Footer stehen, müssen sie auf jeder Seite im Footer stehen - nicht auf einer Seite im Header und auf einer anderen in der Sidebar. Für E-Commerce-Websites ist das besonders relevant bei Live-Chat-Widgets, Telefonnummern, FAQ-Links und Kontaktformularen.

5. Redundant Entry - SC 3.3.7 (A)

Informationen, die der Nutzer bereits eingegeben hat, dürfen nicht erneut abgefragt werden - sie müssen vorausgefüllt oder auswählbar sein. Im Checkout-Prozess ist das besonders kritisch: Wenn ein Kunde seine Rechnungsadresse eingegeben hat, muss die Lieferadresse per Checkbox übernommen werden können. Dieses Kriterium hilft besonders Menschen mit kognitiven Einschränkungen, die Schwierigkeiten haben, Informationen zu erinnern.

<!-- WCAG 3.3.7: Keine redundante Eingabe -->
<fieldset>
  <legend>Lieferadresse</legend>

  <!-- Option zur Übernahme vorheriger Daten -->
  <label>
    <input type="checkbox" id="same-address" checked>
    Lieferadresse = Rechnungsadresse
  </label>

  <!-- Felder vorausgefüllt, wenn Checkbox aktiv -->
  <label for="shipping-street">Straße:</label>
  <input type="text" id="shipping-street"
         autocomplete="shipping street-address"
         value="Musterstraße 12">

  <label for="shipping-city">Stadt:</label>
  <input type="text" id="shipping-city"
         autocomplete="shipping address-level2"
         value="Berlin">
</fieldset>

6. Accessible Authentication (Minimum) - SC 3.3.8 (AA)

Ein kognitiver Funktionstest darf für keinen Schritt im Authentifizierungsprozess erforderlich sein. Konkret bedeutet das: Kunden müssen sich keine Passwörter merken, keine CAPTCHAs lösen und keine Codes von einem Gerät auf ein anderes übertragen müssen - sofern es Alternativen gibt. Browser-Autofill und Passwort-Manager müssen funktionieren (Paste-Blocking ist ein Verstoß). Moderne Ansätze wie Passkeys erfüllen dieses Kriterium optimal.

<!-- WCAG 3.3.8: Accessible Authentication -->
<form method="post" action="/login">
  <!-- autocomplete ermöglicht Passwort-Manager -->
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email"
         autocomplete="username"
         inputmode="email">

  <label for="password">Passwort:</label>
  <input type="password" id="password" name="password"
         autocomplete="current-password">
  <!-- KEIN paste-blocking! -->

  <button type="submit">Anmelden</button>

  <!-- Alternative: Passwortlos (Passkey / WebAuthn) -->
  <button type="button" id="passkey-login">
    Mit Passkey anmelden
  </button>

  <!-- Alternative: Magic Link -->
  <a href="/login/magic-link">
    Login-Link per E-Mail senden
  </a>
</form>

Die 3 neuen AAA-Kriterien

Level AAA ist in der Regel nicht gesetzlich vorgeschrieben, bietet aber zusätzliche Verbesserungen, die besonders für Shops mit sensiblen Zielgruppen (z.B. Gesundheit, Senioren) empfehlenswert sind.

7. Focus Not Obscured (Enhanced) - SC 2.4.12 (AAA)

Während die AA-Variante (2.4.11) nur verlangt, dass der Fokus teilweise sichtbar bleibt, fordert die AAA-Variante vollständige Sichtbarkeit des fokussierten Elements und seines Fokus-Indikators. Kein Pixel des Focus-Rings darf von Overlays, Sticky-Elementen oder anderen Inhalten verdeckt werden.

8. Focus Appearance - SC 2.4.13 (AAA)

Der Fokus-Indikator muss ein Kontrastverhältnis von mindestens 3:1 zwischen fokussiertem und unfokussiertem Zustand aufweisen und eine Mindestdicke von 2 CSS-Pixeln haben. Das W3C empfiehlt die Technik C40: einen zweifarbigen Fokus-Indikator, der auf jedem Hintergrund funktioniert.

/* WCAG 2.4.13: Zweifarbiger Fokus-Indikator (W3C C40) */
*:focus-visible {
  outline: 2px solid #ffffff; /* Helle innere Linie */
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #004d43; /* Dunkle äußere Linie */
}

/* Forced-Color-Mode: box-shadow wird unterdrückt */
@media (forced-colors: active) {
  *:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* Fallback für ältere Browser */
@supports not selector(:focus-visible) {
  *:focus {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px #004d43;
  }
}

9. Accessible Authentication (Enhanced) - SC 3.3.9 (AAA)

Die verschärfte Variante entfernt zwei Ausnahmen der AA-Version: Objekterkennung (z.B. "Wählen Sie alle Ampeln") und persönliche Inhalte (z.B. "Welches Bild haben Sie hochgeladen?") dürfen nicht mehr als Authentifizierungsmethode dienen. Nur noch textbasierte Kopier-/Einfüge-Möglichkeiten und passwortlose Methoden sind erlaubt.

Alle 9 Kriterien in der Übersicht

Testing: WCAG 2.2 Konformität prüfen

Die Überprüfung der neuen Kriterien erfordert eine Kombination aus automatisierten und manuellen Tests. Automatisierte Tools erkennen typischerweise nur etwa 57% der WCAG-Probleme (Deque/axe-core). Die neuen WCAG 2.2 Kriterien wie Consistent Help oder Redundant Entry lassen sich nur manuell oder semi-automatisiert prüfen.

• Focus Not Obscured: Mit Tab durch alle Seiten navigieren, Sticky-Elemente prüfen
• Dragging Movements: Alle Drag-Funktionen auf alternative Eingabe testen
• Target Size: Interaktive Elemente mit DevTools auf 24x24px Minimum messen
• Consistent Help: Hilfe-Mechanismen auf verschiedenen Seiten vergleichen
• Redundant Entry: Mehrstufige Formulare auf wiederholte Abfragen prüfen
• Accessible Authentication: Login mit Passwort-Manager und Paste testen

Umsetzungs-Roadmap für Online-Shops

Die Integration der WCAG 2.2 Kriterien in einen bestehenden Online-Shop sollte strukturiert erfolgen. Wir empfehlen folgende Priorisierung:

1. Sofort (Quick Wins): Focus Not Obscured, Consistent Help und Target Size - diese Kriterien erfordern typischerweise nur CSS-Anpassungen und Template-Überprüfungen
2. Kurzfristig (1-2 Sprints): Redundant Entry im Checkout, Dragging Alternatives für Filter - erfordert JavaScript-Anpassungen und Formular-Logik
3. Mittelfristig (Roadmap): Accessible Authentication mit Passkey-Support - erfordert Backend-Entwicklung und Infrastruktur-Anpassungen
4. Optional (AAA): Focus Appearance und Enhanced-Kriterien - empfohlen für Shops im Gesundheits- oder Seniorenbereich

SEO und Barrierefreiheit: Synergieeffekte

Accessibility-Optimierungen wirken sich positiv auf SEO aus. Saubere Überschriftenstruktur, aussagekräftige Labels und semantisches HTML verbessern das Crawling und die Indexierung. Gute Tastaturnavigation und schnelle Interaktionszeiten stärken die Core Web Vitals - insbesondere den INP-Wert. Für WordPress-Shops und andere CMS-Plattformen bedeutet das: Barrierefreiheit nach WCAG 2.2 und Suchmaschinenoptimierung gehen Hand in Hand.