Esteettömyysdirektiivi verkkokauppa -tarkistus: mitä testata itse

Jos myyt verkossa kuluttajille EU:ssa, European Accessibility Act eli EU:n esteettömyysdirektiivi on koskenut verkkokauppaasi 28. kesäkuuta 2025 alkaen, ellei yrityksesi ole mikroyritys. Monet vakavista ongelmista löydät itse esteettömyysdirektiivi verkkokauppa -tarkistuksella: tee testitilaus pelkällä näppäimistöllä, suurenna sivua ja kokeile jokaista lomaketta. Itse tehty tarkistus ei kuitenkaan pysty todistamaan, että koko sivusto täyttää standardin.

Ehkä kehittäjä on maininnut lain, tai sähköpostissa on tarjottu widgetiä, joka tekee mistä tahansa sivustosta ”vaatimusten mukaisen” yhdellä koodirivillä. Asiakas, joka ei pääse kassasi läpi näppäimistöllä tai ruudunlukijalla (ohjelma, joka lukee sivun ääneen), saattaa siirtyä toiseen kauppaan valittamatta.

Koskeeko esteettömyysdirektiivi sivustoasi?

Esteettömyysdirektiivi koskee sinua, jos sivustosi myy kuluttajille eli ihmisille, jotka ostavat itselleen, eikä yrityksesi ole mikroyritys. Direktiivi (EU) 2019/882 luettelee sähköisen kaupankäynnin palvelut soveltamisalaansa kuuluvien palvelujen joukossa: palvelut, joita tarjotaan verkkosivuston tai sovelluksen kautta ”kuluttajasopimuksen tekemiseksi”. Maiden oli sovellettava sen sääntöjä 28. kesäkuuta 2025 alkaen. Tämä on meidän tulkintamme direktiivistä; oikeudellista arviota omasta tilanteestasi kannattaa kysyä juristilta.

• Palveluja tarjoavat mikroyritykset on vapautettu. Tästä säädetään 4 artiklan 5 kohdassa. Direktiivi määrittelee mikroyrityksen yritykseksi, jonka palveluksessa on alle 10 henkilöä ja jonka vuosiliikevaihto tai vuotuinen taseen loppusumma on enintään 2 miljoonaa euroa. Sekä henkilömäärä että toinen kahdesta taloudellisesta kriteeristä ratkaisevat: kymmenen hengen tiimi jää poikkeuksen ulkopuolelle, oli liikevaihto miten pieni tahansa.
• Myynti vain yrityksille. Määritelmä koskee kuluttajasopimuksia. Jos yksityiset ostajat voivat tilata kassasi kautta, pidä sivustoa soveltamisalaan kuuluvana.
• Sivusto, joka ei myy mitään. Yrityksen sivusto ilman tilauksia, varauksia tai maksuja ei yleensä ole direktiivin määrittelemä sähköisen kaupankäynnin palvelu. Varaukset ja maksut muuttavat tilanteen.
• Vuosi 2030 koskee tuotteita ja vanhoja sopimuksia. 32 artiklan siirtymäaika 28. kesäkuuta 2030 asti koskee palvelun tarjoamiseen käytettyjä tuotteita ja ennen kesäkuuta 2025 tehtyjä sopimuksia.

Jokainen EU-maa panee direktiivin täytäntöön omalla lainsäädännöllään ja säätää omat seuraamuksensa; Saksassa tämä laki on BFSG. Jos yrityksesi on Sveitsissä tai Isossa-Britanniassa ja myy kuluttajille EU:ssa, kysy juristilta, miten näiden maiden säännöt koskevat sinua.

Miksi verkkokaupat eivät läpäise saavutettavuustarkistuksia?

Alla luetellut virheet johtuvat yleensä suunnittelu- ja lomakeratkaisuista, jotka on tehty kerran teemassa ja jotka toistuvat jokaisella sivulla. Direktiivi (EU) 2019/882 edellyttää verkkosivustoja, jotka ovat ”havaittavia, hallittavia, ymmärrettäviä ja toimintavarmoja”. Eurooppalainen standardi EN 301 549, joka muuttaa tämän testeiksi, noudattaa WCAG:tä eli W3C:n julkaisemia verkkosisällön saavutettavuusohjeita (Web Content Accessibility Guidelines). WCAG jakaa kriteerinsä kolmelle tasolle: A (vähimmäistaso), AA ja AAA. Standardin tavoitteena on taso AA.

