WCAG 2.2 AA: Checkliste für Onlineshops

WCAG-2.2-AA-Checkliste für Shopify- und WooCommerce-Shops nach Seitentyp: Alternativtext, Kontrast, Labels, Tastatur, Fokus, Zielgröße und neue 2.2-Kriterien.

FixReports Redaktion10 Min. Lesezeit

Eine Checkliste nach WCAG 2.2 AA für einen Onlineshop beginnt mit den Fehlern, die in den meisten Shop-Templates zu finden sind: fehlende Alternativtexte, Text mit zu geringem Kontrast, Links und Buttons ohne zugänglichen Namen, Formularfelder ohne Label, Tastaturfallen und unsichtbarer Fokus. WCAG 2.2 ergänzt dann AA-Prüfungen, die Shops besonders treffen: fokussierte Elemente, die unter fixierten Leisten verschwinden (2.4.11), Tap-Ziele kleiner als 24 × 24 CSS-Pixel (2.5.8) und Logins, bei denen man sich etwas merken oder etwas abtippen muss (3.3.8). Testen Sie jeden Seitentyp (Startseite, Kollektion, Produkt, Warenkorb) mit der Tastatur und einem automatisierten Prüftool und korrigieren Sie dann die Theme-Templates, damit jede Seite die Korrektur übernimmt.

Das Wichtigste in Kürze

  • WCAG 2.2 wurde am 5. Oktober 2023 zur W3C-Empfehlung. Die aktuelle Ausgabe stammt vom 12. Dezember 2024 und wurde als ISO/IEC 40500:2025 (öffnet in einem neuen Tab) angenommen.
  • Im WebAIM Million 2026 (öffnet in einem neuen Tab) (Daten vom Februar 2026) hatten 95,9 % der Startseiten der Top-1-Million-Websites erkennbare WCAG-2-Fehler.
  • Die sechs häufigsten Fehler waren Text mit geringem Kontrast (83,9 % der Seiten), fehlende Alternativtexte (53,1 %), fehlende Formular-Labels (51 %), leere Links (46,3 %), leere Buttons (30,6 %) und eine fehlende Angabe der Seitensprache (13,5 %).
  • Die 42.516 Shopify-Startseiten in dieser Stichprobe hatten im Schnitt 75,1 erkannte Fehler, gegenüber 56,1 über alle Seiten hinweg.
  • WCAG 2.2 ergänzt vier AA-Kriterien (2.4.11, 2.5.7, 2.5.8, 3.3.8) und zwei Kriterien der Stufe A (3.2.6, 3.3.7) und streicht 4.1.1 Parsing.

Was hat sich mit WCAG 2.2 für Onlineshops geändert?

WCAG 2.2 hat neun Erfolgskriterien hinzugefügt, sechs davon auf Stufe A oder AA, und 4.1.1 Parsing als überholt gestrichen (W3C WAI (öffnet in einem neuen Tab)).

Neues KriteriumStufeWas es für einen Shop bedeutet
2.4.11 Focus Not Obscured (Minimum)AAEin fokussierter Link oder Button darf nicht vollständig von einem fixierten Header, einer fixierten „In den Warenkorb“-Leiste, einem Cookie-Banner oder einem Chat-Widget verdeckt werden
2.5.7 Dragging MovementsAAAlles, was Ziehen erfordert, etwa ein Schieberegler für den Preisbereich, braucht eine Alternative, die mit einem einzelnen Tippen funktioniert
2.5.8 Target Size (Minimum)AAKlick- und Tap-Ziele sind mindestens 24 × 24 CSS-Pixel groß oder so weit voneinander entfernt, dass ein Kreis von 24 px um jedes Ziel seine Nachbarn nicht berührt
3.2.6 Consistent HelpAHilfe-Links, Kontaktdaten oder Chat erscheinen auf jeder Seite in derselben relativen Reihenfolge
3.3.7 Redundant EntryAFragen Sie innerhalb eines Prozesses nicht zweimal dieselben Informationen ab; füllen Sie sie automatisch aus oder lassen Sie sie auswählen
3.3.8 Accessible Authentication (Minimum)AADie Anmeldung darf nicht davon abhängen, sich etwas zu merken oder abzutippen, es sei denn, es gibt eine Alternative oder eine Hilfe wie Einfügen und Passwortmanager

Die übrigen drei (2.4.12, 2.4.13 und 3.3.9) gehören zur Stufe AAA. Da 2.2 jedes Kriterium aus 2.1 außer 4.1.1 beibehält, deckt die Erfüllung von 2.2 AA auch 2.1 AA ab.

Welche WCAG-Kriterien werden in Shop-Templates am häufigsten verfehlt?

Jedes Jahr tauchen dieselben wenigen auf: Kontrast, Alternativtext, Formular-Labels und Namen für Links und Buttons, dazu Tastatur- und Fokusprobleme, die automatisierte Tools nur teilweise erkennen.

