Soovitame Tasuta e-kaubanduse videokursus →

Uudised

Ligipääsetavuse kiirtest e-poodidele

October 21, 2021

- Author  

Eesti E-kaubanduse Liit koondab rohkem kui 500 usaldusväärset e-kauplejat ja suunanäitajat. Kasvatame e-kaubandust koos!

Tõnu Väät
- Autor  
Tegevjuht

Eestis on täna vähe hea ligipääsetavusega veebilehti ja e-poode. Ligipääsetavus veebis tähendab, et  e-keskkond on kasutajasõbralikum, võimaldab info lihtsamini kätte saada ning toimingud kiiremini lõpule viia.

Kui ligipääsetavas hoones on olemas näiteks lift ja kaldtee ning uksed käivad lahti piisavalt kergelt, et ka laps või vanem inimene saavad need lahti, siis ligipääsetav veebileht on disainitud ja arendatud nii, et seal olevaid elemente näevad ka eakad, see võimaldab erivajadustega inimestel kasutada lehte erinevate tugitehnoloogiatega (ekraanilugeja, häälkäsklused, pilguga juhtimine, navigeerimine klaviatuuriga jm), veebilehel olevad tekstid on arusaadavad ka lastele, esmakasutajatele jne.

Samuti leiavad järjest kärsitumaks muutuvad kasutajad ligipääsetavalt lehelt vajaliku info kiiremini üles.Avaliku sektori veebilehtedele kehtib juba aastast 2012 kohustus vastata ligipääsetavuse standardile WCAG 2.1 (Web Content Accessibility Guidelines).

Alates 2025. aastast seab uus Euroopa Liidu toodete ja teenuste direktiiv ka erasektori veebilehtedele kohustuse vastata ligipääsetavuse nõuetele. See tähendab, et kõik e-poed, e-pangad, reisijate transpordiettevõtete, sideteenuse pakkujate jpt veebilehed ja äpid peavad muutuma ligipääsetavaks.

Täpsem kohustuse sisu selgub direktiivi ülevõtmisel, kuid targem on oma järgmiste veebiarenduste planeerimisel juba silmas pidada ka ligipääsetavust.

Kuidas aru saada, et asjad on kehvasti?

WCAG reeglid on küllaltki mahukad ning esmapilgul võib olla raske neist ülevaadet saada. Pakume välja kiire ja lihtsa testi, millega saad kindlaks teha, kas ka sinu e-poes eksisteerivad kõige sagedasemad ligipääsetavuse probleemid.Kui e-pood läbib kõik punktid probleemideta, on lootust, et lehel on ligipääsetavusega keskmisest paremad lood.

Loomulikult on tegemist vaid kiirtestiga ning kõiki probleeme see üles ei leia. Ligipääsetavuse põhjalikumaks hindamiseks on kasulik tellida oma veebile ligipääsetavuse audit.

Kas sinu e-poes töötab otsing?

Otsingut on paljudele kasutajatele mugavam kasutada kui otsida soovitud asja läbi menüüde ja filtrite. (WCAG 2.4.5)

1. Kas otsing asub oodatavas kohas?Rahvusvaheliselt läbiviidud uuringute kohaselt on kasutajad harjunud otsima otsingukasti lehe paremast ülemisest nurgast või vasakult, logo alt.

2. Kas otsingukast ning selle sees olev tekst / otsinguikoon on piisavalt tumedad, et ka kehvema nägemisega inimesed märkavad neid? Hiljuti läbiviidud testimises juhtus, et vanem inimene ei saanud kasutada e-poe otsingut, sest selle värv oli niivõrd vähekontrastne. Kontrolli selle tasuta tööriistaga, et teksti ja tausta värvikoodide kontrastsus oleks vähemalt 4,5 ning et otsingukasti piirjoone / otsinguikooni ja tausta värvikoodide kontrastsus oleks vähemalt 3. Kui ei ole, saad värve veidi kohendada, et kontrastsusenõuetele vastata. (WCAG 1.3.4, WCAG 1.4.11) Sama kontrolli võid teha ka muudele nuppudele, linkidele ja ikoonidele.

Kas tekst on loetav?

