Veebipood WCAG Ligipääsetavus

Euroopa ligipääsetavuse akt ja e-poed — mis peab muutuma

🎧 Kuula kõiki artikleid järjest

Euroopa ligipääsetavuse akt muudab ligipääsetavuse paljudele e-poodidele äriliseks ja juriidiliseks nõudeks. Küsimus ei ole enam selles, kas ligipääsetavusega tegeleda, vaid kuidas seda praktiliselt teha.

Mida Euroopa ligipääsetavuse akt e-poodidele tähendab?

Euroopa Ligipääsetavuse Akt (European Accessibility Act ehk EAA) rakendub alates 28. juunist 2025 paljudele digitaalsetele teenustele, sealhulgas e-kaubandusele.

Praktikas tähendab see, et veebipood peab olema kasutatav võimalikult laiale kasutajate ringile, sealhulgas inimestele, kes kasutavad:

  • klaviatuuri hiire asemel;
  • ekraanilugerit;
  • suurendatud kuva;
  • hääljuhtimist;
  • alternatiivseid sisendseadmeid;
  • lihtsustatud navigeerimist vajavaid lahendusi.

EAA ise ei kirjelda tehnilisi detaile. Praktikas hinnatakse vastavust enamasti WCAG 2.1 AA või WCAG 2.2 AA juhiste järgi.

Ligipääsetavus ei puuduta ainult puudega inimesi. Sama lahendus aitab sageli ka vanemaid kasutajaid, mobiilikasutajaid ja inimesi ajutiste piirangutega.

Miks see e-poodide jaoks oluline on?

E-poe eesmärk on müük.

Kui klient ei saa toodet leida, ostukorvi lisada või makset lõpetada, jääb müük tegemata sõltumata sellest, kas probleem tekkis ligipääsetavuse tõttu või mitte.

Halvasti ligipääsetavad e-poed kaotavad kliente sageli märkamatult.

Lisaks võivad tekkida:

  • õiguslikud riskid;
  • mainekahju;
  • suuremad klienditoe kulud;
  • kehvem kasutajakogemus kõigile kasutajatele.

Kontrolli ostuteekonda algusest lõpuni

Ligipääsetavust ei tohiks hinnata üksikute lehtede kaupa.

Kontrollida tuleb kogu ostuprotsessi:

  1. toote leidmine;
  2. tootelehe kasutamine;
  3. ostukorvi lisamine;
  4. ostukorvi haldamine;
  5. vormide täitmine;
  6. maksmine;
  7. tellimuse kinnitamine.

Kasutaja peab suutma kogu protsessi läbida ilma takistusteta.

Klaviatuuriga navigeerimine

Paljud kasutajad ei kasuta hiirt.

Seetõttu peab kogu e-pood olema kasutatav klaviatuuri abil.

Kontrolli, kas kasutaja saab:

  • liikuda Tab-klahviga kõikide interaktiivsete elementideni;
  • avada menüüsid;
  • kasutada filtreid;
  • valida tootevariante;
  • lisada toote ostukorvi;
  • täita vorme;
  • lõpetada makseprotsessi.

Levinud probleemid:

  • filtreid ei saa avada klaviatuuriga;
  • modaalaknad jäävad fookusest välja;
  • fookus kaob pärast dialoogi sulgemist;
  • ostukorvi nupud ei ole ligipääsetavad.

Lihtne test on proovida kogu ostuteekond läbida ilma hiirt puudutamata.

Tooteleht peab olema arusaadav ka ekraanilugeriga

Ekraaniluger ei näe pilte ega kujundust.

Ta loeb ette HTML-i sisu.

Kontrolli:

  • kas tootepiltidel on sisukad alt-tekstid;
  • kas pealkirjade hierarhia on loogiline;
  • kas hind on tekstina olemas;
  • kas allahindlused on tekstiliselt kirjeldatud;
  • kas saadavusinfo on tekstina nähtav.

Näiteks:

Halb:

> Punane tekst ja läbikriipsutatud hind.

Parem:

> Hind 35 eurot. Varasem hind 50 eurot.

Sellisel juhul saab informatsiooni kätte ka ekraaniluger.

Vormid ja ostukorv

Vormid on üks sagedasemaid ligipääsetavuse probleemide allikaid.

Kontrolli:

  • kas igal väljal on nähtav silt;
  • kas kohustuslikud väljad on märgitud;
  • kas veateated on seotud õige väljaga;
  • kas veateated on arusaadavad.

