Saavutettavuus verkkopalveluissa – nämä 12 asiaa sinun tulisi tietää uudesta WCAG 2.1 -standardista

Uusi laki digitaalisten palveluiden tarjoamisesta sekä W3C:n standardoima WCAG 2.1 -ohjeistus tuovat verkkopalveluille uusia vaatimuksia, jotka kannattaa ottaa huomioon vähintään uuden verkkosivuston suunnittelussa. Olemme aiemmissa kirjoituksissa keskittyneet saavutettavuuden parantamiseen yleisellä tasolla sekä suunnittelun näkökulmasta. Nyt pureudutaan syvemmin uuden standardin tuomiin uudistuksiin.

Saavutettavuuden aiempi ohjeistus WCAG 2.0 ehti kunnioitettavaan kymmenen vuoden ikään ja se oli monelta osin vanhentunut. Esimerkiksi mobiililaitteiden osuus verkkosivujen liikenteestä on kasvanut vuosikymmenen saatossa räjähdysmäisesti. Monessa palvelussa mobiilikäyttäjien osuus on jo reippaasti ohittanut työpöytäkäyttäjät. Muuttuneet käyttötottumukset vaativat myös standardien päivittämistä.

Mikä on WCAG 2.1?

WCAG 2.1 -standardi ottaa yhä laajemman käyttäjäjoukon huomioon varmistaakseen, että verkkosivustot ja -palvelut ovat saavutettavia. Standardin pääpaino on saavutettavuuden parantaminen kolmessa eri kohderyhmässä:

• Käyttäjät, joilla on kognitiivisia ja kielellisiä vaikeuksia tai oppimisvaikeuksia

• Käyttäjät, joilla on heikentynyt näkökyky

• Mobiililaitetta käyttävät vammaiset henkilöt

WCAG 2.1 on selkeä päivitys vanhaan standardiin ja kaikki ohjeistukset, jotka on totuttu ottamaan huomioon aiemmin, pätevät edelleenkin. WCAG 2.1 esimerkiksi käyttää edelleen samoja vaatimustasoja A, AA ja AAA saavutettavuuden mittaamiseksi.

WCAG 2.1 ottaa erityisesti huomioon mobiilikäyttäjien lisäksi heikentyneestä näkökyvystä kärsivät sekä kognitiivisista vaikeuksista kärsivät. Pelkästään alentuneen näkökyvyn omaavia henkilöitä on laskettu olevan maailmassa 246 miljoonaa. Mistään pienestä käyttäjäjoukosta ei siis ole kyse.

Kognitiivisista ongelmista kärsivien huomioon ottaminen on yksi uuden standardin mielenkiintoisimpia osuuksia. Siinä muun muassa kiinnitetään huomioon dysleksiasta kärsivien mahdolliset haasteet saavutettavuudessa.

Mitä vaaditaan WCAG 2.1 tason AA saavuttamiseksi?

Tässä esitellään uuden 2.1 version muutokset ja niiden vaikutukset verkkopalveluihin. Nämä vaatimukset tulee täyttää AA-tason saavuttamiseksi. Osa näistä vaaditaan jo A-tasolla.

1. Orientaatio (AA)

WCAG 2.1:n vaatimuksena on, että palvelu ei pakota sen käyttämistä vaaka- tai pystytilassa. Vaatimuksen taustalla on se, että osalla käyttäjistä laite voi olla esimerkiksi kiinnitetty pyörätuoliin eikä sen asentoa voi muuttaa.

Standardissa annetaan myös poikkeuksia tähän sääntöön. Esimerkiksi pianonsoiton sovellus ei voi toimia samalla tavalla pystysuunnassa.

Kohderyhmä: mobiilikäyttäjät

2. Lomakekenttien tarkoitus (AA)

Tekstikenttien osalta uusi standardi ottaa kantaa siihen, että käyttäjien on helpompi ymmärtää, mikä eri tekstikenttien tarkoitus on. Yhtenä ehdotuksena standardissa on, että tekstikenttien yhteydessä käytettäisiin myös symboleita kertomaan mistä on kyse. Yksinkertaisia esimerkkejä symboleista ovat esimerkiksi sähköpostiosoitteen @ (at) tai rahan € (euro) ja $ (dollari).

Symbolien osalta on todettava kuitenkin, että myös niissä on omat haasteensa ja jokin meille ymmärrettävä symboli ei välttämättä olekaan toiselle selkeä. Tähän ehdotuksena on ollut, että käyttäjä voisi itse määrittää yleisimmät symbolit tekstikentille.

Standardissa listataan esimerkkejä kentistä, joille voidaan antaa selitys käyttäjälle. Tällaisia ovat esimerkiksi:

• Nimi

• Käyttäjätunnus

• Uusi salasana

• Nykyinen salasana

• Syntymäaika

• Sukupuoli

• Sähköpostiosoite

• Puhelinnumero

Kohderyhmä: kognitiiviset haasteet

3. Tekstin juoksutus (AA)

