Saavutettavuuden tarkistuslista pienyritykselle ja verkkokaupalle

Kuvittele asiakas, joka käyttää ruudunlukijaa. Hän löytää haluamansa lenkkarit, valitsee koon ja painaa painiketta, jonka uskoo lisäävän tuotteen ostoskoriin. Ruudunlukija sanoo ”painike”. Ei muuta. Sivulla on kolme samanlaista, eikä yhdelläkään ole nimeä, joten hän lähtee, etkä koskaan saa tietää miksi.

Useimmat pienyritysten sivustojen saavutettavuusongelmat ovat tällaisia: omistajalle näkymättömiä, asiakkaalle umpikuja. Tämä tarkistuslista on tarkoitettu sinulle, joka ylläpidät Shopify-, WooCommerce-, Wix- tai Squarespace-sivustoa ilman omaa kehittäjää.

Pitääkö pienyrityksen verkkosivuston olla saavutettava?

Jos myyt kuluttajille EU:ssa, luultavasti kyllä. EU:n esteettömyysdirektiivi (avautuu uuteen välilehteen) on koskenut verkkokaupan palveluja 28.6.2025 alkaen, ja Suomessa vaatimuksia valvoo Traficom. Tärkein poikkeus koskee palveluja tarjoavia mikroyrityksiä: yrityksiä, joilla on alle 10 työntekijää ja joiden vuosiliikevaihto tai taseen loppusumma on enintään 2 miljoonaa euroa.

Verkkokaupalla tarkoitetaan tässä verkkosivustolla tai sovelluksessa etänä myytäviä, ”kuluttajan omasta pyynnöstä toimitettavia palveluja kuluttajasopimuksen tekemiseksi” (3 artiklan 30 kohta). Verkkokauppa tai varausjärjestelmä sopii määritelmään. Poikkeus koskee vain palveluja: jos myyt soveltamisalaan kuuluvia tuotteita, kuten e-kirjojen lukulaitteita, sinun on silti noudatettava tuotteita koskevia sääntöjä (4 artiklan 5 kohta). EU:n ulkopuolinen sijaintikaan ei auta, sillä Ranskaan myyvä brittiläinen verkkokauppa kuuluu soveltamisalaan näiden asiakkaiden osalta (3 artiklan 4 kohta). Esteettömyysdirektiiviä käsittelevä oppaamme kertoo kansallisista laeista ja seuraamuksista.

Iso-Britannian Equality Act 2010 (avautuu uuteen välilehteen) edellyttää kohtuullisia mukautuksia vammaisille ihmisille, mutta ei aseta verkkosivustoille teknistä standardia. Yhdysvalloissa oikeusministeriön maaliskuun 2022 ohje (avautuu uuteen välilehteen) toteaa, että yleisölle avointen yritysten on tehtävä verkossa tarjoamistaan palveluista saavutettavia ja että WCAG:n kaltaiset standardit ”antavat hyödyllistä ohjausta”. Sanoi laki mitä tahansa, asiakas, joka ei pääse kassasi läpi, ei osta.

Mitkä ovat verkkosivustojen yleisimmät saavutettavuusongelmat?

Kuusi virhettä on selvästi muita yleisempiä. WebAIM Million 2026 (avautuu uuteen välilehteen) -skannauksessa, joka kävi automaattisesti läpi miljoonan suosituimman sivuston etusivut helmikuussa 2026, 95,9 %:lla sivuista havaittiin WCAG-virheitä, keskimäärin 56,1 virhettä sivua kohden. Matalan kontrastin teksti oli yleisin ongelma, ja se löytyi 83,9 %:sta etusivuista.

Näiden tarkistusten taustalla on WCAG eli verkkosisällön saavutettavuusohjeet; useimmat lait viittaavat sen AA-tasoon, ja WCAG 2.2 -oppaamme esittelee uusimman version. Useaa alla olevaa tarkistusta mikään skanneri ei pysty arvioimaan.

Pystyvätkö kaikki lukemaan tekstisi ja ymmärtämään kuvasi?

