Rooli Widget

`searchbox`

Merkitsee elementin hakutehtävään tarkoitetuksi tekstisyötteeksi. Käytä ensin <input type="search"> — se tarjoaa tyhjennys-affordanssin useimmissa selaimissa ja hakusemantiikan ilmaiseksi. Ota role="searchbox" käyttöön vain mukautetussa contenteditable-hakukentässä.

Milloin käyttää

Käytä <input type="search">. Selaimet näyttävät tyhjennys-affordanssin, mobiilinäppäimistöt vaihtavat “Search”-paluunäppäimeen ja ruudunlukuohjelmat ilmoittavat kentän “search edit” -muodossa.

role="searchbox" esiintyy vain kahdessa tilanteessa:

Mukautettu hakukenttä, joka on rakennettu contenteditable-elementistä (monipuoliset tunnisteet, liitetyt kuvat, monimutkainen kyselysyntaksi).
Koko hakutoiminnon kääriminen <search>-kiintopisteeseen tai role="search" -alueeseen, jossa sisällä oleva kenttä käyttää edelleen natiivia type="search".

Automaattista täydennystä varten käytä role="combobox" hakukentässä ja yhdistä se role="listbox" -ehdotuslistaan — searchbox itsessään ei omista ponnahdusvalikkoa.

Yleisimmät virheet

role="searchbox" painikkeessa. Rooli kuuluu syötteelle, ei hakukuvakepainikkeelle sen vieressä.
Hakukenttä ilman saavutettavaa nimeä. “Search” tulisi olla <label>-elementissä, aria-label-attribuutissa tai aria-labelledby-viittauksessa — ei pelkässä placeholder-tekstissä.
Hakolomakkeen rakentaminen ilman, että kenttä ja painike kääritään <search>-kiintopisteeseen tai role="search" -alueeseen. Ruudunlukuohjelman käyttäjät navigoivat kiintopisteiden avulla ja menettävät hakutoiminnon.
role="searchbox":n käyttäminen “suodata taulukko” -syötekentässä. Kyseessä ei ole koko sivuston haku; pelkkä textbox tai combobox on tarkempi.
Lomakkeen lähettäminen jokaisella näppäinpainalluksella ilman debouncingia — aiheuttaa jatkuvat ilmoitukset avustavalle teknologialle.

Esimerkki

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