Papunetin WCAG 2.1 -tarkistuslista

Tällä sivulla oleva tarkistuslista on Papunetin yksinkertaistettu versio ja tulkinta WCAG 2.1 -ohjeistuksesta. Kyseinen tarkistuslista ei siis ole Verkkosisällön saavutettavuusohjeistus WCAG 2.1 eikä siinä ole otettu kaikkia WCAG 2.1 -ohjeistuksen vaatimia asioita huomioon. Tästä syystä suosittelemme aina tutustumaan WCAG 2.1 -ohjeistuksen alkuperäiseen englanninkieliseen versioon W3C:n sivuilla.

Alkuperäinen WCAG 2.1 -ohjeistus ei ota kantaa siihen, miten ja millä tavalla sisällöt ja toiminnot on toteutettu. Tällä sivulla olevassa tarkistuslistassa on kuitenkin annettu ohjeita myös toteutustapaan. Tässä on huomioitu yleisimmät toteutustavat sekä yleisimmät WCAG 2.1 -virheet.

Tämän tarkistuslistan tekemiseen on hyödynnetty alkuperäistä WCAG 2.1 -ohjeistusta, WebAIMin WCAG 2 -tarkistulistaa (englanniksi) sekä Papunetin verkkosisällön saavutettavuusohjeita.

1. Ymmärrettävä


Ohje 1.1 – Tekstivastineet

Tarjoa tekstivastineet kaikelle ei-tekstuaaliselle sisällölle.


1.1.1 Ei-tekstuaalinen sisältö (Taso A)

  • Kaikilla kuvilla ja kuvapainikkeilla on tarkoitusta kuvaava tekstivastine.
  • Kuvilla, joiden tarkoitus ei ole välittää sisältöä (dekoratiiviset kuvat) tai joiden sisältö on jo kuvattu tekstinä, on tyhjä alt teksti (alt="") TAI siitä on tehty CSS-taustakuva.
  • Kaikilla linkkeinä toimivilla kuvilla tulee olla linkin kohdetta kuvaava tekstivastine.
  • Kompleksisten kuvien (kuvaajat, graafit, kaaviot) yhteydessä kuvan informaatio on esitetty tekstinä joko samalla tai erillisellä sivulla. Alt-tekstin tarkoitus tässä on kertoa lyhyesti, mitä kuva esittää.
  • Lomakepainikkeet ovat kuvaavia.
  • Lomakekentillä on kuvaavat nimilaput (labels).
  • Upotetuilla multimediasisällöillä on saavutettavat otsikot/nimet.
  • Frame- ja iframe-kohteilla on kuvaavat nimet (title).

Ohje 1.2 – Aikasidonnainen media

Tarjoa vastine (esimerkiksi tekstitys ja kuvailutulkkaus) aikasidonnaiselle medialle, kuten videoille ja äänitiedostoille.

Huom! Videoiden tekstittäminen ei ole pakollista, jos video toimii verkkosivulla olevan sisältötekstin mediavastineena (esimerkiksi viittomakielinen tai pelkkänä audiona esitetty versio sisällöstä).


1.2.1 Pelkkä audio tai pelkkä video (tallennettu) (Taso A)

  • Tallennettu audio (pelkkä ääni) on esitetty myös kirjoitettuna tekstinä.
  • Tallennetun videon (ei ääntä) sisältö on esitetty kirjoitettuna tekstinä. Jos alkuperäinen video ei sisällä ääntä, sama sisältö voidaan esittää myös audiona.

1.2.2 Tekstitys (tallennettu) (Taso A)

  • Tallennetuissa videoissa on tekstitykset.

1.2.3 Ääniselite tai mediavastine (tallennettu) (Taso A)

  • Videoiden sisältö on esitettynä tekstinä tai videosta on saatavilla myös kuvailutulkattu versio.
  • Vaaditaan, jos videolla olevaa visuaalista sisältöä ei ole esitetty alkuperäisessä ääniraidassa.

1.2.4 Tekstitys (suorissa lähetyksissä) (Taso AA)

  • Kaikelle synkronoidussa mediassa olevalle suoralle audiosisällölle on tarjolla tekstityksiä. (Videot, pelkkää ääntä sisältävät lähetykset, videokonferenssit, verkkolähetykset).

