Barrierefreier Checkout: Die wichtigsten Punkte

Ein Kunde hat ein Produkt gefunden, sich für eine Variante entschieden und den Warenkorb gefüllt. Eigentlich ist der Verkauf damit fast geschafft.

Eigentlich.

Denn jetzt kommt der Checkout. Und genau an dieser Stelle verlieren viele Online-Shops unnötig Bestellungen. Mal ist das Formular unübersichtlich, mal lässt sich eine Zahlungsart nicht mit der Tastatur auswählen. Manchmal verschwinden alle Eingaben nach einer Fehlermeldung oder ein Cookie-Banner verdeckt den Bestellbutton.

Für Menschen mit Einschränkungen können solche Probleme den Kauf nicht nur unangenehm, sondern unmöglich machen.

Ein barrierefreier Checkout sollte deshalb nicht als zusätzliche Komfortfunktion verstanden werden. Er gehört zum Kern eines funktionierenden Online-Shops. Kunden müssen ihre Daten eingeben, Fehler korrigieren, eine Versand- und Zahlungsart wählen und die Bestellung abschließen können – möglichst unabhängig davon, ob sie Maus, Tastatur, Screenreader, Sprachsteuerung oder eine Vergrößerungssoftware verwenden.

Warum der Checkout besonders wichtig ist

Auf einer Produktseite kann ein kleiner Bedienfehler bereits störend sein. Im Checkout entscheidet derselbe Fehler darüber, ob ein Vertrag zustande kommt.

Der Checkout verbindet mehrere anspruchsvolle Bereiche:

• Formulare
• Pflichtfelder
• Auswahlmöglichkeiten
• Preisangaben
• Versandoptionen
• Zahlungsdienste
• Sicherheitsabfragen
• Fehlermeldungen
• rechtliche Bestätigungen
• den abschließenden Bestellbutton

Viele dieser Funktionen stammen nicht einmal aus demselben System. Das Grundformular kommt vielleicht von WooCommerce, die Adresseingabe von einem Checkout-Plugin und die Zahlung von einem externen Anbieter.

Deshalb reicht es nicht, nur das verwendete Shop-System zu aktualisieren. Entscheidend ist, ob der fertige Ablauf tatsächlich bedienbar ist.

Was hat das BFSG mit dem Checkout zu tun?

Das Barrierefreiheitsstärkungsgesetz betrifft unter bestimmten Voraussetzungen Dienstleistungen im elektronischen Geschäftsverkehr. Dazu können Online-Shops gehören, die sich an Verbraucher richten.

Der Checkout ist dabei besonders relevant, weil hier der eigentliche Vertragsabschluss vorbereitet und durchgeführt wird. Auch Identifizierung, Anmeldung, Sicherheitsprüfungen und Zahlungsfunktionen spielen häufig eine Rolle.

Ob ein Unternehmen unter das BFSG fällt, muss im Einzelfall geprüft werden. Es gibt beispielsweise eine Ausnahme für bestimmte Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen.

Unabhängig von der rechtlichen Einordnung lohnt sich die Verbesserung aber fast immer. Ein verständlicher Checkout hilft nicht nur Menschen mit Behinderungen. Er reduziert Rückfragen, Eingabefehler und Kaufabbrüche.

1. Der Ablauf muss sofort verständlich sein

Ein Checkout sollte dem Kunden jederzeit zeigen, wo er sich befindet und welche Schritte noch folgen.

Bei einem mehrstufigen Checkout kann die Reihenfolge zum Beispiel so aussehen:

1. Kontaktdaten
2. Lieferadresse
3. Versand
4. Zahlung
5. Prüfung und Bestellung

Die einzelnen Schritte sollten klar benannt sein. Eine reine Zahlenreihe ohne Erklärung hilft wenig.

Auch der aktuelle Schritt muss erkennbar sein. Dabei sollte die Markierung nicht ausschließlich über eine Farbe erfolgen. Eine zusätzliche Beschriftung wie „Aktueller Schritt“ oder eine deutliche visuelle Hervorhebung schafft mehr Klarheit.

Bei einem einseitigen Checkout sind gut gegliederte Abschnitte wichtig. Der Nutzer sollte sofort erkennen können, welche Felder zusammengehören.

2. So wenige Felder wie möglich verwenden