Halb näide:

> Viga vormis.

Parem näide:

> Sisesta kehtiv e-posti aadress.

Ostukorvis peaksid ka tegevusnupud olema kirjeldavad.

Näiteks:

  • „Eemalda toode”
  • „Suurenda kogust”
  • „Vähenda kogust”

Mitte lihtsalt:

  • X
  • +

Kontrast ja loetavus

Paljud ligipääsetavuse probleemid on seotud värvidega.

Kontrolli:

  • teksti kontrasti;
  • nuppude kontrasti;
  • linkide nähtavust;
  • fookusolekuid.

WCAG AA tasemel peab tavateksti kontrastsus olema vähemalt 4.5:1.

Probleeme tekitavad sageli:

  • helehall tekst valgel taustal;
  • helesinised lingid;
  • allahindluse hinnad väikese fondiga;
  • värvile tuginevad veateated.

Värv ei tohi olla ainus viis info edastamiseks.

Makseprotsess vajab eraldi tähelepanu

Paljud e-poed kasutavad kolmanda osapoole makselahendusi.

Näiteks:

  • Montonio;
  • Maksekeskus;
  • Stripe;
  • EveryPay.

Kuigi makselahendus tuleb teenusepakkujalt, vastutab kasutajakogemuse eest siiski e-pood.

Kontrolli:

  • kas maksevorm on klaviatuuriga kasutatav;
  • kas veateated on arusaadavad;
  • kas väljade tähistused on nähtavad;
  • kas protsess on loogiline ka ekraanilugeriga.

Automaatne testimine ei ole piisav

Tööriistad nagu:

  • axe DevTools;
  • WAVE;
  • Lighthouse;

leiavad kiiresti tehnilisi probleeme.

Need ei leia aga kõiki kasutatavusprobleeme.

Näiteks ei oska automaatne kontroll hinnata:

  • kas alt-tekst on sisukas;
  • kas ostuprotsess on arusaadav;
  • kas veateated aitavad kasutajat.

Seetõttu tuleb lisaks automaatsele kontrollile teha ka käsitsi testimist.

Drupal Commerce ja ligipääsetavus

Drupal Commerce annab üldiselt hea lähtepunkti.

Drupali tuum järgib ligipääsetavuse põhimõtteid ning kasutab semantilist HTML-i.

Probleemid tekivad tavaliselt siis, kui lisanduvad:

  • kohandatud teemad;
  • JavaScripti komponendid;
  • kolmanda osapoole moodulid;
  • keerukad filtrid;
  • spetsiaalsed ostukorvi lahendused.

Seetõttu tasub ligipääsetavust hinnata kogu lahenduse, mitte ainult Drupali tuuma põhjal.

Kust alustada?

Kui e-poe seisukord pole teada, on mõistlik alustada neljast kontrollist:

  1. Testi kogu ostuteekond ainult klaviatuuriga.
  2. Käivita axe DevTools või Lighthouse audit.
  3. Kontrolli toodete alt-tekste.
  4. Vaata üle vormide veateated.

Need neli sammu annavad tavaliselt väga kiiresti pildi kõige suurematest probleemidest.

Kokkuvõte

Euroopa Ligipääsetavuse Akt muudab ligipääsetavuse paljude e-poodide jaoks praktiliseks nõudeks.

Oluline ei ole ainult avaleht või kujundus.

Ligipääsetav peab olema kogu ostuteekond:

  • navigeerimine;
  • toodete leidmine;
  • ostukorv;
  • vormid;
  • maksmine;
  • tellimuse kinnitamine.

Mida varem ligipääsetavusega tegeleda, seda odavam on vajalikud muudatused teha. Hiljem tähendab sama töö sageli ümberarendust ja suuremaid kulusid.

Kui soovid hinnata oma e-poe vastavust WCAG nõuetele või valmistuda EAA rakendumiseks, aitab ligipääsetavuse audit kiiresti välja selgitada peamised riskikohad.

Kaido Toomingas, WebPro tehniline juhtWebPro Company OÜ Tehniline juht: Kaido Toomingas

Vajad Drupal abi?

Kui artikkel puudutab sinu olukorda, ei pea kõike lõpuni lugema. Sinuga suhtleb päris inimene ja aitab järgmise sammuni jõuda.