Kuinka luoda saavutettavia verkkosivuja

Saavutettavuudella tarkoitetaan sitä, että verkkosivut ja mobiilisovellukset sisältöineen suunnitellaan sellaisiksi, että kuka tahansa voi käyttää niitä onnistuneesti. Saavutettavuus on myös yhä merkittävämpi menestystekijä digitaalisten palveluiden kehittämisessä ja käyttökokemuksessa.

Suunnittelijan ja kehittäjän rooli saavutettavissa digitaalisissa palveluissa

Verkkopalveluista puhuttaessa on hyvä tiedostaa, että palvelu tehdään saavutettavaksi juuri koodissa. Kehitystiimin jäsenten on ymmärrettävä sekä toisiaan että loppukäyttäjää, jotta palveluun saadaan esimerkiksi toimivat värikontrastit, responsiivinen tekstikoko sekä semanttisesti selkeä koodi, joka mahdollistaa käytön näppäimistöllä tai ruudunlukijalla.

Siksi päätimme digitaalisina suunnittelijoina uskaltautua Frontend Master -palvelun Web Accessibility -kurssille, jossa käydään läpi saavutettavuuden perusteet verkkosivujen toteutuksessa. Kurssin luento-osuus kestää noin kolme tuntia, mutta varasimme tähän yhden koulutuspäivistämme, jotta saimme myös kurssiin kuuluvat harjoitukset ja oheisopiskelun tehtyä samalla. Luento-osuudesta saimme myös paljon enemmän irti, kun välillä pysähdyimme keskustelemaan kurssin aiheista ja niistä esiin nousseista havainnoista ja kysymyksistä.

Nitorilla oppimista arvostetaan: jokaisella on mahdollisuus käyttää viisi koulutuspäivää vuodessa ja lisäksi käytämme työajastamme 10 prosenttia omien projektiemme kehittämiseen.

Saavutettavuuden perusteet

Verkkosivun saavutettavuus perustuu siihen, että myös ihmiset, joilla on jokin vamma, voivat tulkita, ymmärtää, liikkua, vuorovaikuttaa ja kontribuoida verkossa. Kurssin alussa luennoitsija kertoi esimerkkinä ihmisten turhautumisen veroilmoituksen täyttöön. Vaikka Suomessa veroilmoituksen täyttö on tehty käyttökokemukseltaan merkittävästi paremmaksi, pystyi tuohon turhautumisen kokemukseen silti samaistumaan. Näin kasvatettiin empatiaa ihmisiä kohtaan, joille digitaaliset palvelut tuottavat jatkuvasti haasteita.

Noin joka viidennellä meistä on nimittäin jokin vamma. Esimerkiksi Amerikassa todella monilla ihmisillä on näkövaikeuksia silmälaseista huolimatta, mikä ilmenee muun muassa sanojen ja kirjainten tulkitsemishaasteina. Näkö- ja kuulovammaisten lisäksi digitaalisten palveluiden tuottajien pitää huomioida myös esimerkiksi tarkkaavaisuushäiriöiset, oppimisvaikeuksien kanssa elävät, sekä ne ihmiset, joilla on fyysisiä vammoja, jotka vaikeuttavat esimerkiksi hiiren käyttöä tai tekevät siitä mahdotonta.

Verkkosivuja voikin navigoida todella monella eri tapaa. Esimerkiksi pelkällä näppäimistöllä liikkumalla, hiiren ja näytöllä olevan virtuaalinäppäimistön kautta, tai ottamalla avuksi päällä tai suulla ohjattavan ohjaimen. Heikkonäköisen tai sokean käyttäjän verkkosivut heräävät eloon ruudunlukijan kautta, jonka pohjalta kyseinen käyttäjä määrittelee koko selainkokemuksensa. Meille vähiten tunnettu apuväline oli ns. Single switch -kytkin, jossa yhdellä ainoalla näppäimellä voidaan käskyttää tietokonetta.

Saavutettavuuden kannalta on huomioitava, että internet on alusta alkaen suunniteltu saavutettavaksi – useat vanhemmalta näyttävät palvelut saattavat olla tästä näkökulmasta todella moderneja. Onkin hyvä muistaa, että kun sivu on suunniteltu saavutettavaksi, se on kaikkien kannalta parempi käyttää.

Näitä asioita opimme

Kurssin rakenne pohjautuu workshopin yhteydessä kuvattuun luentoon, jossa käsitellään läpi yksi aihealue ja sen jälkeen tehdään aiheeseen liittyvä käytännön tehtävä. Tehtävien ohessa käydään läpi WebAimin WCAG -tarkistuslistaa ja alla muutamia poimintoja aiheista, joihin perehdyimme.

Näppäimistöllä navigoiminen on motorisesti yksinkertaisempaa

Yksinkertainen tapa parantaa verkkosivun saavutettavuutta on kiinnittää huomiota sen navigoitavuuteen näppäimistöllä. Kun se onnistuu mutkattomasti, on sivusto usein ymmärrettävämpi myös ruudunlukijalle, tai oikeastaan ihan kenelle tahansa.