Näyttöä voidaan vierittää laitteessa kahdessa eri suunnassa. Käyttäjille luonnollinen suunta tällä hetkellä useimmissa palveluissa on vierittää sisältöä ylös ja alas. Ongelmia alkaa tulla siinä vaiheessa, jos sivun sisältö ei mahdukaan ruudulle vaakatilassa. Tämä pakottaa käyttäjän vierittämään sisältöä neljässä eri suunnassa hahmottaakseen kokonaisuuden. Tutkimusten mukaan vaakatilassa vierittäminen voi heikentää sisällön ymmärtämistä 40-100 kertaisesti.

Uuden standardin ohjeena on, että sivusto ei ikinä vaadi käyttäjää vierittämään sisältöä sekä vaaka- että pystysuunnassa ellei sisällön muoto itsessään ole sellaista, että sen ymmärtäminen vaatii sitä.

Kohderyhmä: heikkonäköiset

4. Muiden kuin tekstielementtien kontrasti (AA)

Vaatimuksessa otetaan huomioon se, että yhä useammassa palvelussa monet tärkeät elementit eivät välttämättä ole tekstiä. Käyttöliittymässä voi olla tärkeitä elementtejä grafiikkana. Myös näiden elementtien tulee erottua tarpeeksi selkeästi. Tämä tarkoittaa myös esimerkiksi lomakkeiden elementtejä, kuten kenttiä. Niiden tulee erottua tarpeeksi hyvin taustasta. Standardissa on määritelty, että tällaisten elementtien kontrastin suhde pitää olla vähintään 3:1.

Kohderyhmä: heikkonäköiset

5. Tekstin välistys (AA)

Tekstin koko on toinen asia, johon on kiinnitetty jo aiemmin huomiota saavutettavuudella. Tämä on aiemmin tarkoittanut sitä, että käyttäjän pitää voida suurentaa tarvittaessa palvelun tekstiä. Uuden standardin mukana tähänkin on tulossa laajennus ja käyttäjän tulisi voida vaikuttaa myös tekstin kappaleiden väleihin, kirjainten välistykseen, sanojen väleihin ja rivien korkeuteen.

Vaatimuksessa todetaan, että koska monet tekstityylit määritellään nykyisin erillisellä tyylitiedostolla, on käyttäjän myös pystyttävä muuttamaan oletuksia. Suosituksena näiden osalta on, että

• Rivikorkeus on vähintään 1,5 kertaa kirjasimen koko.

• Kappaleiden jälkeinen tyhjä tila on vähintään 2 kertainen kirjasimen kokoon.

• Kirjainten välistys tulee olla vähintään 0.12 kertaa kirjasimen koko.

• Sanoen välistys tulee olla vähintään 0.16 kertaa kirjasimen koko.

Kohderyhmä: heikkonäköiset

6. Sisällön ilmestyminen, kun sisältöä kohdistetaan (AA)

Käyttäjille voi olla hyvin hankalaa hahmottaa sisältöä, joka ilmestyy vain, kun esimerkiksi kohdistin viereen elementin päälle. Ongelma on erityisen selkeä, jos vaatii hiiren kohdistamista pienelle alueelle ja käyttäjällä on motorisia ongelmia.

Ratkaisuna ongelmaan on, että sisältöä on mahdollista piilottaa ilman kohdistimen siirtämistä. Lisäksi suosituksena on, että jos kohdistimen vieminen elementin päälle avaa uuden elementin, kohdistin voidaan myös viedä uuden elementin päälle ilman, että se katoaa. Lisäksi uuden elementin tulee pysyä näkyvissä niin kauan, että kohdistin viedään pois tai käyttäjä muutoin sulkee elementin.

Esimerkki tällaisesta elementistä on ohjeikoni lomakkeessa, joka tuo esille ohjetekstin, kun käyttäjä vie hiiren ikonin päälle.

Kohderyhmä: heikkonäköiset

7. Näppäinoikotiet (A)

Näppäinoikoteiden osalta uudessa standardissa kiinnitetään huomiota siihen, että mikäli palvelu luottaa toiminnoissa näppäinoikoteihin, ne voidaan myös ottaa pois käytöstä tai muuttaa toiseksi. Tämä on erityisesti tarpeellista sellaisessa tapauksessa, että palvelussa yksittäisen kirjaimen painaminen käynnistää toiminnon.

Vaatimuksena on, että käyttäjä voi joko:

• kytkeä näppäinoikotiet kokonaan pois käytöstä

• muuttaa näppäinoikotiet toisiksi, esimerkiksi Ctrl tai Alt, joita ei tarvitse yleensä normaalissa sisällönsyötössä.

• Näppäinoikotiet toimivat vain, kun elementti on kohdistettuna

Kohderyhmä: mobiilikäyttäjät

8. Eleet (A)

Vaatimuksessa otetaan huomioon käyttäjät, jotka eivät pysty suorittamaan monimutkaisia elkeitä. Kosketusnäytön pyyhkäisyt tai kahdella sormella nipistäminen voi olla osalle käyttäjistä mahdottomia suorittaa.