1.2.5 Ääniselite (tallennettu) (Taso AA)

  • Kaikista videoista on saatavilla kuvailutulkkaus. (Vaaditaan, jos videolla olevaa visuaalista sisältöä ei ole esitetty alkuperäisessä ääniraidassa.)

1.2.6 Viittomakieli (tallennettu) (Taso AAA)

  • Viittomakielinen video on saatavilla kaikelle sellaiselle mediasisällölle, jotka sisältävät ääntä.

1.2.7 Laajennettu ääniselite (tallennettu) (Taso AAA)

  • Jos alkuperäiseen videoon on mahdotonta lisätä kuvailutulkkausta (esimerkiksi liian lyhyiden taukojen vuoksi alkuperäisessä ääniraidassa), videosta tulee tehdä uusi versio, jossa on sopivat tauot ja  kuvailutulkkaus.

1.2.8 Mediavastine (tallennettu) (Taso AAA)

  • Video- ja äänisisältöjä kuvailevat tekstiversiot on saatavilla kaikelle tallennetulle medialle.

1.2.9 Pelkkä audio (suorissa lähetyksissä)

  • Kaikelle ääntä sisältäville suorille lähetykselle on saatavilla kuvaileva tekstiversio.

Ohje 1.3 – Mukautettava

Sisältö voidaan esittää eri tavoin (esimerkiksi yksinkertaisemman asettelun avulla) informaatiota tai rakennetta menettämättä.


1.3.1 Informaatio ja suhteet (Taso A)

  • Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä.
  • Semanttista merkkausta on käytetty oikein esimerkiksi otsikoiden (<h1>), alueiden/maamerkkien, listojen (<ul>, <ol>, <dl>), korostetun tekstin (<strong>, <code>, <abbr>, <blockquote>) osalta.
  • Taulukoita (<table>) on käytetty taulukkomuodossa olevan datan esittämiseen. Taulukon solut on yhdistetty niiden otsikoihin (tunnisteisiin). Jos taulukossa on seloste (caption), se on yhdistetty taulukkoon ohjelmallisesti.
  • Lomakkeiden tekstimuotoiset nimilaput on yhdistetty syöte-elementteihin ohjelmallisesti. Toisiinsa liittyvät syöte-elementit on ryhmitetty – fieldset/legend. ARIAa voidaan hyödyntää, Jos standardi HTML ei tarjoa riittävän hyviä keinoja kunnollisten nimilappujen ja ohjeiden tekemiseen.

1.3.2 Merkitykseen vaikuttava järjestys (Taso A)

  • Lukemis- ja navigointijärjestys ovat loogisia ja intuitiivisia.
  • Nämä määräytyvät koodin perusteella – lukeminen ja navigointi tapahtuvat siinä järjestyksessä, miten ne on esitetty HTML:ssä.

1.3.3 Aistinvaraiset ominaispiirteet (Taso A)

  • Ohjeet sisällön ymmärtämiseksi ja hallitsemiseksi eivät pelkästään riipu aistinvaraisista ominaispiirteistä kuten muoto, koko, visuaalinen sijainti, suunta tai ääni.
  • Ei siis näin: "Paina oikealla ylhäällä olevaa vihreää neliötä", "Kun kuulet kellon äänen, voit jatkaa".

1.3.4 Asento (Taso AA)

  • Sisällön esittämisen kannalta ei ole väliä katsotaanko sitä vaaka- vai pystyasennossa, lukuun ottamatta sellaisia tapauksia, joissa asento on olennainen.

1.3.5 Määrittele syötteen tarkoitus (Taso AA)

  • Käyttäjätietojen keräämiseen tarkoitettujen syötekenttien tarkoitus voidaan selvittää ohjelmallisesti.
  • Käytännössä: syötekentillä on autocomplete-attribuutti.

1.3.6 Määrittele tarkoitus (Taso AAA)

  • Sivun eri osiot on tunnistettu käyttäen joko HTML5-alueita (regions) tai ARIA-maamerkkejä (landmarks).
  • Käyttöliittymäkomponenttien paremman tunnistamisen apuna on käytetty ARIAa.

Ohje 1.4 – Erottuva

Helpota käyttäjiä näkemään ja kuulemaan sisältö lisäämällä taustasta erottuva etuala.