Kun Internetiä selataan näppäimistöllä, siirrytään tab-näppäimellä eteenpäin ja tab+shift -yhdistelmällä edelliseen elementtiin. Lisäksi käyttöä voidaan helpottaa tekemällä sivuston koodiin niin sanottuja piilotettuja elementtejä, jotka tulevat näkyviin vain, jos sivustoa lähtee käyttämään pelkän näppäimistön avulla. Toiminto “Skip to main content” on tyypillinen esimerkki tällaisesta suunnittelusta ja löytyy esimerkiksi Helsingin Sanomien verkkosivuilta.

Jotkut palvelut, kuten somekanavat, käyttävät myös pikanäppäimiä sivustolla navigoimiseen. Esimerkiksi Twitterissä pikanäppäimet saa kysymysmerkillä näkyviin. Jos sivustolla on käytössä pikanäppäimiä, näistä olisi hyvä pyrkiä tiedottamaan käyttäjiä mahdollisimman aikaisessa vaiheessa. Pikanäppäinten suunnittelussa tulee puolestaan kiinnittää huomiota siihen, että ne eivät mielellään olisi samoja kuin esimerkiksi tietokoneen käyttöjärjestelmän omat pikanäppäinyhdistelmät.

Ohjaa käyttäjän huomio oikeaan kohtaan

Elementit, joihin tab-näppäimen tai ruudunlukijan huomio eli fokus halutaan osoittaa, on eritelty koodissa. Pelkkä tekstisisältö divin sisällä ei riitä fokuksen tuomiseen, vaan se saadaan aikaan elementeillä, kuten hyperlinkki tai button. Tab-index -attribuutilla voidaan muuttaa fokus-sisällön järjestystä ja tehdä esimerkiksi yllämainittu “Skip to main content” -linkki.

Fokuksen pitäisi olla myös selkeä näkevälle käyttäjälle. Selaimet tekevät oletuksena kehyksen fokuksessa olevaan sisältöön. Harmillisesti fokuksen huomiointi saattaa unohtua, jos käyttöliittymän ulkoasua suunnitellaan kiinnittämättä huomiota saavutettavuuteen.

Ruudunlukija paljastaa verkkosivun toimivuuden

Ruudunlukija lukee verkkosivun sisällön käyttäjälle tämän puolesta. Mac-käyttäjät voivat ottaa ruudunlukijan suoraan käyttöönsä käyttöjärjestelmän tasolla laittamalla VoiceOverin päälle tai lataamalla selaimeensa ruudunlukija-ohjelman. Windows-käyttäjät voivat kokeilla esimerkiksi ilmaista NVDA-ruudunlukijaa.

Sivuston saavutettavuus tai sen puute tulee melko nopeasti esiin ruudunlukijaa käyttäessä. Esimerkiksi erilaisten lomakkeiden käyttö ja täyttäminen takkuaa, jos toiminnoissa ei ole käytetty semanttisesti oikeita HTML-elementtejä tai elementit on nimetty väärin.

Sivuston saavutettavuutta voi parantaa yksinkertaisilla käytännöillä

Internet on alusta alkaen suunniteltu saavutettavaksi ja interaktiiviset elementit, kuten hyperlinkit, button-painikkeet tai input-sisällöt eriteltiin koodiin jo alusta alkaen. Onkin hyvä muistaa käyttää niitä, eli viittaa elementteihin, kuten buttoneihin, niille kuuluvalla HTML-elementillä. Oikeiden elementtien käyttö tekee myös koodista helppolukuisempaa.

ARIA-attribuuttien avulla voidaan parantaa esimerkiksi sivuston komponentteihin liittyvää ohjeistusta (aria-describedby) tai ohjeistaa ruudunlukija lukemaan ääneen aktiivisesti tapahtuvia asioita. Näitä voidaan suunnitella esimerkiksi sisällön latauksen tai lomakkeen lähetyksen yhteyteen (aria live regions), jolloin käyttäjä tietää toiminnon olevan käynnissä tai valinnan menneen perille.

Kehittäjätyökaluista esimerkiksi VScode on hyvä saavutettavuuden kannalta, koska se osaa täyttää aria attribuutit automaattisesti, mikä nopeuttaa ja helpottaa niiden hyödyntämistä kehitystyössä.

Työkalut

Hyviä työkaluja saavuttettavuuden parantamiseen ja kehittämiseen löytyy vaikka kuinka, ja niistä osa käytiinkin jo tekstissä läpi. Niiden lisäksi esimerkiksi NoCoffee -laajennus Google Chromelle auttaa havainnollistamaan erilaisia näköön liittyviä haasteita, jolloin oman sivun designia on helppo työstää myös tästä näkökulmasta. Chrome Vox on niin ikään Googlen Chromelle saatavissa oleva ruudunlukijaohjelma, jonka avulla verkkosisältöjä voi kuluttaa, vaikka niitä ei saisi itse luettua.

Saatavilla olevasta tiedosta tai työkaluista saavutettavuuden huomioiminen verkkosuunnittelussa ei siis ainakaan jää kiinni.

Nitorilla on tehty jo pitkään saavutettavia palveluita, näistä tunnetuimpina esimerkkeinä Osuuspankin OP Saavutettava -verkkopankki sekä Pääkaupunkiseudun Palvelukartta. Saavutettavuusdirektiivin pohjalta vuonna 2019 voimaan tullut laki vaatii julkisia palveluntarjoajia tekemään digitaaliset palvelut saavutettaviksi.