Jos kehität verkkopalveluja Suomessa, saavutettavuus ei ole enää valinnainen ominaisuus. Se on laki. Tässä artikkelissa käymme läpi WCAG 2.1 -standardin teknisestä näkökulmasta: mitä sinun on koodarina oikeasti tehtävä, jotta verkkosivusi täyttää saavutettavuusvaatimukset AA-tasolla.
Mikä laki velvoittaa?
- EU:n saavutettavuusdirektiivi (2016/2102)
- Digipalvelulaki (306/2019) – velvoittaa julkista sektoria, sekä tietyissä tapauksissa yksityisiä toimijoita
Tekninen mittari: WCAG 2.1 AA-taso – kaikki ”A” ja ”AA” -tason kriteerit on täytettävä.
WCAG 2.1 teknisestä näkökulmasta
WCAG 2.1 rakentuu neljän periaatteen varaan. Alla tärkeimmät tekniset kohdat jokaisesta:
1. Havaittava
- Kuville alt-tekstit:
<img src="tuote.jpg" alt="Tuotekuva: vihreä reppu"> - Riittävä kontrasti: Tekstin ja taustan kontrastisuhde vähintään 4.5:1
- Skaalautuva teksti: Käytä suhteellisia yksiköitä (rem, em)
- Semanttinen HTML:
<main><section><h1>Otsikko</h1></section></main>
2. Hallittava
- Näppäimistöllä toimivuus: Kaikkien toimintojen on toimittava ilman hiirtä
- Fokus näkyvä: Älä poista selaimen oletusfokusta
button:focus { outline: 2px solid #005fcc; } - Ohituslinkki alussa:
<a href="#main" class="skip-link">Siirry sisältöön</a> - Looginen tabbailujärjestys ja otsikkohierarkia
3. Ymmärrettävä
- Virheviestit ja ohjeet lomakkeissa:
<div class="error">Anna sähköpostiosoite</div> - Sivun kieli määriteltävä:
<html lang="fi"> - Navigointi ja käyttöliittymä pysyy johdonmukaisena
4. Toimintavarma
- Validi HTML: Tarkista W3C Validatorilla
- ARIA-attribuutit vain kun tarpeen:
<div role="button" tabindex="0" aria-pressed="false">Aseta</div>
Testaaminen: työkalut koodarille
- Lighthouse (DevTools) – nopea yleiskatsaus
- axe DevTools (Chrome-laajennus)
- NVDA tai VoiceOver – ruudunlukijatestit
- Tab-näppäintesti: pääsetkö kaikkeen ilman hiirtä?
Yhteenveto
WCAG 2.1 AA-tason täyttäminen ei vaadi mustaa magiaa – se vaatii huolellisuutta, semanttista HTML:ää ja saavutettavan käyttöliittymän suunnittelua. Kun saavutettavuus rakennetaan suoraan koodiin, siitä hyötyvät kaikki käyttäjät – ja samalla vältetään lain rikkominen.
Vinkki:
Tee saavutettavuustestit osaksi CI-prosessia – esimerkiksi axe-core-työkaluilla automatisoit osan tarkastuksesta jo build-vaiheessa.
Tarvitsetko apua saavutettavuuden tekemiseen verkkosivuille tai saavutettavuusauditointia? Ole yhteydessä!