Aloita tästä, koska korjaukset ovat edullisia ja useimmiten itse tehtävissä sivuston muokkaimessa. Tekstillä on oltava riittävä kontrasti, tietoa välittävillä kuvilla vaihtoehtoinen teksti, eikä minkään saa nojata pelkkään väriin. Colour Blind Awarenessin (avautuu uuteen välilehteen) mukaan noin joka 12. miehellä ja joka 200. naisella on värinäön poikkeama.

• Kontrasti. Tavallisen tekstin kontrastisuhteen on oltava vähintään 4,5:1 (avautuu uuteen välilehteen) taustaan nähden, suuren tekstin vähintään 3:1. Testaa värisi, myös bannerikuvien päällä oleva teksti, ilmaisella työkalulla. Värikontrastioppaamme näyttää korjauksia, joilla brändisi säilyy.
• Tuotteiden vaihtoehtoiset tekstit. Kuvaa se, mitä ostaja tarvitsee tietää: ”Tummansininen villaneule, jossa ribbineulottu poolokaulus, kuvattu edestä” on parempi kuin ”tuotekuva 1”. Aloita kymmenestä myydyimmästä tuotteesta.
• Koristekuvat. Taustan koristekuviolla pitää olla tyhjä vaihtoehtoinen teksti, jotta ruudunlukija ohittaa sen. Jotkin alustat täyttävät tyhjän alt-kentän tiedostonimellä, joten tarkista omasi.
• Pelkkä väri. ”Loppuunmyyty”, joka näkyy vain harmaaksi himmennettynä värinäytteenä, tai pakollinen kenttä, joka on merkitty vain punaisella, ei tavoita kaikkia. Katso sivua puhelimen harmaasävysuodattimella ja lisää sana tai kuvake kaikkialle, missä merkitys katoaa.
• Zoomaus. Kun selaimen zoomaus on 200 %, tekstin pitää suurentua menemättä päällekkäin tai leikkautumatta, ja valikon pitää yhä toimia.
• Sivun kieli. Mikä tahansa ilmainen tarkistustyökalu huomauttaa puuttuvasta kielimäärityksestä. Se on teeman asetus tai yhden rivin muutos sivupohjaan.

Voiko sivustoasi käyttää näppäimistöllä?

Moni selaa ilman hiirtä: ruudunlukijan käyttäjät, ihmiset, joilla on vapinaa tai rajoittunut käsien liikkuvuus, ja kuka tahansa, jonka kosketuslevy on juuri lakannut toimimasta. Laita hiiri sivuun ja paina sarkainta. Sinun pitäisi päästä jokaiseen linkkiin, painikkeeseen ja lomakekenttään järkevässä järjestyksessä, nähdä aina, missä olet, etkä saisi koskaan jäädä jumiin.

• Näkyvä kohdistus. Reunuksen pitää näyttää, mikä elementti on aktiivinen, eikä kiinteä yläpalkki tai chat-kupla saa peittää sitä (WCAG 2.2:n kriteeri 2.4.11 Näkyvä kohdistin ei peity). Moni teema poistaa reunuksen ulkonäön vuoksi; kehittäjä voi palauttaa sen.
• Ei loukkuja. Avaa valikko, koonvalitsin, ponnahdusikkunat ja kuvagalleria näppäimistöllä, valitse jotain ja yritä sitten poistua. Esc-näppäimen pitää sulkea ponnahdusikkunat.
• Nimet kuvakkeille. Jokainen kuvakelinkki ja -painike tarvitsee nimen, jonka ruudunlukija voi lukea, esimerkiksi ”Ostoskori, 2 tuotetta”. Korvaa ”Klikkaa tästä” sanoilla, jotka kertovat, minne linkki vie.
• Ohituslinkki ja otsikot. Ensimmäisen sarkaimen painalluksen pitäisi mieluiten tuoda näkyviin ”Siirry sisältöön” -linkki. WebAIMin vuoden 2024 ruudunlukijakyselyssä (avautuu uuteen välilehteen) 71,6 % vastaajista kertoi liikkuvansa pitkällä sivulla ensin otsikoiden avulla, joten käytä oikeita otsikkotasoja, älä lihavointia.
• Kosketuskohteet. WCAG 2.2 edellyttää vähintään 24 × 24 CSS-pikselin kohteita tai riittävästi tilaa niiden ympärillä (onnistumiskriteeri 2.5.8 (avautuu uuteen välilehteen)).