Nagu juba mainitud, võib vaegnägijatel, vanematel inimestel ja ka lihtsalt prillikandjatel olla keeruline väikest ja heledat teksti lugeda. Seetõttu on oluline, et tekst oleks piisavalt suur, kontrastne ning vajadusel suurendatav.

3. Kontrolli selle tasuta tööriistaga, et igasuguse teksti ja selle tausta värvikoodide vahe oleks vähemalt 4,5.

Kui ei ole, muuda teksti või tausta värvi nii, et kontrastsus oleks nõuetele vastav. (WCAG 1.3.4) Kuigi tegemist pole reegliga, on soovitatav loetavuse huvides mitte kasutada väiksemat kui 16px suurust teksti. Kui tekst on suurem kui 24px, võib selle kontrastsus oma taustaga olla väiksem, minimaalselt 3.

Kas e-pood on kohanduv?

Tahvelarvuti- ja mobiilikasutajatele, kuid ka inimestele, kes kasutavad tesktisuurendust, on oluline, et veebileht oleks kohanduv.

4. Suurenda brauseri vahenditega veebilehte ning vaata, kas leht muutub sujuvalt tahvli- ning mobiilivaateks või hakkavad tekstid ja muud asjad peitu või katki minema.

Teksti peab saama suurendada vähemalt kahekordseks. (WCAG 1.4.4) Kahte pidi kerimisribasid ei tohi tekkida isegi iPhone SE laiusel ekraanil (320px). (WCAG 3.1.1)Kui lehte suurendusega enam kasutada ei saa või tekib horisontaalne kerimisriba, tuleks kasutusele võtta kohanduv (responsive) disain, kus veebilehe ülesehitus vastavalt ekraani laiusele (ja suurendusele) ümber kohandatakse. Näiteks kui desktopis on sisu kolmes veerus, siis tahvlis esitatakse see kahes ning mobiilis ühes ainsas veerus.

Kas sinu e-poes saab liikuda ka klaviatuuri abil?

Inimesed, kellel on vähenenud liikuvus kätes, ei pruugi kasutada veebilehe navigeerimiseks hiirt. Ligipääsetaval lehel peab saama liikuda mööda linke, nuppe ja vormivälju vajutades klaviatuuri Tab-klahvi. Nuppe ja linke peab saama aktiveerida Enter-klahviga ning sisestusväljade valikuid Space-klahviga. (WCAG 2.1.1)

5. Mine veebilehele ning hakka vajutama Tab-klahvi. Kas saad liikuda iga lingi, nupu ja vormivälja peale?

Kui sa ei näe, et lehel Tab-klahvi vajutamise peale midagi juhtuks, on asjad halvasti: lingid ja nupud kas pole fokusseeritavad või neil puudub fookusstiil. Kui elemendid nähtavalt fookusesse ei lähe, pole lehel võimalik ka ilma hiireta liikuda.

Probleem võib olla näiteks lihtsalt selles, et brauseri vaikimisi fookusstiil on lehel ära keelatud. Samas võib probleem viidata ka tõsisematele struktuurilistele ja semantilistele probleemidele koodis.

Kui lingid ja nupud tulevad fookusesse, kuid ebaloogilises järjekorras (mitte vasakult paremale ja ülevalt alla), on lood samuti kehvad, sest selline liikumine võib kasutaja segadusse ajada. Pane tähele, et asjad, mille peale ei saa vajutada – näiteks pildid, pealkirjad, terved modaalaknad jne – ei tohi ka fookusesse minna.Märkus: Kui kasutad Safarit, tee kindlaks, et oled lubanud seadete all Tab-klahviga liikumise: Preferences > Advanced > Press Tab to highlight each item on a web page.

Kas kasutaja saab menüüst üle hüpata?

Mõtle, kui peaksid iga lehe alguses enne sisuosani jõudmist üle lugema terve päise ja kõik menüülingid? Klaviatuurikasutajatele see aga paraku nii on, kui lehele pole ehitatud võimalust menüüst üle hüppamiseks. Tihti tuleb lehe sisuosani jõudmiseks teha mitukümmend Tab-klahvi vajutust ja nii igal leheküljel.

6. Värskenda lehte ning seejärel vajuta Tab-klahvi. Kas nähtavale tuleb „Liigu põhisisu juurde“ link?