KriteriumWas in Shops fehlschlägtSo beheben Sie es
1.1.1 Non-text Content (A)Produktbilder ohne Alternativtext oder mit dem Dateinamen als Alternativtext; verlinkte Bilder ohne TextBeschreiben Sie das gezeigte Produkt (Farbe, Stil, Perspektive). Verwenden Sie alt="" nur für Dekoration. Shopify-Themes sollten image.alt ausgeben
1.4.3 Contrast (Minimum) (AA)Hellgrauer Fließtext, Platzhaltertext, Sale-Badges, Text über Hero-Bildern4,5:1 für normalen Text, 3:1 für großen Text (etwa 24 px oder 18,5 px fett) (W3C (öffnet in einem neuen Tab))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Links zu Warenkorb, Suche und Social Media nur als Icon; Slider-Pfeile; „X“-Buttons zum Schließen ohne NamenGeben Sie jedem Bedienelement sichtbaren Text oder ein aria-label, etwa „Warenkorb, 2 Artikel“
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Newsletter- und Suchfelder nur mit Platzhaltertext; Mengenfelder ohne LabelVerwenden Sie ein <label for>, das zur id des Eingabefelds passt; gruppieren Sie Varianten-Swatches mit Radio-Buttons in einem fieldset mit legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menüs, die nur per Hover funktionieren, aus divs gebaute Swatches, Pop-ups, die sich nicht per Tastatur schließen lassenVerwenden Sie echte button- und a-Elemente; Escape schließt Overlays und gibt den Fokus zurück
2.4.7 Focus Visible (AA)outline: none im Theme-CSSErgänzen Sie einen :focus-visible-Stil, der sich deutlich vom Hintergrund abhebt

WebAIM stellte außerdem fest, dass jedes vierte verlinkte Bild keinen Alternativtext hatte und dass 45 % der Bilder ohne Alternativtext Links waren (WebAIM (öffnet in einem neuen Tab)). In einem Kollektionsraster ist das meist der Link auf dem Produktbild.

Was sollten Sie auf der Startseite prüfen?

Prüfen Sie den Header, den Hero-Bereich und alles, was sich einblendet, denn darauf trifft jeder Besucher zuerst.

  • Skip-Link. Ein Link „Zum Inhalt springen“ als erstes fokussierbares Element (2.4.1 Bypass Blocks, A).
  • Header-Icons. Die Icons für Suche, Kundenkonto und Warenkorb haben zugängliche Namen, und der Name des Warenkorbs enthält die Anzahl der Artikel.
  • Menü. Öffnet sich mit Enter oder Leertaste, Unterpunkte sind per Tab erreichbar, es schließt sich mit Escape und ist nicht auf Hover angewiesen (2.1.1). Laut den Theme-Store-Anforderungen (öffnet in einem neuen Tab) von Shopify müssen alle Teile einer Seite, auch Dropdown-Menüs, per Tastatur bedienbar sein.
  • Hero-Slider. Wenn sich Slides länger als fünf Sekunden automatisch bewegen, stellen Sie eine Pause-Funktion bereit (2.2.2 Pause, Stop, Hide, A).
  • Ankündigungsleiste und Text auf Bildern. Messen Sie den Kontrast; Markenfarben verfehlen 4,5:1 häufig.
  • Pop-ups und Cookie-Banner. Verschieben Sie den Fokus in das Pop-up, versehen Sie das E-Mail-Feld mit einem Label, ermöglichen Sie das Schließen mit Escape und stellen Sie sicher, dass ein fixiertes Banner das fokussierte Element nie vollständig verdeckt (2.4.11). Das W3C nennt die CSS-Eigenschaft scroll-padding als eine Möglichkeit, fokussierte Elemente von fixierten Leisten freizuhalten (W3C (öffnet in einem neuen Tab)).
  • Seitensprache. Das html-Element hat ein korrektes lang-Attribut (3.1.1 Language of Page, A).

Was sollten Sie auf Kollektionsseiten prüfen?

Kollektionsseiten scheitern meist an Produktkarten, Filtern und Farbfeldern.

  • Produktkarten. Der Bildlink hat einen Alternativtext, oder das Bild ist vor assistiven Technologien verborgen und der Titel-Link trägt den Namen.
  • Filter. Jede Checkbox hat ein Label, und jede Gruppe hat eine Überschrift oder Legende. Der Filterbereich lässt sich per Tastatur öffnen, bedienen und schließen. Lassen Sie aktualisierte Trefferzahlen als Statusmeldung ansagen (4.1.3 Status Messages, AA).
  • Preisschieberegler. Ergänzen Sie Zahlenfelder für Mindest- und Höchstpreis, damit der Filter ohne Ziehen (2.5.7) und ohne Maus (2.1.1) funktioniert.
  • Farbfelder. Jedes Farbfeld hat einen Textnamen, und „ausverkauft“ wird nicht allein durch Farbe angezeigt (1.4.1 Use of Color, A). Farbfelder erfüllen 24 × 24 CSS-Pixel oder die Abstandsregel (2.5.8).
  • Sortierung und Seitennavigation. Das Sortier-Dropdown hat ein Label; Seitenlinks und „Mehr laden“-Buttons erfüllen die Mindestzielgröße.

