Du tippst Deine E-Mail-Adresse in ein Formular, und schon beim dritten Buchstaben springt eine rote Meldung an und nennt die Adresse ungültig. Natürlich ist sie ungültig, Du bist ja noch mittendrin. Diese Form der Echtzeit-Validierung meint es gut und nervt trotzdem.
Eine Live-Prüfung beim Tippen oder beim Verlassen eines Feldes ist ein starkes Hilfsmittel. Sie fängt Fehler ab, bevor jemand das ganze Formular abschickt und auf einer Fehlerseite landet. Sie kann aber auch im falschen Moment dazwischenfunken, und dann trifft sie ausgerechnet die Menschen am härtesten, die ohnehin mehr Aufwand mit Formularen haben.
Wann eine Fehlermeldung erscheinen darf
Die wichtigste Regel ist Geduld. Ein Feld soll erst dann meckern, wenn der Besucher es fertig ausgefüllt und wieder verlassen hat. Solange der Cursor noch im Feld blinkt und jemand schreibt, hält das Formular still.
Verlässt der Besucher das Feld mit einem unvollständigen oder falschen Wert, ist der richtige Augenblick gekommen. Jetzt darf der Hinweis erscheinen, weil die Eingabe abgeschlossen ist. Ein gutes Formular wartet diesen Moment ab, statt jeden Tastendruck zu kommentieren.
Der umgekehrte Weg verdient eine Ausnahme. Hat ein Feld schon einmal gemeckert, darf es freundlicher werden. Sobald der Besucher den Fehler korrigiert, verschwindet die Meldung sofort, noch während er tippt. So sieht er, dass seine Korrektur angekommen ist, und muss nicht raten.
Warum zu frühes Meckern besonders schadet
Für sehende Maus-Nutzer ist eine vorschnelle rote Meldung ärgerlich, mehr nicht. Sie überlesen den Hinweis, tippen weiter und ignorieren das Rot. Das Auge sortiert solche Störungen mühelos aus.
Wer eine Vorlese-Software nutzt, hat diesen Filter nicht. Springt die Meldung schon beim dritten Buchstaben an und wird vorgelesen, unterbricht sie den Tippfluss mitten im Wort. Der Besucher verliert die Orientierung, fragt sich, was eben falsch war, und tippt vorsichtshalber noch einmal von vorn.
Auch Menschen mit Konzentrationsschwierigkeiten oder Legasthenie geraten ins Stolpern, wenn ein Feld bei jeder Eingabe das Urteil ändert. Eine ruhige Prüfung, die erst nach dem Ausfüllen reagiert, nimmt diesen Druck heraus und macht das Formular für alle entspannter.
Wie ein Screenreader von der Meldung erfährt
Eine rote Umrandung und ein Ausrufezeichen helfen nur dem Auge. Damit auch jemand ohne Blick auf den Bildschirm den Fehler bemerkt, muss die Meldung angesagt werden, sobald sie erscheint. Das ist der eigentliche Kern barrierefreier Echtzeit-Validierung.
Gute Formulare lösen das über einen unsichtbaren Ansage-Bereich. Sobald dort ein neuer Text auftaucht, liest die Vorlese-Software ihn vor, ohne den Cursor zu verschieben oder den Besucher aus dem Feld zu reißen. Er hört den Hinweis und schreibt ungestört weiter. Damit eine Vorlese-Software die Seite überhaupt sauber versteht, braucht es ordentlich aufgebaute Bausteine, wie ich sie beim semantischen HTML beschrieben habe.
Genau hier scheitern viele selbstgebaute Lösungen. Die Meldung blinkt sichtbar auf, bleibt aber stumm. Im Schnelltest fällt das nur auf, wenn Du das Formular einmal ohne Maus und mit eingeschalteter Vorlese-Funktion durchgehst.
Fehler verständlich formulieren
Eine Meldung, die niemand versteht, ist fast so schlecht wie gar keine. „Eingabe ungültig" sagt dem Besucher nicht, was er tun soll. Eine gute Fehlermeldung benennt das Problem und den nächsten Schritt in einem Satz.
Vergleich einmal zwei Varianten für dasselbe Feld. Ein knappes „Fehler im Feld E-Mail" lässt den Besucher ratlos zurück. Die Bitte „Gib eine E-Mail-Adresse mit @-Zeichen ein" sagt genau, woran es hakt. Der zweite Satz hilft, der erste schiebt nur Schuld zu.
- Konkret: Benenne, was fehlt oder falsch ist, nicht nur, dass etwas falsch ist.
- Freundlich: Formuliere als Bitte, nicht als Vorwurf.
- Lösungsnah: Gib den nächsten Schritt mit, etwa das erwartete Format.
Diese Sätze gelten für die Live-Prüfung genauso wie für die Meldungen, die nach dem Absenden erscheinen. Wer die Grundlagen zu Beschriftung, Pflichtfeldern und Hilfetexten nachlesen will, findet sie bei den barrierefreien Formularen.
Erfolg darf man auch zeigen
Echtzeit-Validierung meldet nicht nur Fehler. Sie darf auch bestätigen, dass ein Feld richtig ausgefüllt ist. Ein grünes Häkchen neben der Postleitzahl beruhigt und gibt dem Besucher das Gefühl, auf dem richtigen Weg zu sein.
Wichtig ist, dass diese Bestätigung sparsam bleibt. Ein Häkchen hinter jedem einzelnen Buchstaben wirkt hektisch und lenkt ab. Sinnvoll ist die Rückmeldung dort, wo Besucher oft unsicher sind, etwa bei einem Passwort mit Mindestlänge oder bei einer Kundennummer mit festem Format.
Auch der Erfolg sollte hörbar sein, wenn er für die Bedienung zählt. Eine kurze Ansage wie „Passwort erfüllt alle Vorgaben" hilft jemandem mit Vorlese-Software mehr als ein grünes Symbol, das er nie sieht.
Die Sammelmeldung beim Absenden
Trotz aller Live-Prüfung rutschen Fehler durch, bis der Besucher auf „Absenden" klickt. In diesem Moment braucht er einen klaren Überblick, was noch fehlt. Eine gute Lösung sammelt alle offenen Punkte oben am Formular und zählt sie auf.
Diese Sammelmeldung wird beim Erscheinen vorgelesen, damit auch ohne Blick auf den Bildschirm klar ist, dass das Absenden nicht geklappt hat. Jeder Punkt führt mit einem Klick direkt zum betroffenen Feld, damit niemand das ganze Formular nach der Fehlerstelle absuchen muss.
Der Cursor springt nach dem fehlgeschlagenen Versuch außerdem auf das erste Problemfeld. So weiß der Besucher sofort, wo es weitergeht, statt orientierungslos am Seitenende zu landen.
Woran Du ein gutes Live-Formular erkennst
Du musst keine Zeile programmieren, um die Qualität einzuschätzen. Ein kurzer Selbsttest an Deinem eigenen Formular verrät schon viel, und er dauert keine fünf Minuten.
- Tipp-Test: Schreib eine halbe E-Mail-Adresse. Meckert das Feld schon mittendrin, ist die Prüfung zu ungeduldig.
- Verlassen-Test: Lass ein Pflichtfeld leer und klick ins nächste. Erscheint der Hinweis erst jetzt, stimmt das Timing.
- Korrektur-Test: Verbessere einen gemeldeten Fehler. Verschwindet die rote Meldung sofort, arbeitet das Formular mit Dir.
- Vorlese-Test: Schalte die Vorlese-Funktion Deines Systems ein und löse einen Fehler aus. Wird er angesagt, ist die wichtigste Hürde genommen.
Wer tiefer einsteigen will, findet den rechtlichen und methodischen Rahmen bei den WCAG-Grundlagen. Für die Praxis reichen diese vier Tests, um ein Formular grob einzuordnen oder Deiner Agentur eine klare Anforderung mitzugeben.
Fazit
Echtzeit-Validierung ist ein Geschenk an Deine Besucher, solange sie zur richtigen Zeit spricht. Sie wartet, bis ein Feld fertig ausgefüllt ist, formuliert verständlich und sorgt dafür, dass auch eine Vorlese-Software jede Meldung mitbekommt.
Die vier kurzen Tests verraten Dir in wenigen Minuten, ob Dein Formular mit den Besuchern arbeitet oder gegen sie. Damit hast Du ein klares Werkzeug an der Hand, um Deine eigenen Formulare zu prüfen und gezielt nachzubessern.