Tabs

Tabs är en uppsättning flikar (med eller utan ikoner) som låter användaren navigera mellan olika typer av sidinnehåll.

Open

1177

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Med och utan ikoner

En tab kan visas med eller utan en ikon.

Med notifikationer

En tab kan innehålla en Notification badge för att informera användaren om att det finns oläst eller ej hanterad information. Notifikationen ska ligga inuti tab, till höger om texten.

Tillgänglighet

WCAG-kriteriet 2.1.1
Se till att det går att navigera med tangentbord: Se till att användaren kan nå alla interaktiva element på sidan med tangentbordsnavigering. (Nivå A)

WCAG-kriteriet 2.1.2
Se till att markören inte fastnar vid tangentbordsnavigation: Användaren ska kunna nå alla interaktiva element på sidan med tangentbord och fokusmarkering utan att fastna. (Nivå A)

WCAG-kriteriet 2.4.3
Fokusordning: Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokusbara komponenter få fokus i en ordning som är logisk. (Nivå A)

WCAG-kriteriet 2.4.7
Tydlig fokusmarkering: Se till att alla interaktiva element som användaren kan tabba till har en tydlig fokusram. Den ska vara minst 3:1 i kontrastvärde. (Nivå AA)

WCAG-kriteriet 1.4.1
Använd inte bara färg för att förmedla information eller förändringar.

WCAG-kriteriet 1.4.3
Kontrast på text: Se till att liten text har ett kontrastvärde av minst 4.5:1 mot bakgrunden, och stor text minst 3.0:1. Detta gäller även länkar. (Nivå AA)

WCAG-kriteriet 1.4.11
Kontrast på icke-textobjekt: Grafik, så som ikoner, komponenter och andra informationsbärande grafiska element ska ha kontrast värde på minst 3.0:1. (Nivå AA)

WCAG-kriteriet 1.4.12
Det går att öka avstånd mellan tecken, rader, stycken och ord: Radavstånd ska kunna ökas minst 1,5 gånger teckensnittets storlek. Teckenavstånd ska kunna ökas minst 0,12 gånger teckensnittets storlek. Avståndet mellan ord ska kunna ökas minst 0,16 gånger teckensnittets storlek. (Nivå AA)

WCAG-kriteriet 1.3.4
Innehåll presenteras rätt oavsett skärmens riktning: Innehåll ska kunna visas korrekt oavsett om användaren använder en liggande eller stående layout. (Nivå AA)

WCAG-kriteriet 1.3.1
Ange i kod vad sidans olika delar har för roll: Se till att korrekta roller används för komponenten, samt att relaterade delar som tabpanel har en tydlig relation till sin respektive tab-flik. (Nivå A)

WCAG-kriteriet 2.5.3
Se till att text på knappar och kontroller överensstämmer med maskinläsbara etiketter: Detta är viktigt för användare som använder sig utav hjälpmedel som röststyrning. Se till att den maskinläsbara etiketten matchar den synliga. Använd bara samma maskinläsbara etikett för flera kontroller om de gör exakt samma sak.

WCAG-kriteriet 1.4.4
Förstora utan problem: Se till att det går att förstora textens dubbla höjd och bredd utan problem. Det ska även gå att zooma in 200% utan att text överlappar eller går sönder.

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.