1.4.1 Värien käyttö (Taso A)

  • Väriä ei käytetä ainoana visuaalisena keinona välittämään informaatiota tai merkitystä eikä erottamaan visuaalisia kohteita toisistaan.
  • Väriä ei käytetä ainoana keinona erottamaan linkkejä muusta ympäröivästä tekstistä, paitsi jos:
    • linkkitekstin ja sitä ympäröivän tekstin tummuuskontrasti on vähintään 3:1 JA
    • linkkiteksti erotetaan ympäröivästä tekstistä myös muilla tavoilla (esimerkiksi linkkitekstistä tulee alleviivattu), kun linkki saa näppäimistökohdistuksen tai hiiren kohdistin viedään linkin päälle.

1.4.2 Audion kontrollointi (Taso A)

  • Käyttäjällä on jokin mekanismi pysäyttää, keskeyttää, vaimentaa tai säätää voimakkuutta automaattisesti toistuville äänille, joiden pituus on yli 3 sekuntia.

1.4.3 Kontrasti (minimi) (Taso AA)

  • Tekstin (myös tekstiä esittävät kuvat) ja taustan välinen tummuuskontrasti on vähintään 4,5:1.
  • Isokokoisen tekstin (vähintään 18 pt / 24 px) tai lihavoidun (14 pt / 19 px) ja taustan välinen tummuuskontrasti on vähintään 3:1.

1.4.4 Tekstin koon muuttaminen (Taso AA)

  • Tekstin kokoa voidaan suurentaa 200 %:iin asti ilman sisällön ja toiminnallisuuden menettämistä.
  • Tekstin kokoa muutetaan selainasetuksista ilman avustavia teknologioita.

1.4.5 Tekstiä esittävät kuvat (Taso AA)

  • Kuvia ei saa käyttää tekstimuotoisen sisällön esittämiseen, mikäli sama visuaalinen esitystapa on mahdollinen käytetyllä teknologialla (esimerkiksi HTML + CSS).
  • Poikkeuksena tähän ovat logotyypit, joissa teksti on osa logoa tai brändin nimeä.

1.4.6 Kontrasti (lisätty) (Taso AAA)

  • Tekstin (myös tekstiä esittävät kuvat) ja taustan välinen tummuuskontrasti on vähintään 7:1.
  • Isokokoisen tekstin (vähintään 18 pt / 24 px) tai lihavoidun (14 pt / 19 px) - ja taustan välinen tummuuskontrasti on vähintään 4,5:1.

1.4.7 Hiljainen taustaääni tai ei taustaääntä (Taso AAA)

  • Puhetta sisältävillä ääniraidoilla ei ole taustaääntä tai taustaääni on hyvin hiljaisella, jotta puhe erottuu selkeästi.
  • Poikkeuksia ovat: auditiiviset CAPTCHA-varmenteet, audiologot sekä musiikilliset ilmaisut, kuten laulu.

1.4.8 Visuaalinen esitystapa (Taso AAA)

  • Tekstilohkot tai enemmän kuin yhden virkkeen sisältävät tekstit:
    • Rivit ovat enintään 80 merkkiä pitkiä.
    • Eivät ole tasattu sekä vasempaan että oikeaan reunaan.
    • Rivivälit ovat vähintään 1/2 yhtä suuria kuin tekstin koko.
    • Kappaleiden välit ovat vähintään 1,5 kertaa suuremmat kuin rivivälit.
    • Taustaväri ja edustan väri on määritelty.
    • Sivusuuntaista vierittämistä ei tarvita, mikäli tekstin koko kaksinkertaistetaan.

1.4.9 Tekstiä esittävät kuvat (ei poikkeusta) (Taso AAA)

  • Tekstiä esittäviä kuvia ei ole käytetty muuta kuin koristeena tai kun tietty tekstin esitystapa on olennainen informaation välittymiseksi.

1.4.10 Responsiivisuus (Taso AA)

  • Sivu voidaan esittää 320 CSS-pikselin levyisenä menettämättä toiminnallisuutta tai sisältöä, ja ilman sivusuuntaista (horisontaalista) vierittämistä.
    • Jos sivua voidaan vierittää vain sivusuunnassa, sisältöjen tulee mahtua 256 CSS-pikselin korkuisena.
  • Poikkeuksia (esimerkkejä): suuret taulukot, suuret kuvat (kartat, kuvaajat, yms.). 

