Die WCAG 2.2 AA Checkliste für Shopify-Stores

Wichtigste Erkenntnisse

• WCAG 2.2 AA ist der aktuelle W3C-Standard. Wenn du ihn erfüllst, erfüllst du auch WCAG 2.1 AA, die Stufe, die in den meisten Gesetzen zitiert wird.
• Die Erfüllung der Stufe AA bedeutet, dass jedes Erfolgskriterium der Stufe A und der Stufe AA erfüllt sein muss. AAA-Kriterien sind nicht erforderlich.
• WCAG 2.2 hat gegenüber 2.1 neun neue Erfolgskriterien hinzugefügt und eines entfernt (4.1.1 Parsing). Sechs der neun Kriterien liegen auf Stufe A oder AA.
• Automatisierte Scanner erfassen nur etwa 30 bis 40 % der Kriterien. Ein manueller Durchlauf mit der Tastatur und einem Screenreader ist erforderlich, um den Rest abzudecken.
• Jeder echte Fix ist eine Änderung an deinem Theme-Code oder deinem Content, kein Widget, das nur darüber gelegt wird.

WCAG 2.2 AA ist der aktuelle W3C-Standard und das Ziel, das wir für jeden Shopify-Shop empfehlen. Die meisten Gesetze zur Barrierefreiheit (Accessibility) beziehen sich noch auf WCAG 2.1 AA, was 2.2 AA ebenfalls abdeckt. Dies ist eine praktische Checkliste: die wichtigsten Erfolgskriterien, geordnet nach den vier POUR-Prinzipien, jeweils mit dem Hinweis, wo das Problem in einem Shopify-Theme tatsächlich auftritt.

Baue einmal nach WCAG 2.2 AA und du erfüllst gleichzeitig die älteren Vorschriften. WCAG 2.2 ist eine Erweiterung (Superset) von 2.1. Wenn du es erfüllst, erfüllst du auch den US-ADA-Standard, die europäische EN 301 549 (WCAG 2.1 AA) sowie die Regeln in Großbritannien, Kanada und Australien. Ein einziger Arbeitsaufwand deckt sie alle ab.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und vielen Shopify-Marken geholfen, barrierefreie, schnelle Storefronts bereitzustellen. Wir sind seit über vier Jahren im Shopify-Bereich tätig und entwickeln Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store. Auf Anfrage prüft Fudge ein Theme auf Barrierefreiheitsprobleme und behebt diese in nativem Code. Die unten stehenden Kriteriennummern und -stufen stammen direkt aus der offiziellen W3C WCAG 2.2 Empfehlung, nicht aus dem Gedächtnis.

Diese Checkliste ist die praktische Ergänzung zu unserem umfassenderen Shopify ADA- und WCAG-Compliance-Guide. Wenn dir der rechtliche Kontext wichtiger ist als die Kriterien, beginne dort, oder sieh dir unseren Guide zur ADA-Website-Compliance speziell für den US-Rechtsrahmen an.

So liest du diese Checkliste

Die WCAG haben drei Konformitätsstufen: A (Minimum), AA (das Ziel) und AAA (die höchste). Um WCAG 2.2 AA zu erreichen, musst du jedes Level A-Kriterium und jedes Level AA-Kriterium erfüllen. AAA-Kriterien sind eher erstrebenswerte Ziele und nicht Teil des gesetzlichen Standards; wir erwähnen sie daher, machen sie aber nicht zur Voraussetzung.

Die Richtlinien sind unter vier Prinzipien gruppiert, bekannt unter dem Akronym POUR:

• Wahrnehmbar (Perceivable). Nutzer können die Inhalte über einen ihrer Sinne wahrnehmen.
• Bedienbar (Operable). Nutzer können jedes Kontrollelement bedienen.
• Verständlich (Understandable). Inhalt und Verhalten sind vorhersehbar.
• Robust. Assistive Technologien können das Markup interpretieren.

Jeder der folgenden Abschnitte listet die Kriterien auf, die in einem Shopify-Store am ehesten brechen können – mit der exakten Nummer des Erfolgskriteriums, seinem Level und der Stelle im Theme, an der du es beheben musst.

Was ist neu in WCAG 2.2

WCAG 2.2 wurde im Oktober 2023 zur W3C Recommendation und ist die aktuelle Version.¹ Es hat alles aus 2.1 übernommen und neun neue Erfolgskriterien hinzugefügt, während eines entfernt wurde. Es ist wichtig sicherzugehen, auf welchem Level diese Kriterien verortet sind, da nur die Ergänzungen der Level A und AA dein Compliance-Ziel beeinflussen.²

