Eingabefeld (einzeilig)

Synonyme: Textfeld, Edit, Input, Inputfield, Textbox, one line plain text edit control

Siehe auch: Eingabefeld (mehrzeilig), Kennwort-Eingabefeld, Drehfeld, Eingabefeld mit Autocomplete-Funktion, kombiniertes Eingabefeld

Eingabefelder ermöglichen die Eingabe und Bearbeitung von Zeichen (Zahlen, Buchstaben, Sonderzeichen) (siehe DIN EN ISO 9241-161: 8.12).

Ein Eingabefeld ist ein meist rechteckiger Bereich der Seite, der sich z. B. durch einen Rahmen, eine Linie oder eine abweichender Hintergrundfarbe von der Umgebung abhebt. Im Eingabefeld können sich weitere Bedienelemente befinden, die im Bezug zur Werteingabe stehen.

• JAWS: [Beschriftung] Eingabefeld [Wert] [Hinweis zur Texteingabe]
• NVDA: [Beschriftung] Eingabefeld [Wert]
• Windows Sprachausgabe: [Beschriftung] Bearbeiten [Wert]

Das Eingabefeld sollte mit dem HTML-Element <input type=text> umgesetzt werden. Für ein Eingabefeld, welches zur Eingabe von Suchbegriffen dient, kann <input type=search> verwendet werden. Die Screenreader geben das Suchfeld als normales Eingabefeld aus, d. h. die Beschriftung muss auf den Zweck, die Suche, hinweisen. Der initiale Wert wird über das value-Attribut übermittelt. Die Beschriftung des Eingabefeldes sollte mit dem Element <label for=ID> mit dem Eingabefeld verknüpft werden. Die maximal erlaubte und minimal erforderliche Länge des Werts kann mit maxlength und minlength festgelegt werden. Beide Werte sind weder visuell noch mit Assistenztechnologien wahrnehmbar. Werden sie verwendet, sollte beim Eingabefeld ein entsprechender Hinweis erfolgen. Wird ein besonderes Eingabeformat verlangt, können anstelle von <input type=text> u. a. die folgenden Elemente verwendet werden:

• <input type=tel> für Telefonnummern,
• <input type=email> für Email-Adressen,
• <input type=url> für Internet-Adressen,
• <input type=text pattern=…> für Eingaben, die dem regulären Ausdruck im pattern-Attribut entsprechen müssen,
• <input type=number> für Zahlen (siehe Drehfeld),
• <input type=date>, <input type=time> usw. für Datums- und Zeitangaben (siehe Datumswähler).

Diese Eingabefelder mit einem vordefinierten Format werden vom Browser automatisch validiert. Die Fehlermeldungen der Browser sind jedoch nicht barrierefrei und sollten somit durch eigene Fehlermeldungen der Anwendung ersetzt oder ergänzt werden (siehe auch: Browser-Validierung des required-Attributs im Praxistipp programmatische Kennzeichnung von Pflichtfeldern in Web-Anwendungen.

Die Eingabefelder für Telefonnummern, Email- und Internet-Adressen sowie Eingabefelder mit dem pattern-Attribut sind weder visuell noch mit Assistenztechnologie als solche zu erkennen – sie werden als normale Eingabefelder angezeigt bzw. vom Screenreader ausgegeben. Deshalb müssen sie aussagekräftig beschriftet werden und sollten zusätzlich Bedienhinweise zum erforderlichen Eingabeformat erhalten.

Mit dem Attribut inputmode kann festgelegt werden, welche virtuelle Tastatur auf Mobilgeräten angezeigt werden soll, weil entsprechende Eingaben erwartet werden (z. B. Eingabe von Zahlen, Text, URLs, Email-Adressen). Die Verwendung von inputmode bewirkt keine automatische Browser-Validierung. Sofern sich die zu verwendende Tastatur nicht bereits aus dem type-Attribut des Eingabefeldes ergibt, wird die Verwendung von inputmode empfohlen, da auch Assistenztechnologien diese Information sinnvoll nutzen können, um z. B. entsprechende virtuelle Tastaturen anzuzeigen. Es sollte jedoch beachtet werden, dass das Attribut inputmode nicht notwendige Eingabehinweise ersetzt.
Für einen Platzhalter kann das Attribut placeholder verwendet werden. Es wird allerdings empfohlen, Eingabehinweise neben dem Feld anzuzeigen und per aria-describedby mit dem Eingabefeld zu verknüpfen. Das placeholder-Attribut hat folgende Nachteile:

• Die Kontraste sind häufig nicht ausreichend (entweder zum Hintergrund oder zum Text im Eingabefeld, so dass Platzhalter und Wert schlecht zu unterscheiden sind).
• Der Platzhalter wird nicht angezeigt, sobald das Feld einen Wert enthält.

Ein Eingabefeld kann als deaktiviert (disabled) und als schreibgeschützt (readonly) ausgezeichnet werden.

Ein Eingabefeld kann mit required als Pflichtfeld ausgezeichnet werden.

Weitere Informationen: 4.10.5 The input element - HTML Standard (whatwg.org)

Wird das Eingabefeld nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=textbox übermittelt.
• Für ein Eingabefeld, welches zur Eingabe von Suchbegriffen dient, kann role=searchbox verwendet werden. Die Screenreader geben das Suchfeld als normales Eingabefeld aus, d. h. die Beschriftung muss auf den Zweck, die Suche, hinweisen.
• Die Beschriftung des Eingabefeldes kann per aria-label oder aria-labelledby erfolgen.
• Der Wert des Eingabefeldes ergibt sich aus dem Textinhalt des Elements, welches mit role=textbox ausgezeichnet ist.
• Das Eingabefeld kann mit aria-required als Pflichtfeld, mit aria-disabled als deaktiviert und mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Für einen Platzhalter wird aria-placeholder verwendet.
• Die Darstellung des Eingabefeldes sollte im Hochkontrast-Modus von Windows überprüft werden.
• Das sichtbare Eingabefeld und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.
  

Weitere Informationen: textbox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link)

Informationen zu diesem Artikel

Datum:

5.10.2023

Lizenz:

CC-BY-SA 4.0

Version:

0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!