Rol Widget

`searchbox`

Markeert een element als tekstinvoer gericht op een zoekopdracht. Gebruik eerst <input type="search"> — dat biedt een wis-knopaffordance in de meeste browsers en de zoekopdrachtsemantiek gratis. Gebruik role="searchbox" alleen op een aangepast contenteditable-zoekveld.

Wanneer te gebruiken

Gebruik <input type="search">. Browsers renderen een wis-invoerknop, mobiele toetsenborden schakelen naar een “Zoeken”-retourtoets, en het invoerveld wordt door schermlezers aangekondigd als “zoekvak”.

role="searchbox" verschijnt slechts in twee gevallen:

Een aangepast zoekinvoerveld gebouwd op een contenteditable-element (rijke tokens, geplakte afbeeldingen, complexe querysyntaxis).
Het omhullen van de volledige zoekmogelijkheid in een <search>-landmark of role="search"-regio, waarbij het invoerveld binnenin nog steeds het native type="search" gebruikt.

Gebruik voor zoekopdrachten met automatisch aanvullen role="combobox" op het zoekinvoerveld en koppel dit aan een role="listbox" met suggesties — searchbox zelf heeft geen pop-up.

Veelvoorkomende fouten

role="searchbox" op een knop. De rol is voor het invoerveld, niet voor de zoekopdrachticoonknop ernaast.
Zoekinvoerveld zonder toegankelijke naam. “Zoeken” dient in een <label>, aria-label of aria-labelledby te staan — niet alleen in de plaatsaanduiding.
Een zoekformulier bouwen zonder het invoerveld + de knop te omhullen in een <search>-landmark of role="search". Schermlezergebruikers navigeren via landmark en missen de functie.
role="searchbox" gebruiken voor een “filter deze tabel”-invoerveld. Dat is geen sitewijde zoekopdracht; een gewone textbox of combobox is nauwkeuriger.
Het formulier bij elke toetsaanslag indienen zonder debouncen — veroorzaakt continue aankondigingen door hulptechnologie.

Voorbeeld

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