Eksempler

Retningslinjer

Legg til alternativer

Combobox kan settes opp til å ta imot nye alternativer som ikke finnes i nedtrekslista. Det er smart å bruke denne muligheten når du vil vise noen gode alternativer, men samtidig gi brukerne muligheten til å legge til egne alternativer.

Vise valg eksternt

Combobox har muligheten til å vise valgte alternativer utenfor komponentens tekstfelt. Det er ofte brukt i løsninger med flere filter som viser hva som er valgt over en resultatoversikt. Det er også en mulig løsning for alternativer med tilknyttet data/metadata som trenger større plass for å vise alt innholdet.

Listeinnhold

Hold teksten i alternativene så kort at de passer i bredden til nedtrekslista. Om teksten blir lang vil den gå over flere linjer. Lange tekster gjør alternativene vanskelige å lese.

Antall alternativer

Combobox fungerer best med større datasett hvor brukerne trenger en søke/filter-mekanisme for å ta valg. Om du har mindre enn 7 alternativer å velge mellom, så er det bedre å bruke Radio eller Checkbox.

Tilgjengelighet

Komponenten følger i stor grad WAI-ARIA Practices Guide (APG) sin implementasjon av combobox-mønsteret.

Hoveddelene av komponenten er et inputfelt og nedtrekklisten. Input-feltet har rollen combobox, og den kobles til nedtrekkslisten med aria-autocomplete="list" og aria-controls="<liste-id>". Dette kommuniserer for skjermleserbrukere at det er mulig å bruke piltaster for å bla mellom valgene i listen med piltaster fra input-feltet.

Fokushåndtering

Det er hovedsakelig kun inputtfeltet som får fokus. Det er for å redusere antall tab-stopp for komponenten, slik at den oppleves likt som en native select. Deretter styres et virtuelt fokus når brukeren blar i nedtrekkslisten. Det kommuniseres til skjermleser ved hjelp av aria-activedecendant og markeres visuelt med endring av bakgrunnsfarge og en tykk strek på venstre side.

Når man bruker Multi Select-versjonen av Combobox kan man også flytte fokuset til de allerede valgte alternativene sine, gitt at man har noen.

Input-type

Vi har valgt å bruke type="text" på input-feltet. For noen tilfeller ville kanskje type="search" virke mer logisk, da brukeren funksjonelt bruker komponenten for å søke i verdier. Men gjennom brukertesting har denne typen fungert dårligere med skjermleser/leselist, så vi gikk derfor tilbake til type="text".

Autocomplete

I Single Select-versjonen autofullfører vi til det første treffet fra listen. Vi bruker setSelectionRange for å velge teksten vi har lagt til, slik at neste tastetrykk fortsetter å skrive på det originale ordet. Opplesingen varierer litt med forskjellige skjermlesere, og brukertesting viste at det kunne være vanskelig å få med seg det hele ordet som ble autofullført. Derfor har vi lagt til aria-describedby, som peker på det første ordet i nedtrekkslisten. Dette er det samme ordet vi bruker for autofullfør. Dermed blir hele ordet lest opp når et nytt ord autofullføres, men ikke for hvert enkelt tastetrykk.

Tastaturinteraksjon

Props