search

Milloin käyttää

Sivuston ensisijaisen hakutoiminnon ympärillä — yleensä <form>, joka sisältää syötekentän ja lähetyspainikkeen. Käytä natiivia <search>-elementtiä, jos mahdollista; se tuo kiintopisteen mukanaan automaattisesti. Vanhemmille selaimille käytä role="search" <form>-elementissä.

Kiintopisteen tarkoitus on tuoda hakutoiminto esiin ruudunlukuohjelman kiintopistenavigoinnissa, jotta käyttäjät voivat siirtyä siihen suoraan. Ilman kiintopistettä hakolomake on vain yksi lomake muiden joukossa.

Hakukiintopisteen sisällä olevan kentän tulisi käyttää <input type="search"> — se antaa kentälle hakusemantii­kan, alustan tyhjennys-affordanssin ja “Search”-paluunäppäimen mobiililaitteilla.

Milloin lisätä nimi

Yksittäinen hakukiintopiste ei tarvitse nimeä. Jos samalla sivulla on useita hakuja (yleinen sivustohaku ylätunnisteessa JA suodatinhaku sivusisällössä), anna jokaiselle oma nimi — “Sivustohaku”, “Suodata tuloksia”.

Yleisimmät virheet

• Hakolomake ilman kiintopistettä. Käyttäjät eivät pääse siihen kiintopistenavigoinnilla.
• role="search" asetettu <input>-kentälle eikä sitä ympäröivälle <form>-elementille tai kääreelle. Rooli kuuluu säilöön, ei kenttään.
• Useita hakukiintopisteitä ilman nimiä.
• Hakukiintopiste, joka kattaa vain syötekentän mutta ei lähetyspainiketta. Käyttäjä löytää kentän, mutta painike on kiintopisteen ulkopuolella.
• role="search":n käyttäminen geneerisessä “etsi nimellä” -syötekentässä CRUD-sivulla — liikaa käytetty; kyseessä on suodatin, ei sivustohaku.

Esimerkki

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

<!-- Laajempi selaintuki nykyään -->
<form role="search" action="/search">
  <label for="q2">Search</label>
  <input id="q2" type="search" name="q">
  <button type="submit">Go</button>
</form>