---
title: "Formulare, die niemand abbricht: 12 Regeln für bessere Formular-UX"
url: "https://www.insideuxdesign.com/de/blog/formulare-die-niemand-abbricht-12-regeln-fuer-bessere-formular-ux"
language: "de"
description: "12 Regeln für Formulare, die niemand abbricht: Labels, Pflichtfelder, Inline-Validierung, Fehlermeldungen, Autofill und Barrierefreiheit, mit Beispielen."
published: "2026-10-08T09:00:00+02:00"
updated: "2026-10-14T09:50:33+02:00"
---

# Formulare, die niemand abbricht: 12 Regeln für bessere Formular-UX

Sichtbare Labels, Validierung im richtigen Moment, hilfreiche Fehlermeldungen: 12 erprobte Regeln für Formulare, an einem Checkout-Beispiel Schritt für Schritt erklärt.

Formulare sind die Stelle, an der aus Interesse eine Handlung wird: eine Bestellung, eine Anfrage, eine Anmeldung. Genau dort verlieren viele Websites die Menschen, die eigentlich schon fast überzeugt waren. Nicht, weil das Angebot nicht passt, sondern weil das Formular zu lang ist, Rätsel aufgibt oder bei jedem Tippfehler mit roter Schrift schimpft.

Die gute Nachricht: Formular-UX ist eines der am besten erforschten Gebiete im Interface-Design. Das Baymard Institute testet seit Jahren Checkouts im E-Commerce, die Nielsen Norman Group (NN/g) hat zahlreiche Studien zu Labels und Fehlermeldungen veröffentlicht, und die Web Accessibility Initiative (WAI) des W3C beschreibt im Detail, wie barrierefreie Formulare aufgebaut sind. Aus diesen Quellen lassen sich zwölf Regeln ableiten, die in fast jedem Projekt funktionieren.

Damit es nicht abstrakt bleibt, begleitet ein Beispiel den ganzen Artikel: der Checkout eines kleinen Onlineshops für Kaffee. In der Ausgangsversion sieht er so aus:

- Eine lange Seite mit 19 Feldern in zwei Spalten, darunter Anrede, Titel, Geburtsdatum, Telefon und Mobilnummer, „E-Mail wiederholen“ und „Passwort wiederholen“.
- Die Beschriftungen stehen nur als Platzhaltertext in den Feldern und verschwinden beim Tippen.
- Manche Pflichtfelder haben ein Sternchen, andere nicht.
- Die Newsletter-Checkbox ist bereits angehakt.
- Der Button heißt „Absenden“, und Fehler erscheinen erst danach als roter Sammeltext oben auf der Seite: „Ungültige Eingabe“.

Klingt übertrieben? Solche Formulare gibt es zuhauf. Laut Baymard enthält ein durchschnittlicher Checkout in den USA 23,48 standardmäßig sichtbare Formularelemente, davon 14,88 Eingabefelder. Ein guter Checkout kommt nach Baymards Analyse mit 12 bis 14 Elementen aus, also 7 bis 8 Feldern. Im Folgenden wird der Kaffee-Checkout Regel für Regel verbessert.

## Weniger ist mehr

### 1. Frag nur, was du wirklich brauchst

