Eingabefeld (mehrzeilig)

Synonyme: Textfeld, Textarea, multi-line text input, multiline plain text edit control

Siehe auch: Eingabefeld (einzeilig), Rich Text Editor

Mehrzeilige Eingabefelder ermöglichen die Eingabe von langen Textinhalten (siehe DIN EN ISO 9241-161: 8.45).

Ein mehrzeiliges Eingabefeld ist ein meist rechteckiger Bereich der Seite, der sich z. B. durch einen Rahmen vom Hintergrund abhebt. Der Rahmen kann einen Griff zum Skalieren des Eingabefeldes besitzen. Ein mehrzeiliges Eingabefeld kann Scrollbalken besitzen. Die Anforderungen an den Griff und Scrollbalken sind in den entsprechenden Abschnitten beschrieben.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit mehreren Zeilen handelt.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit mehreren Zeilen handelt.

Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld mit mehreren Zeilen handelt.

• JAWS: [Beschriftung] Eingabefeld [Hinweis auf enthaltenen Wert] [Hinweis zur Texteingabe]
• NVDA: [Beschriftung] Eingabefeld mehrzeilig [Inhalt der aktuellen Zeile]
• Windows Sprachausgabe: [Beschriftung] Bearbeiten [Wert]

Hinweise:

• Mit JAWS ist der Wert des Eingabefeldes beim Fokussieren mit TAB nicht wahrnehmbar. Erst bei der Navigation durch das Feld wird der Inhalt zeilenweise ausgegeben.
• Mit NVDA ist der Wert des Eingabefeldes beim Fokussieren mit TAB nur teilweise wahrnehmbar, weil lediglich die aktuelle Zeile ausgegeben wird. Erst bei der Navigation durch das Feld wird der Inhalt zeilenweise ausgegeben.
• Wenn das Eingabefeld leer ist, ist mit JAWS und der Windows Sprachausgabe der Unterschied zwischen einem ein- und mehrzeiligem Eingabefeld nicht wahrnehmbar.
• Wenn der Wert des Eingabefeldes Leerzeilen enthält und sich der Textcursor in einer leeren Zeile befindet, ist mit NVDA beim Fokussieren mit TAB nicht wahrnehmbar, dass das Eingabefeld einen Wert enthält, weil lediglich „leer“ ausgegeben wird.

Hinweis: Mehrzeilige Eingabefelder sollten nur verwendet werden, wenn sehr lange Eingaben erwartet werden oder die Eingabe von Absatzumbrüchen (EINGABE-Taste) ermöglicht werden muss. Ansonsten sollte ein einzeiliges Eingabefeld verwendet werden, weil die Zugänglichkeit der mehrzeiligen Eingabefelder für Screenreader-Nutzende schlechter ist.

Das Eingabefeld sollte mit dem HTML-Element <textarea> umgesetzt werden.
Der initiale Wert wird über den Textinhalt des Elements ü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.
Die visuelle Größe des Eingabefeldes kann mit den Attributen cols und rows festgelegt werden. Es wird empfohlen, die Größe stattdessen per CSS zu definieren, damit das mehrzeilige Eingabefeld responsiv gestaltet werden kann, um horizontales Scrollen bei 320 px Bildschirmbreite zu vermeiden. Die initiale Größe des Eingabefeldes sollte ausreichend groß sein, weil Tastaturnutzende die Größe des Feldes nicht ändern können – der vom Browser automatisch angezeigte Griff ist nur mit einem Zeigegerät bedienbar.
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.11 The textarea 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 und dem ARIA-Attribut aria-multiline=true übermittelt.
• 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!