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

`searchbox`

Маркира елемент като текстово поле за въвеждане, ограничено до задача за търсене. Препоръчва се използването на <input type="search"> — осигурява бутон за изчистване и семантика за търсене. Прибягва се до role="searchbox" само при персонализирано поле за търсене, базирано на contenteditable.

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

Препоръчва се употребата на <input type="search">. Браузърите визуализират бутон за изчистване на въведения текст, мобилните клавиатури превключват на клавиш „Търсене”, а полето се обявява от екранните четци като „поле за търсене”.

role="searchbox" се появява само в два случая:

Персонализирано поле за търсене, изградено върху contenteditable елемент (богати маркери, поставени изображения, сложен синтаксис на заявки).
Обгръщане на цялото средство за търсене в ориентир <search> или регион role="search", като полето вътре все още използва нативен type="search".

За търсене с автодовършване се използва role="combobox" върху полето за търсене, съчетано с role="listbox" за предложенията — самият searchbox не притежава попап.

Чести грешки

role="searchbox" върху бутон. Ролята е предназначена за полето за въвеждане, а не за бутона с иконата за търсене до него.
Поле за търсене без достъпно наименование. „Търсене” трябва да присъства в <label>, aria-label или aria-labelledby — не само в placeholder.
Изграждане на форма за търсене без обгръщане на полето и бутона в ориентир <search> или role="search". Потребителите на екранни четци навигират по ориентири и губят тази функционалност.
Употреба на role="searchbox" за поле „филтриране на таблица”. Това не е търсене в целия сайт; по-точни са обикновен textbox или combobox.
Изпращане на формата при всяко натискане на клавиш без debouncing — генерират се непрекъснати обявявания от помощните технологии.

Пример

<search>
  <form role="search" action="/search">
    <label for="q">Search the site</label>
    <input id="q" type="search" name="q">
    <button type="submit">Search</button>
  </form>
</search>