Zwei Punkte, die man sich gut merken sollte: 2.4.13 Focus Appearance ist Level AAA, nicht AA – es ist also für die AA-Konformität nicht erforderlich, auch wenn es sich um den Fokus dreht. Zudem wurde 4.1.1 Parsing in WCAG 2.2 gestrichen: Es ist nun obsolet, da moderne Browser fehlerhaftes Markup (das dieses Kriterium adressierte) mittlerweile selbst problemlos handhaben können. Du musst es also nicht mehr testen.²

Die sechs neuen A- und AA-Kriterien sind diejenigen, die du zu deinem bestehenden 2.1-Review hinzufügen solltest. Wir heben sie in den POUR-Abschnitten weiter unten nochmal hervor.

Wahrnehmbar (Perceivable)

Alles, was ein Shopper braucht, um die Seite zu verstehen, muss für die Augen, das Gehör oder für assistive Technologien verfügbar sein.

Textalternativen und Medien

• 1.1.1 Nicht-Text-Inhalt (A). Jedes aussagekräftige Bild benötigt eine Textalternative. In Shopify ist dies das alt-Feld bei Produktbildern, Kategoriebildern und allen Bildern, die über einen Abschnitt oder den Theme-Editor hinzugefügt werden. Dekorative Bilder sollten ein leeres alt="" haben, damit Screenreader sie überspringen. Bedienelemente, die nur aus Icons bestehen (Warenkorb, Suche, Burger-Menü), benötigen ebenfalls einen barrierefreien Namen, was sich mit den unten genannten Bedienbarkeits-Kriterien überschneidet.
• 1.2.2 Untertitel (aufgezeichnet) (A) und 1.2.5 Audiodeskription (aufgezeichnet) (AA). Wenn du Produktvideos oder ein Lifestyle-Reel einbindest, stelle Untertitel bereit und biete eine Audiodeskription oder Textalternative an, wenn visuelle Elemente Informationen vermitteln, die nicht im Audio enthalten sind.

Speziell für Produktbilder zeigt dir unser kostenloser Shopify Catalog Data Audit die Abdeckung von Alt-Texten in deinem gesamten Katalog, sodass du sehen kannst, wie groß die Lücke bei 1.1.1 ist, bevor du anfängst zu schreiben.

Farbe und Kontrast

• 1.4.1 Use of Color (A). Verlasse dich niemals allein auf die Farbe, um Bedeutung zu vermitteln. Ein Sale-Preis, der nur in Rot angezeigt oder ein Formularfehler, der nur durch einen roten Rahmen markiert wird, fällt durch. Nutze Text, ein Icon oder eine Unterstreichung zusätzlich.
• 1.4.3 Contrast (Minimum) (AA). Normaler Text benötigt ein Kontrastverhältnis von mindestens 4.5:1 im Vergleich zu seinem Hintergrund; großer Text (etwa 24px, oder 18.66px fettgedruckt) braucht 3:1. Dies ist der allerhäufigste Fehler bei Shopify und resultiert fast immer aus Brand-Farben, die für den Body-Text, Button-Labels oder Placeholder-Text verwendet werden. Du kannst dies relativ leicht in den Farbeinstellungen des Themes oder im CSS beheben.
• 1.4.11 Non-text Contrast (AA). UI-Komponenten (Interface components) und aussagekräftige Grafiken benötigen ebenfalls einen 3:1 Kontrast. Denke an hellgraue Rahmen bei Inputs, einen reinen Outline-Button für den “Add to cart” oder einen Focus Ring, den man kaum erkennen kann.

Anpassung des Layouts

• 1.4.4 Resize Text (AA). Text muss lesbar bleiben und darf nicht verschwinden, wenn auf 200% reingezoomt wird. Vermeide Container mit festen Pixel-Höhen (fixed pixel heights), die den Text beim Vergrößern abschneiden.
• 1.4.10 Reflow (AA). Bei einer Viewport-Breite von 320 CSS-Pixeln (was etwa einem 400%-Zoom entspricht) muss der Inhalt vollständig in eine Spalte umbrechen (Reflow), ohne dass horizontales Scrollen nötig ist. Sticky Header, breite Tabellen und mehrspaltige (Multi-Column) Sections verursachen hier bei Shopify-Themes oft Probleme.
• 1.4.12 Text Spacing (AA) und 1.4.13 Content on Hover or Focus (AA). Content muss dem Erhöhen von Zeilen- und Buchstabenabständen standhalten, und jedes Hover- oder Focus-Popover (wie ein Mega-Menü, oder ein Size-Guide Tooltip) muss manuell versteckbar, bei gedrückter Maus persistent und bedienbar bleiben.
• 1.3.5 Identify Input Purpose (AA). Felder, in die User bereits bekannte Daten eintragen können (wie Name, E-Mail-Adresse oder Lieferanschrift beim Checkout oder Formulare im Kundenkonto) sollten unbedingt das richtige autocomplete-Attribut aufweisen. So können Browser und Assistive Tech sie automatisch ausfüllen.