Pääsevätkö kaikki lomakkeidesi, ostoskorisi ja kassasi läpi?

Kassalla saavutettavuusongelmat maksavat sinulle suoraan rahaa, joten testaa se alusta loppuun, myös se, mitä tapahtuu, kun jokin menee pieleen. Jokainen kenttä tarvitsee näkyvän nimiön, virheilmoitusten on selitettävä ongelma sanoin, eikä kirjautuminen saa riippua muistitesteistä tai pulmista. Myös maksupalveluntarjoajasi sivut lasketaan mukaan.

• Nimiöt, ei vihjetekstejä. Kenttään kirjoitettu vihjeteksti katoaa heti, kun joku alkaa kirjoittaa, ja on usein liian vaalea luettavaksi. Jokainen kenttä tarvitsee nimiön, joka pysyy näkyvissä.
• Virheilmoitukset. Lähetä lomake tyhjänä. Jokaisen virheen pitää olla kirjoitettu auki (”Anna postinumero, esimerkiksi 00100”), sijaita oman kenttänsä vieressä ja tulla luetuksi ääneen, eikä vain muuttaa reunusta punaiseksi.
• Älä kysy kahdesti. Tarjoa ”Laskutusosoite on sama” sen sijaan, että toimitusosoite pitäisi kirjoittaa uudelleen. WCAG 2.2 teki tästä A-tason vaatimuksen, kriteerin 3.3.7 Tarpeeton toistaminen.
• Kirjautuminen. Anna käyttäjien liittää salasanoja ja kertakäyttökoodeja ja käyttää salasanojen hallintaohjelmia. Liittämisen estäminen rikkoo WCAG 2.2:n saavutettavaa todentamista koskevaa kriteeriä (avautuu uuteen välilehteen), ellet tarjoa toista tapaa kirjautua.
• CAPTCHA:t. Ruudunlukijan käyttäjät arvioivat WebAIMin vuoden 2024 kyselyssä CAPTCHA:n verkon ongelmallisimmaksi asiaksi. Jos tarvitset suojaa botteja vastaan, vältä visuaalisia pulmia ja tarjoa aina ei-visuaalinen vaihtoehto.
• Aikarajat. Jos ostoskorin tai varauksen varausaika umpeutuu, varoita käyttäjää ja anna hänen jatkaa aikaa.

Jos osa kassasta kuuluu alustallesi tai maksupalveluntarjoajallesi, testaa se silti, ilmoita ongelmista ja luettele ne tunnettuina puutteina.

Entä evästeilmoitukset, ponnahdusikkunat ja chat-widgetit?

Asiakkaillesi kolmannen osapuolen skriptit ovat osa verkkosivustoasi. Evästeilmoitus, jota ei voi sulkea näppäimistöllä, estää jokaisen sivun käytön, ja uutiskirjeen ponnahdusikkuna, joka kaappaa kohdistuksen kesken kassan, voi pysäyttää kaupan. Testaa jokainen lisäämäsi skripti ja kysy toimittajilta saavutettavuudesta ennen uuden asentamista.

• Evästeilmoitus. Pääsetkö hyväksymiseen ja hylkäämiseen sarkaimella, pystytkö lukemaan ne 200 %:n zoomauksella ja jatkamaan sen jälkeen siitä, mihin jäit?
• Ponnahdusikkunat. Kohdistuksen pitää siirtyä ponnahdusikkunaan, pysyä siellä, kunnes ikkuna suljetaan, ja palata sitten takaisin. Esc-näppäimen pitää sulkea se.
• Chat-widgetit. Painike tarvitsee nimen, ikkunan pitää avautua ja sulkeutua näppäimistöllä, eikä se saa puhelimessa peittää ”Maksa nyt” -painiketta.
• Karusellit. Kaikessa, mikä liikkuu automaattisesti yli viisi sekuntia, on oltava tapa keskeyttää, pysäyttää tai piilottaa se (WCAG 2.2 (avautuu uuteen välilehteen), onnistumiskriteeri 2.2.2).
• Upotukset. Arvostelu-widgetit, kartat ja varaustyökalut ovat nekin sivullasi. Vie puutteet toimittajan tietoon.

