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.
För mer info om dropdown menyer läs: Dropmeny - 1177
Research på komponenten
-
Relaterade resurser/komponenter
Status
Status | FÄRDIG VALIDERAD |
---|---|
Publicerad | 2020-01-18 |
Senast uppdaterad | 2020-01-20 |