Saavutettavuus verkkopalvelussa – Mikä on WCAG 2.1?

WCAG-kuvitus-1.jpg

Tässä tekstissä kerromme syyskuussa 2019 voimaan tulleesta verkkopalveluiden saavutettavuusvaatimuksesta ja WCAG 2.1 saavutettavuusohjeistuksesta. Käymme myös läpi sen keskeisimpiä periaatteita ja yleisimpiä digitaalisissa palveluissa esiintyviä saavutettavuuspuutteita.

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:ssa kolme: A, AA ja AAA. AAA-taso on luonnollisesti tasoista korkein, eli saavutettavin. Viranomaisten tarjoamat palvelut on velvoitettu portaittain 23.9.2019 lähtien täyttämään saavutettavuuskriteerit, jotka digitaalisten palveluiden osalta perustuvat nimenomaan WCAG-määrityksille. Tavoiteltava taso on AA.

Mihin ohjeistossa kiinnitetään huomiota?

WCAG-kriteeristö on laaja ja sisältää monia huomioitavia asioita – kohtia on useita kymmeniä. Kriteerit ovat jakautuneet 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ä siis käytännössä tarkoittaa?

1.

Havaittavuus

Havaittavuuteen liittyvät kriteerit keskittyvät verkkopalvelun elementtien määrittelemiseen sellaisiksi, että ne 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 oleellisten tekstien pitää lukulaitteiden kanssa yhteensopivassa HTML-muodossa. Verkkosivuilla teksti on oletuksena lukulaiteeen ymmärtämässä muodossa ja lähinnä rajoite koskeekin tilanteita, jossa teksti on kuvamuodossa esimerkiksi osana kuvitusta tai ladattavien tekstitiedostojen, kuten pdf:ien sisällä.

”Nyrkkisääntönä käyttäjästä ei voida olettaa, että hän kuulee, on näkökykyinen tai näkee värejä.”


Sivun elementtien koko pitää myös 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. Tekstin kokoa pitäisi voida suurentaa ongelmitta  – Selaimessa sivun kokoa pitäisi voida kasvattaa kaksinkertaiseksi zoomaustoiminnolla niin, että sisältö pysyy ymmärrettävänä. Musta teksti valkoisella taustalla on perussisältöön turvallinen valinta – kaikkien tekstiä sisältävien värillisten elementtien, nappien, laatikoden ynnä muiden kontrastiarvot tulisi tarkastaa esimerkiksi verkosta löytyvillä apuohjelmilla. Yksi apuohjelma löytyy esimerkiksi sivulta webaim.org. Kontrastivaatimus koskee myös tekstiä kuvan päällä – tämän voi testata esimerkiksi sivulla brandwood.com.

iToBEtrLYEYY6Pda-Zw1O_1UDSn0U-tZCLikCliuDWXVyJK1yCoi5jqkrlkEcjIk13-0QtHvspsYSDj_IZFNwpbZMLrORrKw1rnVClGtuX5-wI1MGYgskD2N1zkGn2oi915VqUBI

Paljon havaittavuuteen liittyvistä kriteereistä liittyy sivun käytön vihjeisiin, kuten vaikkapa nappien hover- ja klikkiefekteihin, tai tiettyjen elementtien värikoodaukseen. Kaikki elementit ja asiat sivulla pitää toteuttaa niin, että ne eivät yksinomaa nojaa tiettyyn aistimukseen, kuten muotoon, väriin tai ääneen. Käyttäjälle ei saa antaa ohjeistukseksi esimerkiksi “paina kolmiota jatkaaksesi” koska ei voida olettaa että käyttäjä näkee. Jos on kriittiistä ymmärtää vaikkapa jonkun osuuden kategorisointi ei kategoriaa saa merkitä vain värillä, koska käyttäjä voi olla värisokea. Nyrkkisääntönä käyttäjästä ei voida olettaa, että hän kuulee, on näkökykyinen tai näkee värejä.

2PA7-qLX6DT6DKI--7ywe2ppmLECDFT_Ai58LXpLdGPaaolbqpDD2HB8jrbbsZL19b8iW2DR5Qx-IT72J9BofR1a0eSaXWe6WM_8LOYK_yOmaQw7K4KDNcjrDG_PKxQYuHeYPQ9w

2.