Bedienbar (Operable)

Jedes Menü, jeder Drawer und jeder Button muss auch über die Tastatur und per Touch funktionieren, nicht nur mit der Maus.

Tastaturzugriff (Keyboard access)

• 2.1.1 Tastatur (A) und 2.1.2 Keine Tastaturfalle (A). Alles, was mit der Maus bedient werden kann, muss auch mit der Tastatur funktionieren, und der Fokus darf niemals stecken bleiben. Bei Shopify sind die häufigsten Fehler benutzerdefinierte Mega-Menüs, Cart Drawers, Quick-View-Modals und Bildergalerien, die mit JavaScript erstellt wurden und die Tastatur ignorieren. Ein Käufer, der Tab und Enter benutzt, muss in der Lage sein, den Cart Drawer zu öffnen, sich darin zu bewegen und ihn wieder zu schließen.
• 2.4.1 Blöcke umgehen (A). Biete einen Skip-Link an, damit Tastaturnutzer am Header vorbei direkt zum Hauptinhalt springen können. Horizon, Dawn und die meisten Themes aus dem Theme Store bringen einen mit; stark angepasste Themes verlieren ihn manchmal.

Sichtbarkeit des Fokus

• 2.4.7 Focus Visible (AA). Das Element, das aktuell den Tastaturfokus hat, muss einen sichtbaren Indikator besitzen. Ein ziemlich häufiger Theme-Fehler ist ein global gesetztes outline: none in der CSS, das den Focus Ring auf der gesamten Webseite versteckt. Entferne dies oder ersetze es durch einen sichtbaren Custom-Stil.
• 2.4.11 Focus Not Obscured (Minimum) (AA). Neu in 2.2. Wenn ein Element in den Fokus gerät, darf es nicht komplett durch anderen Content verdeckt werden. Sticky Header, Cookie Banner und Floating Chat Buttons sind oftmals die Schuldigen: Sie können beim Runter-Tabben das im Fokus stehende Feld verdecken.

Pointer, Touch und Zielgröße

• 2.5.7 Dragging Movements (AA). Neu in 2.2. Jede Aktion, die ein Drag-Ereignis auslöst, muss durch eine Alternative ohne Dragging (Single-Pointer) bedienbar sein. Hat dein Theme etwas wie einen bildbasierten “Slide to confirm”-Regler oder einen Image Slider, füge Tap- oder Klick-Steuerungen (wie Buttons oder Pfeile) als Alternative hinzu.
• 2.5.8 Target Size (Minimum) (AA). Neu in 2.2. Touch-Ziele (Touch targets, also klickbare Elemente) müssen mindestens 24x24 CSS-Pixel groß sein oder genügend Abstand zu anderen Elementen aufweisen. Enge Mobile-Menüs, kleine Quantity Steppers, eng beieinander liegende Varianten-Swatches und winzige Social Icons im Footer sind typische Shopify-Fehler.
• 2.5.3 Label in Name (A). Ein Control-Element muss in seinem Accessible Name mindestens seinen sichtbaren Label-Text enthalten, damit Voice-Control Nutzer (z.B. Sprach-Assistenten) den Button wirklich bedienen können, indem sie “Add to cart” aussprechen.

Verständlich (Understandable)

Shopper sollten einfach vorhersehen können, was ein Bedienelement macht, und sie sollten sich von versehentlichen Klicks problemlos erholen können.

Sprache und Vorhersehbarkeit

