search
Un landmark che raggruppa un modulo di ricerca. Consente agli utenti di screen reader di raggiungere direttamente la ricerca del sito. L'elemento nativo <search> (HTML 2024) assegna automaticamente questo ruolo; per una compatibilità browser più ampia, utilizzare role="search" su un <form>.
Quando utilizzarlo
Attorno all’elemento di ricerca principale del sito — di solito un <form> contenente un campo di input e un pulsante di invio. Se possibile, è preferibile usare l’elemento nativo <search>, che include il landmark automaticamente. Per i browser meno recenti, applicare role="search" al <form>.
Lo scopo del landmark è rendere visibile la funzionalità di ricerca nel menu dei landmark dello screen reader, in modo che gli utenti possano raggiungerla direttamente. Senza il landmark, il modulo di ricerca è semplicemente un altro modulo nella pagina.
Il campo di input all’interno del landmark di ricerca dovrebbe utilizzare <input type="search">: garantisce la semantica di ricerca sull’elemento, il pulsante di svuotamento nativo della piattaforma e un tasto «Cerca» sulla tastiera virtuale dei dispositivi mobili.
Quando aggiungere un’etichetta
Un singolo landmark di ricerca non richiede un’etichetta. Se nella stessa pagina sono presenti più ricerche — ad esempio una ricerca globale nell’intestazione e una ricerca per filtro nel contenuto della pagina — è necessario etichettare ciascuna: «Ricerca nel sito», «Filtra risultati».
Errori comuni
- Modulo di ricerca privo di landmark. Gli utenti non possono raggiungerlo tramite la navigazione per landmark.
role="search"applicato all’<input>anziché al<form>o al wrapper circostante. Il ruolo spetta al contenitore, non al campo.- Più landmark di ricerca senza etichette.
- Landmark di ricerca che include solo il campo di input ma non il pulsante di invio. Gli utenti trovano il campo, ma il pulsante rimane fuori dal landmark.
- Utilizzo di
role="search"su un campo «cerca per nome» all’interno di una pagina CRUD — applicazione impropria; si tratta di un filtro, non di una ricerca nel sito.
Esempio
<!-- Preferito (HTML moderno) -->
<search>
<form action="/search">
<label for="q">Search</label>
<input id="q" type="search" name="q">
<button type="submit">Go</button>
</form>
</search>
<!-- Compatibilità browser più ampia -->
<form role="search" action="/search">
<label for="q2">Search</label>
<input id="q2" type="search" name="q">
<button type="submit">Go</button>
</form>