search

Wanneer te gebruiken

Rond de primaire zoekmogelijkheid van de site — gewoonlijk een <form> met een invoerveld en een verzendknop. Gebruik het native <search>-element indien mogelijk; het levert het landmark gratis mee. Gebruik voor oudere browsers role="search" op de <form>.

Het doel van het landmark is de zoekmogelijkheid zichtbaar te maken in het landmarkmenu van de schermlezer, zodat gebruikers er direct naartoe kunnen springen. Zonder het landmark is het zoekformulier slechts een ander formulier op de pagina.

Het invoerveld binnen het zoekladmark dient <input type="search"> te gebruiken — dat geeft de zoekopdrachtsemantiek op het veld, de platformeigen wis-knopaffordance, en een “Zoeken”-retourtoets op mobiel.

Wanneer te labelen

Een enkel zoekladmark heeft geen label nodig. Als de pagina meerdere zoekopdrachten bevat (een algemene sitezoekopdracht in de koptekst én een filterzoekfunctie in de pagina-inhoud), dient elk een label te hebben — “Sitezoekopdracht”, “Resultaten filteren”.

Veelvoorkomende fouten

• Zoekformulier zonder landmark. Gebruikers kunnen er niet via landmarknavigatie naartoe navigeren.
• role="search" toegepast op het <input> in plaats van het omhullende <form> of de wrapper. De rol behoort op de container, niet het veld.
• Meerdere zoekladmarks zonder labels.
• Zoekladmark dat alleen het invoerveld omhult maar niet de verzendknop. Gebruikers vinden het veld maar de knop bevindt zich buiten het landmark.
• role="search" gebruiken op een generiek “zoeken op naam”-invoerveld op een CRUD-pagina — te ruim toegepast; dat is een filter, geen sitezoekopdracht.

Voorbeeld

<!-- Preferred (modern HTML) -->
<search>
  <form action="/search">
    <label for="q">Search</label>
    <input id="q" type="search" name="q">
    <button type="submit">Go</button>
  </form>
</search>

<!-- Broader browser support today -->
<form role="search" action="/search">
  <label for="q2">Search</label>
  <input id="q2" type="search" name="q">
  <button type="submit">Go</button>
</form>