Tabs
Välilehtikomponentti sisällön jakamiseksi eri näkymiin.
Julkaistu versiossa 7.1.0
Esikatselu
Käyttötarkoitus
Välilehtien avulla jaetaan samaan aihealueeseen liittyvä sisältö eri näkymiin. Huolehdi siitä, että yhdellä välilehdellä esitetty sisältö muodostaa ymmärrettävän ja itsenäisen kokonaisuuden. Välilehdeltä toiselle siirtyminen lisää asiakkaan muistikuormaa ja heikentää käytettävyyttä, jos asiakas joutuu vertailemaan välilehtien sisältöjä. Laita tällaisissa tilanteissa vertailtava sisältö samaan näkymään.
Jos kaikki välilehdet eivät mahdu näkymään kerralla, välilehtiin tulee sivusuuntainen vieritys. Pyri välttämään tällaista tilannetta pitämällä välilehtien määrä pienenä ja välilehtien nimet lyhyinä. Kaikki asiakkaat eivät välttämättä löydä piilossa olevia välilehtiä.
Tee näin
- Nimeä välilehdet lyhyesti 1-2 sanalla.
- Nimeä välilehdet selkeästi. Asiakkaan tulee pystyä päättelemään nimen perusteella mitä välilehden takaa löytyy.
- Järjestä välilehdet loogisesti. Laita eniten käytetty välilehti ensimmäiseksi.
- Näytä sivulle siirryttäessä ensimmäinen välilehti avattuna.
Älä tee näin
- Älä käytä liian pitkiä välilehtien otsikoita.
- Älä käytä välilehtirakennetta, jos asiakkaan ensisijainen tarkoitus on vertailla eri välilehdillä olevaa sisältöä keskenään.
- Älä käytä yli kuutta välilehteä. Mobiililaitteella välilehtien määrä kannattaa pitää vielä pienempänä.
- Älä käytä välilehtiä navigaationa, vaan jakamaan samaan aihealueeseen liittyvä tieto pienempiin osioihin. TabNav-komponentti soveltuu navigaation toteuttamiseen.
- Älä piilota tai estä (disabloi) välilehteä, kun näytettävää sisältöä ei ole. Näytä mieluummin asiakkaalle, että näytettäviä tietoja ei ole tai sisältö ei ole käytettävissä.
Saavutettavuus
Komponentti toteuttaa saavutettavan välilehtirakenteen. Välilehtiä ei oletuksena aktivoida, kun kohdistus siirtyy välilehtipainikkeeseen, vaan asiakkaan
pitää itse aktivoida välilehti. Välilehden saa aktivoitumaan kohdistuksella käyttämällä selectionFollowsFocus-propia.
Kun kohdistus on välilehdissä, niitä voi selata nuolinäppäimillä. Välilehden sisältöön pääsee siirtymään Tab-näppäimellä. Jos välilehden
sisällössä ei ole kohdistettavia elementtejä, komponentti siirtää kohdistuksen sisällöt ympäröivään div-elementtiin Tab-näppäimellä.
Mikäli sisällössä on yksikin kohdistettava elementti, Tab-näppäin toimii normaaliin tapaan.
| Näppäin | Toiminto |
|---|---|
| Tab | Siirtää kohdistuksen välilehtipainikkeisiin tai välilehden sisältöön. |
| Enter | Valitsee välilehden ja näyttää sen sisällön. |
| Välilyönti | Valitsee välilehden ja näyttää sen sisällön. |
| Home | Siirtää kohdistuksen ensimmäiseen välilehtipainikkeeseen. |
| End | Siirtää kohdistuksen viimeiseen välilehtipainikkeeseen. |
| ← | Siirtää kohdistuksen edelliseen välilehtipainikkeeseen, kun kohdistus on välilehtipainikkeissa. Ensimmäisen välilehden kohdalla hyppää viimeiseen välilehteen (focus trap). |
| → | Siirtää kohdistuksen seuraavaan välilehtipainikkeeseen, kun kohdistus on välilehtipainikkeissa. Viimeisen välilehden kohdalla hyppää ensimmäiseen välilehteen (focus trap). |
Välilehdet
Välilehtien perustapaus, joka tasautuu reunoihin kiinni. Välilehdet ja sisällöt ovat oletuksena 100% leveitä. Sisältöjen siisti tasaus ja välistys riippuu käyttökontekstista ja jää komponentin käyttäjän vastuulle.
Jos välilehden sisällä on asiakkaan huomiota vaativia sisältöjä, niitä voi tuoda lyhyesti välilehden nimen yhteyteen esim. Badge-komponentilla.
Joissain tapauksissa voi olla tarve käyttää tiiviimpiä välilehtiä. Saat tiiviimmän asettelun käyttöön size-propilla.
Vieritettävät välilehdet
Mikäli välilehdet eivät mahdu leveyssuunnassa käytettävälle näytölle, tulee niihin automaattisesti vieritysmahdollisuus. Tällöin oikeassa reunassa näytetään nuoli-ikoni, jota painamalla saa piiloon jääviä välilehtiä näkyviin.
Pyri pitämään välilehtien lukumäärä pienenä ja niiden nimet lyhyenä. Muista, että kaikki asiakkaat eivät välttämättä löydä piilossa olevia välilehtiä.
Vierityspainikkeet voi poistaa antamalla scrollable=false-arvon komponentille. Huom. tällöin toteuttajan vastuulle jää komponentin mahtuminen kapeille näyttökoilla.
Välilehdet ryhmittelevässä elementissä
Huomioi välilehtien ja erilaisten sisältöjen tasaus suhteessa elementin vasempaan ja oikeaan reunaan, jos käytät välilehtiä ryhmittelevän elementin (esim. kortin tai paneelin) sisällä.
Kaksitasoiset välilehdet
Pyri välttämään välilehtien jakamista usealle tasolle. Joskus tilanne voi kuitenkin vaatia toisen tason välilehtiä.
Erota tällöin sisempi välilehtirakenne visuaalisesti päätasosta käyttämällä sisemmissä välilehdissä size-propia.
Tiedon välittäminen välilehden valinnasta ja välilehtien kontrollointi
Huomioitavaa selaintuessa
- Tabien nuolet näytetään ja piilotetaan IntersectionObserverin avulla, jos ne eivät enää mahdu ruudulle. Lue lisää: IntersectionObserver(Avautuu uuteen välilehteen)