Verbinden Sie jedes Feld mit einem dauerhaften Textlabel, verlangen Sie nur notwendige Angaben, beschreiben Sie Fehler am Feld und in einer Zusammenfassung und bestätigen Sie nach dem Absenden klar das Ergebnis.
Ein Formular ist ein Gespräch zwischen Mensch und System. Stützt es sich nur auf einen Platzhalter, kennzeichnet es Pflichtfelder nicht oder löscht es nach einem Fehler die Eingaben, betrifft das Problem nicht nur Nutzer assistiver Technologien. Unklarheit erhöht die Zahl der Korrekturen, den Supportaufwand und das Risiko, dass jemand falsche oder sensible Informationen absendet.
Barrierefreiheit entsteht durch die Kombination aus kurzem Umfang, korrektem HTML, verständlichen Anweisungen und zuverlässigen Zuständen. Clientseitige Validierung hilft, Fehler zu korrigieren, ersetzt aber nicht die serverseitige Sicherheitsprüfung. Das Formular sollte mit der Tastatur, einem Screenreader, bei Vergrößerung und bei langsamer Verbindung getestet werden, wobei die Privatsphäre und der rechtliche Zweck der Datenerhebung zu respektieren sind.
Zweck und Umfang des Feldes müssen vor dem Ausfüllen verständlich sein
Fragen Sie nur nach Daten, die für den konkreten Prozess erforderlich sind, und erklären Sie, warum sie benötigt werden, wenn das nicht offensichtlich ist. Unterscheiden Sie Pflicht- und optionale Felder durch Text, nicht nur durch ein Sternchen ohne Legende. Die Reihenfolge sollte einem natürlichen Gespräch folgen. Teilen Sie ein langes Formular in logische Schritte auf und zeigen Sie den Fortschritt an, ohne es künstlich in die Länge zu ziehen.
Platzieren Sie Hinweise vor dem Feld oder in seiner Nähe, insbesondere bei ungewöhnlichen Formaten, Passwörtern oder Datei-Uploads. Warten Sie nicht, bis jemand einen Fehler macht, um die Regel zu erfahren. Die Sprache soll sagen, was einzugeben ist und wofür die Angabe verwendet wird, nicht den internen Namen der Datenbankspalte nennen.
Das Label ist die dauerhafte Bezeichnung, der Platzhalter nur ein ergänzendes Beispiel
Verwenden Sie ein label-Element, das korrekt mit der eindeutigen Kennung des Feldes verknüpft ist. Ein Klick auf das Label soll das zugehörige Element aktivieren, und der Screenreader soll dessen Bezeichnung ansagen. Ein Placeholder verschwindet, sobald man zu tippen beginnt, hat oft einen schwachen Kontrast und darf nicht die einzige Information über Zweck oder Format enthalten.
Kennzeichnen Sie Gruppen von Optionsfeldern und Kontrollkästchen mit einer gemeinsamen Legende und belassen Sie den einzelnen Optionen eigene Labels. Benennen Sie Schaltflächen nach dem Ergebnis, zum Beispiel „Anfrage senden“, nicht mit einem allgemeinen „OK“. Verwenden Sie eigene Komponenten nur dann, wenn ein natives Element den Bedarf nicht erfüllen kann und Sie dessen gesamtes Verhalten implementieren können.
- sichtbares Label für jedes Bedienelement
- eindeutige ID und korrekte Verknüpfung über for
- fieldset und legend für eine zusammengehörige Gruppe
- Schaltfläche, die nach der tatsächlichen Aktion benannt ist
Feldtyp und Autocomplete reduzieren unnötiges Abtippen
Wählen Sie einen passenden Eingabetyp für E-Mail, Telefon, Datum oder Zahl, lassen Sie aber die Formate zu, die Nutzer tatsächlich benötigen. Eine Telefonnummer ist kein mathematischer Wert und kann eine Vorwahl oder Leerzeichen enthalten. Automatische Formatierung darf die Bedeutung nicht verändern oder den Cursor unvorhersehbar verschieben.
Legen Sie bei gängigen Personen- und Kontaktdaten das passende autocomplete fest, damit Browser und assistive Technologien den Zweck erkennen. Unterbinden Sie das Einfügen von Text in Passwort- oder Bestätigungscodefelder nicht ohne Sicherheitsgrund. Passwort-Manager und Kopieren können Fehler verringern und Nutzer mit motorischen oder Gedächtniseinschränkungen unterstützen.
Die Fehlermeldung benennt das Feld, die Ursache und die Lösung
Bewahren Sie nach einem fehlgeschlagenen Absenden die korrekt eingegebenen Daten auf und zeigen Sie am Anfang des Formulars eine Fehlerübersicht an. Jeder Eintrag der Übersicht kann auf ein bestimmtes Feld verweisen. Die Fehlermeldung gehört auch zum Feld und muss ihm programmatisch zugeordnet sein. Ein roter Rahmen ohne Text erklärt das Problem nicht und funktioniert nicht ohne Farbwahrnehmung.
Verschieben Sie den Fokus nach einem einheitlichen Muster auf die Zusammenfassung oder den ersten Fehler und melden Sie die Änderung der assistiven Technologie, ohne störende Wiederholungen. Validieren Sie zu einem angemessenen Zeitpunkt; eine aggressive Fehlermeldung bei jeder eingegebenen Ziffer ist hinderlich. Der Server prüft die Eingabe erneut und gibt eine sichere Meldung zurück, ohne technischen Stack Trace und ohne interne Details preiszugeben.
- klare Zusammenfassung nach fehlgeschlagenem Absenden
- Textfehler, der einem bestimmten Feld zugeordnet ist
- erhaltene gültige Werte und logischer Fokus
- gleiche Prüfung auf Client und Server
- Hilfetext gemeinsam mit dem Feld verfügbar
- kein Löschen korrekt eingegebener Werte
- Bestätigung des Ergebnisses nach autoritativer Antwort
- Regressionstest mit Tastatur und Screenreader
Bestätigung und Tests schließen den gesamten Prozess ab
Teilen Sie nach erfolgreichem Abschluss eindeutig mit, was angenommen wurde, was als Nächstes geschieht und wie die Person einen Fehler korrigieren kann. Erwecken Sie nicht nur durch eine Button-Animation den Eindruck, dass etwas gesendet wurde. Verhindern Sie bei einem Doppelklick einen doppelten Datensatz und zeigen Sie einen stabilen Status an. Wiederholen Sie sensible Werte weder in der Bestätigung noch in der URL.
Testen Sie ein leeres Formular, Grenzwerte, eine langsame Antwort, einen Serverausfall, die Zurück-Navigation und das Neuladen der Seite. Durchlaufen Sie den gesamten Prozess ohne Maus und mit einem Screenreader. Ein automatisches Audit findet einen Teil der Probleme, prüft aber weder die Verständlichkeit der Fragen noch die Angemessenheit der Datenerhebung oder ob der Nutzer das Ergebnis verstanden hat.
Häufige Fragen
Kann ein Platzhalter ein Label ersetzen?
Nein. Er verschwindet, sobald man zu tippen beginnt, und wird möglicherweise nicht zuverlässig angesagt. Das Feld braucht eine dauerhafte, programmatisch verknüpfte Beschriftung.
Reicht eine clientseitige Validierung aus?
Nein. Sie hilft dem Nutzer, die Eingabe muss aber auch auf dem Server sicher validiert werden. Fehlermeldungen beider Ebenen sollen verständlich und konsistent bleiben.
Sollten Pflicht- oder optionale Felder gekennzeichnet werden?
Wählen Sie ein konsistentes Modell und erklären Sie es im Text. Bei einem Formular mit überwiegend Pflichtfeldern kann es übersichtlicher sein, Ausnahmen und Anforderungen klar zu kennzeichnen.
Quellen und weiterführende Lektüre
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