Jedes zusätzliche Feld macht einen Checkout länger und fehleranfälliger.

Frage deshalb nur Daten ab, die für Bestellung, Lieferung, Zahlung oder gesetzliche Pflichten wirklich benötigt werden.

Ein privater Kunde sollte beispielsweise nicht zwingend einen Firmennamen eingeben müssen. Eine zweite Adresszeile kann optional sein. Auch die Telefonnummer ist nicht bei jeder Bestellung erforderlich.

Weniger Felder bedeuten:

• weniger Bedienaufwand,
• weniger Fehler,
• kürzere Bearbeitungszeit,
• bessere mobile Nutzung,
• weniger Abbrüche.

Ein barrierefreier Checkout ist nicht automatisch ein besonders kurzer Checkout. Aber unnötige Komplexität ist fast immer eine zusätzliche Barriere.

3. Jedes Formularfeld braucht eine klare Beschriftung

Ein Feld sollte eine dauerhaft sichtbare Beschriftung besitzen.

Gute Beispiele sind:

• Vorname
• Nachname
• E-Mail-Adresse
• Straße und Hausnummer
• Postleitzahl
• Ort

Ein Platzhalter innerhalb des Feldes reicht nicht aus. Sobald der Kunde zu tippen beginnt, verschwindet er. Danach ist möglicherweise nicht mehr erkennbar, welche Angabe erwartet wurde.

Für Screenreader müssen Beschriftung und Eingabefeld technisch miteinander verbunden sein. Nur dann kann das Hilfsprogramm beim Anspringen des Feldes zuverlässig mitteilen, was eingegeben werden soll.

Eine sichtbare Beschriftung hilft übrigens allen Kunden. Besonders auf dem Smartphone verliert man bei langen Formularen schnell den Überblick.

4. Pflichtfelder eindeutig kennzeichnen

Kunden sollten vor dem Absenden wissen, welche Felder ausgefüllt werden müssen.

Ein kleines rotes Sternchen ist dafür nicht immer ausreichend. Es kann übersehen oder von einem Screenreader unverständlich vorgelesen werden.

Besser ist eine klare Lösung:

E-Mail-Adresse – Pflichtfeld

Alternativ kann am Anfang des Formulars stehen, dass alle Felder verpflichtend sind, sofern sie nicht ausdrücklich als optional bezeichnet werden.

Wichtig ist außerdem die technische Kennzeichnung. Ein Feld sollte nicht nur optisch, sondern auch im Code als verpflichtend erkennbar sein.

Pflichtangaben dürfen nicht ausschließlich durch Farbe markiert werden. Wer Rot und Grün schlecht unterscheiden kann, muss den Unterschied trotzdem verstehen können.

5. Eingabeformate vorher erklären

Manche Checkout-Felder verlangen ein bestimmtes Format. Das betrifft zum Beispiel:

• Geburtsdatum
• Telefonnummer
• Postleitzahl
• Gutscheincode
• Kreditkartendaten
• Umsatzsteuer-Identifikationsnummer

Das erwartete Format sollte erklärt werden, bevor der Kunde einen Fehler macht.

Statt erst später zu melden, dass ein Datum falsch eingegeben wurde, kann direkt beim Feld stehen:

„Format: TT.MM.JJJJ“

Bei Telefonnummern sollte der Checkout nicht unnötig streng sein. Leerzeichen, Bindestriche oder eine internationale Vorwahl sollten möglichst sinnvoll verarbeitet werden.

Je toleranter ein Formular mit üblichen Eingabeweisen umgehen kann, desto weniger Fehlermeldungen entstehen.

6. Der komplette Checkout muss mit Tastatur funktionieren

Ein Kunde muss den Checkout auch ohne Maus abschließen können.

Teste dafür den gesamten Vorgang mit:

• Tab
• Shift und Tab
• Enter
• Leertaste
• Pfeiltasten
• Escape

Alle Felder, Checkboxen, Versandarten, Zahlungsarten und Buttons müssen erreichbar sein.

Besonders kritisch sind individuell gestaltete Auswahlfelder. Eine Versandart kann optisch wie eine große Karte aussehen, technisch aber nur über einen winzigen Radio-Button bedienbar sein. Manche Zahlungsarten reagieren ausschließlich auf einen Mausklick.

