search

Hvornår bruges det

Rundt om sidens primære søgefunktion — typisk et <form> med et inputfelt og en indsend-knap. Brug det native <search>-element hvis muligt; det leverer vartegnet gratis. Til ældre browsere bruges role="search" på <form>-elementet i stedet.

Formålet med vartegnet er at eksponere søgefunktionen i skærmlæserens vartegnsmenu, så brugere kan hoppe direkte til den. Uden vartegnet er søgeformularen blot endnu en formular på siden.

Inputtet inde i søgevartegnet bør bruge <input type="search"> — det giver søgesemantikken på feltet, platformens ryd-knap-affordance og en “Søg”-returtast på mobil.

Hvornår skal det navngives

Et enkelt søgevartegn behøver ingen etiket. Har du flere søgefunktioner på samme side (en global søgning i headeren OG en filtersøgning inde i sideindholdet), navngives hver enkelt — “Søg på siden”, “Filtrer resultater”.

Typiske fejl

• Søgeformular uden vartegn. Brugere kan ikke navigere til den via vartegnsnavigation.
• role="search" sat på <input> i stedet for det omsluttende <form> eller wrapper. Rollen hører til på beholderen, ikke på feltet.
• Flere søgevartegn uden etiketter.
• Søgevartegn der kun omslutter inputtet men ikke indsend-knappen. Brugere finder feltet, men knappen sidder uden for vartegnet.
• At bruge role="search" på et generisk “find efter navn”-inputfelt på en CRUD-side — overappliceret; det er et filter, ikke en søgefunktion.

Eksempel

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