Fokuskehys poistettiin ulkonäön vuoksi. Kun sivulla liikutaan Tab-näppäimellä, selain piirtää kehyksen aktiivisen linkin tai painikkeen ympärille. Jotkin teemat piilottavat sen, koska se näyttää epäsiistiltä, vaikka WCAG edellyttää näkyvää fokuksen ilmaisinta. WCAG 2.2:ssa lisätty kriteeri sanoo myös, ettei fokuksessa oleva elementti saa jäädä kokonaan sivuston oman sisällön, kuten kiinteän ylätunnisteen tai evästebannerin, alle.

Teksti on liian vaaleaa. WCAG edellyttää kontrastisuhdetta eli sitä, kuinka paljon tummempi tai vaaleampi teksti on taustaansa nähden, vähintään 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille. WebAIMin vuoden 2026 skannaus miljoonasta etusivusta löysi heikkokontrastista tekstiä 83,9 %:lta niistä. Vaaleanharmaa valkoisella ja valkoinen pastellinsävyisellä painikkeella ovat tavallisimmat tapaukset.

Lomakkeet nojaavat paikkamerkkiteksteihin ja väriin. Harmaa vihje kentän sisällä katoaa heti, kun alat kirjoittaa, eikä pelkkä punainen reunus kerro, mikä on vialla. WCAG edellyttää nimilappuja tai ohjeita kaikkialla, missä tietoja pitää syöttää, ja virheiden kuvaamista tekstinä.

Kassa rakennettiin hiirelle. Itse tehdyt pudotusvalikot, palapeli-CAPTCHAt ja kirjautumiset, joissa pitää muistaa tai kirjoittaa uudelleen koodi, pysäyttävät näppäimistön tai ruudunlukijan käyttäjät. Direktiivi mainitsee sähköisen kaupankäynnin osalta erikseen tunnistautumisen, turvallisuuden ja maksamisen. Maaliskuussa 2026 Alankomaiden kuluttajaviranomainen ACM raportoi, että 61 %:ssa sen tarkistamista suurista hollantilaisista verkkokaupoista ja muista suurista kuluttajasivustoista tilausta ei voinut tehdä apuvälineellä, kuten ruudunlukijalla.

Widget tai pistemäärä korvaa korjauksen. Overlay-widgetit lisäävät sivuston päälle saavutettavuustyökalurivin. Euroopan komission mukaan overlayt ja vastaavat työkalut, jotka eivät saa itse sivustoa täyttämään standardia, ”eivät ole asianmukainen ratkaisu”. Automaattinen testi auttaa, mutta W3C:n sanoin ”mikään työkalu ei yksin pysty ratkaisemaan, täyttääkö sivusto saavutettavuusstandardit”.

Näin teet esteettömyysdirektiivi verkkokauppa -tarkistuksen itse

Ensimmäisen läpikäynnin voit tehdä selaimella ja näppäimistöllä ilman maksullisia työkaluja. WCAG:n takana oleva W3C julkaisee tähän ajatukseen perustuvat Easy Checks -pikatarkistukset. Valitse kolme sivua: etusivu, tuote- tai palvelusivu sekä kassa tai yhteydenottolomake. Etene järjestyksessä ja kirjaa ylös jokainen kohta, jossa jäät jumiin.