Toimivatko videosi, PDF-tiedostosi ja ruokalistasi kaikille?

Videot tarvitsevat tekstityksen, äänisisältö tekstivastineen, eikä tärkeä tieto saa olla vain PDF-tiedostossa tai kuvassa. Ravintola, jonka ruokalista on skannattu PDF, tai kauppa, jonka kokotaulukko on valokuva taulukosta, sulkee ulos ruudunlukijan käyttäjät ja kaikki, joiden täytyy zoomata puhelimella.

• Tekstitykset ja tekstivastineet. Korjaa automaattiset tekstitykset ennen julkaisua. Podcastit tarvitsevat tekstiversion.
• Kuvat tekstistä. Laita ruokalistat, hinnastot, kokotaulukot ja aukioloajat tavalliselle verkkosivulle. Jos PDF on pakko käyttää, vie se tekstinkäsittelyohjelmasta otsikoineen ja tageineen sen sijaan, että skannaisit tulosteen.
• Vanhemmat tiedostot. EAA ei edellytä, että korjaat ennen 28.6.2025 julkaistuja toimisto-ohjelmien tiedostoja tai valmiiksi tallennettua ääntä ja videota tai arkistoja, joita et enää päivitä (2 artiklan 4 kohta). Uudet tiedostot kuuluvat soveltamisalaan.

Mitä voin korjata itse, ja milloin tarvitsen kehittäjän tai auditoinnin?

Useimmat sisältöongelmat voit korjata itse julkaisujärjestelmässä: vaihtoehtoiset tekstit, otsikot, linkkitekstit, värit, tekstitykset ja monet lomakekenttien nimiöt. Teematason ongelmat, kuten puuttuvat kohdistuksen tyylit, näppäimistöloukut ja räätälöidyt pudotusvalikot, vaativat kehittäjän. Auditointi on järkevintä, kun perusasiat on korjattu, tai ennen kuin uudistettu sivusto julkaistaan.

Mihin omamme kaltainen widget sopii? Kävijän käyttämä paneeli, kuten SiteAccessible, antaa ihmisten nostaa kontrastia, suurentaa tekstiä tai ottaa käyttöön lukuviivan. Se auttaa joitakin kävijöitä, mutta ei kuittaa yhtään kohtaa tästä listasta: nimetön painike pysyy nimettömänä ja näppäimistöloukku loukkuna. Korjaa sivusto ensin ja pidä widgetiä lisänä.

Miten kirjaan tekemäni työn?

Pidä yksinkertaista lokia siitä, mitä testasit, milloin, mitä korjasit ja mikä on yhä rikki, ja julkaise rehellinen yhteenveto saavutettavuusselosteessa. Jos EAA koskee sinua, sinun on lisäksi julkaistava tiedot siitä, miten palvelusi täyttää esteettömyysvaatimukset, yleensä yleisissä ehdoissa tai vastaavassa asiakirjassa.

Jälkimmäinen velvollisuus tulee direktiivin liitteestä V; kansallinen laki määrää muodon. Saavutettavuusselosteen kirjoittamista käsittelevässä oppaassamme on pohja, jota voit muokata. Pidä sitten rutiini käynnissä:

1. Käy tarkistuslista läpi kolmella tärkeimmällä sivullasi ja ota kuvakaappaus jokaisesta virheestä.
2. Korjaa sisältökohdat itse tällä viikolla.
3. Anna kehittäjälle teemaa ja kassaa koskevat kohdat, pahimmat ensin.
4. Testaa jokainen korjaus uudelleen näppäimistöllä ja tarkistustyökalulla.
5. Julkaise tai päivitä selosteesi päivämäärän kera.
6. Toista aina, kun lisäät sovelluksen, vaihdat teemaa tai julkaiset uuden laskeutumissivun.