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.
Darstellung
Permalink zu "Darstellung"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.
| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 606 | Wert | Bei einer Displaybreite ab 320 px muss das mehrzeilige Eingabefeld so angezeigt werden, dass dessen Textinhalt gelesen werden kann, ohne horizontal scrollen zu müssen. | Muss | EN 301 549: 9.1.4.10, 11.1.4.10 |
Bedienung
Permalink zu "Bedienung"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.
| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 607 | Tastaturbedienung | Wenn das mehrzeilige Eingabefeld nicht mit der TAB-Taste verlassen werden kann (weil mit dieser Tab-Schritte im Text eingefügt werden), dann muss ein Tastaturkürzel zum Verlassen des Feldes implementiert und in der Anwendung dokumentiert werden. | Muss | EN 301 549: 9.2.1.2, 11.2.1.2 |
Tastaturbedienung mehrzeiliges Eingabefeld
Permalink zu "Tastaturbedienung mehrzeiliges Eingabefeld"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Verlassen des mehrzeiligen Eingabefeldes | TAB oder ein dokumentiertes Tastaturkürzel | Erforderlich |
| Eingabe eines Werts | [Eingabe druckbarer Zeichen sowie EINGABE und ggf. TAB] Hinweis: Können bestimmte Zeichen nicht eingegeben werden, muss ein entsprechender Eingabehinweis beim Eingabefeld vorhanden sein. | Erforderlich |
| Navigation im mehrzeiligen Eingabefeld | PFEIL AUF/AB/RECHTS/LINKS | Erforderlich |
| Schnellnavigation im mehrzeiligen Eingabefeld | POS1, ENDE, BILD AUF, BILD AB | Erforderlich |
Programmierung/Schnittstellen
Permalink zu "Programmierung/Schnittstellen"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.
| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 608 | Rolle | Die Rolle mehrzeiliges Eingabefeld muss an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 609 | Bedienung | Das mehrzeilige Eingabefeld muss mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API). Hinweis: Sofern das mehrzeilige Eingabefeld nicht mit TAB verlassen werden kann, muss das Tastaturkürzel zum Verlassen an die Accessibility API übermittelt werden. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |
| 610 | Aktualisierung | Aktualisierungen hinsichtlich des Accessible Names, Werts oder Status des mehrzeiligen Eingabefeldes müssen an die Accessibility API übermittelt werden (siehe Accessibility API). Hinweis: Dies betrifft z. B. eine sich aktualisierende Beschreibung über die Anzahl der eingegebenen oder verbleibenden zulässigen Zeichen. | Muss | 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |
Praxistipp mehrzeiliges Eingabefeld in Web-Anwendungen
Permalink zu "Praxistipp mehrzeiliges Eingabefeld in Web-Anwendungen"Screenreader-Ausgabe
Permalink zu "Screenreader-Ausgabe"- 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=textboxund dem ARIA-Attributaria-multiline=trueübermittelt. - Die Beschriftung des Eingabefeldes kann per
aria-labeloderaria-labelledbyerfolgen. - Der Wert des Eingabefeldes ergibt sich aus dem Textinhalt des Elements, welches mit
role=textboxausgezeichnet ist. - Das Eingabefeld kann mit
aria-requiredals Pflichtfeld, mitaria-disabledals deaktiviert und mitaria-readonlyals schreibgeschützt ausgezeichnet werden. - Für einen Platzhalter wird
aria-placeholderverwendet. - 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)