1.4.11 Ei-tekstimuotoisen kontrasti (Taso AA)

  • Ymmärtämisen kannalta olennaisten graafisten objektien (esim. kuvakkeet, kuvaajat) tai käyttöliittymäkomponenttien (esim. painikkeet, lomakekentät) tummuuskontrasti suhteessa viereisiin väreihin on vähintään 3:1
  • Olennaista on, että esimerkiksi kuvakkeen olennainen sisältö ja painikkeen muoto erottuvat. 

1.4.12 Tekstin välistys (Taso AA)

  • Käyttäjän pitää voida mukauttaa tekstiä ilman sisältöjen ja toiminnallisuuden menettämistä, siten että:
    • riviväli on 1,5 kertaa fontin kokoinen
    • tyhjä tila kappaleiden jälkeen on 2 kertaa fontin kokoinen
    • kirjainten väli on 0,12 kertaa fontin kokoinen ja
    • sanojen väli on 0,16 kertaa fontin kokoinen.

1.4.13 Sisältö osoitettaessa tai kohdistettaessa (Taso AA)

  • Jos hiiren osoittimen vieminen elementin päälle tai näppäimistön fokuksen siirtäminen elementtiin tuo näkyviin lisää sisältöä, seuraavat ehdot pätevät:
  1. Piilotettavissa: on olemassa mekanismi, jolla näkyviin tulleen sisällön saa piilotettua siirtämättä hiirtä tai näppäimistön fokusta, lukuunottamatta tapausta jossa sisältö on syötevirheestä kertova teksti tai ei peitä tai korvaa muuta sisältöä.
  2. Osoitettavissa: jos hiiren osoittimen vieminen elementin päälle tuo näkyviin uutta sisältöä, kohdistin voidaan viedä uuden sisällön päälle aiheuttamatta sisällön katoamista.
  3. Pysyvä: uusi sisältö pysyy näkyvissä kunnes hiiren kohdistin tai näppäimistöfokus on siirretty pois, käyttäjä on piilottanut sisällön tai sen sisältö ei ole validia.

2. Hallittava

Ohje 2.1 – Käytettävissä näppäimistöltä

Varmista, että sivustoa voidaan selata ja kaikkia sivustolla olevia toimintoja voidaan käyttää pelkällä näppäimistöllä ilman hiirtä ja kosketusta.


2.1.1 Näppäimistö (Taso A)

  • Kaikki toiminnallisuus on käytettävissä näppäimistöltä käsin. (Kaikkia linkkejä, painikkeita ja lomake-elementtejä voi käyttää pelkällä näppäimistöllä.)
  • Poikkeus: tapaukset, joissa saman toiminnon toteuttaminen ei ole mahdollista pelkällä näppäimistöllä.

2.1.2 Ei näppäimistöansaa (Taso A)

  • Näppäimistön fokus ei milloinkaan lukitu sivun mihinkään elementtiin. Jos näppäimistöllä voidaan siirtyä johonkin sivun elementtiin, siitä on mahdollista näppäimistön avulla myös päästä pois.
  • Käyttäjää ohjeistetaan, mikäli näppäimistökohdistin on siirrettävissä elementistä jotenkin muuten kuin yleisimmillä tavoilla (esimerkiksi nuoli­- tai ESC­-näppäimillä tai sarkaimella (Tab)).

2.1.3 Näppäimistö (ei poikkeuksia) (Taso AAA)

  • Kaikki toiminnallisuus on käytettävissä näppäimistöltä käsin ilman poikkeuksia.

2.1.4 Kirjainnäppäinoikotiet (Taso A)

  • Jos sisältöön on toteutettu näppäinoikotie, joka käyttää vain yhtä kirjain- (mukaanlukien pienet ja isot kirjaimet), välimerkki-, numero- tai symbolinäppäintä, vähintään yksi seuraavista pätee:
    • Pois päältä: On olemassa mekanismi, jolla näppäinoikotien voi laittaa pois päältä
    • Uudelleenmäärittely: On olemassa mekanismi, jolla näppäinoikotie voidaan määritellä uudelleen käyttämään yhtä tai useampaa muokkausnäppäintä (Ctrl, Alt jne.)
    • Aktiivinen vain kohdistettaessa: Näppäinoikotie on käytössä vain, kun elementillä on fokus.

Ohje 2.2 – Tarpeeksi aikaa

Anna käyttäjille tarpeeksi aikaa lukea ja käyttää sisältöä.


