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. Havaittava


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 ja 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 Kuvailutulkkaus 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 Kuvailutulkkaus (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 Pidennetty kuvailutulkkaus (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ä) (Taso AAA)

  • 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 (parannettu) (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 sisällön 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ö osoittaessa tai kohdistaessa (Taso AA)

  • Jos hiiren osoittimen vieminen elementin päälle tai näppäimistön kohdistuksen 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 kohdistusta, 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ökohdistus 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 kohdistus 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 Yhden merkin pikanäppäimet (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 kohdistaessa: Tietylle käyttöliittymäkomponentille tarkoitettu näppäinoikotie on käytössä vain, kun kohdustus on kyseisessä komponentissa.

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 Tauota, 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 Aikaratkaisut (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 Kohdistusjä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ä kohdistus (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 linkistä) (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

Tee toimintojen käyttämisestä käyttäjille helpompaa erilaisilla syötetavoilla näppäimistön lisäksi.


2.5.1 Osoitineleet (Taso A)

  • Toiminnoille, joiden suorittaminen vaatii monipiste-eleen (esimerkiksi kahden sormen nipistys) tai reittiin perustuvan eleen (esimerkiksi raahaus ja pyyhkäisy) käyttöä, tulee tarjota vaihtoehtoinen tapa suorittaa sama toiminto. Kaikkia toimintoja pitää voida käyttää painamalla yhtä kohtaa ruudulla, ilman liikettä.
  • Poikkeus: monipite- tai reittiin perustuvan eleen käyttäminen on kyseisen toiminnon suorittamisen kannalta olennaista.

2.5.2 Osoitinlaitteella tehdyn valinnan peruuttaminen (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.
  • Jos esimerkiksi painikkeena toimivassa kuvassa lukee visuaalisesti teksti "Lähetä", tämä sama "Lähetä" teksti tulee olla osana kyseisen käyttöliittymäkomponentin saavutettavaa nimeä.
  • Tällä varmistetaan, että kyseistä toimintoa on mahdollista käyttää myös puheella: sanomalla ääneen kyseisessä toiminnossa näkyvissä oleva teksti.
  • On suositeltavaa sijoittaa visuaalisesti näkyvä teksti saavutettavan nimen alkuun.

2.5.4 Käyttö liikkeen avulla (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ä, jotta vältetään toiminnon aktivoituminen vahingossa. Tällaisten toimintojen suorittamiseen on oltava jokin vaihtoehtoinen tapa, jotka toimivat perinteisten ohjaustapojen kautta (esimerkiksi painikkeet).
  • Poikkeus: liikeohjaus on toiminnon suorittamisen kannalta olennainen.

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: jokin tietty syötetapa on käytön kannalta joko olennaista, pakollista sisällön turvallisuuden vuoksi ja/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 Tekstin vaikeustaso (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ämys (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 tieto, miten kyseinen sana äännetään.

Ohje 3.2 - Ennakoitava

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


3.2.1 Kohdistaminen (Taso A)

  • Kun verkkosivun jokin elementti vastaanottaa kohdistuksen, sen seurauksena
    • sivu ei merkittävästi muutu
    • pop­up-­ikkuna ei avaudu
    • näppäimistön kohdistus 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 kohdistus 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 merkitseminen (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 (oikeudellinen, taloudellinen, data) (Taso AA)

  • Jos verkkosivulla voi muokata tai poistaa lakiin perustuvaa tietoa, talouteen liittyvää tietoa tai lähettää koevastauksia, 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 (Taso A)

  • 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 (Taso AA)

  • Jos käyttäjälle esitetään tärkeä ilmoitusviesti eikä kohdistus 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.