Komponenter
Tag
Tag er en merkelapp som kan brukes til å kategorisere elementer eller kommunisere fremdrift, status eller prosess. Tags kan gi brukeren et raskere overblikk over innholdet.
Dette må du sjekke selv
Tag som inneholder kun et ikon uten synlig tekst
Gi ikonet et tilgjengelig navn med aria-label. Navnet skal beskrive statusen eller betydningen. Skjul ikonet for skjermlesere med aria-hidden="true"dersom taggen allerede har synlig navn.
Taggens status eller betydning skal kommuniseres med mer enn bare farge
Bruk en tydelig og synlig etikett som beskriver taggens betydning. Brukeren skal ikke måtte tolke farge eller ikon alene for å forstå informasjonen.
En gruppe med tagger skal ha et tilgjengelig navn og bør være kodet som en semantisk gruppe
Viser du flere tag sammen, anbefaler vi å bruke en ul-liste med én li per tag. Da leser skjermlesere dem opp som en liste i stedet for én sammenhengende tekst.
Gi det omsluttende elementet (ul) et tilgjengelig navn med aria-label eller aria-labelledby.
Sørg også for at hver enkelt tag har et tilgjengelig navn.
En tag skal ikke utføre en handling
Bruk en tag til å vise informasjon, eventuelt lenke til en kategori eller kolleksjon, ikke til å utføre handlinger. Bruk i stedet chip, button eller en annen interaktiv komponent dersom brukeren skal kunne aktivere eller endre noe.
Unngå lange tekststrenger i tag når det er mulig
Lange tekststrenger kan være vanskelige å lese i en tag. 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.
Designsystemet ivaretar
- 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 alle varianter av taggen.
- Størrelse og skalering håndteres av designsystemets størrelsessystem. Dersom du avviker fra dette, må du kontrollere at taggen fungerer ved forstørring av tekst og bruk av skjermforstørrer, uten tap av informasjon.
Test med tastatur
Sjekk at du kan
- nå lenke-tag med Tab
- aktivere lenke-tag med Enter