Стандарти · ARIA

Роля Контрола

textbox

Маркира елемент като едноредово или многоредово поле за въвеждане на текст. Използвайте първо <input type="text"> или <textarea> — те осигуряват цялото поведение на textbox безплатно. Прибягвайте до role="textbox" само при изграждане на редактор за богат текст върху contenteditable елемент.

Кога се използва

Използвайте <input type="text">, <input type="email">, <input type="url">, <input type="tel"> или <textarea> — в зависимост от семантиката на въвеждането. Нативните елементи управляват селекцията, курсора, IME композицията, изпращането на формуляри, токените за автодовършване и валидацията — всички тези функции са изключително трудни за повторно реализиране.

role="textbox" е подходящ само за един вид елемент: contenteditable div, хостващ редактор за богат текст. Ролята указва на помощната технология да го обяви като редактируема зона, а не като общ контейнер. Задайте aria-multiline="true", ако редакторът приема множество редове.

Ако вашият „textbox” изисква предложения за автодовършване, използвайте role="combobox" върху полето за въвеждане — textbox не може да притежава изскачащ елемент.

Чести грешки

  • role="textbox" приложен върху <div>, който НЕ е contenteditable. Ролята обявява редактируемо поле, но въвеждането на текст няма ефект.
  • Персонализирани textbox елементи без свързан <label for> или aria-label — полето няма достъпно наименование.
  • Използване на placeholder като единствен етикет. Placeholder изчезва при фокус, не отговаря на изискванията за контраст при много теми и не е достъпно наименование.
  • role="textbox" върху едноредов contenteditable елемент, който не премахва вмъкнатите нови редове. Потребителите вмъкват съдържание с нови редове, заобикаляйки визуалното ограничение.
  • Пропускане на aria-multiline="true" върху многоредов contenteditable редактор — екранните четци го обявяват като едноредово поле за въвеждане.

Пример

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

<!-- Rich-text editor -->
<label id="commentLabel">Comment</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="commentLabel"
  aria-multiline="true"
></div>