Verkkokaupan saavutettavuus — Kattava opas EAA-vaatimuksiin

EU:n saavutettavuusdirektiivi (2019/882) tuli sovellettavaksi 28. kesäkuuta 2025. Verkkokauppa on yksi direktiivin nimenomaisesti mainitsemista palveluista. Jos myyt tuotteita tai palveluja verkossa EU:n alueella, vaatimukset koskevat sinua.

Käytännössä tämä tarkoittaa, että verkkokauppasi pitää täyttää WCAG 2.1 tason AA vaatimukset. Ei siksi, että se olisi mukava lisä — vaan siksi, että laki niin sanoo.

Tämä opas käy läpi mitä vaatimukset tarkoittavat käytännössä, mitkä ovat yleisimmät ongelmat verkkokaupan eri osissa, miksi saavutettavuus on myös liiketoimintakysymys ja miten pääset alkuun.

Ketä vaatimukset koskevat?

Saavutettavuuslaki koskee kaikkia verkkokauppoja ja markkinapaikkoja, jotka tarjoavat tuotteita tai palveluja kuluttajille EU:ssa. Ainoa poikkeus: palveluja tarjoavat mikroyritykset (alle 10 henkilöä ja liikevaihto alle 2 miljoonaa euroa).

Jos liikevaihtosi ylittää 2 miljoonaa euroa tai työllistät yli 10 henkilöä, vaatimukset koskevat sinua. Käytännössä suurin osa vakavasti otettavista verkkokaupoista on direktiivin piirissä.

Tärkeä huomio: toisin kuin monet luulevat, vaatimukset koskevat myös B2C-palveluja tarjoavia yrityksiä EU:n ulkopuolelta. Jos myyt EU:n kuluttajille, direktiivi koskee sinua riippumatta siitä missä yrityksesi sijaitsee.

Miksi saavutettavuus on myös liiketoimintakysymys

Saavutettavuus ei ole vain lakikysymys. Se on suoraan yhteydessä verkkokaupan liikevaihtoon.

Vammaisten henkilöiden ostovoima

WHO:n mukaan noin 1,3 miljardia ihmistä — 16 % maailman väestöstä — elää merkittävän vamman kanssa. Euroopassa luku on noin 87 miljoonaa ihmistä (Eurostat). Näiden ihmisten ja heidän läheistensä yhteenlaskettu ostovoima on arvioitu biljoona dollaria maailmanlaajuisesti.

Jos verkkokauppasi ei ole saavutettava, tämä asiakaskunta ei voi ostaa sinulta. He menevät kilpailijalle, jolla kassaprosessi toimii ruudunlukijalla.

Saavutettavuusongelmat karkottavat kaikkia asiakkaita

Saavutettavuusongelmat eivät haittaa vain vammaisia käyttäjiä. Heikko kontrasti haittaa kaikkia, jotka käyttävät puhelinta kirkkaassa auringonvalossa. Puuttuvat lomakekenttien nimet hämmentävät ketä tahansa. Näppäimistöllä toimimaton kassaprosessi estää ostot tablettikäyttäjiltä.

Microsoft kutsuu tätä ajattelua inkluusiiviseksi suunnitteluksi: vamman voi ajatella pysyvänä (sokeus), tilapäisenä (silmäleikkauksen jälkeinen toipuminen) tai tilannekohtaisena (ajaminen, kirkas aurinko, meluisa ympäristö). Saavutettava verkkokauppa palvelee kaikkia näitä tilanteita.

Konversiovaikutus — miten saavutettavuusongelmat vaikuttavat myyntiin

Saavutettavuusongelmat vaikuttavat ostopolun jokaisessa vaiheessa:

Ostopolun vaihe	Tyypillinen ongelma	Seuraus
Tuotteiden selaaminen	Puuttuvat kuvatekstit, toimimattomat suodattimet	Käyttäjä ei löydä tuotteita → poistuu sivustolta
Tuotesivun tarkastelu	Hintatiedot eivät näy ruudunlukijalla, värivariaatioita ei ole nimetty	Käyttäjä ei saa riittävästi tietoa ostopäätökseen
Ostoskoriin lisääminen	Painike ei toimi näppäimistöllä, ei vahvistusta lisäyksestä	Käyttäjä ei tiedä onnistuiko toiminto
Kassaprosessi	Lomakekenttien nimet puuttuvat, virheilmoitukset ovat epäselviä	Tilaus keskeytyy → menetetty kauppa
Maksaminen	Maksutavan valinta ei toimi näppäimistöllä	Asiakas ei pysty maksamaan → ostoskori hylätään