Was sollten Sie auf Produktseiten prüfen?

Auf der Produktseite fällt die Kaufentscheidung. Testen Sie deshalb jedes Bedienelement zwischen den Fotos und dem „In den Warenkorb“-Button.

  • Galerie. Jedes Bild hat einen Alternativtext, Thumbnails sind Buttons mit Namen wie „Bild 2 anzeigen“, und die Pfeile funktionieren ohne Ziehen (2.5.7).
  • Variantenauswahl. Größen- und Farboptionen stehen in einer beschrifteten Gruppe (1.3.1), die ausgewählte Option wird Screenreadern mitgeteilt (4.1.2), und nicht verfügbare Größen sind im Text gekennzeichnet.
  • Menge. Das Eingabefeld hat ein Label, und die Minus- und Plus-Buttons haben Namen und erfüllen 2.5.8. Der Theme Store von Shopify verlangt inzwischen Touch-Ziele von mindestens 24 × 24 CSS-Pixeln, und Shopifys Best Practices zur Barrierefreiheit (öffnet in einem neuen Tab) empfehlen 44 × 44 für primäre Bedienelemente.
  • In den Warenkorb. Erfolgs- und Fehlermeldungen werden angesagt (4.1.3). Die Beschwerde der FTC gegen einen Overlay-Anbieter nannte eine Website, auf der ein Screenreader nicht ansagte, dass ein Artikel in den Warenkorb gelegt worden war, und auf der eine 5-Sterne-Bewertungsgrafik als „previous“-Button vorgelesen wurde (FTC-Beschwerde (öffnet in einem neuen Tab)).
  • Bewertungen, Tabs und Akkordeons. Bewertungen haben Text wie „4,5 von 5 Sternen“. Akkordeons geben an, ob sie aufgeklappt sind.
  • Fixierte „In den Warenkorb“-Leiste. Sie darf das fokussierte Element nicht vollständig verdecken, während sich ein Tastaturnutzer mit Tab durch die Seite bewegt (2.4.11).
  • Video. Produktvideos mit gesprochenem Text haben Untertitel (1.2.2 Captions (Prerecorded), A).

Was sollten Sie im Warenkorb und bei der Anmeldung prüfen?

Der Warenkorb ist die letzte Seite, die die meisten Themes vollständig kontrollieren. Testen Sie ihn deshalb bis zum Checkout-Button und prüfen Sie dann, ob die Anmeldung im Kundenkonto ohne Gedächtnisleistung und ohne erneutes Abtippen funktioniert.

  • Warenkorb-Drawer. Der Fokus wechselt in den Drawer, bleibt dort, solange er geöffnet ist, und kehrt zum Warenkorb-Button zurück, wenn Escape ihn schließt, so wie es die Best Practices von Shopify beschreiben.
  • Positionen. Jedes Mengenfeld ist mit dem Produktnamen beschriftet, und jeder Entfernen-Button sagt, was er entfernt, etwa „Leinenhemd, Größe M entfernen“.
  • Rabatt- und Notizfelder. Mit Label und mit Fehlermeldungen, die als Text beschrieben werden (3.3.1 Error Identification, A).
  • Checkout-Button. Per Tab erreichbar, sichtbar fokussiert und nicht hinter fixierten Elementen verborgen.
  • Anmeldung (3.3.8). Die Kundenkonten von Shopify nutzen standardmäßig eine passwortlose Anmeldung mit Einmalcode (öffnet in einem neuen Tab). Laut W3C müssen sich Codes einfügen oder automatisch ausfüllen lassen, und wer das Einfügen oder Passwortmanager blockiert, verfehlt das Kriterium. CAPTCHAs mit Objekterkennung sind auf Stufe AA zulässig, Rätsel- oder Rechen-CAPTCHAs brauchen dagegen eine andere Methode (W3C (öffnet in einem neuen Tab)).

Hier spielen die Unterschiede zwischen den Plattformen eine Rolle. Bei Shopify wird checkout.liquid für die Schritte Information, Versand und Zahlung nicht mehr unterstützt (öffnet in einem neuen Tab), sodass das meiste Checkout-Markup von Shopify stammt und nicht aus Ihrem Theme; testen Sie die Checkout-Apps und Anpassungen, die Sie hinzufügen. Bei WooCommerce ist der Checkout eine Seite auf Ihrer WordPress-Website. WooCommerce gibt an, dass sein Core-Frontend weitgehend konform mit WCAG 2.2 AA ist (Erklärung zuletzt aktualisiert am 1. April 2025), Ihr Theme und Ihre Plugins können das aber dennoch zunichtemachen (WooCommerce (öffnet in einem neuen Tab)).