2.2.1 Säädettävä ajoitus (Taso A)

  • Jos sivulla tai sovelluksella on aikaraja, käyttäjällä on mahdollisuus kytkeä aikaraja pois päältä, säätää sitä tai pitkittää sitä.
  • Poikkeus: reaaliaikaiset tapahtumat (esimerkiksi huutokauppa); tilanteissa, joissa aikaraja on välttämätön, tai jos aikarajan pituus on yli 20 tuntia.

2.2.2 Keskeytä, pysäytä, piilota (Taso A)

  • Käyttäjä voi keskeyttää, pysäyttää tai piilottaa
    • automaattisesti käynnistyvän liikkuvan, välkkyvän tai vierivän sisällön (esimerkiksi karusellit, itsestään rullaavat tekstit, animaatiot), jonka kesto on yli 5 sekuntia
    • automaattisesti päivittyvän sisällön (esimerkiksi itsestään päivittyvä uutisvirta) tai käyttäjällä on mahdollisuus muuttaa päivitysvälien ajoitusta.

2.2.3 Ei ajoitusta (Taso AAA)

  • Sisältöjen lukemiseen ja toimintojen tekemiseen ei ole annettu aikarajaa.

2.2.4 Keskeytykset (Taso AAA)

  • Käyttäjä voi lykätä tai estää keskeytykset, lukuun ottamatta hätätapauksiin liittyviä keskeytyksiä.

2.2.5 Uudelleen tunnistautuminen (Taso AAA)

  • Kun todennettu istunto vanhentuu, käyttäjä voi tietoja menettämättä jatkaa toimintoa uudelleentunnistautumisen jälkeen.

2.2.6 Aikarajat (Taso AAA)

  • Käyttäjää varoitetaan, jos käyttäjän tietoja voi kadota käyttäjän inaktiivisuuden seurauksena, paitsi jos tietoja säilytetään yli 20 tuntia sen jälkeen, kun käyttäjä ei tee mitään.

Ohje 2.3 – Sairauskohtaukset

Älä suunnittele sisältöä tavalla, jonka tiedetään aiheuttavan sairauskohtauksia.


2.3.1 Kolme välähdystä tai alle -raja-arvo (Taso A)

  • Mi­kään si­vun ole­va si­säl­tö ei väl­ky ti­heäm­min kuin 3 ker­taa se­kun­nis­sa.
  • Poikkeus: Välk­ky­vä si­säl­tö on kool­taan pie­ni ja vä­läh­dys­ten kont­ras­ti­suh­de on pie­ni ja välähtävässä sisällössä ei ole paljoa punaista väriä.

2.3.2 Kolme välähdystä (Taso AAA)

  • Verkkosivut eivät sisällä mitään, joka milloinkaan välähtäisi useammin kuin kolme kertaa sekunnissa.

2.3.3 Animaatio vuorovaikutuksen yhteydessä (Taso AAA)

  • Liikeanimaatio, joka on seurausta käyttäjän vuorovaikutuksesta, voidaan laittaa pois päältä, paitsi tilanteissa, joissa animaatio on olennainen käytön tai välitettävän informaation kannalta.

Ohje 2.4 – Navigoitava

Tarjoa käyttäjille tapoja navigoida, etsiä sisältöä ja määrittää sijaintinsa.


2.4.1 Ohita lohkot (Taso A)

  • Sivunäkymän toistuvat osiot (navigaatiolinkit yms.) on mahdollista ohittaa jommallakummalla tavalla.
    • Tekemällä sivunäkymän alkuun "Hyppää sisältöön" -linkki, joka vie käyttäjän suoraan sivunäkymän pääsisältöön.
    • Sivulla käytetään kunnollista ja toimivaa otsikkorakennetta – otsikot ovat myös ohjelmallisesti tunnistettavissa otsikoiksi <h1...h6>.

2.4.2 Sivuotsikot (Taso A)

  • Jokaisella sivunäkymällä on kuvaava nimi (<title>). Sivun nimi määritellään HTML:ssä head-osiossa.

2.4.3 Fokusjärjestys (Taso A)

  • Navigoitavien elementtien (esimerkiksi linkit ja lomakekentät) navigointijärjestys on looginen ja intuitiivinen.

2.4.4 Linkin tarkoitus (kontekstissa) (Taso A)

  • Jokaisen linkin tarkoitus (mitä linkistä tapahtuu) on mahdollista selvittää pelkästä linkkitekstistä tai linkkitekstistä ja sitä ympäröivästä kontekstista (esimerkiksi samassa kappaleessa, listassa tai taulukon solussa).
  • Linkit, joissa on sama teksti ja vievät eri sivuille, ovat helposti erotettavissa toisistaan.

