WCAG AA-tason vaatimukset julkaisulle

Havaittavuus

Sisältö kaikkien nähtävissä tai kuultavissa

Kuvat ja muu ei-tekstimuotoinen sisältö

Kaikille kuville ja ei-tekstimuodossa esitetylle sisällölle on vastaava sisältö luettavissa tekstinä. Tämä voi olla sisältötekstissä tai esimerkiksi kuvien alt-attribuuttina kerrottu.

Audio ja Video (ennalta nauhoitettu)

Ennalta nauhoitettujen videoiden ja äänitteiden sisältö (ei livelähetykset) on saatavilla äänen lisäksi myös luettavassa muodossa.

Videoiden tekstitys (ennalta nauhoitettu)

Ennalta nauhoitetuille videoille on lisätty ääniraidan lisäksi tekstitys kuulovammaisia varten.

Ääniraidan tekstiversio tai vaihtoehtoinen esitystapa (ennalta nauhoitettu).

Videoiden, joissa ääni on osa informaatiota, sisältö esitetään lisäksi vaihtoehtoisella tavalla, esimerkiksi luettavana tekstinä.

Sisällön rakenne ja esitystapa

Sivujen sisältö on toteutettu HTML-elementein käyttäjän kannalta loogisesti ja selkeästi.

Sisällön järjestys

Sisällön järjestys on looginen ja mielekäs asian ymmärtämisen kannalta.

Aistinvarainen sisällön hahmottaminen

Kaikki käyttöliittymän kohteet; painikkeet, listat, linkit ja käyttäjälle aktiiviset elementit toteutetaan visuaalisesti siten, että ne ovat helposti havaittavissa ja ymmärrettävissä.

Värien käyttö

Sisällön merkitys ei saa perustua yksinomaan värien käyttöön. Pelkällä värillä ei saa antaa merkitystä valinnoille, kohteille tai esimerkiksi virheille.

Äänitiedostojen automaattinen toisto

Älä aseta äänitiedostoja toistumaan automaattisesti sivun latautuessa. Yli 3 sekunnin kestoisten äänien toistamiselle on asetettava näkyvät kontrollit, joilla käyttäjä voi pysäyttää tai keskeyttää äänen toistamisen sekä säätää äänen voimakkuutta.

Suorien lähetysten tekstitys (livelähetys)

Suorana lähetettäville äänisisällöille on tarjolla tekstitys synkronoituna vaihtoehtoisena mediana esimerkiksi samanaikaisesti äänen kanssa näytettävänä tekstinä.

Äänisisällön kuvaus (esinauhoitettu)

Ääniraidan sisältö on myös luettavissa sivuilta.

Tekstin ja taustan välinen kontrasti (minimi)