Wie testen Sie einen Shop anhand dieser Checkliste?

Kombinieren Sie auf jedem Seitentyp einen automatisierten Scan mit einem Kauf nur per Tastatur und einer kurzen Prüfung mit einem Screenreader.

  1. Automatisierter Scan. Tools wie axe, WAVE oder Lighthouse erkennen Probleme bei Kontrast, Alternativtexten, Labels und leeren Links. Der Theme Store von Shopify verlangt einen durchschnittlichen Lighthouse-Accessibility-Score von mindestens 90 auf Start-, Kollektions- und Produktseiten. Das ist eine Untergrenze, keine Konformität: Laut W3C können Tools die Barrierefreiheit nicht allein feststellen (öffnet in einem neuen Tab).
  2. Kauf nur per Tastatur. Gelangen Sie ohne Maus von der Startseite über das Menü oder die Suche zu einem Produkt, filtern Sie, wählen Sie eine Variante, legen Sie das Produkt in den Warenkorb, öffnen Sie den Warenkorb und erreichen Sie den Checkout-Button.
  3. Stichprobe mit Screenreader. Hören Sie sich mit VoiceOver oder NVDA Produktname, Preis, Variantenstatus und die Bestätigung nach dem Hinzufügen zum Warenkorb an.
  4. Nach Änderungen erneut testen. Theme-Updates und neue Apps können Korrekturen rückgängig machen.

Unser kostenloser Scan deckt Schritt 1 auf einer Start-, Kollektions-, Produkt-, Warenkorb- und Inhaltsseite ab, in echtem Chromium mit axe-core. Der Barrierefreiheits-Report testet bis zu 25 Seiten, ergänzt Schritt 2 mit einem Einkaufstest nur per Tastatur bis zum Checkout-Button, liefert Code im Vorher-nachher-Vergleich und enthält eine Checkliste für Schritt 3, den ein Mensch mit einem Screenreader prüfen muss. Keines von beiden garantiert ADA- oder WCAG-Konformität.

Häufig gestellte Fragen

Ist WCAG 2.2 für Onlineshops in den USA gesetzlich vorgeschrieben?

Das US-Justizministerium (Department of Justice) hat keine ADA-Verordnung erlassen, die einen Webstandard für private Unternehmen festlegt, und seine Web-Leitlinien von 2022 (öffnet in einem neuen Tab) verweisen auf WCAG als hilfreiche Orientierung. Forderungsschreiben (Demand Letters) berufen sich häufig auf WCAG 2.1 oder 2.2 AA; lassen Sie sich daher zu Ihren konkreten Pflichten anwaltlich beraten.

Erfüllt man mit WCAG 2.2 AA auch WCAG 2.1 AA?

Ja, in der Praxis schon. WCAG 2.2 behält alle Erfolgskriterien von WCAG 2.1 bei, außer 4.1.1 Parsing, das das W3C als überholt gestrichen hat.

Wie groß müssen Klick- und Tap-Ziele nach WCAG 2.2 mindestens sein?

Nach 2.5.8 müssen Ziele mindestens 24 × 24 CSS-Pixel groß sein, es sei denn, ein Kreis von 24 px, der auf jedes kleinere Ziel zentriert ist, berührt keine anderen Ziele oder deren Kreise. Ausgenommen sind Links innerhalb von Sätzen, nicht gestaltete Browser-Bedienelemente, wesentliche Darstellungen und Ziele, für die es ein gleichwertiges Bedienelement gibt, das die Anforderung erfüllt.

Bedeutet ein Lighthouse-Accessibility-Score von 100, dass mein Shop konform ist?

Nein. Automatisierte Tools erkennen nur einen Teil der Fehler, und WebAIM weist darauf hin, dass das Fehlen erkannter Fehler nicht bedeutet, dass eine Seite barrierefrei oder konform ist.

Verstößt ein Login mit Passwort gegen 3.3.8?

Nicht für sich genommen. Ein Passwortfeld erfüllt das Kriterium, wenn man Inhalte einfügen und einen Passwortmanager nutzen kann; erst das Blockieren von Einfügen oder Autofill führt zum Verstoß.

Wie oft sollte ich meinen Shop erneut testen?

Testen Sie nach jedem Theme-Update, jeder neuen App und jeder größeren Template-Änderung erneut, und prüfen Sie den Kaufpfad regelmäßig stichprobenartig, da Apps ohne Vorwarnung neues Markup einfügen können.

Quellen

Alle Ratgeber