Tabs är en uppsättning flikar (med eller utan ikoner) som låter användaren navigera mellan olika typer av sidinnehåll.
Innehållsförteckning
| Innehållsförteckning |
|---|
...
Exempel
En demo implementation i ramverkslös javascript med fokus på tillgänglighet och progressiv förbättring. Inspirerad från: https://inclusive-components.design/tabbed-interfaces/
...
Designspecifikation
Navigationskomponenten flikar kan användas med eller utan ikoner.
Flikar med ikoner: Aktiv flik har grå text + ikon mot vit bakgrund för att särskilja från icke-valda flikar med ljusblå bakgrund.
Flikar utan ikoner: Aktiv flik har grå text mot vit bakgrund för att särskilja från icke-valda flikar med ljusblå bakgrund.
I mobil används en dropmeny istället för flikar.
Bild: flikar med ikoner
Bild: flikar utan ikoner
Bild: Dropmeny används istället för flikar i mobil
Do’s and Don’ts
-
Tillgänglighet
Mobilläge: Om flikar används i mobilläge så kan de hända att texten på flikarna blir väldigt små eller förkortade och i båda fallen blir de svårt för användaren att tydligt förstå respektive flik. Flikar med enbart ikoner är inte heller att föredra då det inte alltid är tydligt vad ikonen representerar. I sådana fall ska hellre en dropdown meny användas för att lättare kunna navigera som mobilanvändare.
Research på komponenten
-
Relaterade resurser/komponenter
Status
...
Status
...
| Status | ||||
|---|---|---|---|---|
|
...
Publicerad
...
2020-01-18
...
Senast uppdaterad
...
|
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.
Publicerad |
|
|---|---|
Senast uppdaterad |
|