EAA vaatimukset verkkosivuille ja verkkokaupoille — Täydellinen opas 2026
Jos sinulla on verkkokauppa tai verkkosivusto, joka palvelee asiakkaita EU:ssa, olet nyt European Accessibility Act (EAA):n piirissä. 28. kesäkuuta 2025 lähtien kaikkien verkkokauppojen ja verkkosivustojen on oltava saavutettavia – muuten seurauksena voivat olla sakot ja varoitukset.
Tämä täydellinen opas selittää kaikki EAA-vaatimukset verkkosivuille ja verkkokaupoille — teknisistä standardeista yleisiin rikkomuksiin ja konkreettisiin ratkaisuihin.
📌 Lyhyt vastaus — EAA-vaatimukset verkkosivuille
EAA-vaatimukset verkkosivuille perustuvat WCAG 2.1 Level AA:han (EN 301 549:n kautta). Tämä tarkoittaa: Kaikilla kuvilla on oltava alt-teksti, värikontrastien on oltava 4.5:1, verkkosivun on oltava näppäimistöllä käytettävissä, ja kaikissa lomakekentissä on oltava otsikot. Verkkokaupat ja -sovellukset ovat olleet velvollisia noudattamaan tätä 28. kesäkuuta 2025 lähtien.
✅ Testaa verkkosivusi EAA-yhteensopivuus
Käytä ilmaista EAA-tarkistintamme testataksesi verkkosivusi EN 301 549 -standardin mukaisesti.
Ilmainen EAA-tarkistin →Mitkä verkkosivustot ja verkkokaupat ovat EAA:n piirissä?
EAA koskee kaikkia verkkokauppoja ja -sovelluksia, joiden kautta myydään tuotteita tai palveluita kuluttajille EU:ssa. Tämä tarkoittaa:
- Verkkokaupat — Kaikki verkkokaupat, jotka myyvät tavaroita tai palveluita
- Mobiilisovellukset — Sovellukset, joiden kautta tarjotaan tuotteita tai palveluita
- Markkinapaikat — Alustat kuten Amazon, eBay, Etsy (jos ne tarjoavat palveluita EU:ssa)
- Varausjärjestelmät — Hotellit, ravintolat, parturit, lääkärit verkkovarauksella
- Lippukaupat — Tapahtumat, konsertit, urheilutapahtumat
- Tilauspalvelut — Suoratoisto, ohjelmistot, jäsenyydet
Eivät koske:
- Puhtaat tiedotussivut ilman verkkokauppatoimintoja
- Mikroyritykset, joissa on alle 10 työntekijää ja joiden vuosiliikevaihto on alle 2 miljoonaa euroa (poikkeukset mahdollisia)
📊 EAA verkkokauppatilastoja
- 80% verkkokaupoista ei vielä täytä EAA-vaatimuksia
- Ensimmäiset varoitukset on jo lähetetty
- Verkkokauppa on eniten kärsivä toimiala
- EN 301 549 on tekninen standardi
EAA-vaatimukset — Tärkeimmät WCAG 2.1 -kriteerit
EAA:n tekniset vaatimukset perustuvat EN 301 549:ään ja siten WCAG 2.1 Level AA:han. Tässä ovat tärkeimmät kriteerit verkkokaupoille:
1. Vaihtoehtoinen teksti kuville (1.1.1)
Kaikilla tuotekuvilla, grafiikoilla ja kuvakkeilla on oltava vaihtoehtoinen teksti (alt-teksti). Näytönlukuohjelmat voivat näin kuvata, mitä kuvassa näkyy.
Esimerkki:
<img src="tuote.jpg" alt="Punainen nahkainen käsilaukku kultaisella lukolla">
Yleinen virhe: Alt-teksti puuttuu tuotekuvista. Näytönlukuohjelma sanoo vain "Kuva".
2. Värikontrastit (1.4.3)
Tekstin ja taustan välinen kontrasti on oltava vähintään 4.5:1 (normaalille tekstille) tai 3:1 (suurelle tekstille).
Esimerkki:
❌ Harmaa teksti (#888888) valkoisella taustalla — Kontrasti 2.8:1 → Ei läpäise
✅ Tummanharmaa teksti (#333333) valkoisella taustalla — Kontrasti 12.6:1 → Läpäisee
Yleinen virhe: Harmaat "Toiminto"-painikkeet (kuten "Lisää ostoskoriin") vaaleilla taustoilla.
3. Näppäimistökäytettävyys (2.1.1)
Koko verkkosivun on oltava vain näppäimistöllä käytettävissä. Asiakkaiden on pystyttävä navigoimaan koko kaupassa Tab, Enter ja nuolinäppäimillä.
Yleinen virhe: Pudotusvalikot, jotka voi avata vain hiirellä.
4. Otsikoidut lomakekentät (3.3.2)
Kaikissa lomakekentissä (nimi, sähköposti, osoite, maksutiedot) on oltava näkyvät otsikot.
Esimerkki:
<label for="email">Sähköpostiosoite</label>
<input type="email" id="email">
Yleinen virhe: Lomakekentät ilman otsikoita tai vain paikkamerkinnöillä.
5. Looginen otsikkorakenne (1.3.1)
Otsikoiden on muodostettava looginen hierarkia: H1 → H2 → H3 → H4. Näytönlukuohjelmien käyttäjät navigoivat otsikoiden avulla.
Yleinen virhe: Ohitettuja otsikkotasoja (esim. H1 → H3).
6. Kohdistusilmaisimet (2.4.7)
Jokaisella näppäimistöllä saavutettavalla elementillä on oltava näkyvä kohdistusilmaisin. Käyttäjien on nähtävä, missä he ovat sivulla.
Esimerkki:
button:focus { outline: 2px solid #3b82f6; }
Yleinen virhe: outline: none; ilman näkyvää korvaavaa.
7. Siirry pääsisältöön -linkki (2.4.1)
Jokaisella sivulla on oltava "Siirry pääsisältöön" -linkki. Tämä on ensimmäinen kohdistettava linkki sivulla.
Esimerkki:
<a href="#main-content" class="skip-link">Siirry pääsisältöön</a>
8. Kuvailevat linkkitekstit (2.4.4)
Linkkitekstien on kuvattava linkin tarkoitus. "Klikkaa tästä" tai "Lue lisää" eivät ole kuvailevia.
Esimerkki:
✅ <a href="/tuote">Lue lisää tuotteestamme</a>
❌ <a href="/tuote">Klikkaa tästä</a>
EAA-tarkistuslista verkkokaupoille
✅ Kaikilla tuotekuvilla on alt-teksti (1.1.1)
✅ Värikontrastit täyttävät 4.5:1 normaalille tekstille (1.4.3)
✅ Verkkosivu on täysin näppäimistöllä käytettävissä (2.1.1)
✅ Kaikilla lomakekentillä on näkyvät otsikot (3.3.2)
✅ Otsikkorakenne on looginen (1.3.1)
✅ Kohdistusilmaisimet ovat näkyviä (2.4.7)
✅ "Siirry pääsisältöön" -linkki on olemassa (2.4.1)
✅ Kaikki linkkitekstit ovat kuvailevia (2.4.4)
✅ Sivun kieli on ilmoitettu (3.1.1)
✅ Kassaprosessi on saavutettava
🛒 Testaa verkkokauppasi nyt
Ilmainen EAA-tarkistin verkkokauppasivustoille.
Testaa nyt →Ei rekisteröitymistä. Välittömät tulokset. EN 301 549.
Yleiset EAA-rikkomukset verkkokaupoissa
1. Alt-teksti puuttuu tuotekuvista
Ongelma: Tuotekuvat ilman alt-tekstiä — näytönlukuohjelma sanoo vain "Kuva".
Ratkaisu: Lisää kuvaileva alt-teksti kaikkiin tuotekuviin.
2. Liian pieni värikontrasti painikkeissa
Ongelma: "Lisää ostoskoriin" -painikkeet liian pienellä kontrastilla.
Ratkaisu: Käytä tummempia värejä painikkeissa ja nosta kontrasti 4.5:1.
3. Pudotusvalikot eivät toimi näppäimistöllä
Ongelma: Pudotusvalikot voi avata vain hiirellä.
Ratkaisu: Toteuta näppäimistötuki kaikille valikoille (Enter avaa, nuolinäppäimet navigoivat).
4. Otsikoimattomat lomakekentät
Ongelma: Lomakekentät ilman otsikoita tai vain paikkamerkinnöillä.
Ratkaisu: Käytä näkyviä <label>-elementtejä jokaiselle lomakekentälle.
5. Kohdistusilmaisin puuttuu
Ongelma: Käyttäjät eivät näe, mikä elementti on kohdistettu.
Ratkaisu: Lisää näkyvät kohdistusilmaisimet: a:focus, button:focus { outline: 2px solid #3b82f6; }
Kuinka saavutat EAA-yhteensopivuuden — askel askeleelta
Vaihe 1: Tee EAA-tarkistus
Käytä ilmaista EAA-tarkistintamme testataksesi verkkosivusi EN 301 549 -standardin mukaisesti.
Vaihe 2: Korjaa kriittiset rikkomukset
Keskity ensin rikkomuksiin, jotka johtavat useimmiten varoituksiin: puuttuva alt-teksti, puuttuvat lomakeotsikot ja puuttuva näppäimistökäytettävyys.
Vaihe 3: Luo saavutettavuusseloste
Luo saavutettavuusseloste verkkosivustollesi. Tämä on lakisääteinen vaatimus ja osoittaa yhteensopivuuspyrkimyksesi.
Vaihe 4: Säännölliset tarkistukset
Suorita kuukausittaisia EAA-tarkistuksia havaitaksesi uudet rikkomukset.
Usein kysytyt kysymykset — EAA verkkosivuille
Kaikkien verkkokauppojen ja -sovellusten, joiden kautta myydään tuotteita tai palveluita kuluttajille, on oltava EAA-yhteensopivia. Puhtaat tiedotussivut ilman myyntitoimintoja eivät kuulu piiriin.
Tekniset vaatimukset perustuvat WCAG 2.1 Level AA:han. Tämä tarkoittaa: alt-teksti, värikontrastit 4.5:1, näppäimistökäytettävyys, lomakeotsikot ja looginen otsikkorakenne.
Rikkomuksista voi seurata sakkoja ja varoituksia kilpailijoilta tai kuluttajansuojajärjestöiltä. Ensimmäiset varoitukset on jo lähetetty.
Käytä ilmaista EAA-tarkistintamme. Anna verkkosivustosi URL-osoite ja saat 60 sekunnissa yksityiskohtaisen raportin rikkomuksista ja ratkaisuehdotuksista.
Kyllä. Mikroyritykset, joissa on alle 10 työntekijää ja joiden vuosiliikevaihto on alle 2 miljoonaa euroa, voivat hakea poikkeuksia. Useimmat verkkokaupat kuuluvat kuitenkin EAA-velvoitteen piiriin.
💬 Comments (0)