Search

Eksempler

Varianter

Størrelser

Komponenten kommer i to størrelser: medium og small. Medium er standard, og brukes både på eksterne og interne flater. Small brukes på interne flater der det er behov for et mer komprimert grensesnitt. En small variant kan også være knyttet til en komponent som for eksempel til filtrering av data i en data-tabell.

Med eller uten label

I de fleste tilfeller er det ikke nødvendig med en synlig label på søk. Søkefeltets utforming, knapp og søkeikon gjør funksjonen tydelig for brukeren. Selv om label ikke er synlig, skal den alltid være tilgjengelig for skjermleser.

Standard search

Tertiary er standardvarianten til søk. Hvis du er i tvil om hvilken variant du skal bruke, er det sikkert denne som er riktig.

Primary search

Primary skal brukes der søk er hoved-/primær-funksjon, f.eks. ved globalt søk. Merk at det som regel bare skal finnes ett primary søk på en og samme side.

Search dark

Søkefelt som brukes på mørk bakgrunn.

Search simple

Gjelder spesielt input-felter der innholdet blir oppdatert fortløpende eller er autocomplet. Kan for eksempel være knyttet til en tabell.

Disabled

Search kan ikke være disabled.

Tilgjengelighet

Interaksjon Tastatur

Vi har skrevet kode som håndterer ESC-klikk i selve search-komponenten. I mange nettlesere vil det også være en knapp til høyre i søkefeltet som lar brukeren slette innholdet. Vi har laget ekstra funksjonalitet som gjør at denne knappen kan motta tastaturfokus. Gi oss gjerne tilbakemelding om denne endringen!

I tillegg vil enter sende inn skjemaet om søkefeltet ligger i et <form>.

Bruk

Søkefeltets bredde

Søkefeltets bredde bør tilsvare størrelsen av søketermene som feltet er designet for. Feltets størrelse er en viktig cue til brukeren om hva de kan bruke søkefeltet til. Dvs., for et felt som brukes bare til å søke på personnumre bør feltets størrelse tilsvare størrelsen til en personnummer, mens for et nettsteds hovedsøk bør man bruke et bredere felt som lar brukerne se mange ord samtidig.

Ta gjerne en kikk på søkeloggene dine for å se hvordan brukerne dine ordlegger seg når de søker på sidene dine. Unngå at teksten i søkefeltet må scrolle for å romme typiske søk.

Placeholdertekst

Vi fraråder bruk av placeholdertekst for flere grunn:

• Teksten forsvinner så snart brukeren begynner å skrive i feltet, så du må uansett gjenta denne informasjonen i label eller beskrivelsen.
• Placeholdertekst må også møte kontrastkravene, men da blir teksten så mørk at brukere kan lett bli forvirret og tro at feltet allerede er fylt ut.
• Hjelpemidler håndterer placeholdertekst på forskjellige måter, så du kan ikke stole at informasjonen du har i placeholderen blir kommunisert til alle brukere.

Placeholdertekst kan vurderes på interne flater der det er behov for et mer kompakt design.

Retningslinjer

Søk-landmark

Hvis du vil eksponere søket til hjelpemidler som en ARIA "search" landmark, kan du legge den i et element med role="search" . Dette kan være nyttig om søket er en viktig del av sidens funksjonalitet, som f.eks. hovedsøket for nettsiden eller hvis søkefeltet er starten av en viktig brukeroppgave. Dette gjør det mulig for skjermleserbrukere å navigere direkte til søket.

Dersom du bruker flere av samme type landmark på siden, bør du navngi disse, gjerne med med aria-labelledby i dette tilfellet.

Innsending av queryen

Ved default så gjør ikke submit-knapper noe med mindre de er programmatisk assosiert med et form-element. Vi anbefaler deform å bruke et form-element rundt komponenten og en onSubmit for å håndtere innsending. Form rundt Search hjelper også noen skjermelsere å bedre tolke søkefeltet som et søk.

autofocus

For interne flater, dersom søkefeltet representerer sidens hovedoppgave og målgruppa til siden er ekspertbrukere, kan det være nyttig å legge fokus på feltet automatisk når siden lastes inn. Dette gjør man ved å bruke autofocus-attributtet på inputfeltet. Snakk med din lokale uu-ekspert for å høre om teknikken er riktig for din løsning.

Props