Tag

Retningslinjer for bruk

Bruk tag når

• du skal merke eller gruppere informasjon etter nøkkelord
• du vil la brukeren filtrere på kategorier
• du trenger en kort og lettlest markør i grensesnittet

Unngå tag når

• informasjonen krever lengre forklaringer
• farge alene er brukt for å formidle mening
• du ønsker et interaktivt element som tar brukeren til en ny side eller løsning (bruk heller button)

Skriv korte og konsise tags

Sørg for at teksten i tagen er klar og konsis, det er viktig å bruke korte tekster for enkel skanning. Bruk to ord kun om det er nødvendig for å beskrive statusen eller skille den fra en annen tag. Dersom den skal bli lest av skjermleser må den også inkludere kontekst.

Gjør slik

Skriv tydelige og korte tekster som gir mening i kontekst

Unngå

Unngå for korte og uklare tekster uten kontekst

Ikke bruk kun farge for å skille tags fra hverandre

Farge bør ikke brukes som det eneste middelet for å skille tags fra hverandre. Sørg for at informasjonen som tillegges fargen også kommer tydelig frem i innholdet, via tekst og ikon. Dersom du bruker egendefinerte farger, må kravene til minimum kontrast overholdes.

Gjør slik

Bruk tekst og farge sammen for å tydeliggjøre status

Unngå

Unngå å bruke kun farge for å skille tags fra hverandre

Bruk av ikon i tags

Dersom du bruker ikon skal dette alltid vises på venstre side av teksten. Ikonet skal underbygge teksten i tagen. Ikke bruk tag med kun ikon, dette gjør det vanskelig for brukeren å skjønne betydningen.

Gjør slik

Bruk ikon sammen med tekst for å underbygge innholdet

Unngå

Unngå tag med kun ikon eller tag med ulogisk ikon

Universell utforming

Teksten må gi mening i kontekst

En tag bør alltid ha en kort og tydelig tekst som gir mening når den leses opp av skjermlesere. Ikke bruk generiske ord som “Ny” alene, men skriv for eksempel “Ny søknad” slik at sammenhengen blir forståelig.

Bruk aria-label for lukkbare tags

For lukkbare tags kan du sende inn en valgfri ariaLabel som gir skjermlesere mer informasjon. Denne vil da leses opp i stedet for selve teksten i tagen. Uten ariaLabel vil skjermleseren lese opp tekstinnholdet i tagen, etterfulgt av en standardbeskrivelse: “Klikk for å fjerne [tagtekst]”.

Ikke bruk farge alene

Fargen på en tag blir ikke opplest av skjermlesere og er ikke nok som meningsbærer for brukere med svakt eller dårlig syn. Sørg derfor for at informasjonen fargen skal formidle også kommer tydelig frem i tekst eller ikon. Du kan også legge til skjult hjelpetekst som kun blir lest opp av skjermlesere.

Tags som knapper

Når en tag kan lukkes eller klikkes, får den rollen som en knapp og skal kunne fokuseres og aktiveres med tastatur. Sørg for at dette fungerer konsekvent.