Gute Fehlermeldungen im Checkout sagen dir, welches Feld betroffen ist, was fehlt oder nicht passt und wie du weitermachen kannst. Sie stehen direkt bei der Eingabe und bleiben beim Korrigieren sichtbar. Bei längeren Formularen hilft zusätzlich eine verlinkte Fehlerübersicht.
Dieser Ratgeber zeigt dir die Gestaltung an zwei vereinfachten Beispielen. Im Mittelpunkt stehen Lieferadresse und Kontaktdaten. Die Abbildungen sind Erklärgrafiken, keine Screenshots eines getesteten Shops. Für den gesamten Bestellprozess findest du weitere Ansatzpunkte im Beitrag „Checkout optimieren: Weniger Reibung, mehr Abschlüsse“.
Was gute Fehlermeldungen im Checkout leisten
Stell dir vor, du hast die Lieferadresse ausgefüllt und tippst auf „Weiter“. Die Seite bleibt stehen; irgendwo erscheint ein roter Rahmen. Jetzt musst du selbst herausfinden, weshalb es nicht weitergeht. Genau diese Suche sollte der Shop dir abnehmen.
Eine automatisch erkannte fehlerhafte Eingabe muss nach WCAG 3.3.1 zur Fehlererkennung identifiziert und in Text beschrieben werden. Farbe kann die Meldung unterstützen. Sie allein erklärt das Problem jedoch nicht. Das Kriterium schreibt dabei keine einzige feste Anordnung der Hinweise vor.
Für deine Gestaltung ergeben sich drei praktische Fragen:
- Wo? Nennt der Hinweis das betroffene Feld eindeutig?
- Was? Unterscheidet er zwischen einer fehlenden und einer unpassenden Angabe?
- Wie weiter? Erkennt der Leser den nächsten sinnvollen Schritt?
So formulierst du hilfreiche Fehlermeldungen im Checkout
„Ungültige Eingabe“ lässt viele Fragen offen. Bei einem leeren Postleitzahlfeld hilft dagegen: „Die Postleitzahl fehlt. Gib deine Postleitzahl ein.“ Die zweite Formulierung beschreibt den konkreten Zustand und die mögliche Korrektur.
Die Grafik zeigt bewusst ein leeres Feld. Enthält es bereits eine Angabe, braucht der Hinweis einen anderen Text. Eine fehlende Postleitzahl ist ein anderes Problem als ein Format, das nicht zum gewählten Lieferland passt.
WCAG 3.3.3 zu Korrekturvorschlägen ergänzt die Fehlererkennung: Sind passende Korrekturen bekannt, sollen Nutzer diese Hinweise erhalten, sofern dadurch Sicherheit oder Zweck des Inhalts nicht gefährdet werden. Du brauchst also eine hilfreiche Erklärung, aber keine erfundene Diagnose.
Schreibe für jedes tatsächlich geprüfte Problem einen eigenen Satz. Lies ihn zusammen mit der Feldbeschriftung laut vor. Klingt „Adresse ist ungültig“ noch genauso unklar wie vorher, fehlt vermutlich die entscheidende Information.
Wo Fehlermeldungen im Checkout stehen sollten
Ein Hinweis direkt am Feld hilft beim Korrigieren. Nach dem Absenden eines langen Formulars kann er trotzdem außerhalb des sichtbaren Bereichs liegen. Eine Fehlerübersicht vor den Eingaben macht die offenen Punkte gesammelt zugänglich.
Das GOV.UK Design System zur Fehlerübersicht kombiniert dafür eine Zusammenfassung mit Meldungen an den Feldern. In diesem Muster erhält die Übersicht den Tastaturfokus. Ihre Links führen zu den betroffenen Eingaben; der Wortlaut passt zu den dortigen Meldungen.
Im Beispiel fehlen die Postleitzahl und zusätzlich der Ort. Der erste Link führt zum Postleitzahlfeld. Dort bleibt dieselbe Fehlerbeschreibung sichtbar, ergänzt um die Aufforderung zur Eingabe. Nach der Korrektur muss der verbleibende Fehler noch auffindbar sein.
Übernimm das Prinzip passend zu deinem Checkout. Die GOV.UK-Komponente ist ein konkretes Gestaltungsmuster für öffentliche Dienste, keine Pflichtvorlage für jeden Shop. Entscheidend ist, dass der Weg vom Hinweis zur Korrektur funktioniert.
Wann erscheint die Meldung?
Eine rote Warnung während jedes Tastendrucks kann eine noch unvollständige Eingabe vorschnell als Fehler behandeln. Gerade Angaben mit einem bestimmten Format sind während des Schreibens häufig noch nicht vollständig.
Das W3C-Tutorial zu Formularrückmeldungen unterscheidet Hinweise nach dem Absenden, während der Eingabe und beim Verlassen eines Feldes. Welcher Zeitpunkt sinnvoll ist, hängt von der konkreten Eingabe ab.
Lege für deinen Shop bewusst fest, wann geprüft wird. Ein fehlendes Pflichtfeld lässt sich beispielsweise beim Versuch erkennen, zum nächsten Schritt zu wechseln. Prüfe außerdem den Rückweg: Sobald die Korrektur akzeptiert ist, darf die alte Fehlermeldung nicht weiter zum falschen Problem führen.
Notiere beim Durchgehen nicht nur den Text, sondern auch den Auslöser: „Meldung erscheint beim Verlassen des Feldes“ ist für die Umsetzung aussagekräftiger als „Meldung erscheint zu früh“.
Eingaben erhalten und Prüfregeln abstimmen
Wenn nur der Ort fehlt, sollten Name und Straße nicht erneut eingegeben werden müssen. Die GOV.UK-Hinweise zu Fehlermeldungen empfehlen, bereits eingetragene Antworten beim Anzeigen eines Eingabefehlers zu erhalten. Auch der fehlerhafte Wert hilft dabei, die bisherige Eingabe gezielt zu bearbeiten.
Beziehe diese Empfehlung auf gewöhnliche Adress- und Kontaktfelder. Sensible Zahlungsdaten gehören in die vorgesehenen Abläufe deines Zahlungsanbieters. Ein technischer Dienstausfall sollte außerdem nicht als falsche Adresse dargestellt werden: Die Kundin kann die Störung durch das Ändern ihrer Straße nicht beheben.
Prüfe anschließend, ob die Regeln zu deinen Lieferländern passen. Das W3C-Tutorial zur Eingabeprüfung nennt Postleitzahlen als Beispiel: In manchen Ländern enthalten sie Buchstaben. Eine ausschließlich numerische Vorgabe passt deshalb nicht zu jedem internationalen Checkout.
Das Tutorial betont ebenfalls, dass eine Prüfung im Browser die serverseitige Prüfung nicht ersetzt. Besprich widersprüchliche Ergebnisse mit dem Entwicklungsteam. Wenn der Browser einen Wert akzeptiert und der nächste Schritt ihn ablehnt, muss die Rückmeldung trotzdem verständlich bleiben.
Was das Entwicklungsteam verbinden muss
Die sichtbare Nähe zwischen Feld und Meldung reicht für die technische Zuordnung nicht aus. In einer individuellen Umsetzung kann aria-describedby das Eingabefeld mit seinem Fehlertext verbinden. aria-invalid="true" kennzeichnet einen erkannten ungültigen Zustand.
Die W3C-Technik ARIA21 beschreibt dieses Zusammenspiel. Der ungültige Zustand soll erst nach einer tatsächlich fehlgeschlagenen Prüfung gesetzt werden. Beim Korrigieren muss die Zustandsmeldung entsprechend aktualisiert werden. Die Technik ist eine mögliche Umsetzung und ersetzt nicht die Prüfung des fertigen Formulars.
Lass dir den Weg am konkreten Feld zeigen: Welche Meldung wird angesagt? Wo landet der Fokus? Ist die Eingabe anschließend bedienbar? Unser Beitrag zur Prüfung der Tastaturbedienung erklärt, wie du sichtbaren Fokus und nachvollziehbare Wege kontrollierst.
Fehlermeldungen im Checkout Schritt für Schritt prüfen
Nutze eine dafür vorgesehene Testumgebung und Testdaten. Gehe den Weg bis zur Eingabekontrolle durch, ohne eine echte Bestellung oder Zahlung auszulösen. Die folgende Checkliste ist ein Vorschlag für deinen Prüfdurchgang, kein Bericht über bereits ausgeführte Shoptests.
- Ein Feld leer lassen: Wird das fehlende Feld genannt und die nötige Eingabe erklärt?
- Zwei Angaben weglassen: Sind beide Probleme erreichbar, ohne mehrfach danach suchen zu müssen?
- Einen Fehler beheben: Bleiben die anderen Eingaben erhalten und die offenen Hinweise korrekt?
- Nur die Tastatur nutzen: Führt der Link aus der Übersicht zur richtigen Eingabe? Ist der Fokus erkennbar?
- Am Smartphone prüfen: Bleiben Feld und Hinweis bei geöffneter Bildschirmtastatur auffindbar?
- Nach der Korrektur wiederholen: Geht derselbe Schritt mit einer akzeptierten Eingabe weiter?
Halte pro Problem den Ausgangszustand, die Eingabe, das erwartete Verhalten und die tatsächliche Reaktion fest. Ein Screenshot sollte den Fehler und das zugehörige Feld zeigen. Verwende dabei keine echten Kundendaten.
Welche Probleme haben zuerst Vorrang?
Als praktische Reihenfolge empfehlen wir: zuerst blockierte Eingaben, danach schwer auffindbare Hinweise und anschließend sprachliche Feinheiten. Eine freundlichere Formulierung hilft wenig, wenn das Formular den korrigierten Wert weiterhin ablehnt.
Formuliere den Arbeitsauftrag konkret: „Nach einer fehlenden Postleitzahl wird die bereits eingegebene Straße gelöscht“ beschreibt einen nachvollziehbaren Fehler. Ergänze den betroffenen Checkout-Schritt und die verwendete Umgebung. So kann das Team denselben Zustand untersuchen und nach einer Änderung erneut prüfen.
Beurteile die Verbesserung am tatsächlichen Korrekturweg. Eine schön gestaltete Meldung allein belegt weder höhere Abschlüsse noch einen vollständig barrierefreien Checkout. Für solche Aussagen wären weitergehende Untersuchungen erforderlich.
Quellen geprüft am 16. September 2026. Grundlage: die verlinkten W3C-Erläuterungen und das GOV.UK Design System.