• 3.1.1 Language of Page (A). Setze das lang-Attribut für die Seite (z.B. <html lang="en"> oder "de"), damit Screenreader bei der Aussprache nicht durcheinanderkommen. 3.1.2 Language of Parts (AA) hilft den Tools wie Screenreadern dabei, Zitate und Abschnitte in einer fremden Sprache richtig vorzulesen – besonders wichtig für mehrsprachige Stores.
• 3.2.3 Consistent Navigation (AA) und 3.2.4 Consistent Identification (AA). Halte Header, Menü und wiederkehrende Icons konsistent an der gleichen Stelle und benenne sie auf allen Seiten durchgängig identisch. Ein Cart-Icon, das mal “Cart” und mal “Bag” heißt, scheitert in diesem Punkt.
• 3.2.6 Consistent Help (A). Neu in 2.2. Wenn du Support (einen Kontakt-Link, Chat, oder das FAQ) auf deiner Website bereitstellst, sollte dieser auf auf allen Unterseiten immer leicht und an der gewohnten Position zu finden sein.

Formulare, Labels und Fehler

• 3.3.2 Labels or Instructions (A). Jedes Formulareingabefeld braucht ein programmatisches <label>. Ein Placeholder-Text ist kein Label. Dies betrifft extrem oft das Newsletter Signup, Kontaktformulare, Suchfelder oder Variant/Quantity-Selectoren zahlreicher Themes. Ein visuell verstecktes <label>, das nur für Screenreader bereitgestellt wird, reicht hier oftmals völlig aus.
• 3.3.1 Error Identification (A) und 3.3.3 Error Suggestion (AA). Schlägt eine Formularausfüllung fehl, hebe den Text für dieses konkrete Feld fehlerhaft hervor und schlage vor, wie der User den Eintrag korrekt formatieren kann. Achte darauf, Fehler nicht mit Farbe allein zu signalisieren.
• 3.3.7 Redundant Entry (A). Neu in 2.2. Zwinge einen Shopper nicht dazu, doppelte Informationen (die er im selben Durchlauf bereits gemacht hat) erneut ins Formular einzugeben. Wenn eine „Rechnungsadresse entspricht Lieferadresse“-Checkbox angeboten wird, löst das den Check im Checkout-Flow super.
• 3.3.8 Accessible Authentication (Minimum) (AA). Neu in 2.2. Verlange für einen Login niemals einen alleinigen kognitiven Test (etwa ein Puzzle zu lösen oder Zeichen eines Bildes abzutippen), an dem es für Assistive-User am Ende scheitert. Verlangt dein Login einen CAPTCHA, erstelle dringend eine Alternative wie E-Mail Magic Links oder Support für normale Passwort-Manager.

Robust

Das HTML-Markup deiner Seite muss sauber strukturiert und vor allen Dingen für eine fehlerfreie Interpretation der Assistive Technologies formatiert sein.

• 4.1.2 Name, Role, Value (A). Hast du eigene interaktive Komponenten, benenne Rollen und Status-Codes klar. Ein <div>, das via CSS als Button umgebaut wurde, benötigt ein role="button", eine Keyboard-Navigation und einen Accessible Name. Ein Akkordeon braucht bspw. einen sauberen Zustand als aria-expanded. Wann immer möglich: Vermeide Custom-Umbauten und nutze echte, native Elemente (<button>, <a>, <select>).
• 4.1.3 Status Messages (AA). Meldungen, die bei Updates ohne Wechsel des Fokus auftauchen – wie etwa „Added to cart“ oder „Only 2 left“ – sollten via ARIA Live Region angesagt werden, damit Screenreader sie mit aufnehmen können.
• Bitte beachte: Das Kriterium 4.1.1 Parsing wurde in WCAG 2.2 gestrichen. Doppelte IDs bei id-Attributen oder Probleme durch die Markup-Nesting-Struktur zählen daher nicht mehr als ein Fail für dieses spezielle Kriterium (auch wenn sie andere Kriterien trotzdem brechen können!).

Die Checkliste im Überblick

Nutze dies als schnellen Check. Jede Zeile enthält ein Kriterium, sein Level und den Bereich in Shopify, wo es normalerweise fehlschlägt. Die mit Neu in 2.2 markierten Zeilen sind diejenigen, die du einer bestehenden WCAG 2.1 Überprüfung hinzufügen solltest. Dies deckt die Kriterien ab, die bei einem Shopify-Shop am wahrscheinlichsten fehlschlagen; WCAG 2.2 AA hat insgesamt 55 A- und AA-Kriterien (siehe die W3C-Kurzreferenz).

Automatisierte Tools bringen dich nur ein Stück weit

Ein Scanner ist ein guter Startpunkt und der schnellste Weg, um Kontrastprobleme, fehlende Alt-Texte oder fehlende Labels ausfindig zu machen. Letztlich deckt das automatisierte Tooling aber nur rund 30 bis 40% aller WCAG Erfolgskriterien ab. Eine Maschine bewertet dir eben nicht, ob ein Text (oder Alt-Text) Sinn ergibt, ob die Abfolge des Tastatur-Paging gut funktioniert oder wie gut der Kunde mit einem Screenreader tatsächlich durch den Checkout-Prozess kommt.

