Verkkosivujen saavutettavuus ja WCAG-saavutettavuusohjeet

Olipa kyse herkullisesta kakkureseptistä, uudesta tuotteesta tai hyödyllisestä palvelusta, yhä useampi etsii arjessa tietoa verkosta. Kaikille tämä ei kuitenkaan ole yhtä helppoa – esimerkiksi näkö- tai motoriikkarajoitteet voivat tehdä digitaalisen sisällön käytöstä hankalaa tai jopa mahdotonta.

Tässä kohtaa tulevat apuun verkkosisällön saavutettavuusohjeet (WCAG). Ne ovat kansainvälinen standardi, joka määrittää, miten verkkosivut ja digitaalinen sisältö tehdään saavutettaviksi.

Aiemmassa artikkelissa EU:n saavutettavuusdirektiivi 2025 ja sen tarkoitus verkkosivuillesi kerroimme EU:n laajuisesta saavutettavuusdirektiivistä (EAA) ja siitä, miksi se on tärkeää verkkosisällön saavutettavuuden edistämiseksi.

WCAG-ohjeet ovat olennainen osa tätä aihetta, sillä ne antavat selkeät vaatimukset ja parhaat käytännöt, joilla varmistetaan, että verkkosisältö on kaikkien käytettävissä riippumatta ihmisten taidoista tai rajoitteista. Tässä oppaassa käymme läpi WCAG-ohjeet tarkemmin ja kerromme, miten ne auttavat poistamaan esteitä ja luomaan kaikille avoimempia digitaalisia ympäristöjä. Saat myös selkeät ohjeet siihen, mitä sinun tulee tehdä, jotta oma verkkosivustosi olisi saavutettava.. 

Mitä ovat WCAG-ohjeet?

Verkkosisällön saavutettavuusohjeet (WCAG) on kansainvälinen ohjeistus, joka määrittelee, miten nettisivut ja digitaalinen sisältö voidaan tehdä saavutettaviksi, jotta kaikilla käyttäjillä – myös henkilöillä, joilla on toimintarajoitteita – olisi yhtäläinen pääsy sisältöön. Ohjeet on laatinut W3C (World Wide Web Consortium) tarjotakseen kehittäjille selkeät ohjeet saavutettavan verkkosisällön luomiseksi.

WCAG julkaistiin ensimmäisen kerran vuonna 1999 tavoitteena poistaa esteitä verkon käytöstä. Ohjeet sisältävät tarkkoja suosituksia siitä, miten verkkosivut voidaan tehdä saavutettaviksi teknisen suunnittelun ja sisällön avulla. Ajantasaisimmat suositukset ja ohjeet löytyvät W3C:n viralliselta WCAG-sivuilta. 

Miksi WCAG-ohjeilla on merkitystä

WCAG-ohjeet varmistavat, että digitaalinen sisältö on kaikkien käytettävissä riippumatta käyttäjän taidoista. Ne kertovat selkeästi, miten verkkosivut ja sovellukset kannattaa suunnitella, jotta myös ihmiset, joilla on toimintarajoitteita – kuten näkö-, kuulo- tai motoriikkarajoitteita – voivat käyttää niitä helposti.

WCAG:n rooli saavutettavuuden vahvistuslain (BFSG) yhteydessä

WCAG ei ole pelkästään tekninen suositus, vaan se toimii myös perustana lainsäädännölle, kuten Saksassa voimaan tulevalle Saavutettavuuden vahvistuslaille (BFSG). Laki velvoittaa yrityksiä ja julkisia toimijoita tekemään sivustot saavutettaviksi, jolla pyritään estämään vammaisuuteen perustuvaa syrjintää.

WCAG varmistaa, että saavutettavuusvaatimukset ovat kansainvälisesti yhdenmukaisia ja mitattavia, mikä tekee tällaisten lakien noudattamisesta helpommin seurattavaa ja todennettavaa.

Saavutettavuuden merkitys digitaalisessa ympäristössä

Digitaalisessa ympäristössä esteet ovat yhtä ongelmallisia kuin fyysisessä maailmassa. Saavuttamaton sivusto sulkee vamman omaavat ihmiset ulkopuolelle ja estää heidän täysimääräisen osallistumisensa sosiaaliseen ja taloudelliseen elämään. Saavutettavuus on siis sekä tekninen välttämättömyys että olennainen osa sosiaalista osallisuutta.

Verkkosisällön saavutettavuusohjeiden (WCAG) neljä periaatetta

Ohjeet perustuvat neljään perusperiaatteeseen. Jokainen periaate auttaa tunnistamaan ja poistamaan esteitä, jotka voisivat estää vammaisia henkilöitä käyttämästä verkkosisältöä. Nämä periaatteet ovat:

1. Havaittavuus

