Komponenter
Tabs
Tabs lar brukerne navigere mellom relaterte deler av innholdet, der én del vises om gangen. Dette er en effektiv måte å organisere og presentere relatert innhold på samme side.
Dette må du sjekke selv
Hver fane skal ha et unikt og tilgjengelig navn
Pass på at hver enkelt fane har et tydelig, tilgjengelig og meningsbærende navn.
Unngå bruk av ikon alene, uten tekst
Forsøk å unngå bruk av kun ikoner i faner, er det likevel behov for det, så pass på at hver fane har et tilgjengelig meningsbærende navn. Sørg for at innholdet er tilgjengelig for eksempel via en tilgjengelig tooltip på tab. Bruker du ikoner sammen med tekst bør du sørge for at de er markert som dekorative eller har en egen tilgjengelig tittel.
Test med tastatur
Sjekk at du kan
- nå fanegruppen med Tab
- bruke piltaster for å navigere mellom fanene
- flytte markering til første fane med Home
- flytte markering til siste fane med End
- aktivere fane med både Mellomrom og Enter
- navigere til åpent innhold (
tabpanel) med tab
Designsystemet ivaretar
- korrekte roller på alle elementer med
role="tab",role="tablist"ogrole="tabpanel" - korrekt status på alle elementer med
aria-selected - korrekt lenking mellom elementer med
aria-controlsogaria-labelledby - 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 fanene.
- Størrelse og skalering håndteres av designsystemets størrelsessystem. Dersom du avviker fra dette, må du kontrollere at fanene fungerer ved forstørring av tekst og bruk av skjermforstørrer, uten tap av informasjon eller funksjonalitet.