Roll Widget

`searchbox`

Markerar ett element som ett textfält avgränsat till en sökuppgift. Använd <input type="search"> först — det ger rensa-knapp-funktion i de flesta webbläsare och söksemantiken kostnadsfritt. Använd role="searchbox" enbart på ett anpassat contenteditable-sökfält.

När du ska använda det

Använd <input type="search">. Webbläsare renderar en rensa-fält-funktion, mobiltangentbord växlar till ett “Sök”-returknapp och fältet annonseras av skärmläsare som “sök redigera”.

role="searchbox" förekommer bara i två fall:

Ett anpassat sökfält byggt på ett contenteditable-element (rika tokens, inklistrade bilder, komplex frågesyntax).
Att omsluta hela sökfunktionen i ett <search>-landmärke eller role="search"-region, med fältet inuti som fortfarande använder det nativa type="search".

För sök med autokomplettering, använd role="combobox" på sökfältet och para det med en role="listbox" av förslag — searchbox äger inte en popup på egen hand.

Vanliga fel

role="searchbox" på en knapp. Rollen är för fältet, inte sök-ikonknappen bredvid det.
Sökfält utan tillgängligt namn. “Sök” ska finnas i ett <label>, aria-label eller aria-labelledby — inte bara i platshållartexten.
Att bygga ett sökformulär utan att omsluta fältet och knappen i ett <search>-landmärke eller role="search". Skärmläsaranvändare navigerar via landmärken och förlorar funktionen.
Att använda role="searchbox" för ett “filtrera den här tabellen”-fält. Det är inte webbplatsövergripande sökning; ett vanligt textbox eller combobox är mer korrekt.
Formulärpostning vid varje tangenttryckning utan debouncing — utlöser hjälpmedelsannonseringar kontinuerligt.

Exempel

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