Saavutettavuus ja käytettävyys

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

— Tim Berners-Lee, WWW:n keksijä

Tämä luento kokoaa yhteen sen, mitä saavutettavuudesta on kurssin muilla luennoilla kerrottu, ja antaa asialle kehikon: WCAG-ohjeiston neljä periaatetta. Lisäksi käydään läpi lainsäädäntö, joka Suomessa velvoittaa, ja se miten sivun saavutettavuutta testataan.

Oppimistavoitteet

Tämän luennon jälkeen sinun pitäisi osata:

selittää, mitä saavutettavuus tarkoittaa ja ketä se hyödyttää;
nimetä WCAG:n neljä periaatetta ja kertoa, mitä kukin tarkoittaa käytännössä;
kertoa, mikä laki Suomessa velvoittaa ja mitä tasoa se vaatii;
tunnistaa tavallisimmat saavutettavuusvirheet omalta sivultasi;
testata sivun ilman kuvia, ilman tyylejä, näppäimistöllä ja ruudunlukijalla.

1. Ketä varten?

Saavutettavuudessa ei ole kyse vain vammaisista käyttäjistä. Sivua käytetään hyvin erilaisissa tilanteissa ja hyvin erilaisilla laitteilla.

Käyttäjiä ja tilanteita, jotka on syytä pitää mielessä.
Käyttäjä tai tilanne	Mitä se vaatii sivulta
Sokea tai heikkonäköinen	Ruudunlukija, suurennus tai oma kontrastiasetus. Sivun on toimittava ilman näköhavaintoa ja kestettävä tekstin suurentaminen
Kuuro tai huonokuuloinen	Videoiden tekstitykset ja äänitallenteiden tekstivastineet
Motorisia rajoitteita	Sivun on toimittava pelkällä näppäimistöllä tai erillisellä osoitinlaitteella. Pieniä osumakohtia on vältettävä
Kognitiivisia tai lukemisen vaikeuksia	Selkeä kieli, johdonmukainen rakenne, ei yllättäviä muutoksia eikä aikarajoja
Tilapäinen rajoite	Murtunut käsi, kirkas auringonvalo, meluisa juna, kädessä oleva kahvikuppi. Sama ratkaisu auttaa kaikissa
Laitteen rajoite	Pieni näyttö, hidas yhteys, vanha selain, hakukoneen robotti

Yksi sivu kaikille

Älä tee erillistä versiota vammaisille käyttäjille. Tee yksi sivu, joka toimii kaikille. Erillinen versio jää poikkeuksetta päivittämättä, ja se viestii, ettei osa käyttäjistä kuulu varsinaiseen yleisöön.

1.1 Käsitteet

Saavutettavuus (accessibility): Digitaalisen palvelun käytettävyys myös silloin, kun käyttäjällä on jokin rajoite tai hän käyttää apuvälinettä. Tämä on nykyisin vakiintunut termi verkkopalveluista puhuttaessa.
Esteettömyys: Sama asia fyysisestä ympäristöstä ja laitteista puhuttaessa. Molemmat vastaavat englannin sanaa accessibility, ja niitä käytetään usein synonyymeinä.
Käytettävyys (usability): Se, kuinka tehokkaasti, tuloksellisesti ja tyytyväisesti käyttäjä saavuttaa tavoitteensa. Saavutettavuus on käytettävyyttä niille, joille tavallinen ratkaisu ei riitä.

2. Lainsäädäntö

Saavutettavuus ei ole enää pelkkä suositus vaan lakisääteinen vaatimus.

Mitä laki vaatii ja keneltä.
Säädös	Koskee
Laki digitaalisten palvelujen tarjoamisesta (306/2019)	Julkista sektoria: valtio, kunnat, korkeakoulut, julkisoikeudelliset laitokset sekä osa yksityisistä toimijoista. Toimeenpanee EU:n saavutettavuusdirektiivin 2016/2102
Laki eräiden tuotteiden ja palvelujen esteettömyysvaatimuksista (102/2023)	Laajentaa vaatimukset yksityisen sektorin palveluihin: verkkokaupat, pankki- ja maksupalvelut, viestintäpalvelut, sähkökirjat ja liikenne. Toimeenpanee EU:n esteettömyysdirektiivin 2019/882, ja sitä on sovellettu kesäkuusta 2025 alkaen