1. Pane hiiri pois. Liiku jokaisella sivulla Tab- ja Shift+Tab-näppäimillä ja käytä Enteriä, välilyöntiä ja nuolinäppäimiä. Sinun pitää päästä valikkoon, suodattimiin, ostoskoriin lisäämisen painikkeeseen, jokaiseen lomakekenttään ja maksupainikkeeseen. Sinun pitää koko ajan nähdä, missä olet. Kirjaa, missä kehys katoaa kiinteän ylätunnisteen tai evästebannerin taakse ja pääsetkö pois valikosta tai chat-ikkunasta.
2. Suurenna. Aseta selaimen zoomaus 200 %:iin. WCAG edellyttää, että teksti pysyy luettavana ilman, että sisältöä leikkautuu pois tai menee päällekkäin. Tee sitten ikkunasta noin 1280 pikseliä leveä ja zoomaa 400 %:iin: sisällön pitää mahtua leveyteen ilman vaakasuuntaista vieritystä, lukuun ottamatta esimerkiksi karttoja ja datataulukoita.
3. Tarkista vaalea teksti. Chromen, Edgen ja Firefoxin kehittäjätyökalut näyttävät valitun tekstivärin kontrastisuhteen. Tarkista leipäteksti, hinnat, painikkeet ja pieni harmaa teksti lomakekenttien alla.
4. Kokeile jokaista lomaketta ensin tyhjänä, sitten väärin täytettynä. Jokaisella kentällä pitää olla näkyvä nimilappu, joka pysyy paikallaan kirjoittaessa. Lähetä lomake tyhjänä: virheilmoituksen pitää kertoa sanoin kentän vieressä, mitä puuttuu, ja jo kirjoittamasi tiedot pitää säilyttää. Uusi WCAG 2.2:n kriteeri edellyttää myös, että samassa prosessissa jo syöttämäsi tiedot, kuten osoite, täytetään automaattisesti tai tarjotaan valittavaksi. Muita tapoja, joilla lomake vie sinulta tilauksia, käsittelemme artikkelissa sivustolla on kävijöitä mutta ei yhteydenottoja.
5. Kirjaudu sisään ja läpäise roskapostisuojaus. WCAG 2.2:n mukaan kirjautuminen ei saa riippua kognitiivisesta toimintotestistä, kuten salasanan muistamisesta tai palapelin ratkaisemisesta, ellei tarjolla ole vaihtoehtoa tai apua, kuten salasanojen hallintaa tai liittämistä. Palapeli-CAPTCHA ilman muuta vaihtoehtoa ei läpäise tätä.
6. Katso tuotekuvia. Napsauta kuvaa hiiren oikealla painikkeella ja valitse Tarkista. Alt-tekstin eli lyhyen kuvauksen, jonka ruudunlukija lukee ääneen, pitää kertoa, mikä tuote on; puhtaasti koristeellisilla kuvilla se voi olla tyhjä.
7. Toista tärkeimmät vaiheet puhelimella. Pieniä, lähekkäin olevia kuvakkeita on vaikea napauttaa. WCAG 2.2 asettaa kohteen vähimmäiskooksi 24 x 24 CSS-pikseliä (itse verkkosivun kokoyksikkö), poikkeuksin, kuten jos kohteen ympärillä on riittävästi tilaa.

W3C huomauttaa, että sivu ”voi näyttää läpäisevän nämä tarkistukset, mutta siinä voi silti olla merkittäviä saavutettavuuden esteitä”. Seuraava vaihe on testi, jonka tekee joku ruudunlukijaa päivittäin käyttävä.

Mitä kannattaa korjata ensin?

Aloita teeman ja lomakekomponenttien korjauksista, halvimmista kalleimpiin. Yksi muutos mallipohjassa korjaa jokaisen sen varaan rakennetun sivun. Jätä julkaistavat saavutettavuustiedot siihen asti, kun tiedät, mitä sivusto tekee ja mitä ei.

