Flikar - 1177

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