Auch aufklappbare Bereiche, Gutscheinfelder und Infoboxen müssen per Tastatur funktionieren.

7. Der Tastaturfokus muss sichtbar bleiben

Beim Navigieren mit der Tab-Taste braucht der Nutzer eine sichtbare Orientierung. Er muss erkennen können, welches Element gerade ausgewählt ist.

Ein guter Fokus kann durch folgende Gestaltung sichtbar werden:

• klare Umrandung,
• deutlicher Schatten,
• farbige Hervorhebung,
• Hintergrundänderung,
• zusätzliche Unterstreichung.

Der Fokus darf nicht so dezent sein, dass er auf dem Hintergrund verschwindet.

Besonders häufig wird er durch feste Elemente verdeckt:

• Sticky Header,
• Cookie-Banner,
• Chat-Widgets,
• feststehende Bestellübersichten,
• mobile Navigationsleisten.

Wer Tab drückt, sollte das aktive Element immer im sichtbaren Bereich erkennen können.

8. Die Reihenfolge muss logisch sein

Der Fokus sollte den Checkout in einer nachvollziehbaren Reihenfolge durchlaufen.

Normalerweise bedeutet das:

Kontaktdaten, Rechnungsadresse, Lieferadresse, Versandart, Zahlung, Bestellübersicht, Zustimmungen und Bestellbutton.

Problematisch wird es, wenn die Reihenfolge durch technische Anpassungen durcheinandergerät. Dann springt der Fokus vielleicht von der E-Mail-Adresse direkt zum Bestellbutton und anschließend zurück zur Postleitzahl.

Optisch kann das Formular trotzdem völlig normal aussehen.

Deshalb muss die Reihenfolge praktisch getestet werden. Der technische Ablauf sollte dem sichtbaren Aufbau möglichst entsprechen.

9. Fehlermeldungen müssen konkret helfen

„Es ist ein Fehler aufgetreten.“

Diese Meldung hilft niemandem.

Eine gute Fehlermeldung sagt:

• wo das Problem liegt,
• was falsch ist,
• wie es behoben werden kann.

Beispiele:

„Bitte geben Sie eine gültige E-Mail-Adresse ein.“

„Die Postleitzahl muss aus fünf Ziffern bestehen.“

„Bitte wählen Sie eine Zahlungsart aus.“

„Bitte bestätigen Sie, dass Sie die Widerrufsbelehrung gelesen haben.“

Die Meldung sollte direkt beim betroffenen Feld erscheinen. Zusätzlich kann eine Zusammenfassung am Anfang des Formulars sinnvoll sein.

Wichtig ist, dass die Fehlermeldung nicht nur rot dargestellt wird. Ein Text oder ein verständliches Symbol muss das Problem erklären.

10. Fehler müssen leicht auffindbar sein

Bei einem langen Checkout reicht es nicht, das fehlerhafte Feld irgendwo rot zu markieren.

Nach dem Absenden sollte der Nutzer sinnvoll zum Fehler geführt werden. Der Fokus kann beispielsweise zur Fehlerzusammenfassung oder direkt zum ersten fehlerhaften Feld springen.

Die Fehlerzusammenfassung sollte anklickbare Verweise enthalten, die zu den jeweiligen Feldern führen.

Das ist besonders hilfreich bei:

• langen Formularen,
• mobilen Geräten,
• starker Bildschirmvergrößerung,
• Screenreader-Nutzung.

Der Kunde sollte nicht die gesamte Seite absuchen müssen, um herauszufinden, warum die Bestellung nicht abgeschlossen wurde.

11. Bereits eingegebene Daten müssen erhalten bleiben

Nach einem Fehler dürfen die bisherigen Eingaben nicht einfach verschwinden.

Wer Adresse, Kontaktdaten und Lieferhinweise bereits eingetragen hat, sollte diese Angaben nicht erneut eingeben müssen.

Ausnahmen können sensible Zahlungsdaten sein, die aus Sicherheitsgründen nicht gespeichert werden. Bei normalen Checkout-Feldern ist ein vollständiger Datenverlust jedoch unnötig frustrierend.

Teste deshalb verschiedene Fehlerfälle:

• Pflichtfeld leer lassen,
• falsche E-Mail-Adresse eingeben,
• keine Zahlungsart auswählen,
• ungültigen Gutscheincode verwenden,
• Zustimmung nicht erteilen.

Prüfe anschließend, welche Daten erhalten bleiben.

12. Fehlermeldungen nicht zu früh anzeigen

Manche Formulare zeigen bereits während der Eingabe einen Fehler an.

Der Kunde tippt die erste Ziffer der Postleitzahl – und sofort erscheint eine rote Warnung, dass fünf Ziffern benötigt werden.

Technisch ist die Meldung korrekt. Für den Nutzer ist sie trotzdem unnötig und störend.

Validierungen sollten zu einem sinnvollen Zeitpunkt erfolgen, beispielsweise nachdem das Feld verlassen oder das Formular abgesendet wurde.

Bei bestimmten Eingaben kann eine direkte Rückmeldung nützlich sein. Sie sollte den Nutzer aber unterstützen und nicht während des Tippens ständig unterbrechen.

13. Versandarten verständlich darstellen

Bei der Versandwahl muss klar erkennbar sein:

• welche Versandarten verfügbar sind,
• was sie kosten,
• wann die Lieferung ungefähr erfolgt,
• welche Option ausgewählt ist.

Die Auswahl darf nicht nur über einen farbigen Rahmen dargestellt werden. Auch Radio-Buttons und ihre Beschriftungen müssen verständlich sein.

Beispiel:

Standardversand – 4,90 Euro – Lieferung in drei bis fünf Werktagen

Das ist hilfreicher als:

Versandoption 1

Wenn bestimmte Optionen erst nach Eingabe einer Adresse erscheinen, sollte diese Änderung auch für Screenreader wahrnehmbar sein.

14. Zahlungsarten zugänglich auswählen

Die Zahlungsart ist häufig eine der schwierigsten Stellen im Checkout.

Logos allein reichen nicht aus. Ein Kunde sollte den Namen der Zahlungsart als Text erhalten:

• PayPal
• Kreditkarte
• Rechnung
• Lastschrift
• Sofortüberweisung

Auch zusätzliche Bedingungen müssen verständlich erklärt werden. Dazu können Gebühren, notwendige Konten oder Weiterleitungen zu externen Anbietern gehören.

Die Auswahl muss mit Tastatur funktionieren. Der ausgewählte Zustand muss visuell und technisch erkennbar sein.

Wenn nach der Auswahl weitere Felder erscheinen, müssen diese an einer sinnvollen Stelle in der Bedienreihenfolge liegen.

15. Externe Zahlungsfenster mitprüfen

Viele Zahlungsabläufe verlassen zumindest teilweise den eigentlichen Shop.

Der Kunde wird weitergeleitet, muss sich anmelden oder bestätigt die Zahlung über ein zusätzliches Fenster. Auch eine Zwei-Faktor-Authentifizierung kann dazugehören.

Prüfe den gesamten Prozess:

• Ist die Weiterleitung verständlich?
• Funktioniert die Anmeldung mit Tastatur?
• Sind Sicherheitscodes gut einzugeben?
• Kann ein geöffnetes Fenster geschlossen werden?
• Ist der Status der Zahlung erkennbar?
• Wird der Kunde zuverlässig in den Shop zurückgeführt?
• Gibt es eine verständliche Meldung bei einem Abbruch?

Ein zugänglicher Shop-Checkout reicht nicht aus, wenn der Kunde beim Zahlungsanbieter nicht weiterkommt.

16. Preisangaben müssen nachvollziehbar sein

Vor dem Abschluss muss der Gesamtpreis eindeutig erkennbar sein.

Dazu gehören je nach Angebot:

• Warenwert,
• Rabatte,
• Gutscheine,
• Versandkosten,
• Steuern,
• zusätzliche Gebühren,
• Gesamtbetrag.

Die Angaben sollten nicht nur visuell nebeneinanderstehen. Auch die technische Reihenfolge muss verständlich sein.

Ein Screenreader sollte nicht zuerst den Gesamtbetrag und danach unzusammenhängende Einzelpreise vorlesen.

Ändert sich der Preis, etwa nach Auswahl einer Versandart oder Eingabe eines Gutscheins, sollte diese Änderung wahrnehmbar angekündigt werden.

