Barrierefreier Checkout: Warenkorb und Kaufstrecke prüfen und beheben
Veröffentlicht am 19. Oktober 2026
Ein barrierefreier Checkout lässt sich vom Warenkorb bis zur Bestellbestätigung allein mit der Tastatur, mit Bildschirmvergrößerung und mit einem Screenreader durchlaufen, und jedes Feld, jeder Fehler und jede Statusänderung ist beschriftet und wird angesagt. Sie prüfen das am zuverlässigsten, indem Sie selbst eine Testbestellung Schritt für Schritt durchspielen und an jedem Schritt die passenden WCAG-2.2-Kriterien abhaken; ein automatischer Scan erreicht den Checkout oft nur teilweise.
Welche Teile der Kasse Ihr Shopsystem selbst liefert und wer welchen Baustein technisch behebt, steht in Barrierefreier Onlineshop: Shopify, WooCommerce, Shopware und Co.. Dieser Artikel ist die Prüfanleitung für die Kaufstrecke selbst: was Sie in welchem Schritt testen, welches Kriterium dahintersteht und wie Sie den Fehler beheben.
Warum der Checkout als Ganzes zählt
Drei Quellen machen die Kaufstrecke zum wichtigsten Prüfgegenstand Ihres Shops:
- Die Verordnung nennt Zahlung und Anmeldung ausdrücklich. Nach § 19 Nr. 2 BFSGV müssen bei Dienstleistungen im elektronischen Geschäftsverkehr „Identifizierungs-, Authentifizierungs-, Sicherheits- und Zahlungsfunktionen, wenn diese nicht in Form eines Produkts, sondern im Rahmen einer Dienstleistung bereitgestellt werden, wahrnehmbar, bedienbar, verständlich und robust gestaltet werden“. Nach § 19 Nr. 3 gilt das auch für bereitgestellte Authentifizierungsmethoden und Zahlungsdienste.
- Die Marktüberwachung prüft den ganzen Ablauf. Nach § 28 Abs. 2 BFSG zieht die Marktüberwachungsbehörde bei Webseiten die Vorgaben der Anlage 1 BFSG heran. Dort steht unter Nr. 1 Buchstabe a, dass in der Stichprobe „alle Verfahrensschritte mindestens in der Standardreihenfolge eines üblichen Nutzers“ geprüft werden. Nach Buchstabe b werden mindestens Formulare, Steuerelemente und Dialogfelder, Bestätigungen der Dateneingabe sowie Fehlermeldungen und sonstige Rückmeldungen bewertet, und auch externe Interaktionsschritte, wenn sie für den Abschluss nötig sind. Nach Nr. 2 Buchstabe c gilt: Enthält eine Seite der Stichprobe einen Schritt eines Verfahrens, werden alle Schritte geprüft.
- Die WCAG kennen keinen halb barrierefreien Kaufvorgang. Die Konformitätsanforderung 5.2.3 „Complete processes“ der WCAG 2.2 verlangt, dass bei einem Ablauf über mehrere Seiten alle Seiten des Ablaufs die Stufe erfüllen. Das W3C nennt als Beispiel ausdrücklich einen Onlineshop: Alle Seiten von der Produktauswahl bis zum Checkout müssen konform sein, damit eine Seite des Ablaufs konform sein kann.
Unsere Einschätzung: Ein Zahlungsformular oder eine Weiterleitung zum Zahlungsanbieter gehört damit zu Ihrer Kaufstrecke, auch wenn der Code nicht von Ihnen stammt. Wer den Baustein technisch reparieren kann, ist eine andere Frage; die Entscheidungstabelle dazu steht im oben verlinkten Überblick zu den Shopsystemen.
Vorbereitung: eine Testbestellung möglich machen
Ohne echten Durchlauf sehen Sie die Hälfte der Fehler nicht, weil viele Meldungen erst nach einer Eingabe erscheinen.
- Testweg klären. Nutzen Sie, falls Ihr Zahlungsanbieter oder Ihr Shopsystem einen Test- oder Sandbox-Modus anbietet, eine Testumgebung. Sonst bestellen Sie einen günstigen Artikel und stornieren danach.
- Beide Wege einplanen. Einmal als Gast, einmal mit Kundenkonto, denn Anmeldung und Passwort-vergessen sind eigene Schritte.
- Jede Zahlungsart notieren. Rechnung, Lastschrift, Kreditkarte, PayPal, Express-Buttons: Jede hat ihre eigenen Felder oder Weiterleitungen.
- Zwei Geräte. Desktop-Browser mit Tastatur und Ihr Smartphone.
- Protokoll anlegen. Eine Tabelle mit Schritt, Befund, Kriterium, Ursache (Theme, App, Zahlungsanbieter, eigener Inhalt) und Datum. Die genügt später als Grundlage für Behebung und Barrierefreiheitserklärung.
Die Kaufstrecke Schritt für Schritt prüfen
Die Kriterien gehören zur Stufe A oder AA der WCAG 2.2; die Stufe steht in Klammern. Was die in WCAG 2.2 neu hinzugekommenen Kriterien allgemein bedeuten, erklärt WCAG 2.2 für Onlineshops; hier geht es darum, wo sie im Checkout greifen.
1. Warenkorb
| Was Sie prüfen | Kriterium |
|---|---|
| Menge ändern, Artikel entfernen, Gutscheincode einlösen: alles per Tab, Enter und Leertaste erreichbar und auslösbar? | 2.1.1 Tastatur (A) |
| Haben Plus, Minus und das Löschen-Symbol einen hörbaren Namen wie „Menge erhöhen“ oder „Artikel entfernen“? | 4.1.2 Name, Rolle, Wert (A) |
| Sind diese Schaltflächen mindestens 24 mal 24 CSS-Pixel groß oder weit genug voneinander entfernt? | 2.5.8 Zielgröße (Minimum) (AA) |
| Wird „Artikel hinzugefügt“, die neue Anzahl oder „Gutschein ungültig“ vom Screenreader angesagt, ohne dass der Fokus dorthin springen muss? | 4.1.3 Statusmeldungen (AA) |
| Läuft ein Countdown wie „Warenkorb nur noch 10:00 Minuten reserviert“, und verfällt der Warenkorb danach? | 2.2.1 Zeitbegrenzung anpassbar (A) |
Das W3C nennt den Warenkorb ausdrücklich als Beispiel für 4.1.3: Nach „In den Warenkorb“ soll die aktualisierte Anzahl von assistiven Technologien angesagt werden (Understanding 4.1.3). Zu 2.2.1 genügt eine der drei Möglichkeiten: Kunden können die Zeitgrenze vorher abschalten, sie in einem Bereich bis mindestens zum Zehnfachen der Vorgabe einstellen, oder sie werden vor Ablauf gewarnt und haben mindestens 20 Sekunden, um mit einer einfachen Aktion zu verlängern, und das mindestens zehnmal; ausgenommen sind Echtzeit-Ereignisse wie Auktionen, Zeitgrenzen, ohne die der Vorgang nicht möglich wäre, und Grenzen über 20 Stunden (Understanding 2.2.1).
2. Anmeldung oder Gastbestellung
| Was Sie prüfen | Kriterium |
|---|---|
| Lässt das Passwortfeld Einfügen und den Passwortmanager zu? | 3.3.8 Barrierefreie Authentifizierung (Minimum) (AA) |
| Lässt sich ein Bestätigungscode per SMS oder E-Mail einfügen, und zwar komplett, auch wenn das Feld in sechs Einzelkästchen geteilt ist? | 3.3.8 (AA) |
| Verlangt die Anmeldung in ein bestehendes Kundenkonto ein Captcha mit verzerrten Buchstaben, Rechenaufgabe oder Rätsel ohne Alternative? | 3.3.8 (AA) |
| Ist die Wahl „Als Gast bestellen“ oder „Anmelden“ per Tastatur erreichbar und klar beschriftet? | 2.1.1 (A), 3.3.2 Beschriftungen oder Anweisungen (A) |
Das W3C ist bei Codes deutlich: Ein Dienst, der das Abtippen eines Bestätigungscodes verlangt, ist nicht konform; mindestens Einfügen muss möglich sein. Es zeigt als Fehlerbild genau das geteilte Codefeld, bei dem Einfügen nur das erste Kästchen füllt (Understanding 3.3.8). 3.3.8 gilt nur für das Anmelden in ein bestehendes Konto, nicht für Registrierung oder Gastbestellung; ein Captcha in der Gastbestellung prüfen Sie nach 1.1.1 Nicht-Text-Inhalt (A), das für Captchas eine Alternative in einer anderen Sinnesform verlangt.
3. Adresse und Kontaktdaten
| Was Sie prüfen | Kriterium |
|---|---|
| Hat jedes Feld eine sichtbare Beschriftung, die beim Tippen stehen bleibt, statt nur Platzhaltertext im Feld? | 3.3.2 (A), 1.3.1 Info und Beziehungen (A) |
| Sind Pflichtfelder in Text gekennzeichnet, nicht nur durch Farbe? | 3.3.2 (A), 1.4.1 Benutzung von Farbe (A) |
| Füllt der Browser Name, Straße, Postleitzahl, E-Mail und Telefon automatisch aus? | 1.3.5 Eingabezweck bestimmen (AA) |
| Gibt es „Rechnungsadresse wie Lieferadresse“, oder müssen Kunden die Adresse noch einmal tippen? | 3.3.7 Keine doppelte Eingabe (A) |
| Löst die Auswahl des Landes einen unangekündigten Seitenwechsel oder Fokussprung aus? | 3.2.2 Bei Eingabe (A) |
| Lassen Sie ein Pflichtfeld leer und geben Sie eine falsche Postleitzahl ein: Wird das Feld genannt und der Fehler in Text beschrieben? Steht dabei, wie es richtig geht? | 3.3.1 Fehlererkennung (A), 3.3.3 Fehlerempfehlung (AA) |
| Wird die Fehlermeldung vom Screenreader angesagt? | 4.1.3 (AA) |
Zu 1.3.5: Das Kriterium verlangt, dass der Zweck von Feldern mit Angaben über den Kunden maschinenlesbar ist, in HTML über das Attribut autocomplete. Das W3C nennt als Beispiel ein Bestellformular, das Rechnungs- und Lieferadresse über die Zusätze billing und shipping unterscheidet. Dass ein Browser zufällig richtig rät, zählt nicht (Understanding 1.3.5). Für Ihren Test heißt das: Füllt der Browser die Adresse nicht aus, ist das ein Hinweis; ob das Attribut fehlt, sieht Ihre Agentur oder ein automatischer Test im Code.
4. Versandart
| Was Sie prüfen | Kriterium |
|---|---|
| Lassen sich die Versandoptionen mit den Pfeiltasten oder der Tab-Taste wählen, und wird die gewählte Option angesagt? | 2.1.1 (A), 4.1.2 (A) |
| Haben die Optionen eine gemeinsame Überschrift wie „Versandart“, die der Screenreader mit vorliest? | 1.3.1 (A) |
| Wird ein geänderter Gesamtpreis nach der Auswahl angesagt? | 4.1.3 (AA) |
| Sind Packstation- oder Abholstellen-Auswahl per Tastatur bedienbar, auch wenn sie als Karte oder Pop-up erscheinen? | 2.1.1 (A), 2.1.2 Keine Tastaturfalle (A) |
Das W3C empfiehlt für zusammengehörige Optionen wie Radio-Buttons eine Gruppierung mit gemeinsamer Beschreibung, in HTML über fieldset und legend (W3C Tutorial: Grouping Controls).
5. Zahlung
| Was Sie prüfen | Kriterium |
|---|---|
| Ist jede Zahlungsart per Tastatur wählbar, und ist der gewählte Zustand erkennbar, nicht nur durch Farbe? | 2.1.1 (A), 1.4.1 (A), 4.1.2 (A) |
| Sind die Felder für Kartennummer, Ablaufdatum und Prüfnummer beschriftet, auch wenn sie im eingebetteten Formular des Zahlungsanbieters liegen? | 3.3.2 (A), 1.3.1 (A) |
| Bleibt eine bereits eingegebene Kartennummer nach einer Fehlermeldung im Feld stehen? | 3.3.7 (A) |
| Funktionieren Express-Buttons und die Weiterleitung zum Zahlungsanbieter oder zur Bankbestätigung per Tastatur, und kommen Sie danach in den Shop zurück? | 2.1.1 (A), 2.1.2 (A) |
| Erlaubt die Bestätigung beim Zahlungsanbieter Einfügen von Codes oder eine App-Freigabe? | 3.3.8 (AA) |
| Läuft beim Zahlungsanbieter eine Zeitgrenze ohne Warnung ab? | 2.2.1 (A) |
Das W3C nennt den fehlgeschlagenen Zahlungsversuch als Beispiel für 3.3.7: Erscheint ein Fehler zur Kartennummer, darf die eingegebene Nummer nicht aus dem Formular gelöscht werden. Es stellt auch klar, dass ein Ablauf mehrere Domains umfassen kann, also auch die Übergabe an einen Zahlungsanbieter (Understanding 3.3.7).
6. Bestellung prüfen und absenden
| Was Sie prüfen | Kriterium |
|---|---|
| Sehen Kunden vor dem Absenden eine Übersicht mit Artikeln, Mengen, Lieferadresse und Zahlungsart und können sie dort korrigieren? | 3.3.4 Fehlervermeidung (rechtlich, finanziell, Daten) (AA) |
| Ist die Schaltfläche zum Bestellen per Tastatur erreichbar und im Fokus nicht vollständig von einer festen Leiste, einem Chat-Knopf oder dem Cookie-Banner verdeckt? | 2.1.1 (A), 2.4.11 Fokus nicht verdeckt (Minimum) (AA) |
| Ist die Checkbox für AGB oder Widerrufsbelehrung beschriftet, und sind die verlinkten Texte erreichbar? | 3.3.2 (A), 4.1.2 (A) |
| Ist der Fokus in der richtigen Reihenfolge, also Übersicht, Checkboxen, dann Bestellen? | 2.4.3 Fokusreihenfolge (A) |
3.3.4 verlangt bei Seiten, die eine rechtliche Verpflichtung oder eine finanzielle Transaktion auslösen, mindestens eine von drei Möglichkeiten: Die Bestellung ist umkehrbar, die Eingaben werden geprüft und können korrigiert werden, oder es gibt eine Möglichkeit, alles vor dem Absenden zu überprüfen, zu bestätigen und zu korrigieren. Das W3C nennt als Beispiel einen Händler, der vor dem Absenden die vollständige Bestellung mit Artikeln, Mengen, Lieferadresse und Zahlungsart zeigt (Understanding 3.3.4).
7. Bestätigung
| Was Sie prüfen | Kriterium |
|---|---|
| Hat die Bestätigungsseite einen eindeutigen Seitentitel, zum Beispiel „Bestellung erhalten“? | 2.4.2 Seite mit Titel (A) |
| Steht die Bestellnummer als Text da, nicht nur als Grafik? | 1.1.1 Nicht-Text-Inhalt (A) |
| Ist ein Pop-up für Newsletter oder Bewertung nach der Bestellung mit Escape oder einem beschrifteten Schließen-Button schließbar? | 2.1.2 (A), 4.1.2 (A) |
| Steht der Link zu Hilfe oder Kontakt an derselben relativen Stelle wie auf den übrigen Seiten? | 3.2.6 Hilfe an gleicher Stelle (A) |
Schnelltest: Tastatur, Zoom, Fehler
Wenn Sie heute nur eine Runde schaffen, dann diese. Sie brauchen keine Vorkenntnisse.
- Maus weglegen. Legen Sie einen Artikel in den Warenkorb und gehen Sie nur mit Tab, Umschalt+Tab, Enter, Leertaste, Pfeiltasten und Escape bis zur Übersicht vor dem Absenden. Notieren Sie jede Stelle, an der Sie nicht weiterkommen, nicht sehen, wo der Fokus ist, oder in einem Fenster festhängen.
- Fehler provozieren. Lassen Sie im Adressformular ein Pflichtfeld leer, tippen Sie eine vierstellige Postleitzahl und eine E-Mail ohne @. Steht bei jedem Feld in Worten, was falsch ist und wie es richtig geht?
- Vergrößern. Stellen Sie den Browser-Zoom auf 400 Prozent oder schauen Sie den Checkout auf dem Smartphone an. Nach 1.4.10 Umbruch (AA) muss der Inhalt bei einer Breite von 320 CSS-Pixeln ohne Verlust von Informationen oder Funktionen und ohne Scrollen in zwei Richtungen nutzbar sein; das W3C setzt 320 CSS-Pixel mit 400 Prozent Zoom bei einem 1280 Pixel breiten Fenster gleich (WCAG 2.2, 1.4.10). Bleiben Bestellübersicht, Preis und Bestellknopf sichtbar und erreichbar?
- Einfügen testen. Kopieren Sie Passwort und Bestätigungscode und fügen Sie sie ein.
- Warten. Lassen Sie den Checkout einige Minuten offen liegen. Läuft etwas ohne Warnung ab?
Der Schnelltest ersetzt keine vollständige Prüfung. Wie Sie mit Screenreader und den übrigen Kriterien weitermachen, beschreibt Website auf Barrierefreiheit prüfen: Checkliste für Onlineshops.
Typische Fehler im Checkout und ihre Behebung
| Fehler | Kriterium | Behebung | Wer behebt meist |
|---|---|---|---|
| Feld nur mit Platzhaltertext, keine sichtbare Beschriftung | 3.3.2, 1.3.1 | Sichtbares label am Feld, mit dem Feld verknüpft | Theme, Checkout-Plugin |
| Pflichtfeld nur rot markiert | 1.4.1, 3.3.2 | „Pflichtfeld“ oder Sternchen mit Erklärung in Text | Theme |
| Fehler nur als rote Umrandung, ohne Text | 3.3.1, 3.3.3 | Fehlertext am Feld mit Feldname und Korrekturhinweis | Theme, Checkout-Plugin |
| Fehlermeldung erscheint, wird aber nicht angesagt | 4.1.3 | Meldung in einem Live-Bereich (zum Beispiel role="status" oder role="alert") oder Fokus auf eine Fehlerübersicht | Theme, Checkout-Plugin |
| Browser füllt Adresse nicht aus | 1.3.5 | Korrekte autocomplete-Werte, getrennt nach shipping und billing | Theme, Checkout-Plugin |
| Rechnungsadresse muss erneut getippt werden | 3.3.7 | Häkchen „Rechnungsadresse wie Lieferadresse“, vorausgewählt | Shopsystem-Einstellung, Theme |
| Kartennummer nach Fehler gelöscht | 3.3.7 | Eingaben nach Fehler erhalten; Ausnahmen lässt das Kriterium etwa zu, wenn die erneute Eingabe der Sicherheit dient | Zahlungsanbieter |
| Mengen- und Löschen-Symbol ohne Namen | 4.1.2 | Unsichtbarer Name per aria-label oder versteckter Text | Theme |
| Zu kleine Plus/Minus-Knöpfe auf dem Smartphone | 2.5.8 | Mindestens 24 mal 24 CSS-Pixel oder ausreichend Abstand | Theme |
| Einfügen im Passwort- oder Codefeld blockiert, Codefeld in Kästchen | 3.3.8 | Einfügen erlauben, Passwortmanager zulassen, Code als ein Feld oder Einfügen über alle Kästchen | Shopsystem, Login-App, Zahlungsanbieter |
| Warenkorb-Countdown ohne Verlängerung | 2.2.1 | Countdown entfernen oder Warnung mit Verlängerung per Klick | Upsell- oder Countdown-App |
| Landesauswahl lädt die Seite neu, Fokus springt an den Anfang | 3.2.2 | Kein Seitenwechsel bei Auswahl oder vorher ankündigen | Theme, Checkout-Plugin |
| Bestellknopf im Fokus vollständig hinter fester Leiste oder Cookie-Banner | 2.4.11 | Leisten so platzieren, dass das fokussierte Element sichtbar bleibt, Scroll-Abstand einplanen | Theme, Cookie-App |
| Express-Button oder Zahlungsfenster per Tastatur nicht bedienbar | 2.1.1, 2.1.2 | Konformitätsbericht beim Anbieter anfordern, sonst Zahlungsart ersetzen | Zahlungsanbieter |
| Keine Übersicht vor dem Absenden | 3.3.4 | Prüfseite mit Artikeln, Mengen, Adressen, Zahlungsart und Ändern-Links | Shopsystem, Checkout-Plugin |
Die Spalte „Wer behebt meist“ ist unsere Einordnung. Unsere Einschätzung: Die Pflicht, nur barrierefreie Dienstleistungen anzubieten, trifft nach § 14 Abs. 1 BFSG Sie als Dienstleistungserbringer (§ 2 Nr. 4 BFSG), auch wenn ein Baustein von einem Anbieter stammt. Den konkreten Weg in Ihrem System finden Sie in Shopify barrierefrei machen: Theme, Apps, Checkout und WooCommerce barrierefrei machen. Wie Sie Formulare grundsätzlich beschriften, gruppieren, prüfen und Rückmeldungen geben, erklärt das W3C in seinem Tutorial zu Formularen; geben Sie den Link Ihrer Agentur mit.
Was ein automatischer Scan im Checkout leisten kann
Ein automatischer Test hilft, ersetzt die Handprüfung aber nicht; das W3C schreibt: „Tools cannot check all accessibility aspects automatically.“ (W3C: Selecting Web Accessibility Evaluation Tools).
Im Checkout kommt eine zweite Grenze hinzu. Ein Scanner ruft in der Regel öffentlich erreichbare Seiten auf. Viele Checkout-Schritte gibt es aber erst, wenn ein Artikel im Warenkorb liegt, eine Adresse eingegeben ist oder ein Kunde angemeldet ist, und Zahlungsfenster und Bankbestätigungen laufen beim Zahlungsanbieter. Solche Schritte erreicht ein Scan je nach Aufbau gar nicht oder nur in ihrem Anfangszustand, also ohne die Fehlermeldungen, die erst nach einer falschen Eingabe erscheinen. Gerade die Kriterien, die im Checkout am meisten zählen, etwa 3.3.1, 3.3.4, 3.3.7, 3.3.8 und 2.2.1, zeigen sich erst im Durchspielen.
Sinnvoll ist deshalb die Kombination: Ein Scan findet fehlende Namen, Beschriftungen, Kontraste und autocomplete-Fehler auf den Seiten, die er erreicht; die Schritte dahinter prüfen Sie mit der Anleitung oben selbst.
Dokumentieren und dranbleiben
- Protokoll aufheben. Ihre Tabelle aus der Vorbereitung zeigt, was Sie wann geprüft und behoben haben.
- Anbieter anfragen. Für Zahlungsformulare, Express-Buttons, Login- und Countdown-Apps fragen Sie schriftlich nach einem Konformitätsbericht und einem Termin für die Behebung. Wen Sie für welchen Baustein fragen, zeigt die Entscheidungstabelle im Überblick: barrierefreier Onlineshop mit Shopify, WooCommerce, Shopware und Co..
- Nach jeder Änderung erneut testen. Neue Zahlungsart, neues Checkout-Plugin, Theme-Update: Spielen Sie danach den Schnelltest erneut durch. Nach § 14 Abs. 3 BFSG müssen die Anforderungen erfüllt sein, solange Sie die Dienstleistung anbieten, und Änderungen an der Art, wie Sie sie erbringen, müssen Sie dabei berücksichtigen.
Ihr nächster Schritt
Starten Sie mit dem kostenlosen Scan Ihrer Startseite: Er zeigt automatisch gefundene technische Probleme. Automatische Werkzeuge finden nur einen Teil aller Barrieren, und die Schritte hinter Warenkorb, Anmeldung und Zahlung prüfen Sie mit der Anleitung oben von Hand.
Dieser Ratgeber ist keine Rechtsberatung. Im Zweifel klären Sie Ihren Fall mit der Bundesfachstelle Barrierefreiheit oder einer Anwältin oder einem Anwalt.
Stand: 19.10.2026. Quellen gelesen am 19.10.2026.