searchbox

Quando utilizzarlo

Utilizzare <input type="search">. I browser mostrano un pulsante per svuotare il campo, le tastiere virtuali dei dispositivi mobili passano al tasto «Cerca» e l’input viene annunciato dagli screen reader come «campo di ricerca».

role="searchbox" compare solo in due casi:

• Un campo di ricerca personalizzato basato su un elemento contenteditable (token complessi, immagini incollate, sintassi di query avanzata).
• Il campo di input si trova all’interno di un landmark <search> o di una regione role="search", ma utilizza comunque il tipo nativo type="search".

Per una ricerca con completamento automatico, utilizzare role="combobox" sul campo di ricerca e abbinarlo a un role="listbox" di suggerimenti — searchbox di per sé non gestisce un popup.

Errori comuni

• role="searchbox" su un pulsante. Il ruolo è destinato al campo di input, non al pulsante con l’icona di ricerca adiacente.
• Campo di ricerca senza nome accessibile. «Search» deve essere presente in un <label>, in aria-label o in aria-labelledby — non solo nel placeholder.
• Modulo di ricerca in cui il campo e il pulsante non sono racchiusi in un landmark <search> o in una regione role="search". Gli utenti di screen reader navigano per landmark e perdono la funzionalità.
• Utilizzo di role="searchbox" per un campo «filtra questa tabella». Non si tratta di una ricerca a livello di sito; un textbox o combobox semplice è più appropriato.
• Invio del modulo a ogni pressione di un tasto senza rimbalzo — genera annunci continui da parte delle tecnologie assistive.

Esempio

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