Rolle Widget

`searchbox`

Markerer et element som et tekstinput afgrænset til en søgeopgave. Brug <input type="search"> først — det giver ryd-knap-affordances i de fleste browsere og søgesemantikken gratis. Brug role="searchbox" kun på et brugerdefineret contenteditable-søgefelt.

Hvornår bruges det

Brug <input type="search">. Browsere viser en ryd-affordance, mobile tastaturer skifter til en “Søg”-returtast, og inputtet annonceres af skærmlæsere som “søg redigering”.

role="searchbox" optræder kun i to tilfælde:

Et brugerdefineret søgeinput bygget på et contenteditable-element (avancerede tokens, indsatte billeder, kompleks forespørgselssyntaks).
Indpakning af hele søgefunktionen i et <search>-vartegn eller role="search"-region, med inputtet stadig som nativt type="search" indeni.

Til autocomplete-søgning bruges role="combobox" på søgeinputtet parret med en role="listbox" med forslag — searchbox ejer ikke selv et popup.

Typiske fejl

role="searchbox" på en knap. Rollen er til inputtet, ikke til søgeikon-knappen ved siden af.
Søgeinput uden tilgængeligt navn. “Søg” bør stå i et <label>, aria-label eller aria-labelledby — ikke kun i placeholder.
At bygge en søgeformular uden at omslut input + knap i et <search>-vartegn eller role="search". Skærmlæserbrugere navigerer via vartegn og mister affordancen.
At bruge role="searchbox" til et “filtrer denne tabel”-input. Det er ikke søgning på hele siden; et almindeligt textbox eller combobox er mere præcist.
Formularindsendelse ved hvert tastetryk uden debouncing — udløser hjælpeteknologi-annonceringer kontinuerligt.

Eksempel

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