Figma
OpenCodeInput Textarea
Synonyme: Textfeld, Textarea, multi-line text input, mehrzeiliges Eingabefeld
Ähnliche Komponenten: Input Text, Input Date, Input E-Mail, Input Password
Kurzbeschreibung
Die Textarea ermöglicht eine Eingabe von langen Textinhalten durch Nutzende.
Beispiele
Default
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="textarea">Ortsbeschreibung</label>
<textarea class="kern-form-input__input" id="textarea" name="textarea"></textarea>
</div>Readonly
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="textarea1">Ortsbeschreibung</label>
<textarea class="kern-form-input__input" id="textarea1" name="textarea1" value="Der Marktstand wird an der Ecke Kirchplatz und Jakobistraße aufgebaut, dort befinden sich auch die Stromanschlüsse." readonly>Text</textarea>
</div>Disabled
Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="textarea2">Ortsbeschreibung</label>
<textarea class="kern-form-input__input" id="textarea2" name="textarea2" value="Der Marktstand wird an der Ecke Kirchplatz und Jakobistraße aufgebaut, dort befinden sich auch die Stromanschlüsse." disabled></textarea>
</div>Optional
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="textarea">Ortsbeschreibung <span class="kern-label__optional">- Optional</span></label>
<textarea class="kern-form-input__input" id="textarea" name="textarea"></textarea>
</div>Hinweistext und Fehlermeldung
Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="textarea3">Ortsbeschreibung</label>
<div class="kern-hint" id="textarea-hint">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<textarea class="kern-form-input__input kern-form-input__input--error" id="textarea3" name="textarea" aria-describedby="textarea-hint textarea-error"></textarea>
<p class="kern-error" id="textarea-error" role="alert">
<span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
<span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</div>Beschreibung
Für Textarea gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.
Die Textarea ist ein Eingabefeldes, das die mehrzeilige Texteingabe durch Nutzende ermöglicht. Die Höhe kann beliebig definiert werden, ist jedoch immer größer als die eines einzeiligen Eingabefeldes (<input type="text">). Hinsichtlich der Breite kann auch das Input Textarea angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen, was zur Einheitlichkeit und Benutzerfreundlichkeit beiträgt. Das Feld kann durch Ziehen an der rechten unteren Ecke von Nutzenden vergrößert oder verkleinert werden. Dies erleichtert die Eingabe und die Lesbarkeit längerer Texte. Wenn die ursprüngliche Höhe des Feldes nicht mehr ausreicht, um den gesamten Text anzuzeigen, erscheint ein vertikaler Scrollbalken.
Das Label des Eingabefeldes sollte kurz, prägnant und eindeutig auf die erwartete Eingabe hinweisen. Dort kann bei Bedarf eine Kennzeichnung als „optional“ erfolgen. Ein ergänzender Hinweistext (Hint) kann zusätzlich Informationen zum Format, zur Bedeutung oder zum Hintergrund der Eingabe geben und unterstützt so die Nutzerfreundlichkeit. Input Textarea unterstützen die Eingabevalidierung, um sicherzustellen, dass die eingegebenen Daten korrekt sind. Fehlermeldungen und visuelle Hinweise informieren die Nutzenden über notwendige Korrekturen.Bei einer ungültigen Eingabe wird eine Fehlermeldung unterhalb des Feldes angezeigt. Input Textarea kann alle unter Input beschriebenen Zustände annehmen.
Verwendungsregeln
Verwende die Textarea nur dann, wenn Nutzende mehrzeiligen Text oder Absätze eingeben müssen. Sonst nutze das Input Text. Stelle die Höhe einer Textarea proportional zu der Textmenge ein, die Nutzende eingeben sollen. Offene Fragen sind für Nutzende oft schwerer zu beantworten. Prüfe, ob eine komplexe Fragestellung bzw. deren Beantwortung in eine Reihe einfacher Antworten aufteilbar ist, z. B. indem Nutzende mit Hilfe von Radios aus Optionen auswählen können.
Dos und Don’ts
- Erlaube die copy & paste-Funktion.
- Erlaube Nutzenden, das Feld zu vergrößern, wenn lange Texteingaben zu erwarten sind.
- Siehe auch allgemeine Dos und Don'ts für Input
Barrierefreiheit
Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.
Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.
Implementierungsabhängig
Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:
WCAG 1.3.5
Textarea hat ein passendes autocomplete-Attribut
WCAG 3.3.1
Eingabefehler werden klar identifiziert
WCAG 3.3.2
Textbereich hat eine eindeutige Beschriftung
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.1
Textarea ist programmatisch mit Label verknüpft
WCAG 1.3.1
Fehlermeldung ist programmatisch mit Textbereich verknüpft
WCAG 1.4.1
Feldstatus wird nicht nur durch Farbe vermittelt
WCAG 1.4.6
Text im Textbereich erfüllt das minimale Kontrastverhältnis von 7:1
WCAG 1.4.10
Textbereich passt sich an verschiedene Bildschirmgrößen an
WCAG 1.4.11
Textbereich hebt sich mit mindestens 3:1 Kontrast vom Umfeld ab
WCAG 2.1.1
Textbereich ist vollständig per Tastatur bedienbar
WCAG 2.4.3
Die Navigationsreihenfolge ist logisch und intuitiv
WCAG 2.4.13
Textbereich hat einen sichtbaren Fokuszustand
WCAG 4.1.3
Fehlermeldung wird als Status-Nachricht gekennzeichnet
Siehe auch: BFIT Handreichungen