Havaittavuuden periaate tarkoittaa, että tiedot ja käyttöliittymät on esitettävä niin, että kaikki käyttäjät voivat havaita ne. Eri tavoin vammaisten henkilöiden, kuten näkö- tai kuulorajoitteisten, on voitava saada sisältö sellaiseen muotoon, jonka he ymmärtävät.

Esimerkit: 

• Tekstivastineet kuville: Kuville tulisi lisätä niin sanottu alt-teksti, joka kuvailee kuvan sisällön. Tämä auttaa näkörajoitteisia käyttäjiä, jotka käyttävät ruudunlukuohjelmia, ymmärtämään kuvien sisältöä.
  
  Esimerkiksi: pelkän puun kuvan sijaan alt-teksti voisi olla: “Vihreä puu keväisessä puistossa.”

• Tekstitykset videoihin: Videoissa tulisi aina olla tekstitykset tai litteroinnit, jotta myös kuurot ja huonokuuloiset voivat ymmärtää sisällön.
  
  Esimerkiksi tuote-esittelyvideoon voidaan lisätä tekstitykset, jotka toistavat videossa puhutun tekstin.

• Värikontrastit: Käyttäjille, joilla on tiettyjä näkörajoitteita, kuten värisokeus, tekstin ja taustan välinen värikontrasti on erittäin tärkeä. Oikein valitut värit parantavat myös verkkosivuston käyttäjäkokemusta. Voit lukea lisää aiheesta artikkelissamme, jossa kerromme parhaiden värien valinnasta kotisivuillesi.

2. Hallittavuus 

Tämä periaate edellyttää, että käyttöliittymä ja navigointi suunnitellaan niin, että kaikki käyttäjät voivat käyttää niitä riippumatta heidän kyvyistään tai käyttämästään teknologiasta. Tämä koskee sekä käyttäjiä, jotka käyttävät hiirtä ja näppäimistöä, että niitä, jotka hyödyntävät vaihtoehtoisia syöttölaitteita, kuten puheentunnistusjärjestelmiä tai ohjaimia.

Esimerkkejä: 

• Näppäimistön käytettävyys: Nettisivujen on oltava täysin navigoitavissa pelkällä näppäimistöllä, jotta motorisista rajoitteista kärsivien käyttäjien ei tarvitse käyttää hiirtä. Kaikkien interaktiivisten elementtien, kuten lomakkeiden, linkkien ja painikkeiden, tulee olla käytettävissä tabulaattorin tai muiden näppäimistökomentojen avulla. Esimerkiksi näppäimistönavigoinnin kohdistuksen korostuksen tulisi näkyä jokaisella sivulla, jotta käyttäjä tietää, minkä elementin päällä hän parhaillaan on.

• Aikarajojen välttäminen: Verkkosivuilla ei tulisi olla interaktiivisia elementtejä tai toimintoja, jotka käynnistyvät automaattisesti ilman, että käyttäjälle annetaan riittävästi aikaa. Esimerkiksi jos lomakkeessa on määräaika tietojen syöttämiselle, tulisi siinä olla myös mahdollisuus pidentää aikaa tai keskeyttää toiminto. 

• Välkkyvän sisällön välttäminen: Liian nopeasti vilkkuvat tai välkkyvät elementit (kuten bannerit tai mainokset) voivat aiheuttaa terveysriskin epilepsiasta tai muista neurologisista sairauksista kärsiville henkilöille. Tällaisia efektejä tulisi välttää tai sen sijaan tarjota helppo tapa poistaa ne käytöstä.

3. Ymmärrettävyys

Tämä periaate tarkoittaa, että sivun sisältö ja käyttöliittymä pitää tehdä niin selkeiksi, että kaikki käyttäjät ymmärtävät ne. Tämä koskee sekä tekstiä että sivun rakennetta ja toimintoja.

Esimerkkejä: 

• Selkeä kielenkäyttö: Käytä yksinkertaista ja helposti ymmärrettävää kieltä. Vältä monimutkaisia termejä ja liian pitkiä lauseita, sillä ne voivat olla hankalia etenkin ihmisille, joilla on oppimis- tai hahmottamisvaikeuksia. Esimerkiksi CTA-toimintakehotus “Klikkaa tästä vahvistaaksesi tapahtumasi” voisi olla yksinkertaisemmin “Vahvista tapahtumat tästä”.

• Johdonmukainen navigointi: Pidä navigointi ja painikkeet aina samoissa paikoissa, jotta käyttäjä tietää mistä ne löytyvät. Esimerkiksi “Takaisin”-painike kannattaa sijoittaa joka sivulla samaan kohtaan.

• Selkeät virheilmoitukset: Jos käyttäjä tekee virheen, näytä selkeä ohje virheen korjaamiseksi. Esimerkiksi “Syötä voimassa oleva sähköpostiosoite” on ymmärrettävämpi kuin pelkkä “Virhe”.