Hallittavuus

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

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

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. Myös sivujen hakutoiminto helpottaa oikean sivun löytymistä. Valikon sivujen keskinäinen tärkeysjärjestys ja menun eri tasojen sisältöjen suhteet kannattaa miettiä huolella läpi, jotta navigointi on intuitiivista. 

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 pystyä myös helposti hahmottamaan, missä hän sivustolla tai palvelussa on. Tätä voi avittaa visuaalisilla merkinnöillä sivunavigaatiossa.

Xxb7X3m6J_qTZFmjVR3RlJ5lEj3I6zzZfQXYnR6RxinnYtIHzOuothuXqc-Atd8Iu0js7vF0XM59KY5mP91L0vMS_8DdX4IoeA23HmhCZvVHuHQNpue40VaNuA8azQiwwwhNOEb5

Valikoiden järjestyksen ei tulisi muuttua – sivustolla navigoimiseen käytettävien elementtien ulkonäön ja sivukohtaisen sijainnin kannattaa aina noudattaa samaa logiikkaa. Kaikilla sivuilla mukana kulkeva ylävalikko, joka pysyy jatkuvasti muuttumattomana, täyttää tämän kriteerin. Varovainen kannattaa olla silloin, kun käyttäjä siirtyy palvelun kokonaisuudesta toiseen, esimerkiksi kirjautuu palvelun sisälle tai siirtyy ylämenusta sivukokonaisuuteen, joka onkin eri osoitteessa ja jossa on eri sivurakenne. Silloin pitää kiinnittää erityistä huomiota siihen, että käyttäjä ymmärtää tilanteen vaihtuneen toiseksi – ymmärrystä voi usein tehostaa visuaalisesti tekstin lisäksi, esimerkiksi niin, että sisäänkirjautuneena sivun ulkonäkö vaihtuu selvästi.

Hallittavuuteen liittyy olennaisesti myös käyttöliittymän suunnittelu teknisesti sellaiseksi, että sitä voi käyttää pelkästään näppäinkomennoilla. Sitä varten kaikilla elementeillä tulisi olla määritetty miltä ne näyttävät valittuna, fokustilassa, jotta nuolinäppäimiä käyttävä käyttäjä näkee missä kohtaa sivua hän on. Tabulaattoria käyttäen tulisi käyttäjän voida liikkua kaikkien interaktiivisten elementtien kautta oikeassa järjestyksessä ja pystyä suorittamaan kaikki toiminnat, joita sivulla on tarkoitus tehdä. 

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.

Tekstisisällöillä on iso rooli sivun tai digipalvelun ymmärrettävyydessä. Jokaiselle sivulle tai näkymälle ja erilaisille elementeille kannattaa miettiä looginen ja kuvaava otsikko. Nappien, linkkien ja muiden interaktiivisten elementtien teksteistä pitäisi aina käydä ilmi, minkä tapahtuman se laukaisee ja mikä sen käyttötarkoitus on.  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.

_oGSeQlFLg2d8FZu8RoYmjcFMj7lvmyuB_d9z86dOOpqxNtwDJTx4QKkn3ta1d0eTbOVZtb5pspxFMS6OBz6cjEfARV5iUvgcqX4PUv5H-h4XjI0UL38m_XT9_WqcCe_dNa5MSqj

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. Käytännössä tämä tarkoittaa siis sitä, että kenttien täyttämisessä annetaan tarpeelliset ohjeet, kuten esimerkiksi salasanaa kysyttäessä salasanan sallitut merkit. Käyttäjälle tulee ilmoittaa, jos täyttämänsä tiedoissa on puutteita tai virheitä ja antaa tietoa siitä, miten korjata tilanne. Joissakin tilanteissa käyttäjälle voi antaa valmiit vaihtoehdot, esimerkiksi kotipaikkavalinnan tippuvalikkolistana kaupungeista. Kannattaa huomioida, että reaaliajassa ilmoitettavat virheet saattavat lukulaitetta käyttävälle käyttäjältä jäädä huomaamatta. Tason saavuttaakseen pitää tarjota lisäksi myös lomakkeen lähetyksen epäonnistuttua esille tuleva info, jossa käytetään ohjelmallisesti sellaisia metodeita (Aria-merkinnät), että lukulaite priorisoi niiden lukemista. 

