Wizard navigation (Vaihenavigaatio)
Vaihenavigaatiota käytetään vaiheistetun lomakkeen tai muun vastaavan käyttöliittymän eri vaiheiden esittämiseen ja niiden välillä siirtymiseen.
Saavutettavuus ja käytettävyys
- Komponentin otsikon ja navigaatioelementtien tekstisisältöjen tulee olla kuvaavia, ja ne on hyvä pyrkiä pitämään mahdollisimman lyhyinä.
- Ruudunlukijasaavutettavuuden varmistamiseksi tulee huolehtia, että yksittäisille navigaatioelementeille (linkit) asetetaan asianmukaiset aria-attribuutit: aria-current tällä hetkellä aktiiviselle vaiheelle, aria-label kertomaan mikäli vaihe on suoritettu ja aria-disabled mikäli linkki on estetty. Estettyjen linkkien tulee kuitenkin olla näppäimistökäyttäjien saavutettavissa.
- Komponentille tulee antaa ylätason aria-label, joka kertoo ruudunlukijalle vaihenavigaation kontekstin ja tarkoituksen.
- Vaihenavigaatiolle on lisäksi hyvä antaa HTML-id, jotta siihen voidaan liikkua suoraan esimerkiksi SkipLink-navigaatioelementeistä.
- Linkkejä klikattaessa vaihenavigaatiota käyttävän sovelluksen on huolehdittava ruudunlukijan saavan täsmällisen tiedon siitä, että siirryttiin uuteen näkymään.
Mistä komponentti koostuu
Vaihenavigaatio 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 esitetään vertikaalisena polkuna, jota käyttäjä kulkee ylhäältä alaspäin.
Kapeille ruuduille suunnitellussa variantissaan komponentti sisältää painikkeen, josta varsinainen navigaatioelementti voidaan näyttää ja piilottaa.
Käyttö ja asemointi
Navigaatioelementtien sisällä on 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ä.
Vaihenavigaatiota on tarkoitettu käytettäväksi yksinomaan vaiheistettujen lomakkeiden tai muiden vastaavien käyttöliittymien (englanniksi 'wizard') eri vaiheiden esittämiseen ja niiden välillä siirtymiseen. Vaihenavigaation jokaiselle vaiheelle voidaan määritellä tila, jonka perusteella vaihe on joko avoinna siirryttäväksi tai vielä toistaiseksi estetty. Lisäksi vaihe voidaan määritellä suoritetuksi, jolloin sen yhteydessä näytetään check-merkki.
Vaihenavigaatio asemoidaan tavallisesti sivun vasempaan palstaan, lomakkeen ollessa sen oikealla puolella. Komponentti 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.
Vaihenavigaatio pienillä näytöillä
Mobiililaitteilla vaihenavigaatio voidaan avata ja sulkea painikkeesta.