Form Inputs
Beschreibung
Ein Eingabefeld ermöglicht es den Nutzenden, Daten in das System einzugeben, sei es durch die Eingabe von Text, numerischen Werten oder anderen Formen von Informationen. Die Eingabe ist für die Interaktion zwischen dem Nutzenden und der Anwendung in verschiedenen Kontexten wie Formularen, Suchfeldern und Dateneingabeschnittstellen von entscheidender Bedeutung. Hier findest du allgemeine Informationen zu allen Typen von Eingabefeldern, Besonderheiten der einzelnen Ausprägungen findest du auf den Unterseiten:
States
Eingabefelder können verschiedene Zustände annehmen. Nicht alle Felder nutzen alle „states“. Bei den einzelnen Ausprägungen wird angegeben, welche „states“ sie verwenden.
| state | Beschreibung und Verwendung |
|---|---|
| default | Wenn Nutzende Informationen eingeben können, wird das Eingabefeld im Status „default“ angezeigt. Dies ist der Normalzustand in einem Formular. |
| hover | Wird für Formularfelder verwendet, wenn der Mauszeiger von Nutzenden über dem Feld schwebt. |
| focus | Sobald die Nutzenden das Feld anklicken oder antippen bzw. mit der Tabulatortaste ansteuern, wird es fokussiert, damit sie sehen, dass es bereit zur Eingabe ist. |
| readonly | Formularfelder können im Status „readonly“ angezeigt werden, wenn zuvor Informationen gespeichert wurden, die an dieser Stelle nicht geändert werden können. In diesem Status sind die Felder schreibgeschützt (inaktiv). Nutze diesen Status ausschließlich, wenn es Nutzenden einen Mehrwert bringt, die Information erneut einzusehen. Gegebenenfalls kann ein Link zu dem Ort hilfreich sein, an dem die angezeigten Informationen angepasst werden können. |
| disabled | Der Zustand „disabled“ zeigt an, dass Nutzende keine Inhalte eingeben können, beispielsweise bis eine andere Aktion abgeschlossen ist. Wir empfehlen, die Nutzung von disabled zu vermeiden, da sie die Zugänglichkeit und Benutzerfreundlichkeit einschränken kann. Weitere Informationen zur Barrierefreiheit |
| error | Beim Status „error“ wird das Feld mit der entsprechenden Funktionsfarbe markiert und mit einer Fehlermeldung versehen. Dies passiert, wenn beim Abschicken des Formulars ein Fehler im entsprechenden Feld festgestellt wurde, beispielsweise wenn ein Feld nicht gefüllt wurde. Die Meldung sollte knapp und verständlich erklären, was zu tun ist, um den Fehler zu beheben. Bei längeren Fehlermeldungen, achte darauf, dass sie das Layout nicht beeinträchtigen. Um Eingabefehler zu vermeiden, nutze Felder zur Eingabe spezieller Formate. Sollen Nutzende zum Beispiel ein Datum eingeben, nutze Input Date. |
| error focus | Wenn beim Abschicken eines Formulars ein Fehler aufgetreten, wird dieser am entsprechenden Feld angezeigt, wie unter „error“ beschrieben. Steuern Nutzende dieses Feld an, um den Fehler zu beheben, erhält das Feld zusätzlich den Fokus, wie unter „state focus“ in dieser Tabelle beschrieben. |
disabled Attribut
Das disabled-Attribut verhindert nicht nur die Interaktion mit einem Eingabefeld, sondern macht es auch für Nutzer:innen, die auf Tastaturnavigation angewiesen sind, unerreichbar. Elemente mit disabled können weder per Tabulator-Taste fokussiert noch mit Screenreadern sinnvoll erfasst werden. Das bedeutet, dass Menschen, die eine Tastatur zur Navigation nutzen, das Feld nicht erreichen oder ausfüllen können, selbst wenn sie die inhaltliche Information benötigen.
Ein häufiges Missverständnis ist, dass disabled eine gute Lösung sei, um bestimmte Felder temporär zu deaktivieren. In Wirklichkeit führt dies jedoch dazu, dass betroffene Nutzer:innen nicht einmal erfahren, dass dieses Eingabefeld existiert oder warum es nicht verfügbar ist. Das kann besonders problematisch sein, wenn das Formular wichtige Abhängigkeiten zwischen Feldern hat und den Nutzer:innen keine alternative Möglichkeit gegeben wird, die Funktionalität zu verstehen oder zu nutzen.
Statt ein Eingabefeld mit disabled zu versehen, ist es daher oft besser, es einfach vollständig auszublenden, wenn es nicht benötigt wird. Dadurch entsteht keine unnötige Verwirrung, und alle Nutzer:innen haben die gleichen Möglichkeiten, mit der Oberfläche zu interagieren. Sollte das Feld zu einem späteren Zeitpunkt wieder verfügbar sein, kann es dann dynamisch eingeblendet werden.
Falls eine Deaktivierung dennoch notwendig ist, sollte statt disabled besser aria-disabled="true" verwendet werden. Dies sorgt dafür, dass das Feld zwar visuell als deaktiviert erscheint, aber weiterhin per Tabulator erreichbar und für Screenreader lesbar bleibt. Allerdings muss dann mit JavaScript sichergestellt werden, dass Funktionalitäten wie Events, Eingaben oder andere Interaktionen tatsächlich deaktiviert werden, um eine unbeabsichtigte Nutzung zu vermeiden.
Ergänzende Elemente und Eigenschaften
Optional-Label
Kennzeichne optionale Felder eindeutig. Überlege sorgfältig, ob die entsprechende Information wirklich benötigt wird, um das Formular nicht zu überladen. Idealerweise sollte das Formular hauptsächlich aus Pflichtfeldern und nur wenigen optionalen Feldern bestehen.
Label
Das Label eines Eingabefeldes sollte immer möglichst knapp und präzise beschreiben, welche Eingabe nötig ist.
Hint
Der Hinweistext (hint) bietet unterstützende Informationen, die den Nutzenden zusätzliche Hilfe oder Kontext geben. Er kann beispielsweise genutzt werden, um das erwartete Datenformat zu erklären. Der Hinweistext sollte nicht für lange Erklärungen mit Listen und Absätzen verwendet werden. Nutze in diesem Fall besser andere Formate, wie z.B. die Hilfe. Im Hinweistext sollten nur Informationen angezeigt werden, die für viele Nutzende in diesem Kontext hilfreich sind und die nicht mehrfach im Formular wiederholt werden.
Beispiele:
- Geben Sie Ihre E-Mail im Format „Beispiel@Anbieter.de“ ein.
- Das Ablaufdatum Ihrer Kreditkarte finden Sie auf der Rückseite Ihrer Karte.
Hilfe
Hilfe kann zurzeit in Figma genutzt werden, ist jedoch noch nicht umgesetzt.
An den Formularfeldern kann bei Bedarf ein Button in Form eines Hilfesymbols eingeblendet werden. Der Button öffnet einen Dialog mit einem kontextsensitiven Hilfetext, der Informationen zu dem entsprechenden Formularfeld enthält. Platziere hier nur Erläuterungen, die umfangreicher sind oder die nicht für alle Nutzenden zu jedem Zeitpunkt relevant sind. Vermeide den Einsatz der Hilfe und versuche im Label oder im Hint die gewünschten Inhalte schon möglichst treffend zu beschreiben.
Breite und Höhe der Eingabefelder
Ein Eingabefeld hat eine fixe Höhe. Diese bleibt konstant, unabhängig von der Menge des eingegebenen Textes. Eingabefelder sind in der Breite nicht begrenzt. Achte jedoch darauf, Eingabefelder nicht zu breit anzulegen, da dies die Lesbarkeit und die Benutzerfreundlichkeit beeinträchtigen. Gestalte die Breite der Felder möglichst so, dass Nutzende daran bereits erkennen können, welche Länge der erwartete Wert etwa hat. Ein zu kleines Feld kann den Nutzenden frustrieren, während ein zu großes Feld Platz verschwendet. Wähle eine konsistente Breite für ähnliche Informationen. Teste Eingabefelder in verschiedenen Bildschirmgrößen und auf verschiedenen Geräten auf Benutzerfreundlichkeit.
Dos und Don’ts
Label-Text sollte immer möglichst knapp und kurz formuliert sein und nicht mehrzeilig sein.
Nutze keinen Doppelpunkt am Ende eines Labels.
Ordne maximal zwei inhaltlich eng zusammengehörige Textfelder nebeneinander an.
Bevorzuge zur besseren Erfassung die Anordung untereinander.
Schreibe Fehlermeldungen so prägnant wie möglich, gib immer Handlungsoptionen an. Tadele Nutzende nicht.
Nutze im Hinweistext (hint) keine Links. Diese werden von Screenreadern nicht als Links erkannt.
Schreibe Hinweistexte (hint) wenn möglich als ganzen Satz mit Punkt.
Kennzeichne lieber die wenigen optionalen Felder, als die Mehrzahl der Pflichtfelder.
Weitere Hinweise
- Erlaube das Kopieren und Einfügen von Inhalten sowie die Verwendung der „autocomplete“-Funktion in Eingabefeldern.
- Ein Leitfaden für gute Fehlermeldungen finden sich bei der german UPA.
Barrierefreiheit
Stelle sicher, dass Textfelder für alle Nutzenden zugänglich sind, einschließlich Personen mit Beeinträchtigungen. Verwende geeignete ARIA-Labels und -Attribute und teste die Textfelder mit Screenreadern. Sorge dafür, dass die Tab-Reihenfolge logisch und intuitiv ist, damit Nutzende problemlos durch die Felder navigieren können.