Jokainen näistä vaiheista on paikka, jossa menetät asiakkaita — ja rahaa. Askemin web-analytiikka auttaa tunnistamaan missä kohtaa käyttäjät putoavat pois, ja palautetyökalu kertoo miksi.

Mitä saavutettava verkkokauppa tarkoittaa käytännössä?

WCAG 2.1 AA ei ole abstrakti standardi — se kääntyy konkreettisiksi vaatimuksiksi jokaiselle verkkokaupan osalle. Käyn läpi vaatimukset sivutyypeittäin.

Tuotesivut

• Tuotekuvat tarvitsevat kuvatekstit (WCAG 1.1.1). Pelkkä tiedostonimi ei riitä. Kuvatekstin pitää kertoa mitä kuvassa on: "Sininen puuvillainen t-paita, pyöreä pääntie, edestä kuvattuna." 75 % verkkokaupan ostajista perustaa ostopäätöksensä tuotekuviin — jos ruudunlukijan käyttäjä ei saa tätä tietoa, hän ei osta.
• Värivariaatiot eivät saa olla pelkkiä värillisiä palloja. Nimeä värit myös tekstinä — näkövammainen käyttäjä ei erota punaista sinisestä.
• Hintatiedot pitää olla luettavissa ruudunlukijalla. Jos hinta on kuva tai CSS-tyylitelty teksti, ruudunlukija ei löydä sitä. Sama koskee alennushintoja — "oli 49 €, nyt 29 €" pitää olla luettavissa, ei pelkkiä yliviivaustyylejä.
• Koko- ja varastotiedot tarvitsevat selkeät merkinnät. "Valitse koko" -valikon pitää toimia näppäimistöllä ja kertoa ruudunlukijalle mikä on valittu ja mitkä koot ovat loppuneet.

Haku ja suodattimet

• Hakukenttä tarvitsee selkeän nimen (label), ei pelkkää suurennuslasin kuvaketta (WCAG 1.3.1).
• Suodattimet pitää voida käyttää näppäimistöllä (WCAG 2.1.1). Monet mukautetut liukusäätimet ja monivalintakomponentit eivät toimi ilman hiirtä. Tämä on yksi yleisimmistä ongelmista verkkokaupoissa.
• Hakutulosten päivitys pitää ilmoittaa ruudunlukijalle (WCAG 4.1.3). Kun suodatin muuttaa tuloksia, käyttäjän pitää tietää siitä. Muuten hän ei huomaa mitään tapahtuneen ja luulee sivuston olevan rikki.
• Sivutus pitää olla saavutettava. "Seuraava sivu" -linkit tarvitsevat selkeät nimet, ja nykyinen sivu pitää olla merkitty.

Ostoskori ja kassaprosessi

Tämä on verkkokaupan kriittisin osa saavutettavuuden kannalta. Jos kassaprosessi ei toimi, tuotteiden selaaminen on turhaa.

• Jokainen lomakekenttä tarvitsee nimen (WCAG 1.3.1). "Etunimi", "Sukunimi", "Sähköposti" — ei placeholder-tekstiä, joka katoaa kun käyttäjä alkaa kirjoittaa.
• Virheilmoitusten pitää kertoa mikä on vialla ja missä (WCAG 3.3.1, 3.3.3). "Tarkista tiedot" ei riitä. "Sähköpostiosoite puuttuu @-merkki" auttaa. Virheilmoituksen pitää myös olla ohjelmoinnillisesti yhdistetty kenttään, jotta ruudunlukija löytää sen.
• Maksutavan valinta pitää toimia näppäimistöllä. Radionapit, välilehdet tai mukautetut painikkeet — kaikkien pitää olla hallittavissa ilman hiirtä.
• Tilausvahvistuksen pitää olla selkeä. Ruudunlukijan pitää pystyä kertomaan käyttäjälle, että tilaus onnistui. Pelkkä visuaalinen "vihreä merkki" ei riitä.
• Aikarajat pitää ilmoittaa. Jos kassaprosessissa on aikaraja (esim. varatut tuotteet vapautuvat 15 minuutin jälkeen), käyttäjälle pitää kertoa siitä ja antaa mahdollisuus jatkaa (WCAG 2.2.1).

Värit ja kontrasti

