Verkkosivun saavutettavuus: WCAG 2.2 -aloitusopas

Verkkosivun saavutettavuus tarkoittaa, että sivu rakennetaan niin, että ihmiset voivat käyttää sitä näppäimistöllä, ruudunlukijalla, zoomilla tai vaihtokytkimellä hiiren lisäksi. Käytä oikeita HTML-elementtejä painikkeisiin, linkkeihin, väliotsikoihin ja lomakkeiden nimilappuihin, anna kuville merkityksellinen alt-teksti, pidä tekstin kontrasti korkeana ja tee tarkennus näkyväksi. Tavoitteena on standardi WCAG 2.2 -taso AA. Automaattiset tarkistimet löytävät osan ongelmista; kymmenen minuutin näppäimistö- ja ruudunlukijatesti löytää suuren osan loput.

Mitä ”saavutettava” tarkoittaa käytännössä

Saavutettavuus koskee ihmisiä: sokeaa, joka käyttää ruudunlukijaa, ihmistä, jolla on vapina ja joka liikkuu näppäimistöllä, heikkonäköistä, joka zoomaa 200 %:iin, ihmistä, joka lukee kirkkaassa auringonvalossa, tai ihmistä, jolla on väliaikaisesti rikkoutunut ranne. Hyvä saavutettavuus tekee usein sivusta paremman kaikille: selkeämpi rakenne, luettava teksti ja lomakkeet, jotka selittävät virheensä.

Viitestandardi on W3C:n Web Content Accessibility Guidelines (WCAG). Syyskuusta 2026 lähtien nykyinen versio on WCAG 2.2 (julkaistu lokakuussa 2023, päivitetty joulukuussa 2024); WCAG 3 on varhainen luonnos. WCAG nojaa neljään periaatteeseen — sisällön on oltava havaittavaa, käyttökelpoista, ymmärrettävää ja vakaata — ja siinä on kolme vaatimustasoa:

Taso	Mitä se tarkoittaa	Kuka tavoittelee sitä
A	Minimi; ilman sitä jotkut eivät voi käyttää sivustoa lainkaan	Kaikki
AA	Yleinen tavoite; kattaa kontrastin, fokuksen, koon muuttamisen ja virheiden käsittelyn	Useimmat organisaatiot ja monet lait
AAA	Tiukin; kaikki sisältö ei voi täyttää sitä	Tietyt palvelut ja yleisöt

Useissa paikoissa lait viittaavat WCAG:iin — esimerkiksi Euroopan saavutettavuusdirektiivi, jota on sovellettu moniin kuluttajille suunnattuihin digitaalisiin palveluihin EU:ssa kesäkuusta 2025 lähtien. Se, mitkä säännöt koskevat sinua, riippuu siitä, missä toimit ja mitä myyt; kysy neuvoa asiantuntijalta, jos olet epävarma. Tämä opas kattaa käytännön työn.

Vaihtoehdot: miten pääset perille

Lähestymistapa	Sopii	Kompromissi
Rakenna siitä alusta asti	Uudet sivustot ja sovellukset	Vähiten työtä kokonaisuudessaan; on sovittava alussa
Tarkista ja korjaa	Olemassa olevat sivustot	Löytää todellisia ongelmia; vaatii keskittyneen kierroksen per sivu
Ammattilaisen auditointi	Säännellyt alat, suuret sivustot, julkishallinto	Perusteellinen ja dokumentoitu; maksaa rahaa
Overlay-widget	Ei suositella	Ei voi korjata taustalla olevaa koodia

Useimmille pienille sivustoille kaksi ensimmäistä riittää: kerro tekoälylle rakentamaan saavutettavasti alusta asti ja tarkista ennen julkaisua.

Tärkeimmät korjaukset

Käytä oikeita HTML-elementtejä

Suurin osa saavutettavuudesta tulee ilmaiseksi oikealla HTML:llä. <button> on fokusoitavissa, toimii Enterillä ja Välilyönnillä ja ilmoitetaan painikkeena. <div>, jossa on klikkauskäsittelijä, ei tee mitään näistä. AI-generoitu koodi käyttää joskus tyyliteltyjä div-elementtejä kaikkeen; pyydä semanttisia elementtejä:

<button> toimintoihin, <a href> navigointiin
Yksi <h1> per sivu, sitten <h2> ja <h3> järjestyksessä — ruudunlukijan käyttäjät hyppivät otsikoiden välillä
Maamerkit: <header>, <nav>, <main>, <footer>
<label> jokaiseen lomakekenttään
Sivun kieli kohteessa <html lang="fi">

Käytä ARIA-attribuutteja vain silloin, kun mikään natiivielementti ei sovi — esimerkiksi mukautettuun välilehtisarjaan tai yhdistelmäkenttään. Väärä ARIA on huonompi kuin ei ARIA:a.

Näppäimistökäyttö ja näkyvä fokus

