Rola Widget

`textbox`

Oznacza element jako jednoliniowe lub wieloliniowe pole tekstowe. W pierwszej kolejności używaj <input type="text"> lub <textarea> — obsługują one wszystkie zachowania pola tekstowego. Po role="textbox" sięgaj wyłącznie przy budowaniu edytora tekstu sformatowanego na elemencie contenteditable.

Kiedy używać

Używaj <input type="text">, <input type="email">, <input type="url">, <input type="tel"> lub <textarea> — tego, który pasuje do semantyki pola. Natywne elementy obsługują zaznaczanie, kursor, kompozycję IME, wysyłanie formularzy, tokeny autouzupełniania i walidację — odtworzenie tego wszystkiego własnoręcznie jest bardzo trudne.

role="textbox" jest odpowiedni dla jednego konkretnego elementu: diva contenteditable hostującego edytor tekstu sformatowanego. Rola informuje technologie wspomagające, by traktowały go jako edytowalny obszar, a nie ogólny kontener. Ustaw aria-multiline="true", jeśli edytor przyjmuje wiele wierszy.

Jeśli „pole tekstowe” potrzebuje podpowiedzi autouzupełniania, użyj role="combobox" na polu — textbox nie obsługuje wyskakującego okna.

Typowe błędy

role="textbox" zastosowany do <div> bez contenteditable. Rola ogłasza edytowalne pole, ale wpisywanie nic nie robi.
Niestandardowe pola tekstowe bez sparowanego <label for> lub aria-label — pole nie ma dostępnej nazwy.
Użycie placeholder jako jedynej etykiety. Placeholder znika po uzyskaniu fokusu, nie spełnia wymagań kontrastu w wielu motywach i nie jest dostępną nazwą.
role="textbox" na jednoliniowym contenteditable, który nie usuwa wklejonych łamań wierszy. Użytkownicy wklejają treść z nowymi liniami, omijając wizualne ograniczenie.
Brak aria-multiline="true" na wieloliniowym edytorze contenteditable — czytniki ekranu ogłaszają go jako jednoliniowe pole.

Przykład

<!-- Zalecane -->
<label for="bio">Short bio</label>
<textarea id="bio" rows="4" maxlength="240"></textarea>

<!-- Edytor tekstu sformatowanego -->
<label id="commentLabel">Comment</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="commentLabel"
  aria-multiline="true"
></div>