Checkout barrierefrei nach BFSG: Weniger Kaufabbrueche im entscheidenden Schritt

Viele Shops investieren in Traffic, Produktseiten und Ads und verlieren das Geld erst im Checkout. Wenn Warenkorb, Adressformular, Lieferoptionen oder Zahlungsarten nicht sauber bedienbar sind, bricht der Kunde unmittelbar vor dem Kauf ab. Genau dort wirkt Barrierefreiheit direkt auf Umsatz.

Warum der Checkout der haerteste Funnel-Punkt ist

Im Checkout steigt die Frustration schneller als auf jeder anderen Shop-Seite. Hier kommen Pflichtfelder, Lieferlogik, Validierungen, Gutscheine, Login-Huerden und Zahlungsanbieter zusammen. Schon ein einziges unbeschriftetes Feld oder ein schlecht fokussierbarer Button kann den Kauf stoppen.

Die haeufigsten BFSG-Fehler im Checkout

• Gastkauf versteckt: Nutzer werden unnötig in die Kontoerstellung gedrueckt.
• Formularfelder ohne saubere Labels: Screenreader und Autofill scheitern frueh.
• Fehlermeldungen nur in Rot: Der Grund fuer den Abbruch bleibt unklar.
• Payment-Auswahl nur visuell: Radio-Buttons oder Logos sind per Tastatur schwer nutzbar.
• Zusammenfassung vor Kauf unvollstaendig: Versand, Lieferzeit oder Endpreis sind nicht klar erkennbar.

Die 5 Pruefbereiche mit direkter Umsatzwirkung

1. Warenkorb und CTA-Einstieg

Kann der Nutzer den Warenkorb ohne Maus oeffnen, Mengen aendern und zur Kasse gehen? Der primaere CTA muss klar benannt sein und darf nicht durch Sticky-Elemente oder Banner verdeckt werden.

2. Adress- und Kontaktdaten

Name, Strasse, Hausnummer, PLZ, Ort, E-Mail und Telefon brauchen sichtbare Labels, logische Reihenfolge und verstaendliche Fehlertexte. Platzhalter allein reichen nicht.

3. Lieferung und Zahlungsarten

Versandoptionen, Lieferfenster und Payment-Methoden muessen technisch als Auswahlgruppen erkennbar sein. Logos ohne Text oder Custom-Tiles ohne Fokus kosten Vertrauen und Abschluesse.

4. Validierung und Fehlerweg

Wird ein Feld falsch ausgefuellt, braucht der Nutzer sofort Klartext: was ist falsch, wo und wie wird es behoben? Ein diffuses "Bitte Eingaben pruefen" fuehrt zu Kaufabbruch.

5. Kaufbestaetigung

Nach dem Abschluss muss klar sein, dass die Bestellung durch ist: Bestellnummer, Zahlungsstatus, Versandweg und naechster Schritt. Unscharfe Bestaetigungsseiten erzeugen Support und Stornos.

WCAG-Hotspots im Checkout

• 1.3.1 Info and Relationships: Felder und Auswahlgruppen sind nicht sauber ausgezeichnet.
• 2.1.1 Keyboard: Checkout-Widgets und Zahlungsoptionen sind nicht vollstaendig per Tastatur erreichbar.
• 2.4.7 Focus Visible: Fokus auf Buttons, Checkboxen oder Tabs ist kaum sichtbar.
• 3.3.1 Error Identification: Fehler werden nicht eindeutig benannt.
• 3.3.2 Labels or Instructions: Hinweise zu Pflichtfeldern, Gutscheinen oder Lieferdetails fehlen.

Ein schneller Checkout-Test fuer Shop-Betreiber

1. Vom Warenkorb bis "Jetzt kaufen" komplett ohne Maus testen.
2. Gastkauf, Rechnung und PayPal/Kreditkarte jeweils einmal simulieren.
3. Fehler provozieren: leere Pflichtfelder, falsche PLZ, abgelehnte Zahlung.
4. Den gesamten Prozess bei 200 Prozent Zoom und mobil pruefen.
5. Startseite und Checkout-URL mit dem kostenlosen BFSG-Scanner vorpruefen.

Quick Wins fuer diese Woche

Wenn Sie nur drei Dinge anfassen, priorisieren Sie den Gastkauf, saubere Feld-Labels und klare Fehlertexte. Genau diese drei Punkte entscheiden haeufig darueber, ob ein Nutzer seinen Kauf abschliesst oder abspringt.

Der Checkout-Fokusfluss: Warum Reihenfolge alles ist

Sehende springen visuell, Tastatur- und Screenreader-Nutzer folgen linearar. Ein schlechter Fluss: 20 Mal Tab drücken, um Checkout zu klicken.

Optimal: Gastkauf vs. Anmelden, Rechnungsadresse (Name, Straße, Hausnummer, PLZ, Ort), Lieferadresse (nur wenn anders), Versandart, Zahlungsart, Gutschein (optional), Bestätigung und Kauf-Button. Kein Springen zwischen Seite oben (Warenkorbsumme) und unten (Button). Keine überlagerten Popups. Keine versteckten Hinweise in grauem Text.

Test mit Tastatur: Drücke nur Tab. Kannst du alle Felder und Buttons erreichen? Siehst du, wo der Fokus ist? Manchmal sitzt der Fokus in Popups fest.

Zahlungsarten und Payment-Provider sauber integrieren

Externe Payment-Provider sind Barrierefreiheits-Grauzone: Du kontrollierst oft nicht Iframe oder Modal.

