search

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

Около основната функция за търсене в сайта — обикновено <form>, съдържащ поле за въвеждане и бутон за изпращане. Използвайте нативния елемент <search>, ако е възможно — той включва ориентира автоматично. За по-стари браузъри прилагайте role="search" директно върху <form>.

Целта на ориентира е да разкрие функцията за търсене в менюто с ориентири на екранния четец, така че потребителите да могат да преминат директно към нея. Без ориентира формата за търсене е просто поредната форма на страницата.

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

Кога да се добавя етикет

При единствен ориентир search не е необходим етикет. Ако страницата съдържа множество функции за търсене (глобално търсене в заглавната секция И търсене-филтър в съдържанието на страницата), всяка трябва да бъде етикетирана — „Търсене в сайта”, „Филтриране на резултати”.

Чести грешки

• Форма за търсене без ориентир. Потребителите не могат да преминат към нея чрез навигация по ориентири.
• role="search" е приложен върху <input> вместо върху обкръжаващия <form> или контейнер. Ролята принадлежи на контейнера, не на полето.
• Множество ориентири search без етикети.
• Ориентирът search обхваща само полето за въвеждане, но не и бутона за изпращане. Потребителите намират полето, но бутонът е извън ориентира.
• Използване на role="search" върху обикновен „Намери по име” вход в страница за CRUD операции — неоправдано приложение; това е филтър, а не търсене в сайта.

Пример

<!-- Предпочитан вариант (съвременен HTML) -->
<search>
  <form action="/search">
    <label for="q">Search</label>
    <input id="q" type="search" name="q">
    <button type="submit">Go</button>
  </form>
</search>

<!-- По-широка поддръжка от браузърите днес -->
<form role="search" action="/search">
  <label for="q2">Search</label>
  <input id="q2" type="search" name="q">
  <button type="submit">Go</button>
</form>