Tekstin ja taustan värien kontrastisuhde on vähintään 4,5:1 . Eri kokoisille teksteille on asetettu erilaiset kontrastivaatimukset. Tarkista kontrasti soveltuvalla kontrastintarkistustyökalulla tai verkkopalvelulla (esimerkiksi https://webaim.org/resources/contrastchecker/).

Tekstin ja sisällön skaalaus

Sisältöä voitava skaalata vähintään 200% ilman, että sivun rakenne tai toiminnallisuus rikkoutuu.

Älä esitä sivuilla tekstiä kuvatiedostoina

Älä käytä kuvia näyttämään tekstiä tai tekstin korvikkeena.

Hallittavuus

Sisältö ja toiminnallisuus helposti käytettävissä kaikilla tekniikoilla

Sivun käyttö näppäimistöllä

Sisällön tulee olla saavutettavissa pelkkää näppäimistöä käyttäen. Minkään sisältöelementin saavuttaminen ei saa edellyttää hiirtä tai muuta osoitinlaitetta.

Vältä näppäimistöloukkuja

Näppäimistöllä saavutettavasta sisällöstä on voitava myös poistua näppäimistöä käyttäen. Näppäimistöloukku on sivuun upotettu sisältö, josta ei enää pääse takaisin sivun päätasolle näppäimistöä käyttäen.

Aikarajoitettujen toimintojen joustavuus

Aikarajoitetuissa toiminnoissa käyttäjällä tulee olla vähintään yksi seuraavista vaihtoehdoista: kellon (laskurin) pysäyttäminen, aikarajoituksen pituuden säätäminen, jatkoajan pyytäminen ajan päättyessä. Poikkeuksena tietyt reaaliaikaiset tapahtumat ja yli 20 tunnin mittainen aikaraja.

”Pause”, pysäytä, piilota liikkuva tai päivittyvä sisältö

Sisällön, joka liikkuu, välkkyy, vierittyy tai päivittyy itsestään, tulee olla käyttäjän kontrolloitavissa. Käyttäjän on voitava pysäyttää, laittaa tauolle tai piilottaa tällainen sisältö.

Ei vilkkuvaa sisältöä

Mikään sisältö ei vilku/välähdä kuin enintään kolme kertaa sekunnissa.

Hyppylinkit sivun alkuun

Lisää sivuille hyppylinkit suoraan navigaatioon ja sisältöön. Mahdollista käyttäjälle siirtyminen suoraan käyttäjän tarvitsemaan sisältöön ohittaen sivuilla toistuvat elementit.

Sivujen otsikointi

Sivulla oltava kuvaava otsikko (title). Otsikon tulee kuvata sivun sisältöä tai tarkoitusta.

Elementtien siirtymäjärjestys (focus)

Siirtyminen elementtien välillä tapahtuu loogisessa järjestyksessä käytettäessä näppäimistöä. Elementtien järjestyksen tulee olla mielekäs sivun sisällön tai toiminnallisuuden kannalta.

Sivun sisältäminen linkkien merkityksen osoittaminen

Jokaisen sivun sisällössä olevan, linkin tarkoitus on käytävä selville linkin itsensä tekstistä ja otsikoinnista.

Toteuta vaihtoehtoisia tapoja löytää sisältö sivustolta

Tarjoa useita vaihtoehtoisia tapoja löytää sisältö sivustolta; navigaatio, sivustokartta, haku tms.

Väliotsikot ja lomakeotsikot sisältöä ja tarkoitusta kuvaavia

Käytä selkeitä ja kuvaavia otsikkotekstejä kuvaamaan aiheen sisältöä sekä lomakkeilla syötekenttiä.

Osoita aktiivinen elementti korostamalla se visuaalisesti (focus)

Varmista, että näppäimistöllä aktivoitu elementti on selkeästi havaittavissa ja erotettavissa sivun muista elementeistä. CSS-tyylien focus-määreellä tulee osoittaa aktiivinen elementti.

Ymmärrettävyys

Sisällön ja toiminnallisuuden tulee olla ymmärrettävää

Sivun sisällön kielen osoittaminen

Sivuille on asetettu HTML-juurielementtiin lang-attribuutti osoittamaan sivun sisällön kieli.

Lomakekentän valinta

Elementti ei muuta sivun sisältöä tullessaan aktiiviseksi.

Lomakekenttien sisältö, sisällön muutos

Sivun sisältö ei saa muuttua lomakekentän sisällön muuttuessa ellei käyttäjälle ole kerrottu niin tapahtuvan.

Virheiden ilmaiseminen

Kun automaattisessa syötteen tarkistuksessa havaitaan virhe, tulee virheen sisältävä syötekenttä osoittaa selkeästi ja kuvata virhe käyttäjälle ymmärrettävällä tavalla.

Käyttäjältä tietoa pyytävissä sivuissa otsikointi ja käyttäjän ohjeistaminen

Sivuilla ja sivun osissa, joissa käyttäjältä edellytetään syötettä, otsikoidaan kentät selkeästi ja ohjeistetaan käyttäjää oikean tiedon antamisessa.

Sivun osien kieli on ilmoitettava jos se poikkeaa sivun oletuskielestä

Kerro käyttäjälle, mikäli sivun osan kieli vaihtuu.

Yhdenmukainen navigaatio

Toteuta navigaatio samanlaisena ja samassa paikassa kaikilla sivuilla.

Elementtien ja käyttöliittymäkomponenttien yhdenmukainen ulkoasu

Muotoile käyttöliittymän elementit, käyttäjän aktivoitavat toiminnot kuten linkit ja muut elementit yhdenmukaisella tavalla koko sivustolla. Käytä avustavia symboleja ym. aina samassa merkityksessä.

Virheiden korjausohjeet

Mikäli käyttäjä täyttää lomakekentän väärin, esitä siitä selkeä virheilmoitus ja ehdota oikeaa tapaa korjata tieto. Käytä esimerkkejä.

Virheiden estäminen (oikeudelliset, taloudelliset, muu)

Minimoi kaikkien (erityisesti arkaluonteisten) tietojen antamisessa mahdolliset virheet. Anna käyttäjälle mahdollisuus tarkistaa antamiensa tietojen oikeellisuus sekä tarvittaessa korjata ne.

Toimintavarmuus

Sivuston tulee toimia eri päätelaitteilla ja avustavilla tekniikoilla

Sivujen rakenne ja sisällön muodostuminen selaimessa (parse)

Käytä virheetöntä HTML-koodia. Sivujen HTML-elementtirakenteen ja käytettyjen attribuuttien tulee noudattaa niitä määrittävien spesifikaatioiden määrittämää käyttötapaa.

Name, role ja value -attribuuttien oikea käyttö

Lisää käyttöliittymäelementeille (esimerkiksi lomakkeiden kentät sekä linkit) ohjelmallisesti luettavat attribuutit selaimia ja ruudunlukijoita varten. Noudata näiden attribuuttien käytössä soveltuvia ohjeistoja.