Komponenter
Chip
Chip er små, interaktive komponenter som lar brukerne styre hvordan de vil se innhold. For eksempel kan de brukes til å filtrere kategorier i et søkeresultat og vise hvilke filter som er aktive.
Gi beskjed ved endringer på siden
Hvis deler av siden oppdateres mens brukeren interagerer med chip, må vi sørge for at skjermleserbrukere får beskjed om det. Bruk en ARIA live region for å formidle endringer, for eksempel oppdatert antall treff eller annen dynamisk informasjon.
Dette må du sjekke selv
En gruppe av flere chips med input skal ligge i et fieldset som har et tilgjengelig navn
Gi fieldset et tilgjengelig navn ved å bruke enten legend, aria-label eller aria-labelledby.
En gruppe av flere chips som kan fjernes eller er klikkbare, bør ligge i en liste
Listen bør som oftest være uordnet. Gi gjerne listen en aria-label eller en tilhørende overskrift.
Unngå lange tekststrenger i chip når det er mulig
Lange tekststrenger kan være vanskelige å lese i en chip. Bruk korte og meningsbærende etiketter der det er mulig.
Hvis lengre tekst er nødvendig, kan det være aktuelt å avkorte den visuelle presentasjonen. Sørg for at hele innholdet fortsatt er tilgjengelig, for eksempel via en tilgjengelig tooltip.
Test med tastatur
Sjekk at du kan
- nå chip med Tab
- interagere med knappe-chip med både Mellomrom og Enter
- huke på eller av checkbox-chip med Mellomrom
- bytte til og velge radio-chip med piltaster
Designsystemet ivaretar
- Komponenten benytter semantiske html-elementer som input, label og button for å ivareta WCAG 4.1.2 Navn, rolle og verdi.
- Designsystemet inkluderer stiler for focus og hover, sjekk likevel at disse vises ved henholdsvis tastaturmarkering og musepeker-markering (mouseover).
- Kontrastforhold håndteres av fargesystemet i designsystemet. Dersom du avviker fra anbefalte fargetokens, må du kontrollere at kombinasjonen av tekstfarge og bakgrunnsfarge oppfyller kravene til kontrast for chipen.
- Størrelse og skalering håndteres av designsystemets størrelsessystem. Dersom du avviker fra dette, må du kontrollere at chip fungerer ved forstørring av tekst og bruk av skjermforstørrer, uten tap av informasjon eller funksjonalitet.