Molemmat lait viittaavat eurooppalaiseen standardiin EN 301 549, joka puolestaan viittaa WCAG-ohjeistoon. Käytännössä vaatimus on siis:

Vaatimus on WCAG 2.1, taso AA

Tasoja on kolme: A on vähimmäistaso, AA on se, jota laki vaatii, ja AAA on tavoitetaso, jota ei ole realistista saavuttaa kaikella sisällöllä. Uusin versio WCAG 2.2 julkaistiin vuonna 2023 ja se lisäsi muutaman uuden kriteerin; se on yhteensopiva vanhemman kanssa, joten 2.2:n mukaan tehty sivu täyttää myös 2.1:n vaatimukset.

Vanhentunutta WCAG 1.0 -versiota ei pidä enää käyttää.

Velvoitetun palvelun on lisäksi julkaistava saavutettavuusseloste, jossa kerrotaan, miltä osin palvelu täyttää vaatimukset ja miten puutteista voi huomauttaa. Valvonnasta vastaa Suomessa Etelä-Suomen aluehallintovirasto, jonka ylläpitämä saavutettavuusvaatimukset.fi on paras suomenkielinen lähde.

3. WCAG:n neljä periaatetta

WCAG jäsentää saavutettavuuden neljään periaatteeseen. Ne muodostavat muistisäännön POUR englanninkielisistä nimistään.

Neljä periaatetta.
Periaate	Tarkoittaa
Havaittava Perceivable	Sisällön on oltava aistittavissa jollakin tavalla. Jos et näe kuvaa, sinun on saatava sen tieto muuten
Hallittava Operable	Käyttöliittymän on toimittava myös ilman hiirtä ja ilman kiirettä
Ymmärrettävä Understandable	Sisällön ja toiminnan on oltava ymmärrettävää ja ennakoitavaa
Toimintavarma Robust	Sisällön on toimittava erilaisilla laitteilla ja apuvälineillä myös jatkossa

3.1 Havaittava

Sisällön on oltava havaittavissa myös silloin, kun jokin aisti ei ole käytössä.

Havaittavuus käytännössä.
Vaatimus	Miten se tehdään
Kuvilla on tekstivastine	Jokaisella kuvalla `alt`-teksti, joka välittää saman tiedon kuin kuva. Koristekuvalle tyhjä `alt=""`. Katso HTML5-luennon luku 12.1
Videoilla on tekstitykset	`track`-elementti ja WebVTT-tiedosto. Äänitallenteelle litterointi. Katso multimedialuennon luku 4.4
Rakenne on merkitty oikein	Otsikot `h1`–`h6`, listat `ul`-, `ol`- ja `dl`-elementeillä, taulukot `th`- ja `scope`-merkintöineen. Ruudunlukija navigoi näiden avulla
Kontrasti on riittävä	4,5:1 tavalliselle tekstille, 3:1 suurelle tekstille (vähintään 24 px tai lihavoituna 19 px) ja 3:1 ei-tekstisisällölle kuten lomakekenttien reunoille
Väri ei ole ainoa keino	Jos virheellinen kenttä merkitään punaisella, mukana on oltava myös teksti tai symboli. Sama koskee kaavioita ja linkkejä leipätekstissä
Teksti skaalautuu	Fonttikoot `rem`-yksikössä, ei `px`-yksikössä. Sivun on kestettävä 200 %:n suurennus ilman että sisältöä katoaa. Katso CSS-luennon luku 6

Kontrasti on syytä mitata, ei arvata

Vaaleanharmaa teksti valkoisella taustalla on tyypillisin tapa epäonnistua, ja se näyttää suunnittelijan näytöllä aivan hyvältä. Mittaa kontrasti WebAIMin työkalulla tai selaimen kehittäjätyökalujen värivalitsimella, joka näyttää suhteen suoraan.

Vanhoissa ohjeissa neuvotaan käyttämään mustaa tekstiä valkoisella. Se täyttää vaatimuksen reilusti, mutta on monille epämiellyttävän kirkas. Hyvin tumma harmaa valkoisella on miellyttävämpi ja yhtä lain mukainen.

3.2 Hallittava

Käyttöliittymän on toimittava myös ilman hiirtä, ilman tarkkaa käden hallintaa ja ilman kiirettä.