17. Bestellübersicht vor dem Abschluss anbieten

Bevor der Kunde verbindlich bestellt, sollte er seine Angaben noch einmal prüfen können.

Eine gute Übersicht zeigt:

• bestellte Produkte,
• Varianten und Mengen,
• Rechnungsadresse,
• Lieferadresse,
• Versandart,
• Zahlungsart,
• Einzelpreise,
• Gesamtbetrag.

Korrekturen sollten ohne unnötigen Datenverlust möglich sein.

Ein Kunde darf nicht gezwungen sein, den gesamten Checkout neu zu beginnen, nur weil sich die Hausnummer geändert hat.

Aufklappbare Bearbeitungsbereiche müssen ebenfalls per Tastatur zugänglich sein.

18. Der Bestellbutton muss eindeutig sein

Der letzte Button darf nicht unklar formuliert sein.

Texte wie „Weiter“, „Bestätigen“ oder „Fertig“ lassen offen, was genau passiert.

Der Kunde muss verstehen, dass er mit diesem Schritt eine verbindliche und gegebenenfalls zahlungspflichtige Bestellung abgibt.

Die genaue Formulierung muss zusätzlich den rechtlichen Anforderungen an den Bestellabschluss entsprechen.

Auch optisch sollte der Button klar erkennbar sein. Er darf nicht durch ein Cookie-Banner, ein Chatfenster oder eine feststehende Zusammenfassung verdeckt werden.

19. Checkboxen richtig umsetzen

Im Checkout gibt es häufig Checkboxen für:

• Allgemeine Geschäftsbedingungen,
• Datenschutz,
• Widerrufsbelehrung,
• Newsletter,
• freiwillige Zusatzoptionen.

Die Beschriftung sollte mit der jeweiligen Checkbox verbunden sein. Dadurch lässt sich die Auswahl auch durch einen Klick auf den Text aktivieren.

Das vergrößert die Bedienfläche und hilft besonders Menschen mit motorischen Einschränkungen.

Pflichtzustimmungen und freiwillige Einwilligungen müssen klar voneinander getrennt sein. Eine Newsletter-Anmeldung sollte nicht unauffällig zwischen zwingenden Bestätigungen versteckt werden.

20. Keine unnötige Kontoerstellung verlangen

Nicht jeder Kunde möchte ein Benutzerkonto anlegen.

Eine erzwungene Registrierung verlängert den Checkout und kann zusätzliche Barrieren schaffen:

• Passwortregeln,
• Bestätigungs-E-Mails,
• Captchas,
• Login-Probleme,
• zusätzliche Einwilligungen.

Ein Gast-Checkout kann den Kauf deutlich vereinfachen.

Wenn ein Konto erforderlich ist, müssen die Gründe verständlich sein. Passwortanforderungen sollten vor der Eingabe erklärt werden. Die Möglichkeit, das Passwort sichtbar zu machen, kann ebenfalls hilfreich sein.

21. Autovervollständigung sinnvoll nutzen

Browser und Passwortmanager können viele Angaben automatisch einsetzen.

Dazu gehören:

• Name,
• E-Mail-Adresse,
• Telefonnummer,
• Straße,
• Postleitzahl,
• Ort,
• Land.

Damit die automatische Vervollständigung zuverlässig funktioniert, müssen Felder technisch richtig ausgezeichnet sein.

Das spart Zeit und hilft Menschen, denen längere Texteingaben schwerfallen.

Trotzdem muss der Nutzer die automatisch eingesetzten Angaben überprüfen und ändern können.

22. Captchas dürfen niemanden aussperren

Bild-Captchas können zu einer erheblichen Barriere werden. Verzerrte Buchstaben sind nicht nur für Menschen mit Sehbehinderung schwierig.

Auch Audio-Captchas sind nicht automatisch eine gute Lösung. Hintergrundgeräusche oder undeutliche Aussprache können die Aufgabe unverständlich machen.

Wenn ein Schutz vor automatisierten Bestellungen notwendig ist, sollten möglichst unauffällige technische Verfahren verwendet werden.

Muss eine Aufgabe gelöst werden, braucht es eine zugängliche Alternative. Der Kunde darf nicht vom Kauf ausgeschlossen werden, weil er ein Bild nicht erkennen oder eine Audiodatei nicht verstehen kann.

