searchbox

Kiedy stosować

Należy używać <input type="search">. Przeglądarki renderują affordance czyszczenia pola, klawiatury mobilne przełączają się na klawisz „Szukaj”, a pole input jest ogłaszane przez czytniki ekranu jako „pole edycji wyszukiwania”.

role="searchbox" pojawia się wyłącznie w dwóch przypadkach:

• Niestandardowe pole wyszukiwania zbudowane na elemencie contenteditable (bogate tokeny, wklejone obrazy, złożona składnia zapytań).
• Opakowanie całej funkcji wyszukiwania w punkt orientacyjny <search> lub region role="search", przy czym pole input wewnątrz nadal używa natywnego type="search".

W przypadku wyszukiwania z autouzupełnianiem należy użyć role="combobox" na polu wyszukiwania i sparować je z role="listbox" sugestii — sam searchbox nie obsługuje wyskakującego okna.

Typowe błędy

• role="searchbox" na przycisku. Rola jest przeznaczona dla pola input, nie dla przycisku z ikoną wyszukiwania obok niego.
• Pole wyszukiwania bez dostępnej nazwy. „Szukaj” powinno znajdować się w <label>, aria-label lub aria-labelledby — nie tylko w atrybucie placeholder.
• Budowanie formularza wyszukiwania bez opakowania pola input i przycisku w punkt orientacyjny <search> lub role="search". Użytkownicy czytników ekranu nawigują po punktach orientacyjnych i tracą dostęp do tej funkcji.
• Używanie role="searchbox" dla pola „filtruj tę tabelę”. To nie jest wyszukiwarka obejmująca cały serwis; zwykły textbox lub combobox jest dokładniejszy.
• Przesyłanie formularza przy każdym naciśnięciu klawisza bez debouncingu — wyzwala ogłoszenia technologii wspomagającej w sposób ciągły.

Przykład

<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>