Kaksi nuorta miestä tietokoneen äärellä, kuvassa näkyy myös Alt-teksti yläreunassa.

Opas saavutettavien verkkosivujen ja sovellusten suunnitteluun näkövammaisille

27.05.2024

Viime vuosina on alettu kiinnittää entistä enemmän huomiota siihen, miten erilaiset käyttäjäryhmät, kuten vammaiset, pystyvät käyttämään digitaalisia palveluja. Puhutaan saavutettavuudesta, jolla pyritään siihen, että kaikki pystyvät hyödyntämään digitaalisia palveluja itselleen sopivalla tavalla. Näkövammaisten kohdalla ensisijaisen tärkeitä ovat graafisen sisällön kuvaaminen myös teksti- tai äänimuodossa, käytettävyys näppäinkomennoilla, käyttöliittymän elementtien nimeäminen ja sisällön johdonmukainen jaottelu.

Saavutettavuus saattaa vaikuttaa aluksi monimutkaiselta, mutta kun perusasiat ovat hallinnassa, ei saavutettavuuden huomiointi sovellusten kehittämisessä ole vaikeaa. Jo pienilläkin asioilla voidaan parantaa sovelluksen saavutettavuutta merkittävästi.

On myös hyvä muistaa, että näkövammaiset ovat vain yksi ryhmä, joka hyötyy saavutettavuudesta. Vaikka eri käyttäjäryhmien tarpeet voivat olla osittain erilaiset, kun saavutettavuus huomioidaan, tulee sovelluksista lopulta parempia kaikkien käyttäjien kannalta.

Näkövammaisten apuvälineet

Sokean tai vaikeasti näkövammaisen henkilön tärkeimmät apuvälineet ovat ruudunlukuohjelma ja pistenäyttö. Työssä esiteltiin tietokoneille sekä iOs ja Android-järjestelmille saatavia ruudunlukuohjelmia ja annettiin tietoa ruudunlukijan käyttäjille saavutettavien käyttöliittymien suunnittelusta.

Ruudunlukuohjelma muuttaa näytöllä näkyvän tekstin synteettiseksi puheeksi tai pistekirjoitukseksi, jota luetaan erilliseltä pistenäytöltä. Ruudunlukuohjelmat eivät pysty tulkitsemaan minkäänlaista grafiikkaa. Tästä syystä on tärkeää, että kaikilla käyttöliittymän elementeillä on myös tekstimuotoiset vastineet.

Kuville on tärkeää lisätä Alt-teksti, joka kertoo lyhyesti tekstimuodossa, mitä kuvassa on. Alt-tekstin avulla ruudunlukuohjelman käyttäjä tietää, mistä kuvassa on kyse.

Sama koskee myös muita elementtejä kuten linkkejä ja painikkeita, joilla on syytä olla tekstimuotoiset nimet. Jos esimerkiksi painike on yksilöity vain kuvan perusteella, ruudunlukuohjelma kertoo sen kohdalla vain, että kyseessä on painike. Näin ollen käyttäjä ei voi tietää, mistä painikkeesta on kyse.

Verkkosivujen saavutettavuus

Yksi merkittävä saavutettavuuden kehityskohde, johon työssä keskityttiin, ovat verkkosivustot ja selaimella käytettävät digitaaliset palvelut. Ne ovat koko ajan yleistyneet ja siksi niiden käytön tulisi olla saavutettavissa monenlaisille ihmisille. Verkkosivujen osalta saavutettavuus voidaan jakaa kahteen osa-alueeseen: sivuston luettavuus sekä rakenne ja navigointi.

Yhtenä tärkeimmistä luettavuuteen liittyvistä asioista voidaan mainita elementtien nimeäminen ja tekstin merkitys. Ruudunlukuohjelma ei pysty tulkitsemaan kuvia tai graafista sisältöä, minkä vuoksi on tärkeää, että sellaiselle sisällölle on olemassa tekstimuotoinen vastine. Esimerkiksi kuville pitää määrittää Alt-teksti, joka on lyhyt vaihtoehtoinen tekstikuvaus kuvan sisällöstä. Videoille pitäisi olla saatavilla kuvailutulkkaus eli teksti- tai äänimuotoinen kuvaus videosta.

Työssä suositellaan myös HTML-elementtien käyttöä niiden standardien mukaisesti oikeaan tarkoitukseen. Ruudunlukuohjelmat tunnistavat ja osaavat käsitellä perusverkkosivuelementtejä, joten on tärkeää antaa elementeille nimi, joka kuvaa niiden käyttötarkoitusta. On myös syytä varmistaa, ettei elementtien toimintaa tai luonnetta muuteta liikaa CSS-tyylimäärityksillä tai muulla koodilla, sillä se saattaa tehdä ne ruudunlukijalle tunnistamattomiksi.

Kun suunnitellaan sivuston ulkoasua, on saavutettavuudenkin kannalta tärkeä pyrkiä tekemään sivut mahdollisimman helposti luettaviksi ja selattaviksi. Ruudunlukuohjelman käyttäjä käsittelee tietokonetta ensisijaisesti näppäimistön avulla.