Jedes Feld kostet Zeit und Aufmerksamkeit. Wer ein Formular ausfüllt, muss lesen, verstehen, sich erinnern, tippen und prüfen. Diese geistige Arbeit nennt man [Cognitive Load](https://www.insideuxdesign.com/de/glossar/cognitive-load), also kognitive Belastung. Je höher sie ist, desto eher bricht jemand ab oder macht Fehler.

Der wirksamste Schritt ist deshalb oft der radikalste: Felder streichen. Geh jedes Feld durch und frag: Was passiert, wenn es fehlt? Lautet die ehrliche Antwort „nichts, aber das Marketing hätte die Info gern“, fliegt es raus oder wird später und freiwillig abgefragt.

Im Kaffee-Checkout bedeutet das:

- **Anrede und Titel** braucht niemand, um Kaffee zu verschicken. Sie zwingen Menschen außerdem in Kategorien, in die nicht alle passen. Ohne Anrede ist das Formular kürzer und inklusiver.
- **Geburtsdatum** ist nur nötig, wenn es eine rechtliche Altersprüfung gibt. Bei Kaffee nicht.
- **Telefon und Mobilnummer** werden zu einem einzigen, optionalen Feld, und das nur, wenn der Paketdienst die Nummer wirklich nutzt.
- **„E-Mail wiederholen“** verdoppelt die Arbeit. Besser ist es, die Adresse auf der Prüfseite noch einmal gut sichtbar anzuzeigen.
- **Passwort und Kontoerstellung** wandern ans Ende: Nach der Bestellung lässt sich mit einem Klick ein Konto anlegen, die Daten sind ja schon da.

Der letzte Punkt ist kein Detail. In Baymards Befragung von US-Onlinekundschaft geben 18 % der Personen, die einen Kauf abgebrochen haben, als Grund an, dass die Website ein Kundenkonto verlangt hat. 17 % nennen einen zu langen oder komplizierten Checkout.

Für Felder, die nur manche brauchen, hilft [Progressive Disclosure](https://www.insideuxdesign.com/de/glossar/progressive-disclosure): Informationen und Optionen erscheinen erst dann, wenn sie relevant sind. Ein Link „Firmennamen hinzufügen“ oder „Adresszusatz hinzufügen“ blendet das Feld bei Bedarf ein. Wer privat bestellt, sieht es gar nicht erst.

### 2. Eine Spalte, eine klare Reihenfolge, sinnvolle Gruppen

Zweispaltige Formulare wirken auf großen Bildschirmen aufgeräumt, sind aber schwerer zu lesen. Das Auge muss im Zickzack springen, und die Reihenfolge ist nicht eindeutig: Geht es nach rechts oder nach unten weiter? Baymard hat in Tests beobachtet, dass ein zweispaltiges Formular auf drei verschiedene Arten verstanden wurde. Je nach Lesart füllten Testpersonen alle Felder aus, nur eine Spalte oder übersahen Pflichtfelder. Die Empfehlung ist entsprechend klar: ein einspaltiges Layout, das nur eine Leserichtung kennt.

Es gibt eine sinnvolle Ausnahme. Felder, die inhaltlich eine Einheit bilden, dürfen in einer Zeile stehen, etwa Postleitzahl und Ort oder Ablaufdatum und Prüfnummer einer Kreditkarte. Laut Baymard verursachen zwei bis drei solcher Felder nebeneinander keine Probleme, solange das Formular insgesamt einspaltig bleibt.

Genauso wichtig ist die Reihenfolge. Sie sollte dem Gespräch folgen, das zwei Menschen am Telefon führen würden: erst wer, dann wohin, dann wie bezahlt wird. Innerhalb einer Adresse hilft die Reihenfolge, die im jeweiligen Land üblich ist. In Deutschland heißt das Straße und Hausnummer, dann Postleitzahl und Ort.

Zusammengehörige Felder bekommen eine gemeinsame Überschrift und etwas mehr Abstand zur nächsten Gruppe. Der Kaffee-Checkout gliedert sich danach in drei Blöcke: „Kontakt“ (E-Mail), „Lieferadresse“ (Name, Straße, PLZ, Ort, Land) und „Versand und Zahlung“. Technisch gehören solche Gruppen in ein `fieldset` mit einer `legend` als Überschrift. So hören auch Menschen, die einen Screenreader nutzen, zu welchem Abschnitt ein Feld gehört.

### 3. Lange Formulare in Schritte teilen und Fortschritt zeigen

Manche Formulare lassen sich nicht auf sieben Felder kürzen, etwa eine Versicherungsanfrage oder eine Bewerbung. Dann hilft es, das Formular in logische Schritte zu teilen. Die W3C-WAI empfiehlt für mehrseitige Formulare genau das: sinnvolle Etappen, und an jeder Stelle die Information, wo man gerade steht.

Eine gute Fortschrittsanzeige beantwortet drei Fragen: Wie viele Schritte gibt es? In welchem bin ich? Was kommt danach? Für den Kaffee-Checkout könnte das so aussehen:

> Schritt 2 von 3: Versand und Zahlung

Darüber steht eine Leiste mit den Schrittnamen „Adresse“, „Versand und Zahlung“, „Prüfen und bestellen“. Ein paar Details machen den Unterschied:

- Die Schrittzahl gehört auch in den Seitentitel, damit sie bei Screenreadern und in Browser-Tabs ankommt.
- Zurückgehen muss jederzeit möglich sein, ohne dass bereits eingegebene Daten verloren gehen.
- Die Anzeige darf nicht schummeln. Wenn nach „Schritt 3 von 3“ plötzlich ein vierter Schritt auftaucht, ist das Vertrauen weg.

Für kurze Formulare mit einer Handvoll Feldern ist eine Aufteilung dagegen meist unnötig. Mehrere Schritte lohnen sich, wenn sie das Formular wirklich verständlicher machen, nicht nur kürzer aussehen lassen.

## Klar beschriften

### 4. Sichtbare Labels statt Platzhaltertext

Platzhaltertext ist der graue Hinweis, der in einem leeren Feld steht und beim Tippen verschwindet. Als einzige Beschriftung sieht er schlank aus, verursacht aber eine ganze Reihe von Problemen. Die NN/g fasst sie in einem Artikel mit dem deutlichen Titel „Placeholders in Form Fields Are Harmful“ zusammen:

- Sobald jemand tippt, ist die Beschriftung weg. Wer kurz abgelenkt wird, muss sich merken, worum es ging, oder die Eingabe löschen, um nachzusehen. Das belastet das Kurzzeitgedächtnis.
- Vor dem Absenden lässt sich nicht mehr prüfen, ob die Eingaben in den richtigen Feldern stehen. Das gilt besonders, wenn der Browser automatisch ausgefüllt hat.
- Felder mit grauem Text wirken bereits ausgefüllt. In Eyetracking-Studien der NN/g zog es den Blick eher zu leeren Feldern, Felder mit Platzhalter wurden leichter übersehen.
- Platzhaltertext hat oft zu wenig Kontrast und wird von Screenreadern nicht zuverlässig vorgelesen.

Die Lösung ist unspektakulär: ein sichtbares Label über dem Feld, das auch beim Tippen stehen bleibt. Hinweise zum Format gehören ebenfalls sichtbar unter das Label, nicht in den Platzhalter.

Im Kaffee-Checkout wird aus einem leeren Feld mit dem grauen Text „PLZ“ also ein Label „Postleitzahl“ über dem Feld. Bei der Telefonnummer steht darunter ein kurzer Hinweis: „Nur für Rückfragen des Paketdienstes.“ Dieser eine Satz beantwortet die Frage, die bei Telefonfeldern fast immer mitschwingt: Wozu wollen die das wissen?

Solche kleinen Texte nennt man [Microcopy](https://www.insideuxdesign.com/de/glossar/microcopy). Sie sind kurz, entscheiden aber oft darüber, ob ein Feld Misstrauen weckt oder Vertrauen schafft.

### 5. Pflichtfelder und optionale Felder eindeutig markieren

Ein Klassiker: Einige Felder tragen ein Sternchen, andere nicht, und eine Legende fehlt. Wer das Formular ausfüllt, muss raten. Baymard empfiehlt deshalb, beides zu markieren: Pflichtfelder mit einem Sternchen und optionale Felder mit dem ausgeschriebenen Zusatz „(optional)“. Im Benchmark von 2021 setzten das nur 14 % der untersuchten Shops um.

Warum beides? Sind nur optionale Felder markiert, müssen die Leute schließen, dass alles andere Pflicht ist. In Baymards Tests mit solchen Formularen hatten 32 % der Testpersonen einen Validierungsfehler, weil sie ein Pflichtfeld nicht ausgefüllt hatten. Eine eindeutige Markierung kostet ein paar Zeichen und erspart diese Schleife.

Zwei Hinweise für die Praxis:

- Wenn du Regel 1 ernst nimmst, sind die meisten Felder Pflicht. Optionale Felder bleiben die Ausnahme, und gerade deshalb fallen sie mit „(optional)“ auf.
- Das Sternchen allein ist für Screenreader nur ein Satzzeichen. Im Code gehört deshalb zusätzlich das Attribut `required` (oder `aria-required="true"`) an das Feld, damit die Information „erforderlich“ auch vorgelesen wird.

Im Kaffee-Checkout steht über dem Formular einmal kurz „Mit \* markierte Felder sind Pflicht“. Das einzige optionale Feld heißt danach „Telefonnummer (optional)“.

### 6. Der Button sagt, was passiert

„Absenden“, „Weiter“, „OK“: Solche Beschriftungen sagen nur, dass etwas passiert, aber nicht was. Ein guter Button beschreibt die Handlung und ihr Ergebnis. Wer „Anfrage senden“ liest, weiß, was nach dem Klick geschieht. Bei „Absenden“ bleibt offen, ob gleich etwas gekauft, gespeichert oder nur geprüft wird.

Im Kaffee-Checkout bekommt jeder Schritt einen Button, der den nächsten Schritt benennt:

- **Vorher:** „Absenden“ auf jeder Seite
- **Nachher:** „Weiter zu Versand und Zahlung“, dann „Weiter zur Prüfung“ und am Ende „Zahlungspflichtig bestellen“

Der letzte Button ist in Deutschland übrigens keine Geschmacksfrage. Nach der sogenannten Button-Lösung im Bürgerlichen Gesetzbuch (§ 312j BGB) muss der Bestellbutton in Onlineshops eindeutig auf die Zahlungspflicht hinweisen, etwa mit „zahlungspflichtig bestellen“. „Absenden“ oder „Weiter“ reicht dort nicht.

Daneben gilt: Es gibt pro Schritt genau eine Hauptaktion, und die ist visuell klar hervorgehoben. Nebenaktionen wie „Zurück zum Warenkorb“ treten zurück und sehen nicht aus wie ein zweiter gleichwertiger Button. Einen „Zurücksetzen“-Button, der alle Eingaben löscht, braucht so gut wie kein Formular. Er wird vor allem aus Versehen geklickt.

## Fehler freundlich behandeln

### 7. Validieren im richtigen Moment

Inline-Validierung bedeutet, dass ein Formular Eingaben direkt am Feld prüft und nicht erst nach dem Absenden. Das ist grundsätzlich hilfreich: Ein Fehler, der sofort neben dem Feld auftaucht, ist schneller korrigiert als einer, den man nach dem Klick auf den Button erst suchen muss. In Baymards Benchmark verzichten dennoch 31 % der untersuchten Shops ganz auf Inline-Validierung.

Entscheidend ist aber der Zeitpunkt. Wer beim ersten getippten Buchstaben der E-Mail-Adresse „Ungültige E-Mail-Adresse“ anzeigt, beschimpft die Leute, bevor sie fertig sind. Eine Testperson bei Baymard brachte es auf den Punkt: Warum wird mir gesagt, dass meine E-Mail-Adresse falsch ist, wenn ich sie noch gar nicht fertig eingegeben habe?

Sowohl Baymard als auch die NN/g empfehlen deshalb ein klares Muster:

- **Fehler zeigen, wenn das Feld verlassen wird**, also beim Wechsel ins nächste Feld, oder wenn die Eingabe erkennbar vollständig ist, etwa nach fünf Ziffern einer deutschen Postleitzahl.
- **Fehler sofort entfernen, sobald sie behoben sind.** Hier darf die Prüfung bei jedem Tastendruck laufen. Eine rote Meldung, die stehen bleibt, obwohl die Eingabe längst stimmt, verunsichert.
- **Positive Rückmeldung gezielt einsetzen.** Ein Häkchen neben einem korrekt ausgefüllten Feld gibt Sicherheit, besonders bei komplexen Eingaben wie Passwörtern mit Regeln.

Ein Grenzfall sind leere Pflichtfelder. Wer nur mit der Tabulatortaste durch das Formular springt, um es zu überblicken, sollte nicht sofort eine Wand aus Fehlermeldungen sehen. Leere Pflichtfelder meldest du daher besser beim Absenden.

Noch ein Detail: Ein ausgegrauter Button, der erst aktiv wird, wenn alles stimmt, wirkt elegant, verrät aber nicht, was fehlt. Lass das Absenden lieber zu und zeig dann klar, welche Felder noch Aufmerksamkeit brauchen.

### 8. Fehlermeldungen, die weiterhelfen

Eine gute Fehlermeldung beantwortet zwei Fragen: Was ist schiefgelaufen? Und wie lässt es sich beheben? Sie steht direkt am betroffenen Feld, ist in normaler Sprache formuliert und gibt nicht der Person die Schuld. Die NN/g empfiehlt bei längeren Formularen zusätzlich eine Zusammenfassung oben, die auf die einzelnen Felder verweist.

So sieht das im Kaffee-Checkout aus:

> **Vorher:** „Ungültige Eingabe“
> 
> **Nachher:** „Die Postleitzahl hat 5 Ziffern, zum Beispiel 10115.“

> **Vorher:** „E-Mail invalid“
> 
> **Nachher:** „In der E-Mail-Adresse fehlt das @-Zeichen, zum Beispiel name@beispiel.de.“

> **Vorher:** „Pflichtfeld!“
> 
> **Nachher:** „Gib bitte Straße und Hausnummer ein, damit das Paket ankommt.“

> **Vorher:** „Zahlung fehlgeschlagen. Fehlercode 05.“
> 
> **Nachher:** „Die Bank hat die Zahlung abgelehnt. Prüf die Kartendaten oder wähle eine andere Zahlungsart. Dein Warenkorb bleibt gespeichert.“

Ein paar Grundsätze stecken in diesen Beispielen:

- **Konkret statt allgemein:** „Ungültig“ sagt nur, dass etwas nicht stimmt. Ein Beispiel für das richtige Format zeigt, wie es stimmt.
- **Keine Technik-Sprache:** Fehlercodes und Begriffe wie „invalid“ oder „Request failed“ helfen der Kundschaft nicht.
- **Ruhiger Ton:** Ausrufezeichen und Großbuchstaben wirken wie ein Tadel.
- **Eingaben behalten:** Nach einem Fehler bleiben alle bereits ausgefüllten Felder erhalten. Ein Formular, das sich nach dem Absenden leert, ist einer der sichersten Wege zum Abbruch.

Noch besser als eine gute Fehlermeldung ist ein Fehler, der gar nicht erst entsteht. Wenn Leute die Postleitzahl mit Leerzeichen oder die Telefonnummer mit Schrägstrich eingeben, akzeptiere das und bereinige die Eingabe im Hintergrund. Das Formular sollte flexibel sein, nicht die Menschen.

## Mobil und barrierefrei

### 9. Gute Voreinstellungen und Autofill nutzen

Das schnellste Feld ist eines, das gar nicht getippt werden muss. Browser und Passwortmanager können Namen, Adressen, E-Mail-Adressen und Zahlungsdaten automatisch einsetzen, wenn das Formular ihnen verrät, was ein Feld bedeutet. Dafür gibt es das HTML-Attribut `autocomplete` mit festgelegten Werten. Für den Kaffee-Checkout sind das unter anderem:

- `autocomplete="email"` für die E-Mail-Adresse
- `autocomplete="given-name"` und `autocomplete="family-name"` für Vor- und Nachname
- `autocomplete="street-address"` für Straße und Hausnummer
- `autocomplete="postal-code"` und `autocomplete="address-level2"` für Postleitzahl und Ort
- `autocomplete="tel"` für die Telefonnummer
- `autocomplete="cc-number"`, `cc-exp` und `cc-csc` für die Kreditkarte

Das ist nicht nur Komfort. Die WCAG, die internationalen Richtlinien für barrierefreie Webinhalte, verlangen in Kriterium 1.3.5 („Identify Input Purpose“) auf Stufe AA, dass der Zweck von Feldern mit persönlichen Daten maschinell erkennbar ist.

Zu den Voreinstellungen gehört auch alles, was das System schon weiß oder sinnvoll vermuten kann. Im Kaffee-Checkout ist die Checkbox „Rechnungsadresse entspricht der Lieferadresse“ bereits angehakt, denn das trifft auf die meisten Bestellungen zu. Das Land ist auf Deutschland voreingestellt, wenn der Shop vor allem dorthin liefert. Die günstigste Versandart ist vorausgewählt. Die WCAG 2.2 fordern in Kriterium 3.3.7 („Redundant Entry“) zudem, dass bereits eingegebene Informationen im selben Prozess nicht noch einmal verlangt werden.

Die Grenze ist allerdings klar: Voreinstellungen sollen Arbeit abnehmen, nicht Entscheidungen unterschieben. Eine vorab angehakte Newsletter-Einwilligung oder eine automatisch hinzugefügte Versicherung gehören zu den Dark Patterns. Eine Einwilligung per vorausgefüllter Checkbox ist in der EU zudem rechtlich nicht wirksam. Im Kaffee-Checkout ist die Newsletter-Checkbox deshalb jetzt leer.

### 10. Passende Eingabetypen und Tastaturen

Auf dem Smartphone entscheidet der Feldtyp darüber, welche Tastatur erscheint. Eine Postleitzahl über die volle Buchstabentastatur einzugeben, ist mühsam. Baymard hat schon vor Jahren gezeigt, wie verbreitet das Problem ist: In der Untersuchung von 2015 nutzten 54 % der mobilen Shops für Telefon, Postleitzahl oder Kreditkartennummer nicht die passende Tastatur.

Die Lösung steckt in wenigen Attributen:

- `type="email"` blendet eine Tastatur mit @-Zeichen ein.
- `type="tel"` öffnet ein Ziffernfeld für Telefonnummern.
- `inputmode="numeric"` zeigt Ziffern für Postleitzahl oder Kartennummer.

Ein beliebter Fehler ist `type="number"` für Postleitzahlen. Dieser Typ ist für Mengen gedacht, nicht für Ziffernfolgen. Je nach Browser erscheinen kleine Pfeile zum Hoch- und Runterzählen, und eine führende Null wie bei 01067 Dresden kann verloren gehen. Für Postleitzahlen, Kartennummern und Codes ist ein Textfeld mit `inputmode="numeric"` die robustere Wahl.

Ebenfalls hilfreich: automatische Korrektur und Großschreibung bei E-Mail-Adressen abschalten, denn eine Autokorrektur macht aus einem Namen in der Adresse schnell ein ganz anderes Wort.

### 11. Große Touch-Ziele

Je kleiner und weiter entfernt ein Ziel ist, desto länger dauert es, es zu treffen, und desto häufiger wird danebengetippt. Diesen Zusammenhang beschreibt [Fitts’ Law](https://www.insideuxdesign.com/de/glossar/fitts-law). In Formularen betrifft das vor allem Checkboxen, Radiobuttons und Buttons.

Ein paar Richtwerte: Die WCAG 2.2 verlangen in Kriterium 2.5.8 auf Stufe AA eine Mindestgröße von 24 × 24 CSS-Pixeln für Klick- und Tippziele, sofern nicht genug Abstand zu benachbarten Zielen besteht. Die strengere Stufe AAA (Kriterium 2.5.5) nennt 44 × 44 CSS-Pixel. Apples Gestaltungsrichtlinien empfehlen ebenfalls mindestens 44 × 44 Punkte, Googles Material Design 48 × 48 dp. Für Formulare auf dem Smartphone ist der höhere Wert die bessere Orientierung.

Ein einfacher Trick vergrößert die Zielfläche ohne zusätzlichen Platz: Labels, die korrekt mit ihrem Feld verbunden sind, machen den Text anklickbar. Wer auf „Rechnungsadresse entspricht der Lieferadresse“ tippt, setzt den Haken, statt das winzige Kästchen treffen zu müssen. Im Kaffee-Checkout werden die Versandarten außerdem als ganze, antippbare Karten gestaltet, mit Preis und Lieferzeit in jeder Karte. Zwischen den Karten bleibt genug Abstand, damit niemand versehentlich die Expresslieferung wählt.

### 12. Barrierefrei von Anfang an

[Barrierefreiheit](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) bedeutet, dass ein Formular auch dann funktioniert, wenn jemand nicht sieht, keine Maus nutzt, Farben anders wahrnimmt oder sich schwer konzentrieren kann. Einige Punkte betreffen speziell die Technik, und die W3C-WAI beschreibt sie in ihrem Formular-Tutorial ausführlich:

- **Labels technisch verbinden:** Jedes Feld hat ein `label`, dessen Attribut `for` auf die `id` des Felds zeigt. Nur dann liest ein Screenreader beim Fokus „Postleitzahl, Eingabefeld, erforderlich“ vor und nicht bloß „Eingabefeld“.
- **Gruppen auszeichnen:** Radiobuttons wie die Versandarten stehen in einem `fieldset` mit `legend`, damit klar ist, worauf sich „Standard“ und „Express“ beziehen.
- **Hinweise und Fehler ans Feld binden:** Über `aria-describedby` wird der Hilfetext oder die Fehlermeldung mit dem Feld verknüpft und beim Fokus mit vorgelesen. `aria-invalid="true"` markiert das Feld als fehlerhaft.
- **Fehler ankündigen:** Nach dem Absenden springt der Fokus zur Fehlerzusammenfassung oben, deren Einträge direkt zu den betroffenen Feldern verlinken. Meldungen, die ohne Seitenwechsel erscheinen, werden über eine Live-Region, etwa mit `role="alert"`, für Screenreader hörbar.
- **Nicht nur Farbe:** Ein roter Rahmen allein reicht nicht, denn nicht alle Menschen nehmen Rot gleich wahr. Fehler bekommen zusätzlich ein Symbol und einen Text. Das verlangt auch WCAG-Kriterium 1.4.1 („Use of Color“).
- **Tastatur und Kontrast:** Das ganze Formular muss sich mit der Tastatur bedienen lassen, mit sichtbarem Fokus. Feldrahmen brauchen genug Kontrast zum Hintergrund, damit überhaupt erkennbar ist, wo ein Feld beginnt.

Für viele Shops ist das inzwischen auch eine rechtliche Frage. Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz, das unter anderem den Onlinehandel mit Privatkundschaft betrifft. Ein barrierefreier Checkout ist damit nicht mehr nur gute Praxis.

Prüfen lässt sich das am besten ganz praktisch: Fülle das Formular einmal nur mit der Tastatur aus und einmal mit eingeschaltetem Screenreader. Danach weißt du mehr als nach jeder Checkliste.

## Fazit

Am Ende hat der Kaffee-Checkout statt einer langen Seite mit 19 Feldern in zwei Spalten drei klar benannte Schritte. Die Adresse besteht noch aus acht Feldern, nur eines davon ist optional. Die Labels bleiben sichtbar, Fehler erscheinen zum richtigen Zeitpunkt und erklären, was zu tun ist, Browser füllen die Adresse automatisch aus, und der letzte Button sagt unmissverständlich „Zahlungspflichtig bestellen“.

Keine dieser Änderungen ist spektakulär. Zusammen machen sie aber den Unterschied zwischen einem Formular, das Menschen ausbremst, und einem, das sie kaum bemerken. Und genau das ist das Ziel: Ein gutes Formular fällt nicht auf, es ist einfach schnell erledigt. Ob das gelungen ist, zeigt am Ende ein kurzer Test mit echten Menschen, nicht die eigene Einschätzung.

## Checkliste

- Jedes Feld hat einen klaren Zweck, alles andere ist gestrichen oder optional nachgelagert.
- Das Layout ist einspaltig, Felder sind logisch sortiert und in Gruppen mit Überschrift gegliedert.
- Lange Formulare sind in Schritte geteilt, mit Fortschrittsanzeige und verlustfreiem Zurückgehen.
- Jedes Feld hat ein sichtbares, dauerhaftes Label, Formathinweise stehen außerhalb des Felds.
- Pflichtfelder und optionale Felder sind beide eindeutig markiert.
- Der Hauptbutton beschreibt die Aktion, im Shop mit Hinweis auf die Zahlungspflicht.
- Validierung läuft beim Verlassen des Felds, Fehler verschwinden sofort nach der Korrektur.
- Fehlermeldungen stehen am Feld und sagen, was falsch ist und wie es richtig geht.
- Felder nutzen passende `autocomplete`-Werte, Voreinstellungen helfen, ohne zu bevormunden.
- Eingabetypen öffnen auf dem Smartphone die passende Tastatur.
- Touch-Ziele sind groß genug und haben ausreichend Abstand.
- Labels sind technisch verbunden, Fehler werden angekündigt und nicht nur über Farbe vermittelt.

## Quellen

- [Baymard Institute: Cart Abandonment Rate Statistics](https://baymard.com/lists/cart-abandonment-rate)
- [Baymard Institute: E-Commerce Checkouts Need to Mark Both Required Fields and Optional Fields Explicitly](https://baymard.com/blog/required-optional-form-fields)
- [Nielsen Norman Group: 10 Design Guidelines for Reporting Errors in Forms](https://www.nngroup.com/articles/errors-forms-design-guidelines/)
- [W3C Web Accessibility Initiative: Forms Tutorial](https://www.w3.org/WAI/tutorials/forms/)