Ein Formularfeld braucht eine dauerhaft erkennbare Beschriftung. Ein Platzhalter kann ein Beispiel zeigen, verschwindet aber üblicherweise beim Eingeben. Sobald mehrere Felder ausgefüllt sind, sollte trotzdem klar bleiben, welches Feld welche Information enthält.
Eine Frage oberhalb des Feldes
Das Beispiel in der Dokumentation der GOV.UK-Text-input-Komponente zeigt eine vollständig ausgeschriebene Frage oberhalb des Eingabefeldes. Im Feld steht kein Text, den man versehentlich für eine bereits eingetragene Antwort halten könnte. Die Frage bleibt sichtbar, wenn eine Antwort hinzukommt.
Das ist eine konkrete Beobachtung der Referenzkomponente. Eine geringere Fehlerquote ist damit noch nicht nachgewiesen. Der Vorteil, den du prüfen kannst, ist enger gefasst: Die Bedeutung des Feldes bleibt im ausgefüllten Zustand nachlesbar.
Drei Aufgaben für drei Texte
Die Beschriftung benennt die erwartete Information. Ein Hilfetext erklärt besondere Anforderungen. Eine Fehlermeldung beschreibt ein tatsächlich aufgetretenes Problem. Wenn du alle drei Aufgaben in einen Platzhalter packst, verschwinden genau die Hinweise, die jemand während der Eingabe benötigen könnte.
Für ein Anfrageformular könnte die Beschriftung „Website-Adresse“ lauten. Ein Hilfetext erklärt, dass auch die aktuelle Entwurfsadresse genügt. Eine Fehlermeldung benennt später ein konkretes Problem mit dem Format. Bei einem freien Textfeld solltest du dagegen nicht plötzlich eine bestimmte Schreibweise verlangen, die vorher nirgends genannt wurde.
Die W3C-Erläuterung zu Labels und Anweisungen fordert verständliche Angaben, wenn Eingaben erwartet werden. Die technische Zuordnung muss ebenfalls stimmen: Das sichtbare Label gehört programmatisch zum Feld. Ein danebenstehender Absatz ist dafür nicht automatisch ausreichend.
Prüfe mit ausgefüllten Feldern
Fülle das Formular mit ungefährlichen Testdaten aus und lies es danach von unten nach oben. Ist jede Angabe noch eindeutig zugeordnet? Klicke auf die sichtbare Beschriftung: Bei einem korrekt zugeordneten einfachen Label sollte das Feld den Fokus erhalten. Kontrolliere außerdem, ob die Beschriftung bei Vergrößerung abgeschnitten wird.
Verlange nur Informationen, die du für den Vorgang brauchst. Ein langes Formular wird nicht dadurch leicht, dass seine Labels elegant schweben. Wenn ein Feld optional ist, kennzeichne das verständlich und prüfe, ob die Angabe überhaupt auf dieser Seite erforderlich ist.
Für mehrere zusammengehörige Auswahlfelder brauchst du zusätzlich eine Gruppenfrage. Dazu passt der Beitrag über Checkboxen und Radiobuttons. Was nach einer ungültigen Eingabe passieren sollte, erklärt Fehlermeldungen, die weiterhelfen.
Frage, Hinweis und Antwort haben verschiedene Aufgaben
Das Label benennt die gesuchte Information. Ein Hinweis erklärt bei Bedarf, warum sie gebraucht wird oder welches Format erwartet wird. Die Eingabe enthält die Antwort. Werden diese drei Aufgaben im Feld vermischt, wird es beim Ausfüllen schwerer, sie auseinanderzuhalten. Eine bereits eingetragene Beispieladresse kann etwa wie ein vorhandener eigener Wert wirken.
Bei einer E-Mail-Adresse genügt häufig ein klares Label. Eine zusätzliche Erklärung ist sinnvoll, wenn der Verwendungszweck überraschend sein könnte. Formuliere dann konkret, welche Nachricht an diese Adresse geht. Allgemeine Hinweise wie „Bitte korrekt ausfüllen“ schaffen keinen zusätzlichen Nutzen. Jeder Hilfetext sollte eine tatsächliche Unsicherheit beantworten, die nicht schon durch die Beschriftung geklärt ist.
Pflichtangaben sollen vor der Fehlermeldung erkennbar sein
Lege eine konsistente Kennzeichnung fest. Wenn nur wenige Angaben optional sind, kann eine ausgeschriebene Kennzeichnung dieser Felder leichter verständlich sein als eine Vielzahl von Sternchen. Welche Darstellung du wählst, muss zur gesamten Form passen und auch technisch vermittelt werden. Ein rein dekoratives Zeichen ohne Erklärung ist keine ausreichende Grundlage.
Prüfe außerdem, ob die Information überhaupt erforderlich ist. Ein präzises Label macht ein unnötiges Feld nicht sinnvoll. Wenn ein Kontaktformular bereits eine E-Mail-Adresse abfragt, sollte eine zusätzliche Telefonnummer einen nachvollziehbaren Zweck haben. Weniger unnötige Fragen können den Ablauf stärker verbessern als eine aufwendige Gestaltung jedes einzelnen Eingabefelds.
Die Beschriftung muss den ganzen Ablauf begleiten
Teste ein leeres, ein teilweise ausgefülltes und ein fehlerhaftes Formular. In jedem Zustand sollte erkennbar sein, welche Frage beantwortet wird. Bei einer Korrektur muss die ursprüngliche Eingabe soweit möglich erhalten bleiben. Sonst muss der Besucher dieselbe Information erneut beschaffen, obwohl lediglich ein Zeichen oder ein Format korrigiert werden sollte.
Beziehe auch automatisch ausgefüllte Felder ein. Ein Passwortmanager oder der Browser kann Inhalte eintragen, ohne dass der Besucher jedes Feld einzeln aktiviert. Das Label darf deshalb nicht erst durch eine Mausbewegung erscheinen. Prüfe die Zuordnung schließlich mit assistiven Technologien: Sichtbare Nähe allein stellt die programmatische Verbindung zwischen Beschriftung und Feld noch nicht her.
Einzelne Feldtypen bringen weitere Anforderungen mit: Bei der Datumseingabe zählt das verständliche Format, beim Datei-Upload der Unterschied zwischen Auswahl und Übertragung. Diese Informationen gehören jeweils direkt zur Aufgabe.