Kun näkövammainen käyttää ohjelman tarjoamia selauskomentoja, hän pystyy navigoimaan eri elementtien välillä ja ohjelma lukee tekstin ääneen tai tulostaa sen pistenäytölle. Ohjelma kertoo käyttäjälle myös elementtien tyypin, kun niiden kohdalle siirrytään. Näin käyttäjä tunnistaa esimerkiksi painikkeet, otsikot, tekstikentät, linkit ja erilaiset interaktiiviset elementit, joita verkkosivuilta löytyy.

Jotta käyttäjä ymmärtää, mihin tarkoitukseen eri elementit on tehty, ne pitää nimetä kuvaavalla nimellä. Esimerkiksi linkkien nimen tulisi kertoa, minkä sivun ne avaavat, painikkeen nimen tulisi kertoa siihen liittyvä toiminto, ja tekstikenttien nimikkeet kertovat, mitä tietoa niihin pitää syöttää.

Myös sisällön jaottelulla on paljon merkitystä. Erityisesti HTML-kielen otsikkoelementit auttavat sivun eri osien välillä navigoimista, sillä ruudunlukijat tarjoavat pikakomentoja otsikoiden välillä liikkumiseen.

Samoin komennoilla voi siirtyä myös monien muiden elementtien kohdalle, jolloin ne helpottavat navigoimista ruudunlukuohjelmalla. Esimerkiksi listaelementit, sivun pääsisältöä tarkoittava main-elementti sekä navigaatioelementti helpottavat sivulla liikkumista.

Jaottelu on tärkeää siksi, että ruudunlukijan käyttäjä ei kykene tarkastelemaan koko sivua samaan tapaan, kuin näkevä ihminen silmäilee sitä näytöltä. Ruudunlukijalla voi tarkastella vain niitä elementtejä, joiden kohdalle sen kohdistus on siirretty. Siksi jaottelu vaikuttaa paljon verkkosivun käytettävyyteen ja hahmotettavuuteen.

Koska monet verkkosivuelementit on mahdollista nimetä ja ruudunlukuohjelma tunnistaa ne, jo pienillä teoilla voidaan parantaa sivun saavutettavuutta näkövammaisille. Tärkeintä on ottaa suunnitteluvaiheessa mahdollisimman hyvin huomioon erilaiset käyttäjäryhmät ja erilaiset tavat käyttää tietotekniikkaa.

Mobiilisovellusten saavutettavuus

Nykyisin mobiililaitteet ovat entistä yleisempi kanava digitaalisten palveluiden käyttöön. Näin ollen mobiilisovellusten saavutettavuus on yksi tärkeimmistä saavutettavuuden osa-alueista.

Sokeiden ja vaikeasti heikkonäköisten käyttäjien kannalta keskeistä on, että sovelluksia pystyy käyttämään ruudunlukuohjelman avulla. Merkittävissä mobiililaitteiden käyttöjärjestelmissä Androidissa ja iOS:ssa on valmiina ruudunlukuohjelma. iOS:ssa ruudunlukuohjelmana on VoiceOver ja Androidissa Talkback.

Kosketusnäytöllisillä mobiililaitteilla ruudunlukuohjelman käyttö perustuu ohjelman omiin kosketuseleisiin. Eleet vaihtelevat hieman ohjelmien välillä, mutta tyypillistä on, että ruutua voi tutkia sormea liikuttelemalla ja erilaiset käyttöliittymän elementit aktivoidaan napauttamalla näyttöä kahdesti. Lisäksi ohjelmissa on erilaisia pyyhkäisyeleitä käyttöliittymän selaamiseen. Esimerkiksi pyyhkäisy yhdellä sormella oikealle vie kohdistuksen seuraavaan elementtiin ja oikealta vasemmalle edelliseen.

Näiden kosketuseleiden toimivuus on tärkeä asia mobiilisovellusten saavutettavuudessa näkövammaisten kannalta. Kun kehitetään sovellusta, on syytä varmistaa, että kaikkiin elementteihin pääsee ruudunlukuohjelman kosketuseleillä ja että ne ovat aktivoitavissa, kun ruudunlukuohjelma on käytössä.

Myös mobiilisovelluksen rakenne vaikuttaa sen käytettävyyteen ruudunlukuohjelmalla. Koska ruudunlukuohjelman käyttäjä ei pysty niin sanotusti silmäilemään näyttöä, vaan käsittelee vain yhtä käyttöliittymän elementtiä kerrallaan, on tärkeää, että sovelluksella on selkeä rakenne. Esimerkiksi otsikoiden käyttö on suositeltavaa, koska ne nopeuttavat selaamista. Jos sovelluksessa on paljon sisältöä, se on hyvä jakaa esimerkiksi eri välilehdille, jotta se on helpompi löytää.

Lähteet

Saavutettavuusvinkit. 2024. Youtube: Kolme vinkkiä ruudunlukuohjelman huomioimiseen

Kukonlehto, J. & Rihti, V. 2024. Opas näkövammaisille saavutettavien verkkosivujen ja sovellusten suunnitteluun. Opinnäytetyö. Tietojenkäsittelyn koulutus. Turun ammattikorkeakoulu URN:NBN:fi:amk-2024051712819