Standards · ARIA

Rolle Widget

textbox

Kennzeichnet ein Element als ein- oder mehrzeiliges Texteingabefeld. Vorrang haben <input type="text"> oder <textarea> — sie decken jedes Textbox-Verhalten kostenlos ab. role="textbox" ist nur beim Aufbau eines Rich-Text-Editors auf einem contenteditable-Element angebracht.

Wann verwenden

Empfohlen wird <input type="text">, <input type="email">, <input type="url">, <input type="tel"> oder <textarea> — je nachdem, welches Element zur Eingabesemantik passt. Native Elemente übernehmen Selektion, Cursor-Position, IME-Komposition, Formularübermittlung, Autocomplete-Token und Validierung — alles Verhalten, das sich nur schwer nachbauen lässt.

role="textbox" ist für genau eine Art von Element angemessen: ein contenteditable-Div, das einen Rich-Text-Editor bereitstellt. Die Rolle signalisiert assistiver Technologie, das Element als bearbeitbaren Bereich und nicht als generischen Container zu behandeln. aria-multiline="true" sollte gesetzt werden, wenn der Editor mehrere Zeilen akzeptiert.

Benötigt das Textfeld Autocomplete-Vorschläge, ist stattdessen role="combobox" auf dem Eingabeelement zu verwenden — textbox besitzt kein Popup.

Häufige Fehler

  • role="textbox" auf einem <div>, der NICHT contenteditable ist. Die Rolle kündigt ein bearbeitbares Feld an, aber Eingaben haben keine Wirkung.
  • Benutzerdefinierte Textfelder ohne zugeordnetes <label for> oder aria-label — das Feld besitzt keinen barrierefreien Namen.
  • placeholder als einzige Beschriftung verwenden. Der Platzhaltertext verschwindet beim Fokus, hat in vielen Themes unzureichenden Farbkontrast und gilt nicht als barrierefreier Name.
  • role="textbox" auf einem einzeiligen contenteditable-Element, das eingefügte Zeilenumbrüche nicht entfernt. Nutzer fügen Inhalte mit Zeilenumbrüchen ein, die die visuelle Beschränkung umgehen.
  • Fehlendes aria-multiline="true" auf einem mehrzeiligen contenteditable-Editor — Screenreader kündigen das Feld als einzeilige Eingabe an.

Beispiel

<!-- Empfohlen -->
<label for="bio">Kurze Biografie</label>
<textarea id="bio" rows="4" maxlength="240"></textarea>

<!-- Rich-Text-Editor -->
<label id="commentLabel">Kommentar</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="commentLabel"
  aria-multiline="true"
></div>