2.4.5 Useita tapoja (Taso AA)

  • Verkkosivu on löydettävissä sivustolta vähintään kahdella eri tavalla. Esimerkiksi navigaatiolinkit; lista aiheeseen liittyville sivuille; sisällysluettelo; sivukartta; sivuston kattavan haun avulla.

2.4.6 Otsikot ja nimilaput (Taso AA)

  • Sivun otsikot ja lomakkeiden nimilaput (label) ovat kuvaavia.
  • Vältä samannimisten otsikoiden ja nimilappujen käyttöä, paitsi silloin, jos ne ovat erotettavissa toisistaan asiayhteyden tai sivurakenteen perusteella. 

2.4.7 Näkyvä fokus (Taso AA)

  • Näppäimistökohdistin on koko ajan näkyvissä siten, että on helppo havaita, mikä elementti on kohdistettuna.

2.4.8 Sijainti (Taso AAA)

  • Sivun sijainti sivustolla on ilmaistu esimerkiksi niin sanotun murupolun avulla tai korostamalla aktiivisen osion ja sivun linkkejä navigaatiovalikossa.

2.4.9 Linkin tarkoitus (vain linkeille) (Taso AAA)

  • Jokaisen linkin tarkoitus on kuvattu linkkitekstissä.
  • Sivunäkymässä ei ole samannimisiä linkkejä, jotka vievät eri paikkoihin.

2.4.10 Osioiden otsikot (Taso AAA)

  • Sivunäkymän eri osille on annettu kuvaavat otsikot, jotta sisällön lukeminen ja osioiden välillä liikkuminen on helpompaa.

Ohje 2.5 - Syötetavat


2.5.1 Osoitineleet (Taso A)

  • Toiminnot, joiden suorittaminen vaatii monipiste-eleen (esimerkiksi kahden sormen nipistys) tai reittiin perustuvan eleen (esimerkiksi raahaus ja pyyhkäisy) käyttöä, tulee olla vaihtoehtoinen tapa. Kaikkia toimintoja pitää voida käyttää painamalla yhtä kohtaa ruudulla, ilman liikettä.

2.5.2 Osoittimen peruutus (Taso A)

  • Tahattoman aktivoinnin välttämiseksi mikään käyttöliittymäelementti ei saisi aktivoitua, kun hiiren nappula painetaan alas tai sormi asetetaan kosketusnäytölle. (Aktivoinnin tulisi tapahtua vasta, kun hiiren nappula tai sormi nostetaan ylös.)
  • Jos tämä on kuitenkin toiminnan kannalta välttämätöntä, täytyy tarjota keino tehdyn toiminnon peruuttamiseksi.

2.5.3 Nimilappu nimessä (Taso A)

  • Tekstiä sisältävien käyttöliittymäkomponenttien (esimerkiksi linkit ja painikkeet) saavutettavan nimen (esimerkiksi label, alt-teksti tai aria-label) pitää sisältää komponentissa näkyvä teksti.

2.5.4 Liikeohjaus (Taso A)

  • Toiminnot, joita käytetään liikuttamalla laitetta (esimerkiksi ravistamalla, heiluttamalla, kiertämällä tai kääntämällä), tai jotka vaativat käyttäjän liikkumista (esimerkiksi vilkuttaminen kameralle), voidaan ottaa pois käytöstä. Tällaisten toimintojen suorittamiseen on oltava jokin vaihtoehtoinen tapa, jotka toimivat perinteisten ohjaustapojen kautta (esimerkiksi painikkeet).

2.5.5 Kohteen koko (Taso AAA)

  • Hiirellä klikattavien ja sormella painettavien alueiden koko on vähintään 44 x 44 CSS-pikseliä.
  • Poikkeukset:
    • Kohde on saatavilla jonkin toisen, vähintään 44 x 44 CSS-pikselin kokoisen linkin tai komponentin kautta.
    • Kohde on virkkeen tai tekstilohkon sisällä.
    • Kohteen koko määräytyy käyttäjäagentin (esimerkiksi verkkoselain) perusteella eikä sisällöntuottaja ole tehnyt siihen muutoksia – esimerkiksi valintaruudut (checkbox).

