Miksi automaattiset tarkistukset paljastavat enemmän kuin odottaa
Useimmat verkkokauppojen omistajat olettavat, että heidän sivustonsa on saavutettava. Todellisuus on usein erilainen. Automaattinen tarkistus paljastaa tyypillisesti kymmeniä tai satoja löydöksiä jopa näennäisen tavallisesta verkkokaupasta.
Automaatio kattaa noin 30–50 % WCAG 2.1 AA -säännöistä. Mitkä ovat yleisimmät ongelmat?
Puuttuvat alt-tekstit
Yleisin löydös. Kuvat ilman tekstikuvausta (alt-attribuutti) ovat täysin saavuttamattomissa ruudunlukuohjelmia käyttäville.
Kuinka korjata:
- Toiminnalliset kuvat (tuotteet, kuvitukset, logot): merkityksellinen kuvaus siitä, mitä kuva esittää tai mitä painike tekee
- Koristekuvat (taustat, koristeet): tyhjä alt-attribuutti, jotta ruudunlukuohjelmat ohittavat ne oikein
- Tekstiä sisältävät kuvat: teksti on oltava alt-attribuutissa
Matala värikontrasti
Toiseksi yleisin ongelma. WCAG 2.1 AA edellyttää vähintään 4,5:1 kontrastisuhdetta normaalille tekstille ja 3:1 suurelle tekstille (18 pt tai 14 pt lihavoitu). Heikko kontrasti haittaa heikkonäköisiä.
Tyypillisesti ongelmalliset elementit: vaalea 'Lisää ostoskoriin' -painike valkoisella taustalla, harmaa kuvaava teksti, virheilmoitukset haaleana värinä, teksti kuvabannereissa.
Kuinka korjata: Colour Contrast Analyser -kaltaiset työkalut tai automaattinen skannaus näyttävät välittömästi, mitkä kohdat eivät täytä standardia.
Esteelliset lomakkeet
Lomakkeet ovat kriittinen kohta jokaisessa verkkokaupassa. Yleisimmät ongelmat:
- Puuttuva label kenttään: sähköpostiosoitekenttä ilman ohjelmallisesti liitettyä labelia on tunnistamaton ruudunlukuohjelmalle
- Virheilmoituksia ei ilmoiteta ARIAn kautta: ruudunlukuohjelmaa käyttävä ei näe, että virhe tapahtui
- Pakolliset kentät ilman merkintää: tähti (*) ilman tekstiselitystä ei riitä
- Painikkeet ilman merkityksellistä tekstiä: 'Vahvista' on parempi kuin pelkkä kuvake ilman kuvausta
Näppäimistönavigoinnin ongelmat
EAA:n täytäntöönpanemaa kansallista lakia edellyttää, että koko verkkokauppa on käytettävissä ilman hiirtä. Yleisimmät ongelmat:
- Puuttuva näkyvä focus ring: kun käyttäjä selaa sivua Tab-näppäimellä, hänen on aina nähtävä, missä hän on
- Keyboard trap: käyttäjä jää loukkuun modaalisessa ikkunassa tai valikossa eikä pääse sieltä pois näppäimistöllä
- Huono kohdistusjärjestys: Tab hyppii sivulla epäluonnollisesti
Esteelliset vuorovaikutteiset elementit
Painikkeilla ja linkeillä on oltava saavutettava nimi, jotta apuvälineet ilmoittavat ne oikein. Ongelmalliset mallit:
- Painike, jossa on vain kuvake ilman tekstiä tai aria-labelia
- Linkki 'Napsauta tästä' tai 'Lisää' ilman kontekstia
- Vuorovaikutteinen div tai span ilman role='button' -attribuuttia ja näppäimistötukea
Kuinka aloittaa korjaaminen
Suositeltu lähestymistapa:
- Suorita automaattinen skannaus — tunnista vaikuttavimmat ongelmat nopeasti ja ilmaiseksi
- Priorisoi vakavuuden mukaan: korjaa ensin kriittiset (critical) ja vakavat (serious) löydökset
- Korjaa tekniset virheet: alt-tekstit, kontrasti ja lomakkeiden labelit ovat suhteellisen helppoja korjauksia
- Tilaa manuaalinen tarkastus: loput säännöt (luettavuus, käyttäytyminen ruudunlukuohjelmilla) vaativat inhimillistä arviointia
Muista: automaattiset tarkistukset havaitsevat noin 30–50 % WCAG-säännöistä. Automaattisesti havaittujen virheiden korjaaminen on välttämätön, mutta ei riittävä, askel EAA:n täytäntöönpanevan kansallisen lain noudattamiseksi.
Lisää oppaan artikkeleita
Usein kysytyt kysymykset
- Kuinka monta virhettä on normaalia?
- Useimmissa verkkokaupoissa on kymmeniä tai satoja automaattisesti havaittavia löydöksiä. Lukumäärää tärkeämpää on vakavuus — korjaa kriittiset ja vakavat virheet ensin.
- Mistä tiedän, mitä korjata ensin?
- Keskity löydöksiin, jotka on merkitty kriittisiksi (critical) ja vakaviksi (serious) — niillä on suurin vaikutus vammaisten käyttäjien kokemukseen.
- Riittääkö automaattisesti havaittujen virheiden korjaaminen?
- Ei. Automaatio havaitsee noin 30–50 % WCAG 2.1 AA -säännöistä. Täydellisen kuvan saamiseksi — ja EAA:n täytäntöönpanevan kansallisen lain noudattamiseksi — tarvitaan manuaalinen tarkastus.
Haluatko testata verkkosivustosi esteettömyyttä nyt?
Käynnistä esteettömyystarkistus