WCAG 2 saavutettavuuden ohjeistus verkkopalveluille

Kirjoittaja: Julia Sand 12.03.2019


Tässä kirjoituksessa vastaamme lyhyesti siihen, mikä WCAG 2 saavutettavuuden ohjeistus on ja käymme läpi sen keskeisimpiä periaatteita ja ohjeistuksessa esiteltyjen saavutettavuustasojen kriteereitä.

Mikä on WCAG?

WCAG on lyhenne sanoista Web Content Accessibility Guidelines – eli vapaasti suomennettuna verkkosisällön saavutettavuusohjeistus. Ohjeistusta ylläpitää ja päivittää World Wide Web Consortium (W3C), kansainvälinen yhteisöistä ja yrityksistä muodostuva liitto, joka ylläpitää ja kehittää www-standardeja ja suosituksia. Tällä hetkellä päivitetyin versio ohjeistuksesta on WCAG 2.1.

WCAG keskittyy huomioimaan nimenomaan käyttäjät, joilla on jonkinlaisia käyttöön vaikuttavia rajoitteita, kuten vaikkapa näköön tai kognitiivisiin kykyihin vaikuttava vamma. Rajoitteeksi lasketaan myös se, jos käyttäjä joutuu käyttämään harvinaisempaa, standardista poikkeavaa päätelaitetta. WCAG-ohjeistusta seuraamalla sivuista tulee helppokäyttöisempiä myös tavalliselle käyttäjälle ja monet kriteereistä ovatkin hyviä nyrkkisääntöjä käytettävyyssuunnittelussa ylipäätään.

Saavutettavuustasoja on määritelty WCAG 2 saavutettavuuden ohjeistus kolme: A, AA ja AAA. AAA-taso on luonnollisesti tasoista korkein, eli jos AAA-kriteeristö täyttyy, on sivu ohjeiston mukaan saavutettavin. Viranomaisten tarjoamat palvelut velvoitetaan portaittain 23.9.2019 lähtien täyttämään tietyt saavutettavuuskriteerit, jotka digitaalisten palveluiden osalta perustuvat osittain nimenomaan WCAG-määrityksille.

Mihin ohjeistossa kiinnitetään huomiota?

WCAG-kriteeristö on laaja ja sisältää useita kriteereitä. Kriteerit on jaettu neljään eri kategoriaan:

  1. Verkkosivun on oltava havaittava   
  2. Verkkosivun on oltava hallittava
  3. Verkkosivun on oltava ymmärrettävä
  4. Verkkosivun on oltava lujatekoinen


Mitä tämä käytännössä siis tarkoittaa?

1.

Havaittavuus

Havaittavuuteen liittyvät wcag 2 saavutettavuuden ohjeistuksen kriteerit keskittyvät verkkopalvelun elementtien määrittelemiseen sellaisiksi, että niiden viestin tai tarkoituksen voi havaita useammilla tavoilla ja erilaisilla laitteilla.

Tämä tarkoittaa muun muassa sitä, että sivuilla oleva media on koettavissa useammalla eri aistilla – videot esimerkiksi sisältävät ääntä korvaavan tekstityksen kuulovammaisia ja muita erityisryhmiä varten.

Sivun sisällön tulisi myös huomioida erilaiset laitteet ja ohjelmat, joita eri käyttäjäryhmät käyttävät. Jotta sivua voi käyttää esimerkiksi näkövammaisten käyttämillä lukulaitteilla, sivuston sisällön ja käyttöliittymän pitää perustua pääosin tekstille, joka on lukulaitteen ymmärtämässä muodossa (HTML).

Tekstin kokoa pitäisi voida suurentaa ongelmitta ja sisällön tai sivun käyttöön liittyvien elementtien ymmärtäminen ei saisi nojata yksinomaan ulkonäköön, kuvaan tai ääneen. Sivun elementtien koko pitää olla määritelty niin, että se ottaa huomioon huonompinäköisenkin käyttäjän ja tekstin ja taustan välisen kontrastieron pitää olla tarpeeksi suuri.

Paljon havaittavuuteen liittyvistä kriteereistä liittyy sivun käytön vihjeisiin, kuten hover- ja klikkiefekteihin. Vihjeet on hyvä toteuttaa useammalla kuin yhdellä tavalla – eli esimerkiksi vaikkapa niin, että verkkosivun napin päällä liikuttaessa käyttäjälle vihjataan napin interaktiivisuudesta sekä sen sisältämän tekstin lihavoitumisella, että sen pohjavärin muuttumisella. Käyttöliittymässä usein apukeinona käytetään elementtien värikoodausta –  kannattaa kuitenkin muistaa, että käyttäjän kykyä nähdä värejä ei voi ottaa itsestäänselvyytenä.

2.

Hallittavuus

Kriteerit hallittavuudessa verkkopalvelussa ovat laajalti periaatteita, joiden noudattamisesta on  hyötyä kaikille käyttäjille.

Yleisenä sääntönä verkkopalveluja suunniteltaessa tietty konservatiivisuus on kannattavaa – käyttäjälle on helpompaa, kun palvelu toimii totutun mukaisesti ja asiat sijaitsevat siellä, missä käyttäjä olettaa niiden olevan.