4. Kestävyys

Kestävyyden periaate tarkoittaa, että verkkosivujen tulee toimia ja pysyä yhteensopivina monenlaisten laitteiden, selainten ja apuvälineiden, kuten ruudunlukuohjelmien tai ääniohjausjärjestelmien, kanssa.

Esimerkkejä: 

• Laiteriippumaton toimivuus: Verkkosivujen tulee toimia hyvin sekä tietokoneilla, tableteilla että älypuhelimilla. Mobiiliystävällinen suunnittelu varmistaa, että sisältö näkyy oikein kaikilla laitteilla. Sivustoa, joka mukautuu automaattisesti eri laitteisiin, kutsutaan responsiiviseksi sivuksi. Esimerkiksi one.comin kotisivukoneella voit helposti luoda mobiilioptimoidut nettisivut.

• Standarditeknologioiden käyttö: Sivujen tulisi noudattaa HTML- ja CSS-standardeja, jotta ne toimivat oikein eri selaimilla ja avustavien teknologioiden kanssa. Hyvin jäsennelty HTML-sivu varmistaa, että esimerkiksi ruudunlukuohjelma osaa tulkita sisällön oikein ilman virhetulkintoja.

• Häiriönkestävyys: Nettisivut kannattaa suunnitella niin, että ne eivät kaadu kokonaan virheellisten syötteiden tai ulkoisten järjestelmäongelmien vuoksi. Esimerkiksi sivun tulisi latautua normaalisti, vaikka ulkoinen palvelu, kuten säätiedote, olisi hetkellisesti poissa käytöstä.

Nämä neljä periaatetta – havaittavuus, hallittavuus, ymmärrettävyys ja kestävyys – muodostavat WCAG-ohjeiden perustan. Näiden standardien noudattaminen varmistaa, että digitaalinen sisältö on kaikkien saavutettavissa, mikä tekee niistä keskeisiä yhdenvertaisen ja esteettömän verkkokokemuksen luomisessa.

WCAG-ohjeiden kolme vaatimustenmukaisuustasoa

WCAG jakaa saavutettavuusvaatimukset kolmeen tasoon, jotta niiden käyttöönotto olisi helpompaa. Tämä auttaa myös eri sivustoja täyttämään saavutettavuuden vaatimukset omien tarpeidensa ja mahdollisuuksiensa mukaan.

Jokainen taso edustaa eri laajuista saavutettavuutta, ja korkein taso sisältää kaikkein kattavimmat vaatimukset:

1. Taso A (vähimmäisvaatimukset)

Taso A sisältää perusvaatimukset, jotka on täytettävä, jotta nettisivut olisivat ylipäätään saavutettavat henkilöille, joilla on erilaisia toimintarajoitteita.

Esimerkkejä A-tasosta:

• Vaihtoehtoinen teksti kuville: Kaikilla kuvilla on oltava kuvaileva alt-teksti, jotta ruudunlukuohjelmia käyttävät näkörajoitteiset käyttäjät pystyvät ymmärtämään, mitä kuvassa on.

• Saavutettavat lomakkeet: Lomakkeiden kentät on merkittävä oikein, jotta niitä voidaan täyttää apuvälineteknologioilla (esim. ruudunlukuohjelmat). Esimerkiksi jokaisella syöttökentällä tulisi olla selkeä otsikko tai kuvaus.

Sivustot, jotka täyttävät vain A-tason vaatimukset, tarjoavat saavutettavuuden vain perusminimitasolla. Monet toimintarajoitteiset käyttäjät voivat silti kohdata vaikeuksia sisällön käytössä.

2. Taso AA (suositellut vaatimukset useimmille sivustoille)

Taso AA sisältää vaatimuksia, joita suositellaan useimmille verkkosivustoille. Ne parantavat merkittävästi saavutettavuutta ja käyttökokemusta poistamalla esteitä suuremmalta joukolta käyttäjiä.

Esimerkkejä AA-tason vaatimuksista:

• Virheiden tunnistus ja kuvaus: Jos käyttäjä tekee virheen syöttäessään lomakkeen tietoja, verkkosivuston tulisi näyttää ja selittää virhe selkeästi, jotta käyttäjä voi helposti korjata sen.

Useimpien julkisten ja kaupallisten verkkosivustojen tulisi täyttää vähintään AA-tason vaatimukset, sillä ne tavoittavat laajan käyttäjäkunnan ja parantavat saavutettavuutta monille toimintarajoitteisille henkilöille.

3. Taso AAA (korkeimmat saavutettavuusvaatimukset)

Taso AAA asettaa korkeimmat saavutettavuusvaatimukset ja pyrkii varmistamaan lähes täydellisen käyttökokemuksen kaikille, myös vakavia toimintarajoitteita omaaville henkilöille.

