Yli miljardi ihmista maailmassa elaa jonkinlaisen vammaisuuden kanssa. Se on noin 15 % maailman vaestosta. Heihin kuuluu sokeita tai heikkonaokoisia ihmisia, kuuroija tai huonokuuloisia, liikuntarajoitteisia, kognitiivisesti erilaisia seka ihmisia, joilla on tilapaisio tiloja kuten murtunut kasi tai migreeni.
Kun rakennamme verkkosivustoja ottamatta huomioon naita todellisuuksia, emme vain tee asioista hankalia. Suljemme ihmiset tiedon, palveluiden ja mahdollisuuksien ulkopuolelle, joita muut pitavat itsestaan selvina. Saavutettavuus ei ole ominaisuus. Se on vastuu.
Mita verkkosaavutettavuus tarkoittaa
Verkkosaavutettavuus tarkoittaa verkkosivustojen suunnittelua ja kehittamista niin, etta vammaiset ihmiset voivat havaita, ymmartaa, navigoida ja olla vuorovaikutuksessa niiden kanssa. Se tarkoittaa myos sita, etta he voivat osallistua verkkoon.
Kyse on muustakin kuin ruudunlukijoista. Saavutettavuus kattaa:
- Nakoon liittyvat: sokeus, heikkonakoisyys, varisokeus
- Kuuloon liittyvat: kuurous, huonokuuloisuus
- Motoriset: rajoittunut hienomotoriikka, vapina, halvaantuminen
- Kognitiiviset: lukihairio, ADHD, muistivaikeudet, oppimisvaikeudet
- Tilap aiset ja tilannesidonaiset: murtunut ranne, kirkas auringonvalo naytolla, meluisa ymparisto, hidas internet
Tarkein oivallus on, etta saavutettava suunnittelu hyodyttaa kaikkia. Tekstitykset auttavat meluisassa huoneessa. Korkea kontrasti auttaa kirkkaassa valossa. Nappaimistonavigaatio auttaa tehokkaita kayttajia. Selkea kieli auttaa ei-aidinkielisia. Saavutettavuus ei ole erikoistila — se on hyvaa suunnittelua.
WCAG-standardi
Web Content Accessibility Guidelines (WCAG) on kansainvalinen verkkosaavutettavuuden standardi, jonka on julkaissut W3C. Nykyinen versio on WCAG 2.2, ja se on jarjestetty neljaan periaatteeseen, jotka tunnetaan lyhenteella POUR:
Havaittava (Perceivable)
Tieto on esitettava tavoilla, jotka kaikki kayttajat voivat havaita.
- Tekstivaihtoehdot: jokaisella kuvalla on oltava
alt-maare, joka kuvaa sen sisallon. Koristeelliset kuvat kayttavatalt="". - Tekstitykset ja transkriptiot: videosisalto tarvitsee tekstitykset; audiosisalto tarvitsee transkriptiot.
- Mukautuva rakenne: sisallon on oltava ymmatirretta, kun tyylit poistetaan. Kayta semanttista HTML:aa (
<h1>,<nav>,<main>,<article>), ei pelkkaa visuaalista tyylittelya. - Erotettava sisalto: riittava varikontrasti, skaalautuva teksti, ei tietoa valitten pelkastaan varin avulla.
Hallittava (Operable)
Kayttajien on voitava hallita kayttoliittymaa.
- Nappaimistosaavutettava: jokainen vuorovaikutteinen elementti on oltava saavutettavissa ja kaytettavissa pelkalla nappaimistolla. Ei hiiriansoja.
- Riittavasti aikaa: jos sisallolla on aikarajoja, kayttajien on voitava pidentaa tai poistaa ne kaytosta.
- Ei kohtauslaukaisijoita: valta sisaltoa, joka vilkkuu yli kolme kertaa sekunnissa.
- Navigoitava: selvat sivuotsikot, looginen otsikkohierarkia, ohita-navigointilinkit, nakyvat kohdistinilmaisimet.
Ymmarra (Understandable)
Sisallon ja kayttoliittyman on oltava ymmarrettavia.
- Luettava teksti: maarita sivun kieli (
lang-maare). Kayta selkeaa ja yksinkertaista kielta mahdollisuuksien mukaan. - Ennakoitava kayttaytyminen: navigoinnin on oltava johdonmukaista. Sivut eivat saa muuttaa kontekstia odottamattomasti.
- Syotteen avustus: merkitse lomakekentit selkeasti. Anna hyodyllisia virheilmoituksia, jotka selittavat mika meni pieleen ja miten se korjataan.
Lujatekoinen (Robust)
Sisallon on oltava tarpeeksi lujatekoista toimiakseen nykyisten ja tulevien teknologioiden kanssa.
- Kelvollinen HTML: oikea semanttinen merkintakieli, jonka avustavat teknologiat voivat tulkita luotettavasti.
- Nimi, rooli, arvo: mukautettujen komponenttien on paljastettava tarkoituksensa saavutettavuusrajapinnoille (ARIA:n kautta tarvittaessa).
Vaatimustasot
WCAG maarittelee kolme tasoa:
| Taso | Merkitys | Esimerkki |
|---|---|---|
| A | Vahimmassaavutettavuus | Kuvilla on alt-teksti, sivuilla on otsikot |
| AA | Vakiotavoite useimmille verkkosivustoille | Varikontrastisuhde vahintaan 4,5:1 normaalitekstille |
| AAA | Korkein taso, ei aina saavutettavissa | Kontrastisuhde 7:1, viittomakieli kaikille videoille |
Useimmat lait maailmanlaajuisesti vaativat tason AA noudattamista. Tama on taso, johon sinun tulisi pyrkia.
Yleiset esteet ja niiden korjaaminen
Puuttuva alt-teksti kuvissa
Ongelma: ruudunlukijan kayttajat kuulevat "kuva" tai eivat mitaan.
Ratkaisu: lisaa kuvaileva alt-teksti jokaiseen informatiiviseen kuvaan. Koristeellisille kuville kayta alt="", jotta ruudunlukijat ohittavat ne.
<!-- Hyva -->
<img
src="chart.png"
alt="Pylvaskaavio, joka nayttaa 40 %:n myynnin kasvun tammikuusta kesakuuhun 2025"
/>
<!-- Koristeellinen -->
<img src="divider.svg" alt="" />
Riittamaton varikontrasti
Ongelma: heikkonakoiset tai varisokeaan ihmiset eivat voi lukea tekstia.
Ratkaisu: varmista vahintaan 4,5:1 kontrastisuhde normaalitekstille ja 3:1 suurelle tekstille (18px+ tai 14px lihavoitu). Kayta kontrastintarkistustyokalua varien yhdistelmien tarkistamiseen.
Voit tarkistaa varikontrastisi heti Kontrastintarkistus-tyokalullamme. Se nayttaa WCAG AA- ja AAA-tulokset valittomasti.
Puuttuvat lomake-etiketit
Ongelma: ruudunlukijan kayttajat eivat tieda, mita lomakekentta on tarkoitettu.
Ratkaisu: jokaisella syotekentalla on oltava nakyvissaan <label>-elementti, joka on yhdistetty for-maareen avulla.
<!-- Hyva -->
<label for="email">Sahkopostiosoite</label>
<input type="email" id="email" name="email" />
<!-- Huono: paikkamerkki ei ole etiketti -->
<input type="email" placeholder="Sahkopostiosoite" />
Ei nappaimistonavigaatiota
Ongelma: kayttajat, jotka eivat voi kayttaa hiirta, ovat jumissa.
Ratkaisu: kayta natiiveja HTML-elementteja (<button>, <a>, <select>), jotka ovat nappaimistosaavutettavia oletuksena. Jos rakennat mukautettuja komponentteja, varmista etta ne ovat kohdistettavissa ja reagoivat nappaimistotapahtumiin. Ala koskaan poista kohdistusaariviivoija tarjoamatta vaihtoehtoa.
Puuttuva sivurakenne
Ongelma: ruudunlukijan kayttajat eivat voi navigoida tehokkaasti.
Ratkaisu: kayta semanttista HTML:aa. Yksi <h1> per sivu, looginen otsikkohierarkia (ala ohita tasoja), maamerkit (<nav>, <main>, <footer>).
Automaattisesti toistuvat mediat
Ongelma: odottamaton aani hairitsee ruudunlukijan kayttajia. Automaattisesti toistuva video voi laukaista kohtauksia tai aiheuttaa ahdistusta.
Ratkaisu: ala koskaan toista aanta automaattisesti. Jos video toistuu automaattisesti, varmista etta siina ei ole aanta oletuksena ja etta se tarjoaa taukohallinnan.
Vari ei riita
Ala koskaan luota variin ainoana tapana valittaa tietoa. Harkitse:
- Lomakekentta, jossa on punainen reunus virheelle, tarvitsee myos virhekuvakkeen tai tekstiviestin
- Kaavio, jossa on varillisia viivoja, tarvitsee myos kuvioita, etiketteja tai selitteen
- Juoksevassa tekstissa oleva linkki tarvitsee alleviivauksen tai muun visuaalisen vihjeen, ei pelkkaa varinmuutosta
Noin 8 % miehistaa ja 0,5 % naisista kaasii jonkinlaisesta varinakokyvyn puutteesta. Suunnittelu tama huomioon ottaen ei ole erityistapaus — se on perustavanlaatuista osallisuutta.
Saavutettavuuden testaaminen
Automaattinen testaus
Automaattiset tyokalut loyavaaat noin 30-40 % saavutettavuusongelmista. Ne ovat hyva ensimmainen askel, eivat taydellinnen ratkaisu.
- axe DevTools (selainlaajennus) — skannaa sivun ja raportoi WCAG-rikkomukset
- Lighthouse (sisaanrakennettu Chrome DevToolsiin) — sisaltaa saavutettavuustarkastuksen
- WAVE (verkkopohjainen tyokalu) — visuaalinen peittokerros, joka nayttaa ongelmat
Manuaalinen testaus
Monet saavutettavuusongelmat vaativat inhimillista arviointia:
- Nappaimistotestaus: irrota hiiri ja navigoi koko sivustosi Tab-, Enter-, Escape- ja nuolinappaimilla. Paasetkoo kaikkialle? Onko kohdistusjaarjestys looginen?
- Ruudunlukijatestaus: kokeile VoiceOveria (Mac), NVDA:ta (Windows, ilmainen) tai TalkBackia (Android). Onko sisalto jarkeiva aeneen luettuna?
- Zoomaustestaus: zoomaa selain 200 %:iin. Toimiiko asettelu yha? Leikkautuuko tai paallekkaistuuko sisaltoa?
- Vahennetty liike: ota kayttoon "vahenna liiketta" kayttojarjestelman asetuksissa. Kunnioittavatko animaatiot tata asetusta?
Kayttajatestaus
Arvokkain palaute tulee ihmisiliita, jotka todella kayttavat avustavaa teknologiaa paivittaisessa elamassaan. Jos budjettisi sallii, ota vammaiset kayttajat mukaan testausprosessiisi.
Saavutettavuus on kirjo, ei valintaruutu
Saavutettavuus ei ole kertaluonteinen projekti, jolla on maaliviiva. Se on jatkuva kaytanto. Verkkosivustot muuttuvat, sisaltoa lisataan ja uusia esteita voi syntya jokaisen paivityksen yhteydessa.
Tavoite ei ole taydelisyys. Tavoite on jatkuva parantaminen ja aito valittaminen ihmisista, jotka kayttavat rakentamaasi. Aloita vaikuttavimmista muutoksista — varikontrasti, alt-teksti, nappaimistonavigaatio, lomake-etiketit — ja rakenna siita eteenpain.
Jokainen este, jonka poistat, on ovi, jonka avaat.
Pikatarkistuslista
- Kaikissa kuvissa on mielek as
alt-teksti (taialt=""jos koristeellinen) - Varikontrasti tayttaa WCAG AA:n (4,5:1 tekstille, 3:1 suurelle tekstille)
- Kaikissa lomakekentissa on nakyvat etiketit
- Sivusto on kokonaan navigoitavissa nappaimistolla
- Otsikot noudattavat loogista hierarkiaa
- Kohdistinilmaisimet ovat nakyvissa
- Sivun kieli on maaritetty (
lang-maare<html>-elementissa) - Mitaan tietoa ei valiteta pelkaastaan varin avulla
- Videoissa on tekstitykset
- Animaatiot kunnioittavat
prefers-reduced-motion-asetusta