Service navigation (Palvelunavigaatio)
Palvelunavigaatiota käytetään jonkin sivusto-osion eri alasivujen tai alanäkymien välillä liikkumiseen.
Saavutettavuus ja käytettävyys
- Navigaatioelementtien tekstisisältöjen tulee olla kuvaavia, ja ne on hyvä pyrkiä pitämään mahdollisimman lyhyinä. Kapean ruudun varianttia käytettäessä navigaation avaavan/sulkevan painikkeen tekstin tulee niin ikään olla kuvaava ja ytimekäs.
- Ruudunlukijasaavutettavuuden varmistamiseksi tulee huolehtia, että yksittäisille navigaatioelementeille (linkit) asetetaan asianmukaiset aria-attribuutit: aria-current tällä hetkellä aktiiviselle sivulle, aria-label mikäli halutaan välittää linkin tekstisisällön ulkopuolista informaatiota ja aria-disabled mikäli linkki on estetty.
- Komponentille tulee antaa ylätason aria-label, joka kertoo ruudunlukijalle navigaation kontekstin ja tarkoituksen.
- Palvelunavigaatiolle on lisäksi hyvä antaa HTML-id, jotta siihen voidaan liikkua suoraan esimerkiksi SkipLink-navigaatioelementeistä.
Mistä komponentti koostuu
Palvelunavigaatio on navigaatioelementti, jonka sisällä on lista. Komponentin tekninen toteutus mahdollistaa sen, että lista voi sisältää tavanomaisten linkkien lisäksi esimerkiksi painikkeita tai muita semanttisia elementtejä. Kaikki listan elementit ovat kuitenkin semantiikasta huolimatta visuaaliselta tyyliltään samanlaisia. Listan elementit eivät ole toisilleen hierarkisesti alisteisia vaan ne kaikki ovat samalla tasolla.
Kapeille ruuduille suunnitellussa variantissaan komponentti sisältää painikkeen, josta varsinainen navigaatioelementti voidaan näyttää ja piilottaa.
Koko ja käyttö
Navigaatioelementtien sisällä on yllä olevan koodiesimerkin mukaisesti suunniteltu käytettävän RouterLink-komponenttia, joka voidaan semanttisesti renderöidä minä tahansa komponenttina kuten painikkeena tai jonkin kirjaston omana linkkikomponenttina. Tutustu komponentin tekniseen dokumentaatioon saadaksesi lisää esimerkkejä RouterLinkin käytöstä.
Palvelunavigaatio asemoidaan tavallisesti sivun vasempaan palstaan, sisältöalueen ollessa sen oikealla puolella. Se ottaa sivuttaissuunnassa kaiken se tilan, joka sille on tarjolla ja täten sen leveyttä kontrolloidaan ympäröivän elementin leveyttä säätämällä. Pienillä ruuduilla (mobiililaitteet) käytetään komponentista niille tarkoitettua varianttia ja asemoidaan komponentti sivun varsinaisen sisältöalueen yläpuolelle.
Palvelunavigaatio soveltuu käyttöön hyvin silloin, kun navigaation linkit ovat hierarkisesti kaikki samalla tasolla ja navigoitava sivusto on tyyliltään sovellusmainen (ks. sähköpostiohjelman tyylinen esimerkki yllä). Jos navigaation on tarpeen sisältää alasivuja tai -kategorioita, tulee käyttää sivunavigaatio-komponenttia.
Pienen ruutukoon variantti
Mobiililaitteilla palvelunavigaatio voidaan avata ja sulkea painiketta painamalla