search
Punkt orientacyjny grupujący formularz wyszukiwania. Umożliwia użytkownikom czytników ekranu bezpośrednie przejście do wyszukiwarki serwisu. Natywny element <search> (HTML 2024) automatycznie pełni tę rolę; dla szerszego wsparcia przeglądarek należy dziś używać role="search" na elemencie <form>.
Kiedy stosować
Wokół głównej funkcji wyszukiwania serwisu — zwykle elementu <form> zawierającego pole input i przycisk przesłania. Należy używać natywnego elementu <search>, jeśli jest to możliwe; dostarcza on punkt orientacyjny bezpłatnie. Dla starszych przeglądarek należy zastosować role="search" na elemencie <form>.
Celem punktu orientacyjnego jest udostępnienie funkcji wyszukiwania w menu punktów orientacyjnych czytnika ekranu, tak by użytkownicy mogli do niego bezpośrednio przejść. Bez punktu orientacyjnego formularz wyszukiwania jest jedynie kolejnym formularzem na stronie.
Pole input wewnątrz punktu orientacyjnego wyszukiwania powinno używać <input type="search"> — zapewnia to semantykę wyszukiwania na polu, affordance przycisku czyszczenia na platformie i klawisz „Szukaj” na klawiaturze mobilnej.
Kiedy dodawać etykietę
Pojedynczy punkt orientacyjny wyszukiwania nie wymaga etykiety. Jeśli na tej samej stronie znajduje się wiele wyszukiwarek (globalna wyszukiwarka serwisu w nagłówku ORAZ wyszukiwarka filtrów wewnątrz treści strony), należy opatrzyć każdą etykietą — „Wyszukiwarka serwisu”, „Filtruj wyniki”.
Typowe błędy
- Formularz wyszukiwania bez punktu orientacyjnego. Użytkownicy nie mogą przejść do niego za pomocą nawigacji po punktach orientacyjnych.
role="search"zastosowane na elemencie<input>zamiast na otaczającym elemencie<form>lub kontenerze. Rola należy do kontenera, nie do pola.- Wiele punktów orientacyjnych wyszukiwania bez etykiet.
- Punkt orientacyjny wyszukiwania obejmujący tylko pole input, ale nie przycisk przesłania. Użytkownicy znajdują pole, ale przycisk znajduje się poza punktem orientacyjnym.
- Używanie
role="search"na ogólnym polu „znajdź po nazwie” wewnątrz strony CRUD — nadmierne zastosowanie; to filtr, nie wyszukiwarka serwisu.
Przykład
<!-- Preferowane (nowoczesny HTML) -->
<search>
<form action="/search">
<label for="q">Search</label>
<input id="q" type="search" name="q">
<button type="submit">Go</button>
</form>
</search>
<!-- Szersze wsparcie przeglądarek dziś -->
<form role="search" action="/search">
<label for="q2">Search</label>
<input id="q2" type="search" name="q">
<button type="submit">Go</button>
</form>