Hallittavuus käytännössä.
Vaatimus	Miten se tehdään
Kaikki toimii näppäimistöllä	Jokaiseen linkkiin, painikkeeseen ja lomakekenttään on päästävä sarkaimella, eikä minnekään saa jäädä jumiin. Tämä toteutuu itsestään, kun käytät oikeita HTML-elementtejä
Kohdistus näkyy	Älä koskaan kirjoita `outline: none`. Jos selaimen oletusreunus ei miellytä, korvaa se omalla näkyvällä tyylillä. Katso valitsinluennon luku 4.1
Järjestys on looginen	Sarkain etenee koodin mukaisessa järjestyksessä, ei siinä, mihin CSS on asiat siirtänyt. Kirjoita sisältö koodiin siinä järjestyksessä kuin se on tarkoitettu luettavaksi, äläkä käytä positiivisia `tabindex`-arvoja
Navigoinnin voi ohittaa	Merkitse sivun osat `header`-, `nav`-, `main`- ja `footer`-elementeillä, jolloin ruudunlukijan käyttäjä voi hypätä suoraan sisältöön. Lisäksi kannattaa tehdä näkyvä hyppylinkki sivun alkuun
Ei vilkkumista eikä pakotettua liikettä	Yli kolme sekuntia kestävä liike on voitava pysäyttää, eikä mikään saa välkkyä yli kolmesti sekunnissa. Kunnioita `prefers-reduced-motion`-asetusta
Linkkiteksti kertoo kohteen	"Lue asennusohje", ei "klikkaa tästä". Ruudunlukijan käyttäjä voi selata linkit listana ilman ympäröivää tekstiä

Hyppylinkki kirjoitetaan sivun ensimmäiseksi elementiksi:

<body>
  <a class="hyppy" href="#sisalto">Siirry suoraan sisältöön</a>

  <header>...</header>
  <nav>...</nav>

  <main id="sisalto">...</main>
</body>

Piilota hyppylinkki oikein

Hyppylinkin saa piilottaa näkyvistä, kunhan se ilmestyy näkyviin, kun siihen siirrytään sarkaimella. Älä käytä display: none- määritystä: se piilottaa linkin myös ruudunlukijalta ja poistaa sen sarkainjärjestyksestä, jolloin koko linkin tarkoitus katoaa.

3.3 Ymmärrettävä

Ymmärrettävyys käytännössä.
Vaatimus	Miten se tehdään
Kieli on merkitty	`<html lang="fi">`, ja poikkeavalle kieliosuudelle oma `lang`-merkintä. Ruudunlukija valitsee sen perusteella oikean ääntämyksen
Teksti on luettavaa	Lyhyet virkkeet, väliotsikot, listat. Lyhenteet kirjoitetaan auki ensimmäisellä kerralla. Vältä suuraakkosia kokonaisissa sanoissa
Sivusto on johdonmukainen	Navigointi samassa paikassa ja samassa järjestyksessä joka sivulla. Sama toiminto nimetään aina samalla tavalla
Mikään ei tapahdu yllättäen	Sivu ei saa vaihtua tai lomake lähteä pelkästä kentän valitsemisesta tai arvon muuttamisesta. Linkkejä ei avata uuteen ikkunaan käyttäjän puolesta
Lomakkeet ohjaavat	Jokaisella kentällä `label`. Ohje kentän muodosta näkyvänä tekstinä ennen kenttää. Virheilmoituksessa kerrotaan, mikä meni vikaan ja miten sen korjaa. Katso lomakeluennon luku 12

3.4 Toimintavarma

Toimintavarmuus käytännössä.
Vaatimus	Miten se tehdään
Merkintä on virheetöntä	Dokumentti menee validaattorista läpi: elementit suljettu, ei kaksoiskappaleita `id`-arvoissa. Apuvälineet tulkitsevat rikkinäistä merkintää arvaamattomasti
Elementeillä on nimi ja rooli	Käytä oikeaa HTML-elementtiä oikeaan tarkoitukseen. Painike on `button`, ei `div`, jolle on lisätty klikkauskäsittelijä
Sisältö toimii ilman ulkoasua	Sivun on oltava luettavassa järjestyksessä myös ilman tyylitiedostoa

ARIA:n ensimmäinen sääntö

ARIA on joukko attribuutteja, joilla apuvälineille voi kertoa elementin roolin ja tilan. Sen tärkein sääntö kuuluu: älä käytä ARIAa, jos tehtävään on olemassa HTML-elementti. Natiivi button on aina parempi kuin <div role="button">, koska se toimii itsestään myös näppäimistöllä. Väärin käytetty ARIA tekee sivusta huonomman kuin ei ARIAa lainkaan.