Besser: Die Auswahl zwischen 'Kreditkarte', 'PayPal', 'Klarna' sollte in deinem HTML sein (klare Radio-Buttons oder Tabs). Erst danach wird Iframe geladen. Prüfe mit Screenreader und Tastatur, ob Felder beschriftet sind. Falls Provider-Zugang kaputt: Fallback (z. B. Banküberweisung, Nachnahme). Wenn Zahlungsversuch fehlschlägt: Nutzer muss wissen, was schiefging. Lieber eine Zahlung weniger akzeptieren, aber dafür klar bedienbar, als alle anzubieten und echte Nutzer ausschließen.

Versandoptionen und Lieferzeiten verständlich darstellen

Versandoptionen sind häufige Abbruch-Stellen. Nutzer wissen oft nicht, welche Option passt.

Standard-Problem: 'Standard', 'Express', 'Overnight' ohne Erklärung. Nur Icons, kein Text. Kosten am falschen Ort. Liefertage als Berechnung ('plus 2 bis 3 Werktage') statt konkrete Daten.

Richtig: Jede Option ist Radio-Button mit beschreibendem Label (nicht nur Name). Screenreader hört den vollen Text. Kosten und Lieferdatum sind sichtbar im gleichen Kontext. Tabellendarstellung: Versand-Art, Beschreibung, Kosten, konkretes Lieferdatum.

Gutscheinfelder, Rabattcodes und mehrstufige Checkouts

Viele Shops bauen den Checkout heute mehrstufig auf: erst Adresse, dann Versand, dann Zahlung, zum Schluss die Bestätigung. Diese Aufteilung kann die Bedienung erleichtern, wenn sie sauber umgesetzt ist, oder zur Falle werden, wenn der Fortschritt nicht erkennbar ist. Eine Fortschrittsanzeige muss als Text lesbar sein, nicht nur als grafische Leiste mit Zahlen. Screenreader-Nutzer sollten hören können, auf welchem Schritt von wie vielen sie sich gerade befinden und wie dieser Schritt heißt.

Gutscheinfelder gehören zu den am schlechtesten beschrifteten Elementen im Checkout. Häufig steht dort nur ein Platzhaltertext wie "Code eingeben", ohne sichtbares Label und ohne Rückmeldung, ob der Code angenommen wurde. Wird ein ungültiger Code eingegeben, muss der Fehler als Text erscheinen und mit dem Feld verknüpft sein, damit assistierende Technik ihn zuordnen kann. Eine reine Farbänderung des Rahmens reicht dafür nicht aus.

Beim Wechsel zwischen den Schritten sollte der Fokus gezielt gesetzt werden, etwa auf die Überschrift des neuen Schritts. Andernfalls bleibt der Tastaturfokus irgendwo auf der alten Seite stehen, und Nutzer verlieren die Orientierung. Ein Zurück-Button muss ebenso erreichbar sein wie der Weiter-Button und sollte eindeutig benannt sein, statt nur mit einem Pfeil-Symbol zu arbeiten. Wer mehrere Schritte anbietet, sollte zusätzlich erlauben, direkt zu einem vorherigen Schritt zu springen, um Eingaben zu korrigieren, ohne den gesamten Vorgang neu zu beginnen.

Session-Timeouts und Warenkorb-Erhalt bei längeren Eingabezeiten

Menschen, die Formulare mit Sprachsteuerung, Bildschirmvergrößerung oder Screenreader ausfüllen, brauchen oft deutlich mehr Zeit als der Durchschnitt. Setzt ein Shop ein kurzes Zeitlimit für die Session, kann der Warenkorb genau in dem Moment verloren gehen, in dem die Zahlungsdaten fast vollständig eingegeben sind. Das kostet nicht nur diesen einen Kauf, sondern häufig auch das Vertrauen in den Shop insgesamt.

Sinnvoll ist eine Warnung, bevor eine Session ausläuft, verbunden mit der Möglichkeit, die Zeit zu verlängern, ohne bereits eingegebene Daten zu verlieren. Diese Warnung muss so gestaltet sein, dass sie auch von Screenreadern wahrgenommen wird, etwa über eine Statusmeldung, die automatisch vorgelesen wird, statt nur als kurz aufblitzendes Popup zu erscheinen.

Auf mobilen Geräten kommt ein weiterer Punkt hinzu: Touch-Ziele wie Mengen-Plus-Minus-Buttons oder das Entfernen eines Artikels aus dem Warenkorb müssen groß genug und mit ausreichend Abstand zueinander platziert sein. Werden solche Elemente zu klein oder zu dicht dargestellt, verklicken sich Nutzer mit motorischen Einschränkungen leicht, löschen versehentlich Artikel oder ändern Mengen ungewollt. Eine Bestätigung vor dem endgültigen Entfernen eines Artikels aus dem Warenkorb schützt vor solchen Fehlbedienungen, ohne den Ablauf für alle anderen spürbar zu verlangsamen.

Ein weiterer Punkt betrifft automatische Aktualisierungen der Warenkorbsumme. Ändert sich der Gesamtbetrag im Hintergrund, etwa weil ein Rabatt wegfällt oder die Versandkosten neu berechnet werden, sollte diese Änderung angekündigt werden, statt still im Hintergrund zu passieren. Screenreader-Nutzer bemerken eine rein visuelle Änderung der Zahl sonst nicht und zahlen im Zweifel einen anderen Betrag, als sie erwartet haben. Eine kurze, unaufdringliche Statusmeldung an der richtigen Stelle im Ablauf schafft hier Klarheit, ohne den restlichen Bestellvorgang zu unterbrechen.

Häufig gestellte Fragen