search

När du ska använda det

Runt webbplatsens primära sökfunktion — vanligtvis ett <form> med ett inmatningsfält och en skicka-knapp. Använd det nativa <search>-elementet om du kan; det levererar landmärket kostnadsfritt. För äldre webbläsare, lägg role="search" på <form> i stället.

Syftet med landmärket är att exponera sökfunktionen i skärmläsarens landmärkesmeny så att användare kan hoppa direkt till den. Utan landmärket är sökformuläret bara ett formulär bland andra på sidan.

Fältet inuti söklandmärket bör använda <input type="search"> — det ger söksemantiken på fältet, plattformens rensa-knapp-funktion och ett “Sök”-returknapp på mobil.

När du ska märka upp det

Ett enda söklandmärke behöver ingen etikett. Om du har flera sökningar på samma sida (en global webbplatssökning i sidhuvudet OCH en filtersökning i sidinnehållet), etikettmärk varje ett — “Webbplatssökning”, “Filtrera resultat”.

Vanliga fel

• Sökformulär utan landmärke. Användare kan inte navigera till det via landmärkesnavigering.
• role="search" applicerat på <input> i stället för det omslutande <form> eller omslagselementet. Rollen tillhör behållaren, inte fältet.
• Flera söklandmärken utan etiketter.
• Söklandmärke som omsluter bara fältet men inte skicka-knappen. Användare hittar fältet men knappen sitter utanför landmärket.
• Att använda role="search" på ett generiskt “hitta efter namn”-fält på en CRUD-sida — övertillämpat; det är ett filter, inte webbplatssökning.

Exempel

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