Tällä kurssilla ARIAa tarvitaan käytännössä yhteen asiaan: pidemmän ohjeen liittämiseen lomakekenttään aria-describedby-attribuutilla.

4. Myyttejä saavutettavuudesta

Tavallisimmat vastaväitteet ja niiden kumoaminen.
Väite	Vastaus
Saavutettavuus on vaikeaa	Osa siitä on: kuvailutulkkaus ja monimutkaisten sovellusten saavutettavuus vaativat asiantuntemusta. Perusasiat ovat kuitenkin muutamia merkintöjä ja järkevä rakenne, ja tämän kurssin sisältö riittää niihin
Saavutettavuus on kallista	Jälkikäteen korjaaminen on. Alusta asti huomioituna kyse on pienistä valinnoista: kirjoitanko `alt`-tekstin vai en. Vertaa siihen aikaan, joka kuluu grafiikan tekemiseen
Kyse on pienestä vähemmistöstä	Suomessa on noin 80 000 näkövammaista, ja ikääntyminen kasvattaa joukkoa nopeasti. Tilapäiset rajoitteet koskevat kaikkia jossain vaiheessa. Jos sivustolla käy kuukaudessa kaksi miljoonaa kävijää, prosenttikin on 20 000 ihmistä
Web on visuaalinen	Niin ovat elokuvat ja televisiokin, ja silti niitä seurataan tekstityksellä ja kuvailutulkkauksella. Webin alkuperäinen ajatus oli tuoda tieto kaikkien saataville
Saavutettavasta tulee ruma	Saavutettavuus ei rajoita ulkoasua vaan vaatii riittävän kontrastin ja järkevän rakenteen. Kumpikaan ei estä hyvää muotoilua
Käyttäjät ovat oppineet	Käyttäjätutkimuksissa samat asiat hämmentävät yhä: uuteen ikkunaan avautuvat linkit, käydyn linkin värin puuttuminen, turhat etusivut ja alasivuilta puuttuva paluu etusivulle

Saavutettavuudesta on myös suoraa hyötyä. Sivusto toimii useammalla laitteella, löytyy hakukoneista paremmin, kestää aikaa ja on helpompi ylläpitää. Suuri osa saavutettavuudesta on samoja asioita, jotka tekevät sivusta hyvän kaikille.

5. Esimerkkejä esteellisistä sivuista

Historiallisia esimerkkejä

Alla olevat ruudunlukijanauhoitteet ja kuvakaappaukset ovat vuosien takaa, ja kaikki mainitut sivustot ovat sittemmin uudistuneet. Ne ovat silti opettavaisia: nauhoitteesta kuulee, miltä huonosti merkitty sivu kuulostaa, eikä sitä kokemusta saa mistään lukemalla. Kuuntele nauhoite ja katso samalla kuvakaappausta, joka on otettu samasta kohdasta.

Ruudunlukijanauhoitteita vanhoilta sivustoilta.
Sivusto	Nauhoite	Kuvakaappaus
Kilroy Travels	kilroy.mp3	kilroy.jpg
VR	vr.mp3	vr.jpg
Telkku.com	telkku.mp3	telkku.jpg
Kurssin oma etusivu	kurssin_etusivu.mp3	tekstiselaimella

Vertaa erityisesti kolmea ensimmäistä kurssin omaan etusivuun. Ero ei ole siinä, miltä sivut näyttävät, vaan siinä kuinka kauan kestää päästä varsinaiseen asiaan ja onko kuultavissa mitään rakennetta.

Mieti kuunnellessasi

Kuinka monta linkkiä luetaan ennen kuin sisältö alkaa?
Kuuletko otsikoita, vai onko kaikki yhtä tekstivirtaa?
Mitä kuvista sanotaan? Luetaanko tiedostonimiä?
Tietäisitkö pelkän äänen perusteella, millä sivulla olet?

6. Saavutettavuuden testaaminen

Automaattiset työkalut löytävät arviolta kolmanneksen ongelmista. Loput vaativat, että sivua kokeillaan itse. Alla oleva järjestys on nopein tapa löytää suurin osa virheistä.