Verkkokaupan yleisin saavutettavuusongelma on riittämätön värikontrasti. WebAIM Million 2024 -tutkimuksen mukaan 81 % verkkosivuista ei täytä WCAG:n kontrastivaatimusta (WCAG 1.4.3). Verkkokaupoissa kontrastiongelmat ovat erityisen yleisiä hintatiedoissa, painikkeissa ja "Lisää ostoskoriin" -napeissa.

Vaatimus on selkeä: normaalin tekstin ja taustan kontrastisuhteen pitää olla vähintään 4,5:1. Isolla tekstillä (18pt tai suurempi) riittää 3:1. Tarkista värit kontrastintarkistustyökalullamme.

Pop-upit, modaalit ja chat-ikkunat

Verkkokaupat ovat täynnä pop-up-ikkunoita: uutiskirjeen tilaus, tarjouskoodit, chat-widgetit, evästeilmoitukset. Jokaisessa pitää noudattaa samoja sääntöjä:

• Fokus pitää siirtyä modaaliin kun se avautuu — muuten ruudunlukija ei tiedä sen olemassaolosta.
• Escape-näppäimellä pitää pystyä sulkemaan.
• Fokus pitää palautua alkuperäiseen paikkaan kun modaali sulkeutuu.
• Chat-ikkunan pitää olla käytettävissä näppäimistöllä. Monet kolmannen osapuolen chat-widgetit eivät ole saavutettavia — tarkista tämä erikseen.

Verkkokauppojen yleisimmät saavutettavuusongelmat

Samat ongelmat toistuvat verkkokaupasta toiseen. Tässä yleisimmät, ryhmiteltynä sivutyypin mukaan:

Ongelma	Missä esiintyy	WCAG-kriteeri	Miten korjata
Tuotekuvista puuttuu alt-teksti	Tuotesivut, listaukset	1.1.1	Lisää kuvaava alt-attribuutti jokaiseen tuotekuvaan
Suodattimet eivät toimi näppäimistöllä	Kategorisivut	2.1.1	Käytä natiiveja HTML-elementtejä tai lisää ARIA-roolit ja näppäimistötuki
Lomakekenttien nimet puuttuvat	Kassa, rekisteröityminen	1.3.1	Lisää label-elementit jokaiseen kenttään
Heikko värikontrasti	Hinnat, painikkeet, linkit	1.4.3	Tarkista ja korjaa kontrastisuhde vähintään 4,5:1:een
Virheilmoitukset eivät kerro mitä korjata	Kassa, yhteystietolomakkeet	3.3.1, 3.3.3	Nimeä virheellinen kenttä ja kerro mitä vaaditaan
Pop-upit eivät ole saavutettavia	Uutiskirje, tarjoukset, chat	2.1.1, 4.1.2	Lisää fokuksen hallinta, Escape-tuki ja ARIA-roolit
Hakutulosten päivitystä ei ilmoiteta	Haku, suodattimet	4.1.3	Käytä ARIA live region -aluetta tulosmäärän ilmoittamiseen
Sivutuksessa puuttuu merkintä nykyisestä sivusta	Tuotelistaukset	1.3.1	Merkitse nykyinen sivu aria-current="page"

Askemin laadunvarmistus löytää näistä automaattisesti kuvatekstien, kontrastin, lomakekenttien nimien ja tyhjien linkkien puutteet — eli suurimman osan yleisimmistä ongelmista.

Seuraamukset ja riskit

Jos verkkokauppasi ei täytä vaatimuksia, seuraamukset voivat olla konkreettisia.

Viranomaisvalvonta

Saavutettavuusdirektiivin artikla 30 edellyttää, että seuraamusten on oltava "tehokkaita, oikeasuhteisia ja varoittavia". Suomessa valvontaviranomaiset voivat antaa korjausmääräyksiä, asettaa uhkasakkoja ja äärimmäisessä tapauksessa määrätä palvelun poistettavaksi markkinoilta.

Oikeudelliset riskit

Seuraamukset eivät tule vain viranomaisilta. Saavutettavuuspuutteet voivat johtaa yhdenvertaisuuslain mukaisiin kanteluihin ja vahingonkorvausvaatimuksiin. Kansainvälisesti verkkokaupat ovat olleet yleisimpiä saavutettavuuskanteiden kohteita — tunnetuin tapaus on Domino's Pizza -ketjun häviämä oikeusjuttu Yhdysvalloissa, jossa sokea asiakas ei pystynyt tilaamaan pizzaa yrityksen verkkosivuston kautta.

Menetetty liikevaihto