2.5.6 Rinnakkaiset syötemekanismit (Taso AAA)

  • Verkkosisältö ei rajoita eri syötetapojen käyttämistä. Sivuston pitää olla käytettävissä muutakin kuin vain esimerkiksi pelkästään kosketuksella tai pelkästään näppäimistöltä.
  • Poikkeukset: rajoitus on käytön kannalta olennaista, pakollista sisällön turvallisuuden vuoksi tai vaaditaan käyttäjän asetusten noudattamiseksi.

3. Ymmärrettävä

Ohje 3.1 – Luettava

Tee tekstisisällöstä luettavaa ja ymmärrettävää.


3.1.1 Sivun kieli (Taso A)

  • Sivuston kieli on määritelty ohjelmallisesti käyttäen HTML lang-attribuuttia (esimerkiksi <html lang=“fi-FI”>).

3.1.2 Osien kieli (Taso A)

  • Mikäli sivulla on eri kielillä kirjoitettua tekstiä, näiden eri kielillä kirjoitettujen osuuksien kieli on määritelty erikseen käyttäen lang-attribuuttia (esimerkiksi <blockquote lang=“en-US”>

3.1.3 Epätavalliset sanat (Taso AAA)

  • Sanoihin, jotka saattavat olla tulkinnanvaraisia, monimerkityksellisiä, vieraita tai joita käytetään poikkeuksellisella tavalla, on olemassa määrittely ja selitys.

3.1.4 Lyhenteet (Taso AAA)

  • Vieraiden lyhenteiden merkitys on kerrottu vähintään jollain seuraavista tavoista:
    • Lyhenteen alkuperäinen muoto on avattu silloin, kun sitä käytään ensimmäisen kerran.
    • Lyhenteen yhteydessä käytetään HTML:ssä <abbr> elementtiä.
    • Lyhenteen kohdalla on linkki sanastoon, jossa lyhenteen merkitys käy ilmi.

3.1.5 Lukemisen taso (Taso AAA)

  • Kun teksti edellyttää peruskoulun (tai vastaava noin 9 vuotta kestänyt koulu) vaatimukset ylittävää lukutaitoa, tarjolla on täydentävää sisältöä tai versio, joka ei vaadi peruskoulun tasoa edistyneempää lukutaitoa.

3.1.6 Ääntäminen (Taso AAA)

  • Jos sanan ääntäminen on olennaista sisällön ymmärtämisen kannalta, kyseisen sanan ääntäminen on kerrottu sanan yhteydessä tai tarjolla on linkki, josta löytyy ääntämismuoto.

Ohje 3.2 - Ennakoitava

Tee verkkosivuista sellaisia, että niiden ilmiasu ja toiminta ovat ennakoitavissa.


3.2.1 Fokusointi (Taso A)

  • Kun verkkosivun jokin elementti vastaanottaa fokuksen, sen seurauksena
    • sivu ei merkittävästi muutu
    • pop­up-­ikkuna ei avaudu
    • näppäimistön fokus ei siirry loogisesta paikastaan
    • ei tapahdu mitään muuta muutosta, joka voisi hämmentää tai disorientoida käyttäjää.

3.2.2 Syöte (Taso A)

  • Kun käyttäjä syöttää tietoa tai muuttaa jonkin verkkosivun elementin asetusta tai arvoa, tämän seurauksena
    • sivu ei merkittävästi muutu
    • pop­up-­ikkuna ei avaudu
    • näppäimistön fokus ei siirry loogisesta paikastaan
    • ei tapahdu mitään muuta muutosta, joka voisi hämmentää tai disorientoida käyttäjää, ellei tästä ole kerrottu käyttäjälle etukäteen.

3.2.3 Johdonmukainen navigointi (Taso AA)

  • Sivustolla olevien navigaatiolinkkien järjestys pysyy samana eri sivunäkymien välillä.

3.2.4 Johdonmukainen tunnistaminen (Taso AA)

  • Saman toiminnon toteuttavat elementit esitetään verkkopalvelun eri sivuilla yhdenmukaisesti. Esimerkiksi: 
    • Samoihin toimintoihin liittyviä graafisia symboleja (esim. tulostimen symboli, eri dokumenttityyppien tunnistesymbolit) käytetään yhdenmukaisesti.
    • Elementit on nimetty yhdenmukaisesti (esim. hakutoiminnossa "Hae" tai "Etsi", ei samassa verkkopalvelussa molempia).

3.2.5 Muutos pyydettäessä (Taso AAA)

  • Kontekstin muutokset käynnistyvät ainoastaan käyttäjän pyynnöstä tai tarjolla on mekanismi tämän tyyppisten muutoksien poiskytkemiseksi.

Ohje 3.3 – Syötteen avustaminen

Auta käyttäjiä välttämään ja korjaamaan virheitä.


3.3.1 Virheen tunnistaminen (Taso A)

  • Lomakkeiden syötevirheiden kuvaus esitetään intuitiivisella ja saavutettavalla tavalla.
  • Virheellisesti täytetyt lomakekentät ovat tunnistettavissa.

3.3.2 Nimilaput tai ohjeet (Taso A)

  • Lomakkeiden täyttämistä varten ja toiminnallisten elementtien käyttämiseen on annettu kuvaavat nimilaput (label), vihjeitä ja riittävät ohjeet.

3.3.3 Virheen korjausehdotus (Taso AA)

  • Lomakkeissa havaittujen syötevirheiden korjausehdotukset esitetään käyttäjälle (mikäli ne tunnetaan). Tämä kriteeri laajentaa kriteeriä 3.3.1 esimerkiksi seuraavasti:
    • ehdottamalla vaihtoehtoja korjattavaan kenttään
    • tarjoamalla listauksen kaikista hyväksyttävistä vaihtoehdoista.

3.3.4 Virheiden ennaltaehkäisy (lakiin perustuva, taloudellinen, data) (Taso AA)

  • Jos verkkosivulla voi muokata tai poistaa lakiin perustuvaa tietoa, talouteen liittyvää tietoa tai lähettää testivastauksia, ainakin yksi seuraavista pätee:
    • käyttäjä voi peruuttaa lähetyksen
    • käyttäjän syöttämä data tarkastetaan syötevirheiden varalta ja käyttäjälle annetaan mahdollisuus virheiden korjaamiseen
    • käyttäjälle annetaan mahdollisuus tarkistaa, vahvistaa ja korjata lähetettävä informaatio.

3.3.5 Ohjeet (Taso AAA)

  • Saatavilla on kontekstisensitiivisiä ohjeita.

3.3.6. Virheiden ennaltaehkäisy (kaikki) (Taso AAA)

  • Jos käyttäjä voi lähettää informaatiota, ainakin yksi seuraavista pätee:
    • käyttäjä voi peruuttaa lähetyksen
    • käyttäjän syöttämä data tarkastetaan syötevirheiden varalta ja käyttäjälle annetaan mahdollisuus virheiden korjaamiseen
    • käyttäjälle annetaan mahdollisuus tarkistaa, vahvistaa ja korjata lähetettävä informaatio.

4. Lujatekoinen / Toimintavarma

Ohje 4.1 – Yhteensopiva

Maksimoi yhteensopivuus nykyisten ja tulevien asiakasohjelmien kanssa, mukaan lukien avustavat teknologiat.


4.1.1 Jäsentäminen (Taso A)

  • HTML/XHTML ei sisällä merkittäviä virheitä – http://validator.w3.org/
  • Verkkopalvelun sisältämä HTML­ sellaista, että käytettävät päätelaitteet, selaimet ja avustavat teknologiat pystyvät esittämään (jäsentämään) sen oikein.

4.1.2 Nimi, rooli, arvo

  • Käyttöliittymäkomponentit toteutettu niin, että niitä voidaan käyttää ohjelmallisesti. Kriteeri täyttyy automaattisesti jos käytetään HTML/XHTML-­määrityksen mukaista koodia. Varmistetaan, että eri käyttöliittymäkomponentit antavat riittävästi tietoa itsestään avustaville teknologioille ja että niitä voidaan käyttää eri ohjainlaitteilla.
  • Käyttöliittymäkomponenttien nimi ja rooli voidaan selvittää ohjelmallisesti.
  • Käyttäjän asettamat tilat, ominaisuudet ja arvot voidaan asettaa ohjelmallisesti.

4.1.3 Tilasta kertovat viestit

  • Jos käyttäjälle esitetään tärkeä ilmoitusviesti eikä fokus siirry automaattisesti kyseisen viestin kohdalle, viesti tulee toteuttaa siten, että se luetaan ääneen ruudunlukuohjelmalla.
  • Tähän käytetään tyypillisesti ARIA-roolia alert- tai aria-live-attribuuttia.