Pagination (Sivutus)
Sivutus on komponentti, jonka avulla käyttäjä voi navigoida useille sivuille jaettua sisältöä. Sivustusta käytetään esimerkiksi hakutulosten näyttämiseen.
Sivu: 2
Saavutettavuus ja käytettävyys
- Tieto sivun vaihdosta välitetään ruudunlukijalle. Komponentissa on visuaalisesti piilotettu kenttä tätä tarkoitusta varten.
- Mikäli sivuja on paljon, käyttäjälle voidaan tarjota mahdollisuus sivunumeron syöttämiseen erilliseen sivunumerokenttään.
- Ruudunlukijalle sivunumeron tietokentän teksti kannattaa antaa ilman erikoismerkkejä, esimerkiksi "Sivu 1 kautta 20", sillä erikoismerkkien lukutapa saattaa vaihdella.
- Sivutuskomponentin yhteyteen on hyvä lisätä sisältöön vievä linkki tai hyppylinkki, jos näppäimistöä käyttäen matka sivutuskomponentista takaisin sisältöön on pitkä.
Mistä komponentti koostuu
Sivutus koostuu kahdesta nuolipainikkeesta, tietokentästä sekä valinnaisesta sivunumeron syötekentästä. Nuolinpainikkeilla käyttäjä voi siirtyä yhden sivun kerrallaan eteen- tai taaksepäin. Tietokenttä on nuolipainikkeiden välissä ja sen tarkoitus on kertoa käyttäjälle nykyisen sekä viimeisen sivun numerot. Syötekentän avulla käyttäjä voi siirtyä suoraan haluamalleen sivulle.
Koko, käyttö ja variaatiot
Työpöytä- ja mobiilikäyttöön on määritelty erikseen omat koot sivutuskomponentista. Mobiilinäytöille suunnitellussa versiossa syötekenttä on nuolipainikkeiden alapuolella. Komponentin oletusvariaatio ei sisällä syötekenttää. Syötekenttää voidaan käyttää, jos sivuja on paljon.
Komponentti tulee sijoittaa sivutettavan sisällön alapuolelle.
Sivun vaihtuessa voi ruudunlukijalle antaa sisällöstä lisätietoa, esimerkiksi "Sivu 2 kautta 5. Näytetään tulokset 10 viiva 20.".
Normaali käyttötapaus
Esimerkissä sivun vaihtuessa ruudunlukijalle annetaan tarkempaa tietoa sivun sisällöstä