Testit järjestyksessä.
Testi	Mitä siitä näkee
1. Validoi	HTML ja CSS. Rikkinäinen merkintä on ensimmäinen asia, joka sekoittaa apuvälineet
2. Liiku sarkaimella	Paina `Tab` sivun alusta loppuun. Näetkö koko ajan, missä olet? Eteneekö järjestys loogisesti? Pääsetkö kaikkialle?
3. Ota tyylit pois	Web Developer -laajennuksesta CSS → Disable Styles → All Styles. Onko sisältö luettavassa järjestyksessä? Näkyykö rakenne otsikkoina?
4. Ota kuvat pois	Puuttuvatko alt-tekstit? Katoaako jotain olennaista?
5. Suurenna tekstiä	`Ctrl`+`+` 200 prosenttiin asti. Pysyykö sivu kasassa? Katoaako sisältöä? Tuleeko vaakavierityspalkkia?
6. Kavenna ikkuna	Noin 360 pikseliin. Sama tarkistus kuin edellä
7. Mittaa kontrastit	Kehittäjätyökalujen värivalitsin tai WebAIM Contrast Checker
8. Aja automaattinen tarkistus	WAVE tai selaimen oma Lighthouse-tarkistus. Katso HTML5-luennon luku 20
9. Kuuntele ruudunlukijalla	Tehokkain yksittäinen testi. Katso luku 6.1

Automaattinen tarkistus ei riitä

Työkalu näkee, puuttuuko alt-attribuutti. Se ei näe, onko teksti mielekäs. alt="kuva" läpäisee kaikki automaattiset tarkistukset ja on silti täysin hyödytön. Sama koskee otsikoita, linkkitekstejä ja lomakkeiden ohjeita.

6.1 Ruudunlukijan kokeileminen

Ruudunlukija on todennäköisesti jo laitteessasi. Kokeileminen kannattaa: viisi minuuttia omaa sivua kuunnellen kertoo enemmän kuin mikään tarkistuslista.

Käyttöjärjestelmien omat ruudunlukijat.
Järjestelmä	Ohjelma	Käynnistys
Windows	Narrator eli Lukija	`Ctrl`+`Win`+`Enter`
macOS	VoiceOver	`Cmd`+`F5`
iOS	VoiceOver	Asetukset → Käyttöapu
Android	TalkBack	Asetukset → Esteettömyys

Erillisistä ohjelmista yleisimmät ovat NVDA, joka on ilmainen ja avoin, sekä JAWS, joka on maksullinen mutta ammattikäytössä yleisin.

Kokeile ensin silmät auki

Käynnistä ruudunlukija ja seuraa mitä se lukee. Kun logiikka on selvä, sulje silmäsi tai käännä näyttö pois ja yritä löytää sivulta jokin tieto. Se on epämukavaa ensimmäisellä kerralla, ja juuri siitä syystä hyödyllistä.

7. Tarkistuslista

Käy lista läpi, ennen kuin palautat harjoitustyön.

Meneekö sivu HTML- ja CSS-validaattorista läpi ilman virheitä?
Onko html-elementissä lang="fi"?
Onko sivulla yksi h1 ja etenevätkö otsikkotasot loogisesti?
Onko sivu merkitty header-, nav-, main- ja footer-elementeillä?
Onko jokaisella kuvalla alt, ja kertooko se kuvan tiedon?
Onko jokaisella lomakekentällä label?
Kertooko jokainen linkkiteksti, minne se vie?
Näkyykö kohdistus, kun liikut sarkaimella? Pääsetkö kaikkialle?
Onko kontrasti vähintään 4,5:1, ja onko se tarkistettu myös tummassa tilassa?
Toimiiko sivu ilman tyylitiedostoa ja ilman kuvia?
Pysyykö sivu kasassa 200 %:n tekstikoolla ja 360 pikselin leveydellä?
Onko videoissa tekstitykset?

8. Lisätietoa

Saavutettavuusvaatimukset.fi, viranomaisen ylläpitämä suomenkielinen ohjeistus.
WCAG ja Quick Reference, jossa jokainen kriteeri tekniikkoineen.
W3C: Accessibility Tips, lyhyet ohjeet suunnittelijalle, kirjoittajalle ja kehittäjälle.
WebAIM, käytännönläheisiä artikkeleita ja työkaluja.
The A11Y Project Checklist, tarkistuslista WCAG-kriteereittäin.
Näkövammaisten liitto, tietoa apuvälineistä.

Käyttäjien kommentit