Auta mobiilikäyttäjää, tarjoa siirtymälinkki sivun sisältöön

Yllättäen monet verkkosivustojen esteettömyysohjeistukset ovat nousemassa uuteen arvostukseen, kun sivustoja rakennetaan mobiilikäyttöä varten.

Yksi mielenkiintoinen esimerkki on sivustolla piilotettu, mutta näkövammaisen käyttäjän avuksi tehty siirry sivun sisältöön -linkki.

Näkövammaista sivuston käyttäjää auttaa, jos sivun alkuun laitetaan siirtymälinkki suoraan sivun varsinaisen tekstiosuuden alkuun.

Koska ruudunlukuohjelman käyttäjä joutuu selaamaan sivuston sisällön nuolilla rivi kerrallaan, siirtymälinkki suoraan sivun sisältöön helpottaa sivuston käyttöä. Tällöin ei tarvitse selata läpi kaikkia linkkejä, vaan voi hypätä suoraan sisällön alkuun.

Siirtymälinkin voi toteuttaa esimerkiksi näkymättömällä kuvalinkillä, jota on käytetty tällä sivulla.

Kun sivustoja tehdään mobiililaitteita varten, kohdataan samoja ongelmia suurennusohjelmaa käyttävä näkövammainen. Mobiililaitteessa sivustoa selataan vain alaspäin. Silti siinä pitäisi näkyä kaikki sivuston tieto ilman, että mitään jää piiloon oikean reunan taakse.

Sivuston pää- ja muut linkit voidaan laittaa allekkain. Tämä ja muut käytettävyyttä lisäävät ratkaisut tekevät sivustosta miellyttävämmän käyttää.

Yksi ratkaisu on siirtymälinkki sivun sisältöön. Sitä ei näytetä sivustolla, mutta mobiililaitteella linkki näkyy. Tällöin käyttäjä, joka ei halua lukea linkkilistoja, voi hypätä suoraan tekstisisältöön.

Monet mobiililaitteiden käyttäjien kokemat ongelmat on jo ratkaistu, kun sivusto on tehty esteettömäksi. Ongelmat ovat samoja, joita näkövammaiset käyttäjät ovat kohdanneet eri sivustojen kanssa.

Mikään yksittäinen ratkaisu ei ole ratkaisu kaikkeen. Sivustojen moninaisuus ja erilaiset tarpeet vaativat, että niiden tekijöillä on oltava useampia vaihtoehtoja, joilla he voivat sivustojen pulmatilanteita ratkaista.

Esimerkki siirtymälinkistä

Sivulla

<a href=";#sisaltoon";><img src=";../../images/lapinakyva2.png"; alt=";Suoraan sisältöön"; class=";apulinkit";></a></a>

....

css tiedostossa

.apulinkit {

text-indent: -9000px;

width: 0.1px;

height: 0.1px;

}

Ja sama mobiili css tiedostossa

.apulinkit {

text-indent: 10px;

width: 50px;

height: 20px;

}