xeE2-Ov9Z8Um4L0BlCzPZeyiQPHY5KQM5xzvgsGFEguw9W5BGoHixCSkRIDi56XTDZe1Uz9h2Kii84cJNlHVLtL2hA3ZNV9c2eSoNNIhm0_e-HCmGAj2WKtR5TxrtAz0HdSPs9Za

Toiminta pitää voida vahvistaa lopuksi ennen lähetystä. Erilaisissa osto, rekisteröinti ynnä muissa tilanteissa on siis tärkeää tarjota ennen lähetystä tiivistelmäsivu käyttäjän antamista tiedoista tai tilauksista mahdollistaen niiden muuttamisen tarvittaessa. Kaikki toiminnot on myös hyvä vakuuttaa käyttäjälle onnistuneiksi – onnistunut osto tai rekisteröintitapahtuma kannattaa siis päättää varmistusnäkymään.

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.

Ison kokonaisuuden avustavien teknologioiden saavutettavuuden kriteereistä liittyy tekstikorvikkeisiin. Kannattaa varmistaa, että kaikilla ikoneilla on lukulaitteelle tarkoitettu korvike, jos ikoni ei ole tekstin yhteydessä. Erilaisissa lomakkeissa ja kentissä on kriittistä, että tekstikorvike on kiinnitetty sitä koskevaan kenttään. Tekstipaikat käytön kannalta turhista elementeistä, kuten kortistekuvista, kannattaa piilottaa lukulaitteelta, jotta ne eivät sekoita käyttäjää. Sivuilla tulisi olla ymmärrettävät ja jokaiselle sivulle uniikit title-elementit sivujen header-osioissa. 

Miten saavutettavuutta testataan?

Saavutettavuuden testaa aina loppukädessä ihminen – mikään kone tai ohjelma ei kykene arvioimaan kaikkia saavutettavuuteen liittyviä tekijöitä. Etenkin erilaisten tekstien ja yleisen käytettävyyden ymmärrettävyyden arviointia ei voi ulkoistaa algoritmeille.
  

”Saavutettavuuden testaa aina loppukädessä ihminen – mikään kone tai ohjelma ei kykene arvioimaan kaikkia saavutettavuuteen liittyviä tekijöitä.”


Saavutettavuuden testaukseen käytettävistä apuohjelmiasta on kutienkin suuri hyöty etenkin mekaanisempien vikojen, kuten puutteellisten tekstikorvikkeiden ta kontrastiongelmien, löytämisessä. Agendalla on käytössä esimerkiksi Wave ja Siteimprove.  W3C-konsortio myös ylläpitää listausta sivullaan apuohjelmista

Saavutettavuus edellyttää myös testausta erilaisilla teknologioilla. Sivun pitää toimia kattavasti eri älypuhelimilla ja selaimilla. Koko sivun toimivuus on hyvä testata pelkkää näppäimistöä käyttäen. Usein tekstikorvikkeiden toimivuus kannattaa myös varmistaa käymällä sivu läpi ruudunlukuohjelmilla. 

Kattava saavutettavuuden tarkistaminen hoituu parhaiten siis tehokkailla apuohjelmilla, huolellisella laite- ja selaintestaamisella sekä saavutettavuuskriteereihin perehtyneellä testaajalla.

Mistä lisää tietoa?

WCAG 2 saavutettavuuden ohjeistus sisältää useita kymmeniä osin varsin tarkkojakin ehtoja. Helppoa oikotietä saavutettavuuden tarkistamiseen ei ole vaan kriteeristö pitää verkkosivua suunnitellessa käydä kohta kohdalta läpi. Lisää tietoa WCAG:ista ja saavutettavuuskriteereistä löydät WCAG:n viralliselta verkkosivulta, sekä esimerkiksi Kehitysvammaliiton Papunet-sivustolta.

Agendan palveluvalikoimaan kuulubvat saavutettavuusauditoinnit ja Agendan kriteereihin perehtyneet suunnittelijan tarkistavat palvelusi saavutettavuuden puolestasi. Toimitamme selkeän raporttimuotoisen listauksen löydetyistä puutteista sekä parannussuositukset niiden korjaamiseksi.

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

Lue lisää Agendan saavutettavuuteen liittyvistä palveluista täältä ja ota yhteyttä saadaksesi lisätietoa tai pyytääksesi tarjouksen!

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.