Vaatimuksessa todetaan, että kaikki toiminnallisuudet, jotka vaativat useamman pisteen tai tietyn polun kulkevaa elettä, tulee olla käytettävissä yhdellä kohdistimella, ellei se ole pakollista toiminnallisuuden toteuttamiseksi.

Kohderyhmä: mobiilikäyttäjät

9. Kohdistimen toiminnon peruuttaminen (A)

Henkilöt, joilla on erilaisia rajoitteita, voivat vahingossa koskettaa elementtejä. Tämä voi suorittaa sivustolla toiminnon, jota he eivät odottaneet. Tämä voi tarkoittaa esimerkiksi elementtien sulkemista vahingossa.

Tällaisessa tilanteessa varmistetaan, että pelkkä elementin koskettaminen ei käynnistä toiminnallisuutta. Toiminnallisuudessa varmistetaan myös, että esimerkiksi pelkkä hiiren napin painaminen alas ei tee vielä mitään, toiminto suoritetaan vasta, kun hiiren nappi nostetaan ylös.

Kohderyhmä: mobiilikäyttäjät

10. Elementtien nimeäminen (A)

Käyttäjät, jotka käyttävät verkkosivuja puheentunnistuksella täyttävät esimerkiksi lomakkeet niiden elementtien nimien perusteella. Mikäli käyttäjä haluaa lähettää lomakkeen, tulisi hänen pystyä päättelemään miten lomake lähetetään. Lomakkeilla on erikseen nimi ja otsikko. Lomakkeessa elementin ns. label näytetään aina käyttäjälle, mutta nimi-elementti on piilotettu, koska sitä käsitellään yleensä koneellisesti. Tavoitteena on, että lomake elementin nimi on sellainen, että käyttäjä pystyy päättelemään mitä siitä tapahtuu.

Esimerkki tällaisesta on lomakkeen lähettäminen, jossa loogista on, että lomakkeen lähettävän napin nimi on Lähetä.

Kohderyhmä: mobiilikäyttäjät

11. Liiketoiminnot (A)

Käyttäjät, joilla on motorisia ongelmia eivät välttämättä pysty suorittamaan monimutkaisia liikkeitä, kuten laitteen kallistusta tai ravistusta. Vaatimuksena on, että liikkeeseen pohjautuvat toiminnot voidaan suorittaa myös käyttöliittymän kautta ja liiketunnistus voidaan ottaa tarvittaessa pois käytöstä.

Kohderyhmä: mobiilikäyttäjät

12. Tilaviestit (AA)

Useimmat palvelut viestivät käyttäjälle erilaisilla viesteillä, kun palvelua käytetään. Käyttäjä voi esimerkiksi saada palvelussa tapahtuneista virheistä viestin tai ilmoituksen, kun toiminto on valmis. Osa tällaisista viesteistä voi olla sellaisia, että käyttäjä ei hahmota tai löydä niitä sivulta.

Tilaviestien osalta vaaditaan, että ne toteutetaan niin, että niistä ilmenee selkeästi roolin perusteella kyseessä olevan tilaviesti. Tämä mahdollistaa sen, että käyttäjää avustava tekniikka, kuten lukulaite osaa tunnistaa ja esittää ne käyttäjälle.

Kohderyhmä: kognitiiviset haasteet

Miten nousta korkeimmalle AAA-tasolle?

Mikäli palvelu haluaisi saavuttaa korkeimman tason AAA, tulisi siinä lisäksi ottaa huomioon seuraavat asiat:

• 1

  Tarkoituksen esittäminen
  Elementeissä kerrotaan minkälaisesta elementistä on kyse.

• 2

  Aikarajoitukset
  Käyttäjää varoitetaan, mikäli palvelun tiedot katoavat tietyn aikarajan sisällä.

• 3

  Animaatiot interaktiossa
  Liikkuvat animaatiot voidaan tarvittaessa ottaa pois käytöstä ellei animaatio ole oleellinen osa toiminnallisuutta tai tiedon välitystä.

• 4

  Kohteiden koko
  Kohteiden koolle on asetettu minimikoko 44×44 pikseliä, johon on kuitenkin poikkeuksia.

• 5

  Päällekkäiset syöttömekanismit
  Palvelu ei estä käyttäjää käyttämästä vaihtoehtoisia sisällönsyöttötapoja, jotka alusta tarjoaa.

Tee verkkopalvelustasi saavutettava

Saavutettavuus verkkosivuilla vaatii työpanosta koko organisaatiolta. Se ei tapahdu sormia napsauttamalla eikä sitä voi myöskään laittaa pelkästään teknisten ylläpitäjien vastuulle. Se vaatii aikaa ja vaivaa myös esimerkiksi sivuston sisällöntuottajilta.

Me Exovella uskomme yhdenvertaisuuteen ja siihen, että kaikilla on oltava yhtäläiset mahdollisuudet käyttää digitaalisia palveluita. Mikäli haluat tietää aiheesta lisää, tutustu Exoven saavutettavuusarviointiin. Autamme sinua analysoimaan ja tunnistamaan nykyiset haasteet saavutettavuudessa ja myös paremmin ottamaan saavutettavuuden huomioon tulevaisuudessa.

Ajatuksiaan jakoi