Kaiken, minkä voit tehdä hiirellä, pitää onnistua pelkällä näppäimistöllä (WCAG 2.1.1). Paina Tab-näppäintä sivun läpi: jokaisen linkin, painikkeen ja kentän pitäisi olla saavutettavissa loogisessa järjestyksessä, ja näet aina, missä fokus on (2.4.7 Focus Visible). WCAG 2.2 lisäsi, että fokusoitu elementti ei saa jäädä kokonaan piiloon liimautuvien ylätunnisteiden tai evästebannerien taakse (2.4.11, taso AA).

Yleisiä virheitä: valikot, jotka aukeavat vain hiiren kohdistuessa, modaalit, jotka eivät pidä fokusta sisällään tai joita ei voi sulkea Escapella, ja CSS:n outline: none ilman korvaavaa tyyliä.

Tekstivaihtoehdot

Jokaisella merkityksellisellä kuvalla pitää olla alt-teksti, joka kertoo, mitä se näyttää kontekstissa (”Kokki tarjoilee maistelumenun”, ei ”kuva1.jpg”). Koristeelliset kuvat saavat tyhjän alt=""-attribuutin, jotta ruudunlukija ohittaa ne. Pelkkien kuvakkeiden painikkeilla pitää olla saavutettava nimi (”Sulje”, ”Haku”). Videoissa tarvitaan tekstitys, äänessä käsikirjoitus.

Väri ja kontrasti

WCAG 2.2 -taso AA vaatii vähintään 4,5:1 kontrastisuhteen normaalille tekstille ja 3:1 suurelle tekstille (1.4.3), sekä 3:1 käyttöliittymän osille, kuten syöttökenttien reunoille ja merkityksellisille kuvakkeille (1.4.11). Vaaleanharmaa paikkamerkkiteksti ja vaaleat painikkeet ovat tavallisia epäonnistumisia. Älä myöskään käytä pelkkää väriä merkityksen kantajana — virheellisen kentän punainen reuna tarvitsee myös virheviestin.

Zoomaus ja uudelleenasettelu

Tekstin pitää pysyä käytettävänä 200 %:n zoomilla (1.4.4), ja sisällön pitää toimia 320 CSS-pikselin leveydellä ilman vaakasuuntaista vieritystä (1.4.10). Toimiva responsiivinen asettelu hoitaa suurimman osan tästä.

Kohteen koko, lomakkeet ja virheet

Kohteen koko: WCAG 2.2 -taso AA vaatii osoitinkohteilta vähintään 24 × 24 CSS-pikseliä tai riittävän välin pienempien ympärille (2.5.8). Suurempi on ystävällisempi puhelimilla.
Lomakkeet: näkyvät nimilaput (ei pelkkä paikkamerkki), selkeät ohjeet sekä virheviestit, jotka kertovat, mikä on vialla ja miten se korjataan, kentän vieressä.
Kirjautuminen: älä pakota ihmisiä ratkaisemaan pulmaa tai kirjoittamaan koodia ilman vaihtoehtoa; salli salasanienhallinnat ja liittäminen (3.3.8 Accessible Authentication).

Kehotteet, jotka toimivat

Rakenna tämä sivusto WCAG 2.2 -tason AA mukaan: semanttiset HTML-maamerkit, yksi h1 per sivu ja väliotsikot järjestyksessä, oikeat painike- ja linkkielementit, nimilaput jokaiseen lomakekenttään, näkyvät fokustyylit, tekstin kontrasti vähintään 4,5:1, merkityksellisille kuville alt-teksti ja koristeellisille kuville alt="", sekä html lang asetettuna.

Tarkista /signup- ja /checkout-sivut saavutettavuuden kannalta. Tarkista pelkällä näppäimistöllä käyttö, fokusjärjestys, näkyvä fokus, nimilaput, virheviestit, kontrasti ja ruudunlukijan nimet pelkkien kuvakepainikkeiden kohdalla. Listaa jokainen ongelma WCAG-kriteerin kanssa ja korjaa ne muuttamatta visuaalista ilmettä enempää kuin tarpeen.

Mobiilivalikkoa ei voi käyttää näppäimistöllä. Tee siitä painike, jossa on aria-expanded, siirrä fokus valikkoon kun se aukeaa, sulje Escapella ja palauta fokus painikkeeseen.

Askel askeleelta

Aja automaattinen tarkistus. Lighthousen saavutettavuusosio Chromen DevTools-työkaluissa tai axe-selainlaajennus pääsivuilla. Korjaa kaikki, mitä se raportoi.
Irrota hiiri. Selaa jokainen sivu sarkaimella ja suorita jokainen tärkeä tehtävä — rekisteröidy, hae, maksa. Merkitse kaikki, mihin et pääse, missä et näe fokusta tai mistä et pääse pois.
Zoomaa 200 %:iin ja kavenna ikkuna puhelimen leveyteen. Mikään ei saa jäädä leikkautumaan tai vaatia vaakasuuntaista vieritystä.
Kokeile ruudunlukijaa kymmenen minuuttia: VoiceOver Macillä ja iPhonella, TalkBack Androidilla tai NVDA Windowsilla (ilmainen). Kuuntele otsikoita, linkkejä ja lomakekenttiä. ”Painike” ilman nimeä tai ”linkki, klikkaa tästä” tarkoittaa työtä.
Tarkista kontrasti tekstille, painikkeille ja kentille kontrastityökalulla.
Korjaa ja testaa uudelleen samat tehtävät.
Julkaise saavutettavuusselosteen, jossa kerrot, mitä standardia tavoittelet ja miten ongelmista ilmoitetaan — ja vastaa ilmoituksiin.