Also erfordert ein echter Audit zwei Ebenen:

1. Automatisierter Scan. Lasse ein kostenloses Tool (wie axe DevTools, WAVE, oder die Google Lighthouse Erweiterung) einmal über deine zentralen Templates (Startseite, Produkte, Collections, Cart und Text-/Contentseiten) drüberlaufen.
2. Manuelle Tests. Klick dich manuell durch: vom Produkt über den Cart Drawer bis in den final abgeschlossenen Checkout – ausschließlich bedient über die Tastatur (Tab, Shift + Tab, und Enter). Wiederhole genau dies im Anschluss gemeinsam mit der Audioausgabe (Mac VoiceOver oder dem kostenlos für Windows verfügbaren Tool NVDA). Zu guter Letzt stellst du mal auf 200% Zoom und probierst im Bereich des Reflow (bis etwa 320px) sicherzustellen, ob sich nichts überschneidet.

Eine Schritt-für-Schritt Anleitung, zu welchen Accessibility Fehlern das in der Praxis häufig führt und wie man diese löst, findest du in unserem Guide zur Behebung typischer Shopify Accessibility Failures.

Wie du gefundene Fehler richtig behebst

Jeder dauerhafte Fix auf dieser Checkliste ist eine Änderung an deinem Theme-Code oder deinem Content. Das ist auch der Teil, den Overlays überspringen. Ein Widget, das über die Seite gelegt wird, kann deinen alt-Text nicht umschreiben, kein <label> zum Suchfeld hinzufügen, kein Tap Target vergrößern und keinen Cart Drawer per Tastatur bedienbar machen. Es liegt nur über dem gleichen fehlerhaften HTML. Deshalb werden Seiten, die so etwas nutzen, immer noch verklagt, und im April 2025 hat die FTC (Federal Trade Commission) eine endgültige Anordnung erlassen, die den Overlay-Anbieter accessiBe zur Zahlung von 1 Million US-Dollar zwingt, weil er etwas anderes behauptet hat. Wir behandeln den gesamten Fall in unserem Guide darüber, warum Accessibility Overlays scheitern, und die plattformspezifische Frage in Ist Shopify ADA-konform?

Die meisten Fixes sind konkrete Anpassungen in Liquid, CSS und JavaScript:

• Füge beschreibenden alt-Text hinzu und nutze ein leeres alt="" bei dekorativen Bildern.
• Gib jedem Button und Link, der nur aus einem Icon besteht, einen barrierefreien (accessible) Namen.
• Verknüpfe jedes Eingabefeld mit einem <label>.
• Erhöhe den Kontrast von Text und Komponenten auf 4.5:1 und 3:1.
• Stelle sichtbare Fokus-Zustände und eine logische Tab-Reihenfolge wieder her.
• Vergrößere Touch-Ziele (Tap Targets) auf mindestens 24px und füge Alternativen ohne Dragging hinzu.
• Setze das richtige lang-Attribut für jede Sprache.

Hier hilft Fudge, der KI-Operator für Shopify-Shops. Bitte ihn um ein Accessibility-Audit, und er liest dein Live-Theme, markiert die fehlerhaften Kriterien in deinem Code und entwirft die Fixes direkt in nativem Liquid, CSS und JavaScript. Nichts geht live, bevor dein Team nicht jeden einzelnen Fix in einer Vorschau geprüft und freigegeben hat. Da der Output echter Code und keine injizierte Ebene ist, hält er genauso gut wie der Fix eines Entwicklers – ganz ohne zusätzliches Script, das die Seite verlangsamt. Das passt perfekt zu verwandten Aufgaben, wie dem Hinzufügen strukturierter Daten und allgemeiner Shop-Bearbeitung (Store Editing).

Das Modell, das wir empfehlen und dem auch Fudge folgt, besteht aus drei Schritten: Bringe ans Licht, was repariert werden muss, behebe es an der Quelle und führe das Audit nach Änderungen am Theme oder Content erneut aus (Fudge macht das auf Anfrage oder nach Zeitplan), damit eine zukünftige Bearbeitung nicht klammheimlich wieder einen Fehler einschleicht. Wenn du auch in der EU verkaufst, deckt dieselbe 2.2 AA-Arbeit auch den European Accessibility Act ab, der sich auf das ältere WCAG 2.1 AA bezieht.

FAQ