Saavutettavuus verkkosivuilla tarkoittaa, että verkkosivut ja -palvelut on suunniteltu ja tehty niin, että ne ovat meidän jokaisen käytettävissä fyysisistä tai kognitiivisista rajoitteista, teknisistä vaatimuksista tai vaikkapa aiemmasta osaamisesta, kokemuksesta ja taustasta riippumatta. Saavutettavat verkkosivut on kilpailuetu, mutta saavutettavuuteen liittyy myös laki, joka tällä hetkellä edellyttää valtion, kuntien, yliopistojen ja korkeakoulujen sekä julkisten tahojen omistamien liikelaitosten verkkosivujen olevan saavutettavia.
Miksi kaikkien kannattaa huomioida saavutettavuus?
Saavutettavuus edistää yhdenvertaisuutta
Kaikkien käyttäjien, mukaan lukien heidän, joilla on esimerkiksi näkö-, kuulo- tai motorisia rajoitteita, tulisi pystyä käyttämään verkkosivua, verkkokauppaa ja verkkopalvelua sujuvasti ja ilman esteitä.
Saavutettavuus parantaa käyttäjäkokemusta
Selkeä navigointi, helppolukuinen teksti, hyvät kontrastit ja käyttäjäystävällinen käyttöliittymä hyödyttävät kaikkia. Saavutettavuuden periaatteiden noudattaminen tekee sivustosta selkeän sekä helposti ymmärrettävän ja navigoitavan, mikä johtaa parempaan käyttökokemukseen.
Saavutettavuuden huomioiminen voi tuoda myös rahallista hyötyä
Saavutettavuus hyödyttää ihan jokaista ja lisäksi laajentaa verkkosivuston, verkkokaupan ja verkkopalvelun käyttäjäkuntaa, kun se houkuttelee myös heitä, joilla on erityistarpeita.
Satsaus saavutettavuuteen ei ole vain velvollisuus, vaan fiksua myös liiketoiminnan kannalta. Se lisää tasa-arvoista osallistumista, parantaa käyttökokemusta ja voi vahvistaa yrityksen bisnestä. Saavutettavuus tulisi huomioida jokaista projektia suunniteltaessa ja tehdessä.
Vinkit saavutettavuuteen
Ohessa muutamia vinkkejäni, joilla niin verkkosivujen suunnittelija kuin sisällön ylläpitäjä voi parantaa sivuston saavutettavuutta.
Värikontrastit on saavutettavuuden kulmakivi
Värikontrastit ovat olennainen osa saavutettavuutta verkkosivuilla ja verkkopalveluissa. Riittävä kontrasti parantaa tekstin erottumista taustasta, mikä helpottaa lukemista ja navigointia. Noudattamalla Web Content Accessibility Guidelines (WCAG) määrittelemiä värikontrastivaatimuksia varmistetaan, että sisältö on helposti havaittavissa kaikille. Valitse värit huolellisesti varmistaaksesi riittävän kontrastin. Vältä liian lähellä olevien värien käyttöä, erityisesti tekstiä ja taustaa. Muista myös, että käyttäjillä voi olla vaikkapa värisokeus.
Standardinmukainen ja virheetön koodi
HTML 5 -merkkauskielen mahdollistama semanttinen rakenne tarjoaa hyvät peruspilarit saavutettavalle verkkosivulle. Ajanmukaisten standardien noudattaminen ja koodin virheettömyys edesauttaa sivuston käyttöä muillakin kuin tavanomaisilla laitteilla. Hyödynnä kaikkia HTML 5:n semanttisia tunnisteita aina kun se on mahdollista. Koodin sisältöjärjestyksen tulee olla lukijalle selkein ja semanttisesti oikea järjestys. Lisäksi sisällön oikea lukujärjestys on voitava määrittää ohjelmallisesti.
Kielimääritykset kuntoon
Sisällön oletuskieli on määriteltävä sivuston koodissa. Näin ääneenlukuohjelmat osaavat käyttää oikeaa ääntä ja ääntämisohjeita kyseiselle kielelle.
Osioi ja otsikoi
Sivu tulee järjestää osiin ja edelleen jakaa semanttisilla otsikoilla (H1, H2, H3…). Näissä otsikoissa tulee kuvata kunkin osion asiaankuuluva aihe tai sen tarkoitus.
Linkit kuntoon
Linkin tarkoitus tulee ymmärtää jo linkin tekstistä. “Klikkaa tästä” on hyödytön eikä auta ruudunlukijaohjelman käyttäjiä tunnistamaan linkin tarkoitusta. Kuvaile selkeästi ja ytimekkäästi, mihin linkki johtaa tai mikä sen tarkoitus sivulla on.
Navigointi ja sijainti sivustolla
Jokaisella sivulla on oltava päätason otsikko (H1), joka kuvaa sen aihetta tai tarkoitusta. Se auttaa ensisijaisesti käyttäjää hahmottamaan sijainnin verkkosivustolla. Hänen aktiivinen sijainti sivustolla täytyy esittää myös sisällössä ja visuaalisesti erottuvana navigaatiossa.
Ns. murupolkunavigointi auttaa myös hahmottamaan sijainti ja sivuston laajuus – etenkin, jos sivusto sisältää useita alasivuja ja niiden alasivuja.
Siirry sisältöön -linkit
Kun vierailija saapuu verkkosivuille, hänen on kyettävä ohittamaan kaikki useilla sivuilla toistuvat sisältöosiot, kuten isot ”hero-kuvat”.
Tarjoa oikeaoppisesti tehty visuaalisesti näkymätön ”Siirry sisältöön” -linkki jokaisen sivun ensimmäisenä elementtinä. Näin näytönlukijaan tai vastaavaan tekniikkaan luottava pääsee etsimäänsä sisältöön ja välttyy tuhlaamasta aikaa kuuntelemalla, kuinka näytönlukuohjelma lukee kaiken muun sitä edeltävän sisällön.
Järjestys ja kohdistaminen
Sivustolla on voitava navigoida loogisesti sarkain- eli Tab-painikkeen avulla ja aktiivisen linkin kohdistus (focus) on erotuttava.
Mahdollista eri navigointireitit
Verkkosivujen tulee olla paikannettavissa ja navigoitavissa enemmän kuin yksisuuntaisesti. Tarjoa useita vaihtoehtoja sisällön löytämiseen, navigointiin ja hänen sijaintinsa määrittämiseen.
Johdonmukaisuus ja yhteneväisyys
Verkkosivun navigointimekanismien tulee olla johdonmukaisesti sijoitettuja ja toistettava koko sivustolla.
Suuret muutokset sisällössä
Sivun sisällön ei tulisi suuresti muuttua ilman, että käyttäjä sen itse tietoisesti muuttaa. Lisäksi on ilmoitettava etukäteen, jos asetuksen muutos käyttöliittymässä voi käynnistää hänelle odottamattomia muutoksia.
Ennustettavuus
Käyttäjien tulee pystyä ennustamaan luotettavasti, mihin linkki vie ja tunnistaa heti, minne kohtaa sivustoa he saapuvat.