Yleisiä virheitä

Overlay-widgetin luottaminen koodin korjaamisen sijaan.
Tarkennusreunojen poistaminen, koska ne näyttävät sotkuisilta, ilman korvaavaa tyyliä.
Paikkamerkkiteksti ainoana nimilappuna. Se katoaa, kun käyttäjä alkaa kirjoittaa, ja on usein heikkokontrastinen.
”Klikkaa tästä” ja ”Lue lisää” -linkit. Irrallaan ruudunlukijan käyttäjä kuulee luettelon samannimisiä linkkejä.
Alt-teksti täynnä avainsanoja. Alt-teksti on ihmisiä varten; kuvaile kuva.
Testaaminen kerran. Jokainen uusi ominaisuus voi rikkoa näppäimistökäytön. Lisää näppäimistökierros julkaisua edeltävään testaukseen.

Saavutettavuuden tarkistuslista

Automaattinen tarkistus (Lighthouse tai axe) puhdas pääsivuilla
Jokainen tehtävä voidaan suorittaa pelkällä näppäimistöllä
Fokus on aina näkyvissä eikä koskaan piilossa liimautuvien elementtien takana
Semanttiset otsikot, maamerkit, painikkeet ja linkit; lang asetettu
Merkityksellinen alt-teksti; koristeelliset kuvat alt=""; videoissa tekstitykset
Tekstin kontrasti ≥ 4,5:1 (suuri teksti ≥ 3:1); käyttöliittymän osat ≥ 3:1
Toimii 200 %:n zoomilla ja 320 px leveydellä
Jokaisella lomakekentällä näkyvä nimilappu ja selkeät virheviestit
Saavutettavuusseloste, jossa kerrotaan, miten ongelmista ilmoitetaan

Näiden taustalla olevista käsitteistä lue mitä verkkosaavutettavuus on. Saavutettava suunnittelu ja hyvä suunnittelu menevät paljolti päällekkäin; miten suunnitella hyvännäköinen sovellus tekoälyllä käsittelee visuaalista puolta.

Saavutettavuus Mythexissä

Mythex rakentaa sillä standardilla, jonka pyydät, joten kirjoita ”WCAG 2.2 AA” ensimmäiseen kehotteeseesi ja seuraaviin. Esikatselun puhelinkehystä voi käyttää pienten näyttöjen tarkistamiseen (Preview ja Code), mutta näppäimistö-, zoom- ja ruudunlukijatestit toimivat parhaiten julkaistulla osoitteella tai esikatselulla omassa välilehdessään. Pyydä agenttia tarkistamaan sivu, korjaamaan löydökset ja testaa korjaukset itse — automaattinen tarkistus on alku, ei hyväksyntä.

Kysymykset

Mikä on nykyinen saavutettavuusstandardi verkkosivuille?

Syyskuusta 2026 lähtien W3C:n nykyinen standardi on WCAG 2.2, joka julkaistiin ensimmäisen kerran lokakuussa 2023. Useimmat organisaatiot ja monet lait tähtäävät tasoon AA. WCAG 3 on yhä varhainen luonnos.

Voiko saavutettavuusoverlay tehdä sivustosta säädöstenmukaisen?

Älä luota siihen. Overlayt lisäävät työkalupalkin sivun päälle, mutta eivät voi korjata puuttuvia nimilappuja, rikkinäistä näppäimistökäyttöä tai heikkoa rakennetta taustalla olevassa koodissa. Sivuston korjaaminen itsessään on se, mikä tekee siitä käytettävän.

Löytävätkö automaattiset tarkistimet kaikki ongelmat?

Eivät. Työkalut kuten Lighthouse ja axe huomaavat asioita, kuten puuttuvan alt-tekstin, heikon kontrastin ja nimettömät kentät. Monet ongelmat, kuten sekava fokusjärjestys, merkityksetön linkkiteksti tai alt-teksti, joka on olemassa mutta väärä, vaativat ihmisen tarkistuksen näppäimistöllä ja ruudunlukijalla.

Mikä kontrastisuhde WCAG:n mukaan vaaditaan?

WCAG 2.2 -tason AA mukaan vaaditaan vähintään 4,5:1 normaalille tekstille ja 3:1 suurelle tekstille sekä 3:1 käyttöliittymän osille, kuten syöttökenttien reunoille ja merkitystä kantaville kuvakkeille.