Ja käytännössä: saavuttamaton kassaprosessi menettää asiakkaita joka päivä — riippumatta laista. Joka kerta kun käyttäjä ei pysty viemään tilausta loppuun, se on menetetty kauppa. Toisin kuin viranomaissakot, tämä tappio on päivittäinen ja kasvava.

Miten Askem auttaa verkkokauppoja

Verkkokaupan saavutettavuuden hallinta vaatii kolmea asiaa: nykytilan selvittämistä, puutteiden korjaamista ja jatkuvaa seurantaa. Askem kattaa nämä kaikki.

Automaattinen saavutettavuusseuranta

Askemin laadunvarmistus skannaa verkkokauppasi säännöllisesti ja raportoi WCAG-puutteet automaattisesti. Saat ilmoituksen kun uusia ongelmia ilmenee — esimerkiksi kun joku julkaisee tuotesivun ilman kuvatekstejä tai kampanjasivu ei täytä kontrastivaatimusta.

Tämä on olennaista verkkokaupalle, koska sisältö muuttuu jatkuvasti: uusia tuotteita, kampanjasivuja, kausikokoelmia. Jokainen muutos voi tuoda uusia puutteita. Ilman jatkuvaa seurantaa ne jäävät huomaamatta.

Käyttäjäpalaute suoraan sivuilta

Automaattiset työkalut löytävät noin 30–40 % WCAG-puutteista. Loput — kuten epälooginen navigaatio, sekavat tuotekuvaukset tai toimimaton kassaprosessi — paljastuvat vasta kun oikea käyttäjä kohtaa ne.

Askemin palautetyökalu kerää palautetta suoraan sivujen käyttäjiltä. Kun vammainen käyttäjä kohtaa esteen, hän voi ilmoittaa siitä heti — etkä joudu odottamaan seuraavaa auditointia saadaksesi tietää ongelmasta.

Analytiikka ilman evästeitä

Askemin web-analytiikka kertoo mitkä sivut ovat käytetyimpiä — ilman evästeitä ja GDPR-mutkia. Näet missä kohtaa ostopolkua käyttäjät putoavat pois ja voit priorisoida saavutettavuuskorjaukset niiden mukaan.

Näin pääset alkuun

1. Tilaa ilmainen saavutettavuusraportti

Tilaa ilmainen raportti Askemilta — syötä verkkokauppasi osoite ja sähköpostisi, niin lähetämme sinulle WCAG-analyysin 24 tunnin kuluessa. Raportti kertoo tärkeimmät puutteet ja auttaa hahmottamaan työmäärän.

2. Käy kassaprosessi läpi näppäimistöllä

Tämä on paras yksittäinen testi verkkokaupalle. Sulje hiiri laatikkoon ja yritä tehdä tilaus pelkällä näppäimistöllä. Tab-näppäimellä eteenpäin, Enter aktivoi, Escape sulkee. Jos et pääse kassalle asti, asiakkaasi eivät myöskään — ainakaan kaikki.

3. Priorisoi korjaukset

Aloita kassaprosessista ja sivupohjista. Yksi korjaus ylätunnisteessa tai tuotekorttimallissa voi ratkaista satoja yksittäisiä puutteita kerralla. Käytä WCAG-tarkistuslistaa teknisiin kriteereihin, EAA-tarkistuslistaa organisaation vaatimuksiin ja kontrastintarkistusta värien tarkistamiseen.

4. Ota käyttöön jatkuva seuranta

Kertaluonteinen tarkistus ei riitä. Verkkokauppa muuttuu jatkuvasti, ja jokainen muutos voi tuoda uusia ongelmia. Askemin jatkuva saavutettavuusseuranta havaitsee regressiot automaattisesti — niin sinun ei tarvitse odottaa seuraavaa manuaalista auditointia.

Yhteenveto

Verkkokaupan saavutettavuus on lakisääteinen vaatimus, joka koskee käytännössä kaikkia merkittäviä verkkokauppoja EU:ssa. Vaatimukset ovat voimassa nyt. Mutta kyse ei ole pelkästä lainkirjaimesta — saavuttamaton verkkokauppa menettää asiakkaita ja liikevaihtoa joka päivä.

Hyvä uutinen: suurimmat ongelmat ovat usein yksinkertaisia korjata. Tilaa ilmainen saavutettavuusraportti Askemilta — syötä verkkokauppasi osoite ja sähköpostisi, niin saat WCAG-analyysin 24 tunnin kuluessa. Ilmainen, ei sitoumuksia.