Tekstillä on iso rooli sivun tai digipalvelun ymmärrettävyydessä. Jokaiselle sivulle tai näkymälle ja erilaisille elementeille kannattaa miettiä looginen ja kuvaava nimi. Nappien, linkkien ja muiden interaktiivisten elementtien teksteistä pitäisi aina käydä ilmi, minkä tapahtuman se laukaisee ja mikä sen käyttötarkoitus on.

Sivulla navigoitaessa on hyvä, että kaikille sivuston tai muun palvelun tärkeisiin näkymiin on aina reitti helposti saatavilla ja reittejä tärkeille sivuille on läpi palvelun useita. Menuvalikon on siis hyvä olla vaivattomasti löydettävissä ja linkkejä sivujen välillä on järkevää laittaa menun lisäksi muihinkin loogisiin paikkoihin, kun sisältö siihen luonnollisesti viittaa. Valikon sivujen keskinäinen tärkeysjärjestys ja menun eri tasojen sisältöjen suhteet kannattaa miettiä huolella läpi. Käyttäjän pitäisi myös helposti nähdä missä hän on sivustolla tai palvelussa.

Hallittavuuteen liittyy olennaisesti myös käyttöliittymän suunnittelu teknisesti sellaiseksi, että sitä voi käyttää pelkästään näppäinkomennoilla.

3.

Ymmärrettävyys

Ymmärrettävyydestä leijonanosa on kielellisiä vaatimuksia. Käytetyn kielen tulisi olla helposti ymmärrettävää ja selkeää. WCAG 2 saavutettavuuden ohjeistus AAA-tason saavuttaakseen tekstisisällön pitäisi olla sellaista, että sen ymmärtää henkilö, jolla on alempi toisen asteen tutkinto.

Palvelun logiikan tulisi jatkuvasti säilyä samana. Eri asioita klikattaessa tai asetusta vaihdettaessa ei pitäisi tapahtua mitään yllättävää tai käyttäjän ei pitäisi päätyä minnekään, mitä hän ei odota tai mikä ei ole johdonmukaista. Valikoiden järjestyksen ei tulisi muuttua ja sivustolla navigoimiseen käytettävien elementtien ulkonäön ja sivukohtaisen sijainnin kannattaa aina noudattaa samaa logiikkaa.

Sivustolla täytettävät lomakkeet ja muut tietoa vaihtavat toiminnat, kuten esimerkiksi ostotapahtumat, kannattaa suunnitella niin, että käyttäjä ei voi tehdä virheitä ja hän voi helposti perua toiminnan. Toiminta pitää voida vahvistaa lopuksi ennen lähetystä.

4.

Lujatekoisuus

Lujatekoisuuden kriteerit liittyvät lähinnä palvelun koodaamiseen. Koodin pitää täyttää tietyt ehdot, jotta se on helposti luettavissa WCAG-kriteereiden mukaan tarpeeksi laajalla määrällä asiakasohjelmia ja sitä voi käyttää erilaisilla avustavilla laitteilla ja ohjelmilla.
Koodissa pitää esimerkiksi kaikilla elementeillä olla täydelliset alku- ja lopputagit. Elementtien tulee olla järjestetty sisäkkäin määrityksiensä mukaisesti ja samaa attribuuttia ei tulisi antaa samalle elementille useaan kertaan. ID-tunnisteiden pitää olla yksilöllisiä, jos määritteet eivät sitä erikseen salli.

Kun komponentteja kehitetään itse, pitäisi kiinnittää huomiota siihen, että kaikkien käyttöliittymäkomponenttien nimi ja rooli on selvitettävissä ohjelmallisesti. Käyttäjän asettamat tilat, ominaisuudet ja arvot pitää voida asettaa myös ohjelmallisesti ja tieto niiden muutoksista tulisi olla erilaisten asiakasohjelmien, kuten erilaisten avustavien teknologioiden, saatavilla.

Mistä lisää tietoa?

WCAG 2 saavutettavuuden ohjeistus sisältää useita kymmeniä osin varsin tarkkojakin ehtoja. Ne kannattaa verkkosivua suunnitellessa käydä kohta kohdalta läpi, jos tavoittena on saavutettavuustason täyttyminen. Me täällä Agendassa käytämme tarkistamisen avuksi myös avustavia ohjelmia, joista W3C-konsortio myös ylläpitää listausta. Lisää tietoa WCAG:ista löydät sen viralliselta verkkosivulta, sekä esimerkiksi Kehitysvammaliiton Papunet-sivustolta.

Vuosien yhteistyö Helsingin kaupungin kanssa Helsingin tärkeimmän verkkoviestintäkanavan hel.fi ja sen useiden alapalveluiden suunnittelijana ja frontend-toteuttajana on vaatinut meiltä erityistä huomiota saavutettavuuden eteen. Palvelut on suunniteltu vastaamaan saavutettavuusdirektiivin WCAG 2.0 -ohjeistuksen parasta AAA-tasoa.

Avainsanat: , , , , ,

Julia on UX/UI-suunnittelija, jonka tausta on graafisessa suunnittelussa. Hän tekee laajasti erilaista visuaalista viestintää ja on kiinnostunut käytettävyyden ja käyttökokemuksen tutkimuksesta.

Lue seuraava blogikirjoitus:

WordPress Gutenberg: uusi päivä, uusi editori.

Kirjoittaja: Joona Mäkinen 27.03.2019