23. Zeitlimits vermeiden oder ankündigen

Ein Checkout sollte den Kunden nicht ohne Vorwarnung unter Zeitdruck setzen.

Manche Systeme beenden eine Sitzung nach einer bestimmten Zeit. Das kann aus Sicherheitsgründen notwendig sein. Menschen mit motorischen oder kognitiven Einschränkungen benötigen für Formulare aber möglicherweise länger.

Ein Zeitlimit sollte deshalb:

• rechtzeitig angekündigt werden,
• verständlich erklärt sein,
• nach Möglichkeit verlängert werden können,
• eingegebene Daten nicht unnötig löschen.

Auch reservierte Warenkörbe oder zeitlich begrenzte Zahlungsfenster müssen klar kommuniziert werden.

24. Mobile Darstellung gründlich testen

Auf dem Smartphone entstehen zusätzliche Probleme:

• zu kleine Eingabefelder,
• winzige Checkboxen,
• verdeckte Buttons,
• überlappende Fehlermeldungen,
• unpassende Bildschirmtastatur,
• horizontales Scrollen,
• abgeschnittene Zahlungsfenster.

Der Checkout sollte auch bei vergrößerter Darstellung bedienbar bleiben.

Teste ihn nicht nur in der Vorschau des Pagebuilders. Verwende ein echtes Smartphone und führe eine vollständige Testbestellung durch.

Achte besonders darauf, ob die Bildschirmtastatur wichtige Felder oder Buttons verdeckt.

25. Vergrößerung und Umbruch prüfen

Viele Menschen vergrößern Webseiten, um Texte besser lesen zu können.

Der Checkout sollte auch bei deutlicher Vergrößerung nutzbar bleiben. Inhalte dürfen nicht übereinanderliegen oder außerhalb des sichtbaren Bereichs verschwinden.

Kritisch sind häufig:

• zweispaltige Formulare,
• feststehende Bestellübersichten,
• Tabellen,
• Zahlungslogos,
• Kalenderfelder,
• Popups.

Ein einspaltiger Aufbau ist auf kleineren Bildschirmbreiten meistens leichter zu erfassen und zu bedienen.

26. Gute Kontraste verwenden

Texte, Eingabefelder, Buttons und Fehlermeldungen müssen sich ausreichend vom Hintergrund abheben.

Prüfe insbesondere:

• hellgraue Feldbeschriftungen,
• Platzhaltertexte,
• deaktivierte Buttons,
• rote Fehlermeldungen,
• grüne Erfolgsmeldungen,
• Rahmen von Eingabefeldern,
• Fokusmarkierungen,
• Links in Hinweistexten.

Auch der Unterschied zwischen normalem, aktivem und fehlerhaftem Zustand muss erkennbar bleiben.

Farbe darf dabei nicht das einzige Merkmal sein. Ein Fehler braucht zusätzlich einen Text oder ein Symbol.

27. Statusänderungen verständlich mitteilen

Im Checkout verändert sich häufig etwas, ohne dass eine neue Seite geladen wird.

Beispiele:

• Gutschein wurde angewendet.
• Versandkosten wurden aktualisiert.
• Zahlungsart wurde ausgewählt.
• Adresse wurde überprüft.
• Gesamtpreis hat sich geändert.
• Produkt wurde entfernt.

Sehende Nutzer erkennen solche Änderungen möglicherweise sofort. Ein Screenreader bekommt davon jedoch nicht automatisch etwas mit.

Wichtige Statusmeldungen müssen deshalb technisch so umgesetzt sein, dass Hilfstechnologien sie wahrnehmen können.

Die Meldung sollte knapp und konkret sein:

„Der Gutschein wurde angewendet. Der Gesamtbetrag beträgt jetzt 79,90 Euro.“

28. Erfolg und Abbruch klar bestätigen

Nach dem Absenden muss eindeutig erkennbar sein, ob die Bestellung erfolgreich war.

Eine gute Bestätigungsseite enthält:

• klare Erfolgsbestätigung,
• Bestellnummer,
• Zusammenfassung,
• Zahlungsstatus,
• weitere Schritte,
• Kontaktmöglichkeit bei Problemen.