Kui ei, siis palu arendajal see kiiremas korras lisada. Link peab asuma igal lehe alguses ning sellele vajutades kerima kasutaja menüüst üle, sisuosani. (WCAG 2.4.1) Link võib nähtavale tulla ka alles siis, kui sellele Tab-klahviga peale minna. Hea näide asub näiteks Vabariigi Valitsuse kodulehel.

Kas ka pimedad „näevad“, kus on e-poe logo või ostukorv?

Pimedad kasutavad veebis navigeerimiseks ekraanilugejat, mis loeb ette kõik ekraanil toimuva. Piltide puhul loetakse ette „alt“ tekst või selle puudumisel failinimi. Kuna failinimed kirjeldavad harva, mis pildi peal tegelikult on, peab piltidele lisama koodis „alt“ teksti. (WCAG 1.1.1)

7. Kontrolli näiteks oma e-poe logo, ostukorvi või muu pildi puhul (paremklõps pildil ja „Inspekteeri“ / „Inspect element“), kas sellel on „alt“ tekst (nt alt=“Ostukorv").

Toodete puhul peab lisaks pildile ka tekstina välja tooma näiteks toote kategooria ja andmed. Kui toote mõõdud või muud andmed on kirjas vaid pildi peal, ei saa infot kätte näiteks pimedad ning inimesed, kellel ei lae aeglase ühenduse tõttu tootepildid ära või kelle jaoks on pildi peal olev tekst lihtsalt liiga väike või hele.

Kui tooted on tekstina piisavalt hästi kirjeldatud, ei pea toote piltidele enam „alt“ tekste kirjutama, vaid võib lisada tühja alt teksti (alt=““), et ekraanilugeja ei loeks ette pildi failinime.

8. Lülita brauseri seadete alt pildid välja ning vaata, kas info toodete kohta on endiselt arusaadav.

Ekraanilugejate ja teiste tugitehnoloogiate jaoks on aga oluline, et lehe peamine keel oleks koodis korrektselt kirjas.

9. Kontrollimiseks ava lehe lähtekood (paremklõps lehel ja „Näita lehe allikat“ / „Show page source“) ning kontrolli, et kohe alguses oleks kirjas lang=“et“ (nt <html lang="et">).

Eesti keele puhul peab jutumärkides olema „et“, inglise keele puhul „en“, vene keele puhul „ru“ jne. (WCAG 1.4.10) Kui keelekood on vale või puudub, loeb ekraanilugeja veebilehe ette vale hääldusega.

Kokkuvõtteks

Kui e-pood läbis kõik 9 kontrollpunkti edukalt, oled juba enamikust Eesti veebilehtedest ligipääsetavam! Kui ei, siis loodetavasti leidsid sellest artiklist vähemalt näpunäiteid ligipääsetavuse kiireks kontrollimiseks ja parandamiseks.

Aastast 2025 tekib e-poodidele kohustus vastata ligipääsetavuse nõuetele ning mõistlik on alustada ligipääsetavuse probleemide parandamist juba lähiajal tavapäraste arendusinvesteeringute käigus.

Loe veel uudiseid sellest kategooriast

Uudised otse e-kaubanduse mootorist

Kõik uudised

Liitud liiduga juba täna ja saad palju hüvesid

Oleme pädevad

Teame täpselt mis e-kaubanduses toimub ning kuidas seda äri arendamiseks kasutada. Jagame neid teadmisi hea meelega ülevaadete, uuringute ja koolituste kaudu. Et kasvamine ja ostmine oleks lihtsam.

Oleme usaldusväärsed

Eesti e-kaubanduse maine ja käekäik on meile olulised. Seisame selle eest, et Eesti e-kaubandus vastaks headele tavadele ja kõrgetele kvaliteedistandarditele. See on kasulik nii ostjale kui müüjale.

Oleme turvalised

Muudame koos e-kaubanduse turvalisemaks. Meie “Turvaline ostukoht” kvaliteedimärgis tagab ostjale kontrollitud ja rangetele tingimustele vastava ostukogemuse ning tõstab müüja usaldusväärsust ja parandab mainet.

Liitu liiduga

E-poed mida saad usaldada.

“Turvaline ostukoht” kvaliteedimärgis tagab ostjale kontrollitud ja rangetele tingimustele vastava ostukogemuse.

Tutvu kvaliteedimärgisega