Esimerkki tason AAA vaatimuksesta:

• Täydellinen tekstivastine audiovisuaaliselle sisällölle: Kaikki mediasisällöt, kuten videot ja äänitiedostot, tulisi varustaa täydellisillä tekstivastineilla ja tekstityksillä, jotta myös kuurot ja kuulovammaiset käyttäjät voivat käyttää sisältöä.

AAA-tasoa suositellaan pääasiassa sellaisille verkkosivuille, jotka haluavat tarjota erityisen korkean saavutettavuustason, kuten koulutusalan palveluille tai julkisille instituutioille.

Lakisääteiset vaatimukset

Saksan saavutettavuuslain (BFSG) mukaan WCAG:n AA-tason noudattaminen on lakisääteinen vaatimus. Se koskee erityisesti julkisia toimijoita, mutta myös verkossa palveluja tarjoavia yrityksiä. AA-taso varmistaa, että suurin osa käyttäjistä voi käyttää palvelua esteettömästi.

EU:n esteettömyysdirektiivi 2025 tavoittelee samoja päämääriä ja edellyttää, että kaikki verkkosivustot, jotka tarjoavat tiettyjä palveluja, noudattavat vähintään WCAG 2.1 -standardin AA-tason vaatimuksia.

WCAG-saavutettavuusohjeet ja Euroopan esteettömyysdirektiivi (EAA)

EAA velvoittaa kaikki EU:ssa toimivat tai siellä aktiiviset julkiset organisaatiot ja yksityiset yritykset tekemään digitaalisista palveluistaan saavutettavia.

Se edistää WCAG-standardien noudattamista tekemällä saavutettavuudesta lakisääteisen velvoitteen.

EAA:n asettamat lakisääteiset velvoitteet

Esteettömyysdirektiivi luo selkeät lakisääteiset velvoitteet julkisille viranomaisille ja yksityisille yrityksille. Niiden on varmistettava, että niiden verkkosivustot, mobiilisovellukset ja muut digitaaliset palvelut noudattavat WCAG 2.1 -ohjeiden vaatimuksia:

1. Määräajat saavutettavuuden toteuttamiselle: Esteettömyysdirektiivi asettaa selkeät määräajat, joiden kuluessa digitaalinen saavutettavuus on saavutettava. Julkisten toimijoiden ja yksityisten yritysten, jotka tarjoavat palveluja verkossa (esim. verkkokaupat), on varmistettava, että heidän digitaaliset palvelunsa ovat esteettömiä viimeistään 28.6.2025.

2. Seuraamukset vaatimusten laiminlyönnistä: Jos saavutettavuusvaatimuksia ei täytetä, voidaan määrätä tuntuvia sakkoja, joiden suuruus riippuu maasta ja yrityksen koosta. Lisäksi voidaan ryhtyä oikeustoimiin, jos käyttäjät eivät pysty käyttämään oikeuksiaan saavutettavuuden puutteen vuoksi. Joissakin tapauksissa verkkosivuston tai digitaalisen palvelun saavutettavuus voidaan myös haastaa oikeuteen.

3. Tarkastukset ja auditoinnit: Esteettömyysdirektiivi määrää myös, että verkkosivut on tarkastettava säännöllisesti saavutettavuuden varmistamiseksi. Tämä voidaan tehdä joko palveluntarjoajan omilla itsearvioinneilla tai ulkoisten auditointien avulla. Näin varmistetaan, että sivustot pysyvät saavutettavina ja niitä parannetaan jatkuvasti myös alkuperäisen toteutuksen jälkeen.

WCAG-ohjeet: välttämätön esteettömän digitaalisen maailman rakentamisessa

WCAG-ohjeet ovat keskeinen tekijä esteettömän digitaalisen maailman luomisessa, jossa kaikilla käyttäjillä on yhtäläinen pääsy tietoon ja palveluihin – riippumatta heidän kyvyistään tai rajoitteistaan. Ne eivät ole pelkästään tekninen välttämättömyys, vaan myös yhä useammissa maissa käyttöön otettu eettinen ja oikeudellinen standardi.

WCAG:n toteuttaminen edistää digitaalista osallisuutta ja parantaa samalla kaikkien käyttäjien käyttäjäkokemusta. Sivustot, jotka noudattavat WCAG-ohjeita, ovat käyttäjäystävällisempiä ja saavutettavampia, mikä tukee oikeudenmukaisempaa yhteiskuntaa. WCAG:n käyttöönotto varmistaa, että internet on paikka, johon kaikilla on pääsy – yksilöllisistä tarpeista riippumatta.

Hyödynnä tilaisuus tehdä verkkosivuistasi esteetön: täytä sääntelyvaatimukset, paranna käyttäjäkokemusta ja laajenna yleisöäsi.