Auch ein Zahlungsabbruch muss verständlich erklärt werden. Der Kunde sollte wissen, ob die Bestellung gespeichert wurde und wie er den Vorgang fortsetzen kann.

Unklare Meldungen führen schnell zu Doppelbestellungen oder Supportanfragen.

29. Den Checkout mit echten Aufgaben testen

Ein automatisches Prüfprogramm kann verschiedene technische Fehler finden. Es kann aber nicht zuverlässig beurteilen, ob der gesamte Ablauf verständlich ist.

Führe deshalb echte Testaufgaben durch:

• Bestellung nur mit Tastatur,
• Bestellung mit starker Vergrößerung,
• Test mit Screenreader,
• Test auf dem Smartphone,
• Bestellung mit absichtlichen Fehlern,
• Wechsel der Versandadresse,
• Einlösen eines Gutscheins,
• Abbruch und erneuter Start der Zahlung.

Notiere nicht nur, dass etwas nicht funktioniert. Beschreibe genau, was passiert.

Statt:

„Zahlung ist nicht barrierefrei.“

Besser:

„Die Kreditkartenzahlung kann mit der Tab-Taste erreicht werden, der Sicherheitscode lässt sich jedoch nicht auswählen.“

Praktische Checkliste für einen barrierefreien Checkout

Prüfe den Checkout anhand dieser Fragen:

• Ist der Ablauf klar gegliedert?
• Werden nur notwendige Angaben abgefragt?
• Hat jedes Feld eine sichtbare Beschriftung?
• Sind Pflichtfelder eindeutig markiert?
• Werden erwartete Eingabeformate vorher erklärt?
• Funktioniert alles ohne Maus?
• Ist der Tastaturfokus deutlich sichtbar?
• Verläuft die Bedienreihenfolge logisch?
• Sind Fehlermeldungen konkret und leicht auffindbar?
• Bleiben bereits eingegebene Daten erhalten?
• Sind Versand- und Zahlungsarten verständlich?
• Funktionieren auch externe Zahlungsfenster?
• Ist der Gesamtpreis eindeutig?
• Können Angaben vor dem Kauf überprüft werden?
• Ist der Bestellbutton klar formuliert?
• Funktioniert der Checkout mobil und bei Vergrößerung?
• Werden Preis- und Statusänderungen angekündigt?
• Ist die Bestellbestätigung verständlich?

Wo sollte man mit der Verbesserung anfangen?

Nicht jeder Shop kann den gesamten Checkout an einem Tag überarbeiten.

Beginne mit Problemen, die einen Kauf vollständig verhindern:

1. Nicht bedienbare Felder oder Zahlungsarten
2. Unsichtbarer Tastaturfokus
3. Nicht erreichbarer Bestellbutton
4. Unverständliche Fehlermeldungen
5. Datenverlust nach einem Fehler
6. Blockierende Popups oder Cookie-Banner
7. Probleme bei externer Zahlung
8. Nicht nutzbare mobile Ansicht

Danach können Struktur, Formulierungen, Kontraste und Komfortfunktionen weiter verbessert werden.

Fazit: Ein guter Checkout lässt niemanden kurz vor dem Ziel stehen

Der Checkout ist der Moment, in dem aus Interesse eine Bestellung wird. Genau deshalb darf er niemanden durch vermeidbare Bedienprobleme ausschließen.

Ein barrierefreier Checkout braucht keine ausgefallenen Sonderfunktionen. Er braucht vor allem eine klare Struktur, verständliche Felder, hilfreiche Fehlermeldungen, vollständige Tastaturbedienung und einen zuverlässig funktionierenden Zahlungsprozess.

Der beste Test ist eine echte Bestellung ohne Maus. Danach sollte der Vorgang auf dem Smartphone, mit Vergrößerung und zumindest testweise mit einem Screenreader wiederholt werden.

Wer dabei jeden Schritt aus Sicht des Kunden betrachtet, findet meistens schnell die größten Schwachstellen.

Ein besser zugänglicher Checkout hilft dabei nicht nur Menschen mit Behinderungen. Er macht den Kauf für alle Kunden einfacher, verständlicher und weniger fehleranfällig.

Hinweis: Dieser Beitrag bietet eine allgemeine Orientierung und ersetzt keine individuelle Rechtsberatung oder vollständige Barrierefreiheitsprüfung.