1. Älä asenna overlayta. Euroopan komission neuvo on korjata saavutettavuusongelmat ”niiden lähteellä”, mikä verkkokaupassa tarkoittaa teemaa, lomakkeita ja kassaa.
2. Palauta fokuskehys ja tummenna teksti. Molemmat löytyvät yleensä teeman väri- ja tyyliasetuksista. Aloitamme asettamalla kontrastin kerran suunnittelupalettiin ja tarkistamalla sen sivuston vaaleassa ja tummassa versiossa, jotta uusi sivu alkaa väreistä, jotka jo läpäisevät tarkistuksen.
3. Rakenna lomakkeet uudelleen. Näkyvät nimilaput, sanalliset virheilmoitukset kentän vieressä, kirjoitetut tiedot säilyvät virheen jälkeen, fokus siirtyy ensimmäiseen korjattavaan kenttään ja selaimen automaattinen täyttö toimii nimelle, sähköpostille ja osoitteelle. Verkkosivuprojekteissamme aloitamme itse lomakekomponentista, jotta jokainen uusi lomake saa nämä korjaukset alusta asti.
4. Lisää alt-tekstit ja sivun kieli. Kuvaile tuote- ja sisältökuvat ja varmista, että jokainen sivu ilmoittaa kielensä, jotta ruudunlukija lausuu sen oikein. Hakukoneet lukevat samat alt-tekstit ja kieliattribuutin, minkä vuoksi ne kuuluvat myös tekniseen hakukoneoptimointiin.
5. Korjaa kassa, kirjautuminen ja kolmansien osapuolten widgetit. Korvaa palapeli-CAPTCHAt tarkistuksilla, jotka eivät pyydä asiakasta ratkaisemaan mitään, ja tarjoa kirjautumistapa, joka ei riipu muistista. Maksu- ja chat-widgetit tulevat toimittajilta: pyydä jokaiselta toimittajalta sen saavutettavuustiedot ja vaihda ne, joihin näppäimistöllä ei pääse.
6. Julkaise saavutettavuustietosi. Direktiivin liite V edellyttää, että palveluntarjoajat kuvaavat yleisissä sopimusehdoissa tai vastaavassa asiakirjassa, miten palvelu täyttää vaatimukset. Kansallinen lakisi määrää yksityiskohdat.
7. Tähtää WCAG 2.2:n AA-tasoon. Syyskuussa 2026 julkaistu EN 301 549:n versio 4.1.1 lisää kuusi WCAG 2.2:n vaatimusta, kertoo AccessibleEU. Saman lähteen mukaan viitteenä on edelleen WCAG 2.1:n AA-tasoon perustuva versio 3.2.1, kunnes komissio viittaa uuteen versioon Euroopan unionin virallisessa lehdessä. Irlannin National Disability Authority odottaa viittausta 16. joulukuuta 2026. Kun korjaat nyt WCAG 2.2:n mukaan, uudet vaatimukset ovat katettuina, kun näin tapahtuu.

Direktiivi sallii poikkeuksen, jos vaatimusten noudattaminen olisi kohtuuton rasite, mutta se edellyttää arviointia, ja johdanto-osan perusteluissa todetaan, että ”priorisoinnin, ajan tai tiedon puute” ei ole oikeutettu syy.

Mitä mitata korjausten jälkeen?

Mittaa, pystyykö ihminen suorittamaan tärkeimmät tehtävät näppäimistöllä ja suurennetulla sivulla. Toista sama esteettömyysdirektiivi verkkokauppa -tarkistus samoilla kolmella sivulla ja vertaa, missä jäit jumiin ennen muutoksia ja niiden jälkeen. Tarkista uudelleen aina, kun teema, lisäosa tai maksupalvelu vaihtuu.

1. Testitilaus pelkällä näppäimistöllä, tuotesivulta tilausvahvistukseen koskematta hiireen.
2. Ilmaisen automaattisen testin havaintolista, esimerkiksi Chromen Lighthouse, ajettuna samoille kolmelle sivutyypille. Käy havainnot läpi ja tarkista, mitkä niistä ovat yhä jäljellä.
3. Virheellisinä lähetetyt lomakkeet, jotta voit varmistaa, että jokainen virhe kuvataan sanoin eikä mitään kirjoitettua katoa.
4. Julkaistut saavutettavuustietosi, päivitettyinä jokaisen sellaisen muutoksen jälkeen, joka vaikuttaa siihen, miten asiakkaat tilaavat.

Missä me tulemme mukaan

Kun tarkastelemme verkkokaupan kassaa, seuraamme asiakkaan polkua: tuotesivu, ostoskori, lomakkeet ja maksuvaihe, ensin näppäimistöllä ja sitten puhelimella. Teemassa tai lomakekomponenteissa olevat ongelmat on halvinta korjata juuri siellä; sen, mitä itse tehty tarkistus ei pysty ratkaisemaan, jätämme ruudunlukijalla tehtävään testiin. Jos haluat meidän katsovan kassaasi toisin silmin, kerro meille sivustostasi.

← Kaikki artikkelit