Saavutettavuus ja WCAG
Saavutettavuus verkkopalveluissa: selkokielinen opas
Saavutettava verkkosivu on sellainen, jota pystyy käyttämään myös heikolla näöllä, pelkällä näppäimistöllä tai ruudunlukijalla. Osaa organisaatioista velvoittaa laki, ja verkkokaupoille velvoitteet laajenivat kesällä 2025. Tässä oppaassa kerromme, mitä WCAG 2.1 taso AA käytännössä tarkoittaa, miten testaat sivustosi itse tänään ja mistä varmistat, mitkä säännöt koskevat juuri sinua.
Miksi tämä koskee sinua
Saavutettavuus ei ole lisäominaisuus vaan perusta
Suomessa on satojatuhansia ihmisiä, joille tavallinen verkkosivu on hankala tai mahdoton käyttää: heikkonäköisiä, kuulovammaisia, käsien hienomotoriikaltaan rajoittuneita, lukemisen kanssa kamppailevia. Lisäksi ikääntyvä väestö tarkoittaa, että joukko kasvaa vuosi vuodelta. Kun sivusto toimii heille, se toimii paremmin myös kaikille muille: kirkkaassa auringossa, huonolla yhteydellä, kiireessä ja yhdellä kädellä.
Toinen syy on hyvin konkreettinen. Jokainen kävijä, joka ei saa lomaketta lähetettyä tai ei löydä puhelinnumeroa, on menetetty yhteydenotto. Saavutettavuustyö ja konversio-optimointi vetävät samaan suuntaan. Ja kolmanneksi: osaa organisaatioista velvoittaa laki, ja velvoitteiden piiri on viime vuosina laajentunut julkiselta sektorilta myös monille yksityisille palveluille.
Suomen tilanne
Saavutettavuusdirektiivi ja laki 306/2019
Tämä osio kertoo isot linjat. Se ei ole oikeudellista neuvontaa, ja soveltamisala vaihtelee organisaatiotyypin mukaan, joten varmista oma tilanteesi lopuksi viranomaislähteestä.
Julkinen sektori
EU:n saavutettavuusdirektiivi on Suomessa toimeenpantu lailla digitaalisten palvelujen tarjoamisesta (306/2019). Se velvoittaa muun muassa valtion ja kuntien viranomaisia, oppilaitoksia sekä monia julkisoikeudellisia laitoksia. Vaatimustaso on WCAG 2.1 taso AA ja mukaan kuuluu saavutettavuusseloste.
Eräät muut toimijat
Laki ulottuu myös osaan yksityisistä toimijoista, esimerkiksi tiettyihin pankki-, vakuutus- ja liikennealan palveluihin sekä julkista rahoitusta saaviin toimijoihin tietyin ehdoin. Rajanveto on yksityiskohtainen, joten oman organisaation asema kannattaa selvittää tapauskohtaisesti.
Esteettömyysdirektiivi ja verkkokaupat
European Accessibility Act eli esteettömyysdirektiivi laajensi vaatimuksia monille yksityisen sektorin palveluille, kuluttajille suunnatut verkkokaupat mukaan lukien, ja sitä on sovellettu kesäkuusta 2025 alkaen. Osalle mikroyrityksistä on poikkeuksia. Jos myyt verkossa kuluttajille, selvitä asia ajoissa.
Tarkista velvoitteesi virallisesta lähteestä
Emme ole juristeja emmekä anna oikeudellista neuvontaa. Se, mitkä vaatimukset koskevat juuri sinun organisaatiotasi, riippuu organisaatiomuodosta, toimialasta, koosta ja palvelun luonteesta, ja säännökset myös muuttuvat. Ajantasaiset ohjeet ja tulkinnat löydät osoitteesta saavutettavuusvaatimukset.fi, ja valvonnasta sekä neuvonnasta vastaa Suomessa Etelä-Suomen aluehallintovirasto. Kysy heiltä, kun tarvitset sitovan vastauksen. Me hoidamme tekniikan ja sisällön, sinä saat dokumentoidun tiedon siitä, mitä on tehty.
WCAG 2.1 taso AA
Kahdeksan asiaa, jotka ratkaisevat käytännössä
WCAG kuulostaa tekniseltä, mutta suurin osa vaatimuksista on arkista huolellisuutta. Nämä kahdeksan kohtaa kattavat valtaosan siitä, mitä tavallisella yrityssivustolla käytännössä korjataan.
01
Riittävä kontrasti
Vaalean harmaa teksti vaalealla taustalla näyttää tyylikkäältä näyttökuvassa ja on lukukelvoton bussipysäkillä. Tavallisen tekstin kontrastisuhteen tulee olla vähintään 4,5 yhtä vastaan ja suuren tekstin 3 yhtä vastaan. Tämä on yleisin yksittäinen virhe suomalaisilla yrityssivuilla.
02
Näppäimistökäytettävyys
Kaikkiin linkkeihin, nappeihin ja lomakekenttiin pitää päästä sarkaimella, järjestyksen pitää seurata sivun logiikkaa ja kohdistuksen pitää näkyä selvästi. Jos suunnittelija on piilottanut kohdistusreunuksen, koska se ei sopinut ulkoasuun, sivusto on juuri rikottu monelta käyttäjältä.
03
Alt-tekstit kuville
Sisältöä välittävä kuva tarvitsee tekstivastineen, joka kertoo mitä kuvassa on. Pelkkä koristekuva merkitään tyhjällä alt-määreellä, jotta ruudunlukija ohittaa sen. Tiedostonimi kuten kuva_2394 ei ole alt-teksti.
04
Selkeät lomakevirheet
Jokaisella kentällä on näkyvä nimilappu, ei pelkkää placeholder-tekstiä. Virheestä kerrotaan tekstinä, kerrotaan mikä kenttä on kyseessä ja mitä pitää tehdä. Punainen reunus ilman selitystä ei riitä, koska sitä ei näe eikä kuule.
05
Tekstitykset videoille
Tallennetut videot tarvitsevat tekstityksen. Se palvelee kuulovammaisten lisäksi kaikkia, jotka katsovat videon äänettömänä ruuhkabussissa, ja se on samalla sisältöä, jota hakukoneet lukevat.
06
Looginen otsikkorakenne
Yksi h1 sivua kohden, sen alla h2 ja h3 järjestyksessä ilman hyppyjä. Otsikot ovat rakenne, eivät fonttikoko. Ruudunlukijan käyttäjä selaa sivua otsikoiden avulla samalla tavalla kuin sinä silmäilet sivua silmilläsi.
07
Ei pelkkään väriin perustuvaa tietoa
Jos vapaat ajat ovat vihreitä ja varatut punaisia, värisokea käyttäjä näkee vain harmaita laatikoita. Lisää mukaan teksti, symboli tai kuvio, niin tieto välittyy myös ilman värinäköä.
08
Toimiva suurennus
Sivun pitää kestää 200 prosentin suurennus ilman että teksti katkeaa, napit menevät päällekkäin tai sisältö valuu näytön ulkopuolelle. Sama joustavuus, joka tekee sivustosta responsiivisen, hoitaa suuren osan tästä.
Tee tämä tänään
Kuuden kohdan itsetesti, aikaa menee vartti
Et tarvitse työkaluja etkä koodiosaamista. Avaa oma sivustosi ja käy nämä kohdat läpi järjestyksessä. Kirjaa ylös, mikä ei toiminut, niin sinulla on valmis korjauslista.
Piilota hiiri
Liiku koko sivustolla pelkällä sarkaimella. Pääsetkö valikkoon, lomakkeeseen ja lähetysnappiin, ja näkyykö kohdistus jokaisessa kohdassa.
Suurenna 200 prosenttiin
Paina selaimessa suurennusta, kunnes olet kaksinkertaisessa koossa. Pysyykö asettelu kasassa vai joudutko vierittämään sivusuunnassa.
Lähetä tyhjä lomake
Kertooko virheilmoitus tekstinä, mikä kenttä puuttuu ja mitä pitää korjata, vai näkyykö vain punainen reunus.
Lue kuvat ilman kuvia
Kytke kuvat pois selaimen asetuksista tai katso lähdekoodia. Ymmärtäisitkö sivun sisällön pelkkien alt-tekstien perusteella.
Katso sivua ulkona
Avaa sivusto puhelimella kirkkaassa valossa. Jos joudut kallistelemaan näyttöä lukeaksesi tekstin, kontrasti on liian heikko.
Kuuntele video äänettömänä
Onko etusivun videossa tekstitys. Jos viesti katoaa ilman ääntä, sisältö on pois osalta kävijöistäsi.
Ero näkyy heti
Sama sisältö, kaksi eri lopputulosta
Ei saavutettava
- Vaalean harmaa teksti kermanvärisellä taustalla, koska se näytti hillityltä
- Kohdistusreunus poistettu tyyleistä, koska se rikkoi ulkoasun
- Yhteystiedot ja hinnasto vain PDF-tiedostossa, jota ruudunlukija ei jäsennä
- Kuvien alt-teksteinä tiedostonimet tai tyhjä kenttä kaikissa kuvissa
- Lomakkeen virhe näkyy vain punaisena reunuksena ilman selitystä
- Vapaat ja varatut ajat erotellaan pelkällä värillä
Saavutettava verkkosivu
- Tekstin kontrasti mitattuna ja yli vaaditun rajan jokaisessa osiossa
- Näppäimistökohdistus näkyy selvästi ja seuraa sivun lukujärjestystä
- Hinnat ja yhteystiedot tekstinä sivulla, PDF vain lisänä
- Jokaisella sisältökuvalla kuvaava alt-teksti, koristekuvat merkitty tyhjiksi
- Lomakevirhe kerrotaan tekstinä ja ohjaa suoraan väärään kenttään
- Tila kerrotaan värin lisäksi tekstillä ja symbolilla
Näin hoidamme sen
Perusasiat mukana vakiona, vanha sivusto auditoituna
Emme myy saavutettavuutta erillisenä lisäpakettina, koska emme osaa rakentaa sivustoa ilman sitä. Jokaisessa toteutuksessa tarkistetaan kontrastit, näppäimistökäyttö, otsikkorakenne, alt-tekstit ja lomakkeiden virheilmoitukset ennen julkaisua. Jos sinulla on jo sivusto, käymme sen läpi ja kerromme rehellisesti, mikä on kunnossa ja mikä ei.
- Kontrastit mitataan, ei arvata silmämääräisesti
- Koko sivusto testataan pelkällä näppäimistöllä ennen julkaisua
- Otsikkorakenne ja maamerkit rakennetaan oikein, ei tyylitellyillä diveillä
- Alt-tekstit kirjoitetaan sisällöstä käsin, ei tiedostonimistä
- Lomakkeissa näkyvät nimilaput ja virheilmoitukset selkeällä suomella
- Auditoinnista saat korjauslistan tärkeysjärjestyksessä, ei sadan sivun raporttia
Tarkistuslista ennen julkaisua
Kontrasti
Mitattu, vähintään 4,5 yhtä vastaan
Näppäimistö
Koko sivusto sarkaimella läpi
Kohdistus
Näkyy jokaisessa elementissä
Otsikot
Yksi h1, looginen järjestys
Alt-tekstit
Kirjoitettu, koristekuvat tyhjiä
Lomakkeet
Nimilaput ja selkeät virheet
Saavutettavuus kulkee käsi kädessä käytettävyyden kanssa, ja moni korjaus hoituu samalla, kun sivusto rakennetaan responsiiviseksi ja nopeaksi. Lue myös, mitä verkkosivujen käytettävyys tarkoittaa arjessa ja miten nopeusoptimointi parantaa kokemusta kaikilla kävijöillä. Jos sivusto on jo vuosia vanha, kannattaa harkita kokonaista verkkosivujen uudistusta.
Usein kysyttyä
Saavutettavuus selkokielellä
Mitä saavutettavuus verkkopalveluissa tarkoittaa?
Saavutettavuus tarkoittaa sitä, että verkkopalvelua pystyy käyttämään myös silloin, kun näkö, kuulo, liikkuminen, keskittyminen tai käyttötilanne poikkeaa oletetusta. Käytännössä sivun pitää toimia ruudunlukijalla, pelkällä näppäimistöllä, suurennettuna ja kirkkaassa auringonvalossa. Suuri osa saavutettavuudesta on aivan tavallista hyvää suunnittelua: riittävä kontrasti, selkeä otsikkorakenne, ymmärrettävät linkkitekstit ja lomakkeet, jotka kertovat suoraan mikä meni pieleen.
Mikä on verkkosivujen saavutettavuusdirektiivi ja miten se näkyy Suomessa?
EU:n saavutettavuusdirektiivi on Suomessa toimeenpantu lailla digitaalisten palvelujen tarjoamisesta (306/2019). Laki velvoittaa julkista sektoria, kuten valtiota, kuntia, oppilaitoksia ja monia julkisoikeudellisia toimijoita, ja lisäksi eräitä muita organisaatioita, esimerkiksi osaa pankki-, vakuutus- ja liikennealan toimijoista. Näiden palveluiden tulee täyttää WCAG 2.1 tason AA vaatimukset ja julkaista saavutettavuusseloste. Tarkista oman organisaatiosi tilanne aina viranomaislähteestä, sillä soveltamisala ei ole kaikille sama.
Koskeeko saavutettavuus myös yksityisiä yrityksiä ja verkkokauppoja?
Yhä useammin koskee. Esteettömyysdirektiivi eli European Accessibility Act laajensi velvoitteita monille yksityisen sektorin palveluille, ja verkkokaupat ovat yksi keskeinen ryhmä. Uudet vaatimukset tulivat sovellettaviksi kesäkuussa 2025, ja monille mikroyrityksille on säädetty poikkeuksia. Se, kuuluuko juuri sinun palvelusi soveltamisalaan, riippuu toiminnan luonteesta ja yrityksen koosta, joten varmista asia viranomaiselta ennen kuin teet johtopäätöksiä.
Mikä WCAG on ja mitä taso AA vaatii?
WCAG on kansainvälinen ohjeistus verkkosisällön saavutettavuudelle. Siinä on kolme tasoa: A on minimi, AA on se taso, johon lainsäädäntö yleensä viittaa, ja AAA on tiukin. Taso AA tarkoittaa käytännössä muun muassa riittävää tekstin ja taustan kontrastia, koko sivuston käyttöä pelkällä näppäimistöllä, näkyvää kohdistusta, kuvien tekstivastineita, videoiden tekstityksiä, loogista otsikkorakennetta ja sitä, ettei mitään tietoa välitetä pelkällä värillä.
Miten voin itse testata, onko sivustoni saavutettava?
Tee kolme nopeaa testiä. Ensin irrota hiiri ja liiku sivustolla pelkällä sarkaimella: pääsetkö kaikkiin linkkeihin ja nappeihin ja näetkö koko ajan, missä kohdistus on. Toiseksi suurenna sivu selaimessa 200 prosenttiin ja katso, katkeaako asettelu. Kolmanneksi lähetä yhteydenottolomake tyhjänä ja katso, kertooko virheilmoitus selvällä suomen kielellä mitä puuttuu. Jos jokin näistä kompastuu, korjattavaa on.
Tarvitaanko saavutettavuusseloste?
Laki digitaalisten palvelujen tarjoamisesta edellyttää saavutettavuusselostetta niiltä toimijoilta, joita se koskee. Selosteessa kerrotaan, miltä osin palvelu täyttää vaatimukset, mitkä osat eivät täytä niitä ja miten käyttäjä voi antaa palautetta. Jos velvoite koskee sinua, autamme selosteen laatimisessa yhdessä kanssasi, mutta sisällön oikeellisuudesta vastaa aina organisaatio itse.
Rakennatteko saavutettavia verkkosivuja ja voitteko auditoida vanhan sivuston?
Kyllä. Rakennamme saavutettavuuden perusasiat jokaiseen sivustoon vakiona: kontrastit tarkistettuna, näppäimistökäyttö toimivana, otsikkorakenne loogisena, alt-tekstit kirjoitettuna ja lomakkeet ohjeistettuna. Sama koskee laskeutumissivua (alk. 390 €) ja kokonaista yrityssivustoa (alk. 790 €). Olemassa olevan sivuston käymme läpi erillisenä auditointina ja saat listan korjattavista kohdista tärkeysjärjestyksessä.
Takaatteko, että sivusto täyttää lain vaatimukset?
Emme anna oikeudellisia takuita emmekä juridista neuvontaa. Teemme teknisen ja sisällöllisen työn WCAG 2.1 tason AA mukaisesti ja kerromme avoimesti, mitä on tehty ja mitä jää sinun vastuullesi, esimerkiksi myöhemmin itse lisätyt PDF-tiedostot ja videot. Velvoitteiden tulkinta kuuluu viranomaiselle: ajantasaiset vaatimukset löydät osoitteesta saavutettavuusvaatimukset.fi ja valvonnasta vastaa Etelä-Suomen aluehallintovirasto.
Katsotaan yhdessä, missä sivustosi kompastuu.
Lähetä osoitteesi, niin käymme sivustosi läpi ja kerromme suoraan, mitkä saavutettavuuden perusasiat ovat kunnossa ja mitkä kannattaa korjata ensin.
Vastaamme 2 tunnin sisällä