WCAG 2.0-ohjeet

Verkkosisällön saavutettavuusohjeet 2.0 (Web Content Accessibility Guidelines 2.0 – WCAG 2.0) on World Wide Web Consortiumin (W3C) laatima ohjeistus. W3C on kansainvälinen yhteisö, joka antaa suosituksia verkkosivujen sisällön esittämisestä.

1. Periaate: Havaittava

Kuvaus

Informaatio ja käyttöliittymäkomponentit pitää esittää tavoilla, jotka käyttäjä voi havaita.

Lue lisää W3:n sivuilta.

1.1 Ohje: Tekstivastineet

Kuvaus

Tarjoa tekstivastineet kaikelle ei-tekstuaaliselle sisällölle siten, että sisältö voidaan muuttaa muihin tarvittaviin muotoihin, kuten isokokoiseksi tekstiksi, pistekirjoitukseksi, puheeksi, symboliksi tai yksinkertaisemmaksi kieleksi.

Lue lisää W3:n sivuilta.

1.1.1 Ei-tekstimuotoinen sisältö

Kriteeri

Tarjoa tekstivastineet kaikelle ei-tekstimuotoiselle sisällölle siten, että sisältö voidaan muuttaa muihin tarvittaviin muotoihin, kuten isokokoiseksi tekstiksi, pistekirjoitukseksi, puheeksi, symboliksi tai yksinkertaisemmaksi kieleksi.

Lue lisää W3:n sivuilta.

Kuvaus

Onko käyttäjän kannalta olennaista informaatiota sisältäville kuville annettu kuvaava ja riittävän informaation sisältävä tekstivastine? Yleensä tekstivastine annetaan kuvalle alt­attribuutin avulla. Tekstivastineen informaatiosisällön riittävyyden arvioiminen saattaa joskin tuntua ongelmalliselta.

Linkitetyillä kuvilla ja lomakkeiden kuvapainikkeilla on kuvaava tekstivastine tai ­arvo. Mikäli kuva on linkin sisällä, on kuvan alt­attribuutin kuvattava linkin kohdetta. Kaikilla kontrollielementeillä (esim. lomakkeiden painikkeilla) on oltava kuvaava tekstivastine. 

Onko käyttäjän kannalta epäolennaisille kuville annettu määre alt="" tai toteutettu ne CSS-­taustakuvana? Tyhjä alt­määre on annettava esimerkiksi mikäli:

  • kuvalla ei ole käyttäjän kannalta järkevää sisältöä
  • kuva on pelkkä koriste
  • kuvan sisältö on kerrottu tekstimuodossa muualla

Huomioitavaa: Kuvissa on aina oltava alt­-määre, joko tyhjänä tai tekstisisällön omaavana.

Onko CAPTCHA tai muuta vastaavat ratkaisut toteutettu saavutettavasti? Käyttäjille on tarjolla audiovastine ja/tai toiminto on muuten toteutettu niin, että se on eri käyttäjäryhmien saavutettavissa. CAPTCHA tarkoittaa kuvaa tai muuta elementtiä, jonka avulla testataan onko käyttäjä ihminen.

Onko lomakkeiden kentillä kuvaavat nimilaput (label)? Jos label­-elementtiä ei voida käyttää, käytetään title-­attribuuttia.

Onko kaikelle muulle ei­tekstimuotoiselle sisällölle annettu tekstivastine? Esimerkiksi:

  • Aikasidonnaiselle medialle on annettu vähintään kuvaileva tunnistetieto eli selite (lisävaatimukset kriteerissä 1.2).
  • Testeille tai harjoituksille on annettu vähintään kuvaileva tunnistetieto, mikäli näiden esittäminen tekstinä vääristää sisällön merkityksen.
  • Jos ei-­tekstimuotoinen sisältö on ensisijaisesti tarkoitettu aikaansaamaan tietty aistinvarainen kokemus, niin tekstivastineet tarjoavat vähintään kuvailevan tunnistetiedon ei­tekstimuotoisesta sisällöstä.

Miten tarkistetaan

Tarkista HTML-­koodista kuvan tekstivastine. Mikäli luet tekstivastineen henkilölle, joka ei pysty näkemään kuvaa, tulee kuvan sisältö ja tarkoitus hänelle ymmärretyksi.

Tarkista linkitettyjen kuvien tekstivastine tai ­arvo sivun HTML-­koodista. Tekstivastine tai ­arvo tulee kuvata linkin kohdetta.

Tarkista sivun HTML-­koodista onko käyttäjän kannalta epäolennaisilla kuvilla alt­attribuutin arvo tyhjä, tai onko ne toteutettu CSS-taustakuvana.

Yleensä testinä on kuvana esitetty teksti, joka käyttäjän on toistettava tekstikenttään. Yleensä CAPTCHA tai muu vastaava ratkaisu löytyy lomakkeiden yhteydestä.

Tarkista sivun HTML­-koodista onko input­-elementeillä kuvaavat labelit. Tarkista myös, että labelit toimivat oikein (labelin for­-attribuutin arvo on yhdistetty input­-elementin id-­attribuuttiin). Lomakkeiden kentät tulisi testata myös ruudunlukuohjelmalla (lukeeko kenttien nimet oikein). Esimerkiksi: oikeanlainen toteutustapa:
<label for="nimi">Nimi:</label> <input type="text" name="nimi" id="nimi">
vääränlainen toteutustapa: 
<label for="kentta">Nimi:</label> <input type="text" name="nimi" id="nimi">

1.2 Ohje: Aikasidonnainen media

Kuvaus

Tarjoa vastine aikasidonnaiselle medialle.

Lue lisää W3:n sivuilta.

1.2.1 Pelkkä audio tai pelkkä video (tallennettu)

Kriteeri

Seuraava pätee tallennetulle pelkälle audiomedialle ja tallennetulle pelkälle videomedialle, paitsi kun audio tai video on tekstin mediavastine ja selvästi merkitty sellaiseksi:

  • Pelkkä tallennettu audio: Tarjolla on aikasidonnaiselle medialle vastine, joka esittää vastaavan sisällön kuin tallennettu pelkkä audiosisältö.

  • Pelkkä tallennettu video: Tarjolla on joko vastine aikasidonnaiselle medialle tai audiotiedosto, joka esittää vastaavan informaation kuin tallennettu pelkkä videosisältö.

Lue lisää W3:n sivuilta.

Kuvaus

Onko audiomuotoiselle sisällölle (podcastit, mp3-­tiedostot ym.) olemassa vastaavan informaation sisältävä tekstimuotoinen vastine? Ei koske suoria (live) lähetyksiä.

Onko videoille olemassa vastaavan informaation sisältävä tekstimuotoinen vastine tai audiotiedosto?

  • Ei koske suoria (live) lähetyksiä.
  • Tekstitystä ei tarvitse toteuttaa, mikäli videon sisältämä informaatio on jo esitettynä verkkosivuilla. Esimerkiksi mikäli itse video on tuotettu selkeyttämään jotakin teksti-­informaatiota.

Miten tarkistetaan

Tarkista onko audiomuotoiselle sisällölle olemassa vastaavan informaation sisältävä tekstimuotoinen vastine. Yleensä tekstivastine esitetään audiomuotoisen sisällön välittömässä yhteydessä.

Tarkista onko videoille olemassa vastaavan informaation sisältävä tekstimuotoinen vastine tai audiotiedosto. Huom. vaikkakin videossa olisi tekstitykset, ei tämä kriteeri täyty.

1.2.2 Tekstitys (tallennettu)

Kriteeri

Kaikelle synkronoidussa mediassa olevalle tallennetulle audiosisällölle on tarjolla tekstityksiä, paitsi kun media on tekstin mediavastine ja selvästi merkitty sellaiseksi.

Lue lisää W3:n sivuilta.

Kuvaus

Onko tekstitykset tarjottu kaikelle nauhoitetulle audiosisällölle synkronoidussa mediassa? Tekstityksien tulee tarjota audioraidan sisältö tekstimuodossa, sisältäen informaatiota, joka ei välttämättä liity itse dialogeihin (esimerkiksi "huokaisee", "oven narahdus" tai "salamointia"). Ei koske suoria (live) lähetyksiä. Tekstitystä ei tarvitse toteuttaa, mikäli videon sisältämä informaatio on jo esitettynä verkkosivuilla. Esimerkiksi mikäli itse video on tuotettu selkeyttämään jotakin teksti-informaatiota.

Miten tarkistetaan

Tarkista onko videoilla tekstitykset. Huom. tekstitykset voivat olla oletuksena poissa päältä (esim. jotkin YouTube­-videot).

1.2.3 Ääniselite tai mediavastine (tallennettu)

Kriteeri

Synkronoidulle medialle on tarjolla aikasidonnaisen median vastine tai ääniselite tallennetusta videosisällöstä, paitsi kun media on tekstin mediavastine ja selvästi merkitty sellaiseksi.

Lue lisää W3:n sivuilta.

Kuvaus

Onko verkkosivuilla oleville videoille olemassa kuvaileva tekstivastine tai kuvaileva ääniselite (mikäli videon oma ääniraita ei sisällä riittävää informaatiota kaikesta videon sisällöstä)? Ei koske suoria (live) lähetyksiä. Tässä kriteerissä voidaan valita joko tekstivastine tai kuvaileva ääniselite. Kriteerissä 1.2.5 kuvailevaääniselite on pakollinen, mikäli videon oma ääniraita ei ole riittävä.

Miten tarkistetaan

Yleensä tekstivastine tai ääniselite esitetään videon välittömässä yhteydessä.

1.2.4 Tekstitys (suorissa lähetyksissä)

Kriteeri (taso AA)

Kaikelle synkronoidussa mediassa olevalle suoralle audiosisällölle on tarjolla tekstityksiä.

Lue lisää W3:n sivuilta.

Kuvaus

Onko suoran videosisällön ääniraita tekstitetty. Esimerkiksi:

  • Äänilähetykset
  • Webcastit
  • Videoneuvottelut yms.

Miten tarkistetaan

Tarkista onko suoralle (live) videolle olemassa tahdistettu tekstitys, mikäli videossa on ääntä.

1.2.5 Ääniselite (tallennettu)

Kriteeri (taso AA)

Kaikelle synkronoidussa mediassa olevalle tallennetulle videosisällölle on tarjolla ääniselite

Lue lisää W3:n sivuilta.

Kuvaus

Onko erillinen kuvaileva ääniselite tarjolla kaikelle videosisällölle? Huomioitavaa:

  • Ääniselite on tarpeellinen vain mikäli videon oma ääniraita ei sisällä riittävää informaatiota videon sisällöstä.
  • Ei koske suoria (live) lähetyksiä.
  • Mikäli kriteerissä 1.2.3 on valittu käytettäväksi kuvailevaa ääniselitettä, täyttyy kriteeri 1.2.5 automaattisesti.

Miten tarkistetaan

Tarkista onko videosisällölle olemassa kuvaileva ääniselite (mikäli videon oma ääniraita ei sisällä riittävää informaatiota videon sisällöstä).

1.2.7 Laajennettu ääniselite (tallennettu)

Kriteerin taso: AAA

Kuvaus

Kun tauot etualan äänissä (eli ei-taustaäänissä) ovat riittämättömiä videon tunnelman välittämiseen ääniselitteiden avulla, tarjotaan kaikelle synkronoidussa mediassa olevalle tallennetulle videosisällölle laajennettu ääniselite.

Lue lisää W3:n sivuilta.

1.2.9 Pelkkä audio (suorissa lähetyksissä)

Kriteerin taso: AAA

Kuvaus

Tarjolla on vastine aikasidonnaiselle medialle, joka esittää vastaavan informaation kuin suorana lähetettävä pelkkä audiosisältö.

Lue lisää W3:n sivuilta.

1.3 Ohje: Mukautettava

Kuvaus

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

Lue lisää W3:n sivuilta.

1.3.1 Informaatio ja suhteet

Kriteeri (taso A)

Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä.

Lue lisää W3:n sivuilta.

Kuvaus

Onko verkkosivun rakenne ja elementtien suhteet ilmaistu HTML-­kielen avulla tai vastaava informaatio on annettu tekstimuotoisena? Tämän kriteerin tarkoitus on varmistua siitä, että verkkosivun sisällön eri osien merkitys on ymmärrettävissä eri esitystavoilla. Sivun on esimerkiksi tarjottava sama informaatio ruudunlukuohjelman käyttäjälle kuin visuaalisten selainten käyttäjille. Sivustolla on käytettävä merkityksen ilmaisevaa (semanttista) HTML-­rakennetta ja elementtejä havainnollistamaan sivuston sisältöä avustaville ohjelmistoille (esim. ruudunlukuohjelmat).

On huolehdittava esimerkiksi siitä, että:

  • Lomakkeen nimilaput on yhdistetty syötekenttiin (input).
  • Otsikoita on käytetty oikein (<h1>, <h2>...).
  • Taulukon solut on yhdistetty oikeaan otsakkeeseen (header), taulukko on otsikoitu (caption) ja niissä on käytetty yhteenvetoja (summary).

Miten tarkistetaan

Tarkista onko sivuilla käytetty HTML-­kieltä elementtien merkitsemiseen. Sivu on kätevintä tarkistaa erillisellä työkalulla, esimerkiksi WebAIM:n Wave­-työkalulla. Testaa myös sivua ruudunlukuohjelmalla; tarjoaako sivusto havainnollistavaa tietoa? Kriteerissä tulee myös ottaa huomioon elementit, joissa on ohjelmallisesti toteutettua toiminnallisuutta. Esimerkkejä:

  • Jos span-­elementtiä klikatessa sivu avaa uuden sivun, mutta se on toteutettu normaalin linkityksen sijasta onclick­attribuutilla, kriteeri 1.3.1 ei täyty. Onclick-­attribuutti ja sen arvo ei tarjoa havainnollistavaa tietoa käyttäjälle.
  • Jos otsikoita on käytetty vain niiden visuaalisten efektien takia, esimerkiksi suuremman tekstin takia, kriteeri 1.3.1 ei täyty.

1.3.2 Merkitykseen vaikuttava järjestys

Kriteeri (taso A)

Kun sisällön esitysjärjestys vaikuttaa sisällön merkitykseen, oikea lukemisjärjestys voidaan selvittää ohjelmallisesti.

Lue lisää W3:n sivuilta.

Kuvaus

Onko HTML-­koodin kautta määrittyvä sisällön lukemisjärjestys looginen ja intuitiivinen? Mikäli HTML/DOM-­lähdekoodi on järjestykseltään looginen, täyttyy tämä kriteeri. Ei­-looginen koodi on CSS-­asettelulla mahdollista järjestää visuaalisesti merkitykselliseksi, mutta tällöin esimerkiksi ruudunlukuohjelmien käyttäjille järjestys jää epäloogiseksi. Huomioi myös sivulta ladattavien tiedostojen toiminta. Esimerkiksi PDF-­tiedostojen lukujärjestyksen tulee olla looginen.

Miten tarkistetaan

Poista selaimesta tyylitiedostot käytöstä ja tarkista onko sivun sisältö loogisessa lukujärjestyksessä. Usein navigaatiorakenteiden paikka suhteessa sisältöön saattaa poiketa tyylitiedostojen avulla asetellusta näkymästä, mutta tämä ei välttämättä tee sivun lukujärjestyksestä epäloogista. Mikäli esimerkiksi numeroidut kappaleet tai listat eivät ole loogisessa järjestyksessä, tämä kriteeri ei täyty. Vastaavasti luettelo (numeroimaton lista) voidaan esittää missä järjestyksessä tahansa.

1.3.3 Aistinvaraiset ominaispiirteet

Kriteeri (taso A)

Ohjeet sisällön ymmärtämiseksi ja hallitsemiseksi eivät riipu yksinomaan komponenttien aistinvaraisista ominaispiirteistä kuten muoto, koko, visuaalinen sijainti, suunta tai ääni.

Huomautus: Tutustuaksesi väriin liittyviin vaatimuksiin, katso ohje 1.4.

Lue lisää W3:n sivuilta.

Kuvaus

Onko verkkosivuston käyttämiseen tarkoitetut ohjeet toteutettu niin, että niiden ymmärtäminen ei vaadi kykyä kuulla tai nähdä? Ohje ei voi perustua pelkästään esimerkiksi elementin tai komponentin muotoon, kokoon, visuaaliseen sijaintiin, suuntaan tai ääneen. Esimerkiksi ei seuraavilla tavoilla:

  • "Klikkaa pyöreää kuviota jatkaaksesi"
  • "Ohjeet löytyvät oikeasta palstasta yrityksen logon alapuolelta"
  • "Voit jatkaa kuultuasi äänimerkin"

Miten tarkistetaan

Käy sivuston sisältöä lävitse ja katso löytyykö huonoilla tavoilla kirjoitettuja ohjeita. Yksi hyvä tapa on käyttää verkkosivun hakua kirjoittamalla siihen esimerkiksi “Klikkaa”.

1.3.4 Asento

Kriteeri (taso AA)

Sisältöä ei ole rajoitettu vain tiettyyn laitteen asentoon kuten vaaka- tai pystyasentoon, lukuunottamatta tapausta jossa asento on olennainen.

Kuvaus

Mobiililaitetteilla voi selata verkkoa pitämällä laitetta vaaka- tai pystyasennossa. Verkkosivuston tulee mukautua eri asentoihin niin, että käyttäjää ei pakoteta kääntämään laitettaan tiettyyn suuntaan lukeakseen sisältöä.

Osalla käyttäjistä mobiililaite on kiinnitetty esimerkiksi pyörätuoliin niin, että sen asentoa ei voi vaihtaa. Laitteen kääntäminen eri asentoon voi olla hankalaa myös muiden motoristen tai tilanteeseen liittyvien rajoitteiden vuoksi.

Miten tarkistetaan

Kokeile käyttää sivustoa mobiililaitteella, käännä laite eri asentoihin, ja tarkista, kääntyykö sivuston sisältö laitteen asennon mukaiseksi.

1.3.5 Määrittele syötteen tarkoitus

Kriteeri (taso AA)

Jokaisen syötekentän, jota käytetään tietojen keräämiseen käyttäjästä, tarkoitus voidaan selvittää ohjelmallisesti seuraavissa tapauksissa:

  • Tarkoitus on yksi käyttötarkoituksista, jotka on listattu syötekenttien käyttötarkoitus -osiossa
  • Elementti on toteutettu käyttäen teknologiaa, joka mahdollistaa syöte-elementin tarkoituksen kuvaamisen

Kuvaus

Verkkolomakkeilla kysytään joskus käyttäjän henkilökohtaisia tietoja kuten nimeä, sähköpostiosoitetta tai puhelinnumeroa. Näissä tapauksissa käyttäjää helpottaa, jos lomakekentän tarkoitus on määritelty ohjelmallisesti, jolloin kentän yhteyteen voidaan lisätä esimerkiksi tarkoitusta kuvaava kuvake tai ruudunlukuohjelma voi kertoa kentän tarkoituksen ääneen luettuna. Ominaisuus helpottaa myös lomakekenttien automaattista täyttöä (autofill).

Miten tarkistetaan

Tarkista syötekentän HTML-lähdekoodista onko sen tarkoitus määritetty autocomplete-attribuutin tai jonkun muun soveltuvan tekniikan avulla.

1.3.6 Määrittele tarkoitus

Kriteeri (taso AAA)

Sisällössä, joka on toteutettu käyttäen merkkauskieltä, käyttöliittymäkomponenttien, kuvakkeiden ja alueiden tarkoitus voidaan selvittää ohjelmallisesti.

1.4 Ohje: Erottuva

Kuvaus

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

Lue lisää W3:n sivuilta.

1.4.1 Värien käyttö

Kriteeri (taso A)

Väriä ei käytetä ainoana visuaalisena keinona välittämään informaatiota, esittämään toimintoa, pyytämään vastausta tai korostamaan visuaalista elementtiä. 

Huomautus: Tämä onnistumiskriteeri käsittelee erityisesti värien havaitsemista. Havaitsemisen muut muodot käsitellään ohjeessa 1.3, mukaan lukien ohjelmallinen pääsy värien ja muiden visuaalisten esitystapojen koodaukseen.

Lue lisää W3:n sivuilta.

Kuvaus

Onko käytetty muitakin visuaalisia keinoja kuin väriä välittämään informaatiota verkkosivulla? Tämä kriteeri koskee vain värien käyttöä. Väri ei saa olla ainoa visuaalinen keino, kun:

  • Pyydetään vastausta
  • Osoitetaan toiminnallisuutta tai
  • Korostetaan elementtiä

Miten tarkistetaan

  • Tekstilinkeissä pelkkä väri on riittävä keino, mikäli linkkitekstin kontrastiero suhteessa ympäröivään tekstiin on suurempi kuin 3:1. Mikäli kontrastiero ei ole tarpeeksi suuri, on käytettävä muita visuaalisia keinoja, kun käyttäjä osoittaa linkkiä tai se on aktiivinen.
  • Erityisesti kannattaa kiinnittää huomiota lomakkeiden virheilmoituksiin, koska yleinen käytäntö on toteuttaa niiden virheilmoitukset merkitsemällä lomaketeksti esimerkiksi punaisella värillä. Tämän kriteerin täyttymiseksi virhe on värin lisäksi kerrottava käyttäjälle jollain muullakin tavalla.

1.4.10 Responsiivisuus

Kriteeri (taso AA)

Sisältö voidaan esittää ilman, että sisältöä tai toiminnallisuutta menetetään, ja ilman kahdensuuntaista vierittämistä

  • Pystysuuntaan vieritettävässä sisällössä 320 CSS-pikselin levyisenä
  • Vaakasuuntaan vieritettävässä sisällössä 256 CSS-pikselin korkuisena.

Lukuunottamatta sisällön osia, jotka vaativat kahdensuuntaista esitystapaa käytön tai merkityksen vuoksi.

Kuvaus

Kriteerin tavoitteena on välttää kahteen suuntaan vierittämistä. Verkkosivua tulee pystyä selaamaan 320 pikseliä leveällä näytöllä niin, että sisältöä ei tarvitse vierittää sivuttaissuuntaisesti. Jos sisältöä vieritetään pääasiassa vaakasuuntaisesti, sen tulee toimia 256 pikseliä korkealla näytöllä ilman, että sisältöä tarvitsee vierittää pystysuuntaisesti. Kriteeri hyödyttää mobiililaitten käyttäjiä tai henkilöitä, jotka suurentavat verkkosivun näkymää selaimen asetuksista.

Tämä onnistumiskriteeri ei koske esimerkiksi karttoja tai suuria taulukoita. 

Miten tarkistetaan

Pienennä selainikkunaa 320 CSS-pikselin levyiseksi, jos sivua selataan "normaalisti" pystysuuntaan vierittämällä, tai 256 pikselin korkuiseksi, jos sivua selataan vaakasuuntaan vierittämällä. Tämän jälkeen tarkista, että sivua ei tarvitse vierittää kahteen suuntaan kaiken sisällön ja toiminnallisuuden käyttämiseksi.

1.4.11 Ei-tekstimuotoisen kontrasti

Kriteeri (taso AA)

Seuraavanlaisten elementtien tummuuskontrastisuhde viereiseen väriin/väreihin tulee olla suurempi kuin 3:1:

  • Käyttöliittymäkomponentit: Visuaalinen informaatio, joka vaaditaan käyttöliittymäkomponentin ja sen eri tilojen tunnistamiseen, lukuunottamatta inaktiivisia komponentteja tai jos komponentin ulkoasu on määritelty käyttäjäagentin toimesta ja jota sisällön tuottaja ei ole muokannut
  • Graafiset objektit: Grafiikan osat, joita vaaditaan sisällön ymmärtämiseksi, lukuunottamatta tapauksia joissa ulkoasu on olennainen tietosisällön välittämiseksi

Kuvaus

Käyttöliittymäkomponenttien, esimerkiksi valikkopalkin, tulee erottua taustastaan riittävän hyvin niin, että sen sisältö ja rajat ovat helposti havaittavissa. Myös graafisissa objekteissa kuten kuvakkeissa on oltava riittävä kontrasti.

Tämä kriteeri koskee komponenttien ja taustan, tai kuvakkeen ja sen taustan välistä kontrastia. Kriteerit 1.4.3 ja 1.4.6 koskevat tekstin ja taustan välistä tummuuskontrastia.

Miten tarkistetaan

Tarkista käyttöliittymäkomponenttien kuten painikkeiden, lomakekenttien ja valikoiden tausta- tai reunavärin tummuuskontrastisuhde komponentin viereiseen väriin. Tummuuskontrastisuhteen tulee olla vähintään 3:1.

1.4.12 Tekstin välistys

Kriteeri (taso AA)

Sisällössä, joka on toteutettu käyttäen merkkauskieliä ja joka mahdollistaa seuraavien ominaisuuksien asettamisen, voidaan asettaa seuraavasti menettämättä sisältöä tai toiminnallisuutta:

  • Rivin korkeus (riviväli) vähintään 1,5 kertaa fontin kokoiseksi
  • Kappaleen jälkeinen tyhjä tile vähintään 2 kertaa fontin kokoiseksi
  • Kirjainten väli vähintään 0.12 kertaa fontin kokoiseksi
  • Sanojen väli vähintään 0.16 kertaa fontin kokoiseksi

Poikkeus: Kielissä ja kirjoitustavoissa, joissa ei hyödynnetä yhtä tai useampaa ylläolevista ominaisuuksista, voivat noudattaa kriteeriä vain niiden ominaisuuksien osalta, jotka soveltuvat kielen ja kirjoitustavan yhdistelmään.

Kuvaus

Tekstikappaleiden, rivivälien, sanojen ja kirjainten välistä etäisyyttä tulee voida kasvattaa ylläolevien arvojen mukaisiksi. Varmista, että tekstiä ei mene piiloon tai osittain päällekkäin sivun muiden elementtien kanssa, tai jos komponentteja ei pysty käyttämään tai niiden tekstiä lukemaan tekstin välistyksen muuttuessa.

Miten tarkistetaan

Muuta tekstin välistys minimiarvojen mukaiseksi, ja tarkista, että teksti pysyy luettavana.

1.4.13 Sisältö osoitettaessa tai kohdistettaessa

Kriteeri (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:

  • 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öä
  • 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
  • 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

Poikkeus: uuden sisällön visuaalinen esitystapa määrittyy käyttäjäagentin toimesta, eikä sisällön tuottaja ole sitä muokannut.

Kuvaus

Joillain sivustoilla käytetään valikkoja tai ohjelaatikoita, jotka aukeavat itsestään, kun hiiren osoitin viedään niiden päälle tai näppäimistökohdistin viedään valikkoon. Jos tällaista halutaan käyttää, automaattisesti avattu sisältö täytyisi pystyä piilottamaan liikuttamatta hiiren osoitinta, esimerkiksi esc-näppäimellä. Toisaalta, sisällön täytyy pysyä näkyvissä jos kohdistin siirretään näkyviin tulleen sisällön pääälle ilman, että se katoaa. Sisältöä ei saa piilottaa automaattisesti.

1.4.2 Audion kontrollointi

Kriteeri (taso A)

Jos jokin ääni verkkosivulla soi automaattisesti kauemmin kuin kolme sekuntia, käytettävissä on joko mekanismi äänen keskeyttämiseen tai pysäyttämiseen tai mekanismi äänen voimakkuuden säätämiseen koko järjestelmän äänenvoimakkuuden säädöstä riippumatta.

Huomautus: Koska mikä tahansa sisältö, joka ei täytä tätä onnistumiskriteeriä, voi haitata käyttäjän mahdollisuuksia käyttää koko sivua, täytyy kaiken verkkosivun sisällön (riippumatta siitä käytetäänkö sitä täyttämään muita onnistumiskriteereitä vai ei) täyttää tämä onnistumiskriteeri. Katso ohjeidenmukaisuuden vaatimus 5: Häiriöttömyys.

Lue lisää W3:n sivuilta.

Kuvaus

Onko verkkosivulla mekanismi äänen pysäyttämiseksi, hiljentämiseksi tai sen voimakkuuden säätämiseksi mikäli se käynnistyy automaattisesti ja soi yli 3 sekuntia? Huomioitavaa: Sivun avaamisen yhteydessä ei sivustolla kannata soittaa tai esittää ääntä, vaikka sen pysäyttämiseksi olisikin toteutettu ratkaisu, koska soiva ääni voi häiritä ääniselainta käyttävän henkilön kykyä pysäyttää se.

Miten tarkistetaan

Jos sivustolla soi ääni yli kolme sekuntia, tarkista, että verkkosivulla on mekanismi äänen pysäyttämiseksi, keskeyttämiseksi, hiljentämiseksi tai sen voimakkuuden säätämiseksi.

1.4.3 Kontrasti (minimi)

Kriteeri (taso AA)

Tekstin visuaalisella esityksellä ja tekstiä esittävissä kuvissa kontrastisuhde on vähintään 4,5:1, paitsi seuraavissa tapauksissa:

  • Isokokoinen teksti: Isokokoisella tekstillä ja isokokoista tekstiä esittävissä kuvissa kontrastisuhde on vähintään 3:1;

  • Oheissisältö: Tekstillä tai tekstiä esittävillä kuvilla, jotka eivät kuulu toiminnallisiin käyttöliittymäkomponentteihin, jotka ovat yksinomaan koristeita, jotka eivät ole näkyvissä kenellekään tai jotka ovat osa muuta merkittävää visuaalista sisältöä sisältävää kuvaa, ei ole kontrastivaatimuksia.

  • Logotyypit: Tekstille, joka on osa logoa tai brändin nimeä, ei ole kontrastivaatimusta.

Lue lisää W3:n sivuilta.

Kuvaus

Onko tekstin tai tekstiä esittävän kuvan kontrastisuhde vähintään 4,5:1? Onko ison tekstin (yli 18pt/24px tai 14pt/19px lihavoituna), kontrastisuhde vähintään 3:1? Kontrastivaatimusta ei ole:

  • Logoille tai brändin nimille.
  • Koristekuville tai vastaaville sivuston käytön kannalta epäolennaisille elementeille.

1.4.4 Tekstin koon muuttaminen

Kriteeri (taso AA)

Lukuun ottamatta tekstitystä ja tekstiä esittäviä kuvia tekstin kokoa voidaan muuttaa ilman avustavaa teknologiaa aina 200 prosenttiin asti ilman sisällön tai toiminnallisuuden menettämistä.

Lue lisää W3:n sivuilta.

Kuvaus

Onko verkkosivu on luettava ja voidaanko sitä käyttää ilman ongelmia, jos tekstin kokoa kasvatetaan 200%? Modernit selaimet osaavat suurentaa ongelmitta myös pikselimäärityksillä (px) annettuja kirjainkokoja. Toki tekstikokojen suhteellisessa (em, %) määrittämisessä on selviä etuja sivuston rakenteen hallittavuuden kannalta.

Miten tarkistetaan

Kasvata selaimen suurennusta 200 prosenttiin ja testaa onko verkkosivu käytettävissä ilman ongelmia. Yleisimmät ongelmat on, että elementit menevät toistensa päälle tai elementit eivät kasvata kokoaan.

1.4.5 Tekstiä esittävät kuvat

Kriteeri (taso AA)

Jos käytetty teknologia voi tuottaa visuaalisen esityksen, käytetään informaation välittämiseen ennemmin tekstiä kuin tekstiä esittäviä kuvia, paitsi seuraavissa tapauksissa:

  • Mukautettava: Tekstiä esittävä kuva voidaan visuaalisesti mukauttaa käyttäjän vaatimusten mukaisesti;

  • Olennainen: Tietty tekstin esitystapa on olennainen välitettävälle informaatiolle.

Huomautus: Logotyypit (teksti, joka on osa logoa tai brändin nimeä) tulkitaan olennaisiksi.

Kuvaus

Onko vältetty tekstin tarpeetonta esittämistä kuvamuodossa? Tekstiä voidaan käyttää kuvamuodossa esimerkiksi:

  • Logoissa.
  • Silloin, kun informaatiota ei saada välitettyä oikein tekstimuotoisena.

1.4.6 Kontrasti (lisätty)

Kuvaus (taso AAA)

Tekstin visuaalisella esityksellä ja tekstiä esittävissä kuvissa kontrastisuhde on vähintään 7:1, paitsi seuraavissa tapauksissa:

  • Isokokoinen teksti: Isokokoisella tekstillä ja isokokoista tekstiä esittävissä kuvissa kontrastisuhde on vähintään 4,5:1;

  • Oheissisältö: Tekstillä tai tekstiä esittävillä kuvilla, jotka eivät kuulu toiminnallisiin käyttöliittymäkomponenttihin, jotka ovatyksinomaan koristeita, jotka eivät näy kenellekään tai jotka ovat osa muuta merkitsevää visuaalista sisältöä sisältävää kuvaa, ei ole kontrastivaatimuksia.

  • Logotyypit: Tekstille, joka on osa logoa tai brändin nimeä, ei ole kontrastin minimivaatimusta.

Lue lisää W3:n sivuilta.

1.4.7 Hiljainen taustaääni tai ei taustaääntä

Kriteerin taso: AAA

Kuvaus

Tallennetulle pelkälle audio sisällölle joka (1) sisältää ensisijaisesti puhetta äänimaiseman edustalla, (2) ei ole auditiivinen CAPTCHA tai audiologo ja joka (3) ei ole vokalisaatio, jonka tarkoitus on ensisijaisesti olla musiikillinen ilmaisu, kuten laulu tai rap, ainakin yksi seuraavista pitää paikkansa:

  • Ei taustaa: Audio ei sisällä taustaääniä.

  • Pois päältä: Taustaäänet voidaan kytkeä pois päältä.

  • 20 dB: Taustaäänet ovat vähintään 20 desibeliä hiljaisempia kuin äänimaiseman etualan puhesisältö, poikkeuksena satunnaiset, yksi tai kaksi sekuntia kestävät äänet.

    Huomautus: "Desibelin" määritelmän mukaan taustaääni, joka täyttää tämän vaatimuksen, on noin neljä kertaa hiljaisempi kuin äänimaiseman etualan puhesisältö.

Lue lisää W3:n sivuilta.

1.4.8 Visuaalinen esitystapa

Kriteerin taso: AAA

Kuvaus

Tekstilohkojen visuaaliselle esitystavalle on saatavilla mekanismi seuraaviin käyttötarkoituksiin:

  1. Käyttäjä voi valita edustan ja taustan värit.

  2. Leveys on enintään 80 merkkiä tai kuvaketta (40, jos CJK)

  3. Tekstiä ei ole tasattu (tasattu sekä vasempaan että oikeaan marginaaliin).

  4. Riviväli on vähintään puolitoista riviä kappaleiden sisällä, ja kappaleiden väli on vähintään 1,5 kertaa suurempi kuin riviväli.

  5. Tekstin kokoa voidaan muuttaa ilman avustavaa teknologiaa 200 prosenttiin asti tavalla, joka ei vaadi käyttäjää vierittämään tekstiä vaakasuunnassa rivin lukemiseksi kokonäytön ikkunassa.

Lue lisää W3:n sivuilta.

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

Kriteerin taso: AAA

Kuvaus

Tekstiä esittäviä kuvia käytetään yksinomaan koristeena, tai silloin, kun tietty tekstin esitystapa on olennainen informaation välittymiseksi.

Huomautus: Logotyypit (teksti, joka on osa logoa tai brändin nimeä) tulkitaan olennaisiksi.

Lue lisää W3:n sivuilta.

2. Periaate: Hallittava

Kuvaus

Käyttöliittymäkomponenttien ja navigoinnin pitää olla hallittavia.

Lue lisää W3:n sivuilta.

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

Kuvaus

Toteuta kaikki toiminnallisuus siten, että se on käytettävissä näppäimistöltä.

Lue lisää W3:n sivuilta.

2.1.1 Näppäimistö

Kriteeri (taso A)

Kaikki sisällön toiminnallisuus on hallittavissa näppäimistörajapinnan välityksellä ilman vaatimusta yksittäisten näppäinpainallusten erityisestä ajoittamisesta, paitsi kun alla oleva toiminnallisuus vaatii syötettä, joka riippuu käyttäjän liikkeiden polusta eikä vain päätepisteistä.

Huomautus 1: Tämä poikkeus liittyy sovelluksen toimintoon, ei syötetekniikkaan. Esimerkiksi käytettäessä käsinkirjoitettua tekstiä syötteenä, syötetekniikka (käsiala) vaatii polusta riippuvaa syötettä, kun taas sovelluksen toiminnallisuus (tekstin syöttö) ei sitä vaadi.

Huomautus 2: Tämä ei kiellä, eikä tämän pitäisi lannistaa käyttämästä näppäimistön lisäksi hiireen perustuvaa syötettä tai muita syötemenetelmiä.

Lue lisää W3:n sivuilta.

Kuvaus

Sivun kaikki toiminnot ovat käytettävissä näppäimistön kautta. Huomioitavaa:

  • Näppäimistön käyttäminen ei saa riippua näppäinpainallusten ajoittamisesta.
  • Kriteeri ei koske tekniikoita, joita on mahdotonta suorittaa näppäimistöllä (esimerkiksi vapaalla kädellä piirtäminen).

Tiedoksi:

  • Sivukohtaiset pikatoimintonäppäinyhdistelmät tai accesskey-­ominaisuuden käyttäminen eivät saa häiritä selainten tai ruudunlukuohjelman näppäintoimintojen käyttöä. Accesskey­-ominaisuuden käyttäminen ei yleensä ole tarpeellista tai suositeltavaa.

2.1.2 Ei näppäimistöä -ansa

Kriteeri (taso A)

Jos näppäimistön fokus voidaan siirtää sivun komponentille näppäimistörajapintaa käyttämällä, niin fokus voidaan siirtää myös pois kyseiseltä komponentilta pelkästään näppäimistörajapintaa käyttämällä. Mikäli tämä vaatii enemmän kuin muuttumattomia nuoli- tai tab-näppäimiä tai muita standardinmukaisia poistumismenetelmiä, käyttäjälle neuvotaan menetelmä fokuksen poissiirtämiseksi.

Huomautus: Koska mikä tahansa sisältö, joka ei täytä tätä onnistumiskriteeriä, voi haitata käyttäjän mahdollisuuksia käyttää koko sivua, täytyy kaiken verkkosivun sisällön (riippumatta siitä käytetäänkö sitä täyttämään muita onnistumiskriteereitä vai ei) täyttää tämä onnistumiskriteeri. Katso ohjeidenmukaisuuden vaatimus 5: Häiriöttömyys.

Lue lisää W3:n sivuilta.

Kuvaus

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 pois. Tämä kriteeri ei ota kantaa siihen, onko näppäimistön avulla mahdollista päästä kaikkiin sivun fokusoitaviin elementteihin. Olennaista on vain se, että fokus ei jää jumiin. Huomioitavaa: Mikäli fokus on siirrettävissä elementistä jotenkin muuten kuin yleisimmillä tavoilla (esim. nuoli­- tai tab-­, tai ESC­-näppäimillä), tästä ohjeistetaan käyttäjää.

Miten tarkistetaan

Käy tabulaattori­ ja nuolinäppäimillä verkkosivu läpi. Sinun pitää pystyä liikkumaan sivustolla hankaluuksitta. Erityisen ongelmallisiksi ovat osoittautuneet monet yleisesti käytössä olevat JavaScript-­pohjaiset "slider" tai "scroller"-­sovellukset, joilla esitetään kuvasarjoja sivun jossain elementissä. Mikäli sivustolla käytetään tällaista sovellusta, sen toimivuus näppäimistöllä kannattaa aina tarkistaa.

2.1.3 Näppäimistö (ei poikkeuksia)

Kriteerin taso: AAA

Kuvaus

Kaikki sisällön toiminnallisuus on suoritettavissa näppäimistörajapinnan välityksellä ilman vaatimusta yksittäisten näppäinpainallusten erityisestä ajoittamisesta.

Lue lisää W3:n sivuilta.

2.1.4 Kirjainnäppäinoikotiet

Kriteeri (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

Kuvaus

Yhden näppäimen näppäinoikotiet saattavat osua päällekkäin esimerkiksi ruudunlukuohjelman toimintojen kanssa, joten niitä tulisi välttää. Myös esimerkiksi käsien vapinasta johtuen käyttäjät saattavat vahingossa painaa vääriä näppäimiä.

Miten tarkistetaan

Paina kaikkia näppäimistön kirjain- (mukaanlukien isot kirjaimet), numero-, välimerkki ja symbolinäppäimiä verkkosivun ollessa auki, ja tarkista, ettei mitään tapahdu.

2.2 Ohje: Tarpeeksi aikaa

Kuvaus

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

Lue lisää W3:n sivuilta.

2.2.1 Säädettävä ajoitus

Kriteeri (taso A)

Jokaiselle sisällön asettamalle aikarajalle ainakin yksi seuraavista pitää paikkansa:

  • Kytke pois päältä: Käyttäjän sallitaan kytkeä aikaraja pois päältä ennen sen kohtaamista; tai

  • Säädä: Käyttäjän sallitaan säätää aikarajaa ennen sen kohtaamista laajalla asteikolla, joka on vähintään kymmenen kertaa oletusasetuksen pituus; tai

  • Jatka: Käyttäjää varoitetaan ennen ajan loppumista, annetaan vähintään 20 sekuntia aikaa aikarajan jatkamiseen yksinkertaisen toiminnon avulla (esimerkiksi, "paina välilyöntiä") ja käyttäjän sallitaan jatkaa aikarajaa vähintään kymmenen kertaa; tai

  • Reaaliaikainen poikkeus: Aikaraja on reaaliaikaisen tapahtuman vaadittu osa (esimerkiksi huutokaupan), ja vaihtoehto aikarajalle ei ole mahdollinen; tai

  • Olennainen poikkeus: Aikaraja on olennainen, ja sen laajentaminen kumoaisi toiminnon; tai

  • 20 tunnin poikkeus: Aikaraja on yli 20 tuntia.

Huomautus: Tämä onnistumiskriteeri auttaa varmistamaan, että käyttäjät voivat saattaa tehtävät valmiiksi ilman odottamattomia aikarajasta johtuvia muutoksia sisällössä tai kontekstissa. Tätä onnistumiskriteeriä tulisi tarkastella yhdessä onnistumiskriteerin 3.2.1 kanssa, joka rajoittaa käyttäjän toiminnasta johtuvia sisällön tai kontekstin muutoksia.

Lue lisää W3:n sivuilta.

Kuvaus

Jos sivulla tai sovelluksella on aikaraja, onko käyttäjän mahdollista kytkeä aikaraja pois päältä, säätää sitä tai jatkaa sitä? Tämä vaatimus ei koske:

  • Reaaliaikaista tapahtumaa (esim. huutokauppa).
  • Tilannetta, jossa aikaraja ei ole poistettavissa ilman että tapahtuma olennaisesti muuttuu.
  • Tilannetta, jossa aikaraja on yli 20 tuntia.

Kriteerin täyttävä esimerkki:

  • Web-­sivu käyttää JavaScript-­tekniikalla toteutettua aikarajaa suojaamaan käyttäjiä, jotka mahdollisesti poistuvat tietokoneen luota. Mikäli sivua ei ole käytetty tiettyyn hetkeen, sovellus kysyy tarvitseeko käyttäjä lisää aikaa. Mikäli käyttäjä ei vastaa, istunto lopetetaan.

Miten tarkistetaan

Esimerkki: Sivu ohjautuu viiden sekunnin kuluttua sivun avaamisesta uudelle sivulle. Käyttäjällä ei ole mahdollista vaikuttaa uudelleenohjaukseen eli tämä kriteeri ei täyty.

2.2.2 Keskeytä, pysäytä, piilota

Kriteeri (taso A)

Kaikki seuraavat pitävät paikkansa liikkuvalle, vilkkuvalle, vierivälle tai automaattisesti päivittyvälle informaatiolle:

  • Liikkuva, vilkkuva, vierivä: Kaikelle liikkuvalle, vilkkuvalle tai vierivälle informaatiolle, joka (1) käynnistyy automaattisesti, (2) kestää yli viisi sekuntia ja (3) esitetään rinnakkain muun sisällön kanssa, on olemassa mekanismi, jonka avulla käyttäjä voi keskeyttää, pysäyttää tai piilottaa sen, paitsi silloin kun liikkuminen, vilkkuminen tai vieriminen on olennainen osa toimintoa; ja

  • Automaattisesti päivittyvä: Kaikelle automaattisesti päivittyvälle informaatiolle, joka (1) käynnistyy automaattisesti ja (2) esitetään rinnakkain muun sisällön kanssa, on olemassa mekanismi, jonka avulla käyttäjä voi keskeyttää, pysäyttää tai piilottaa sen tai hallita sen päivitystiheyttä, paitsi silloin kun automaattinen päivittyminen on olennainen osa toimintoa.

Huomautus 1: Tarkista välkkyvään tai välähtelevään sisältöön liittyvät vaatimukset ohjeesta 2.3.

Huomautus 2: Koska mikä tahansa sisältö, joka ei täytä tätä onnistumiskriteeriä, voi haitata käyttäjän mahdollisuuksia käyttää koko sivua, täytyy kaiken verkkosivun sisällön (riippumatta siitä käytetäänkö sitä täyttämään muita onnistumiskriteereitä vai ei) täyttää tämä onnistumiskriteeri. Katso ohjeidenmukaisuuden vaatimus 5: Häiriöttömyys.

Huomautus 3: Sisältöä, jota ohjelmisto ajoittain päivittää tai jota ohjataan asiakassovellukselle, ei vaadita säilyttämään tai esittämään tauon tai jatkamisen välissä luotua tai vastaanotettua informaatiota, koska tämä saattaisi olla teknisesti mahdotonta ja monessa tilanteessa harhaanjohtavaa.

Huomautus 4: Animaatiota, joka esiintyy osana esilatausvaihetta tai vastaavaa, voidaan pitää olennaisena, jos kyseisen vaiheen aikana vuorovaikutusta ei voi tapahtua kenellekään käyttäjistä ja jos toiminnon edistymistä osoittavan animaation poisjättäminen saattaisi hämätä käyttäjiä tai saada heidät ajattelemaan, että sisältö on jämähtänyt tai vioittunut.

Lue lisää W3:n sivuilta.

Kuvaus

Voidaanko automaattisesti käynnistyvä liikkuva, välkkyvä tai vierivä sisältö keskeyttää, pysäyttää tai piilottaa käyttäjän toimesta? Poikkeukset:

  • Kesto on vähemmän kuin 5 sekuntia.
  • Kyseessä oleva tapa osa prosessia, joka on sisällön esittämisen kannalta välttämätön.

Huomioitavaa: Tämä kriteeri koskee tilannetta, jossa sisältö esitetään rinnakkain muun sisällön kanssa.

Miten tarkistetaan

Esimerkit:

  • Sivulla on automaattisesti käynnistyvä animaatio, jonka tarkoitus on esitellä sivuilla myytävän tuotteen toimintaa. Kriteeri 2.2.2 täyttyy, mikäli animaatiosovellukseen on sisällytetty pysäytä-­painike.
  • Sivun avaavien käyttäjien on katsottava 15 sekunnin mittainen mainos ennen muun sisällön lataamista. Koska kaikkien käyttäjien on katsottava mainos ja sitä ei esitetä rinnakkain muun sisällön kanssa, kriteeri 2.2.2 täyttyy

2.2.3 Ei ajoitusta

Kriteerin taso: AAA

Kuvaus

Ajoitus ei ole olennainen osa sisällön esittämää tapahtumaa tai toimintoa, lukuun ottamatta ei-interaktiivista synkronoitua mediaa ja reaaliaikaisia tapahtumia.

Lue lisää W3:n sivuilta.

2.2.4 Keskeytykset

Kriteerin taso: AAA

Kuvaus

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

Lue lisää W3:n sivuilta.

2.2.5 Uudelleen tunnistautuminen

Kriteerin taso: AAA

Kuvaus

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

Lue lisää W3:n sivuilta.

2.2.6 Aikarajat

Kriteeri (taso AAA)

Käyttäjiä 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.

Kuvaus

Käyttäjälle tulee ilmoittaa, mikäli hänen syöttämänsä tiedot voivat kadota, jos sivustoa ei käytä tietyn aikarajan sisällä. Usein sisäänkirjautuminen on voimassa tietyn ajan ja katkeaa automaattisesti, jonka jälkeen tallentamattomat tiedot menetetään. Tämä täytyisi tehdä käyttäjälle selväksi ennen aikarajan umpeutumista.

Tämä kriteeri hyödyttää esimerkiksi henkilöitä, joilla on kognitiivisia tai motorisia rajoitteita ja toimintojen suorittaminen saattaa kestää pidempään.

Miten tarkistetaan

Jos sivustolla on mahdollisuus tallentaa tietoa, anna sivuston olla pitkään auki, ja tarkista, onko käytössä aikaraja tietojen tallentamisessa ja tuleeko aikarajasta ilmoitus käyttäjälle.

2.3 Ohje: Sairauskohtaukset

Kuvaus

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

Lue lisää W3:n sivuilta.

2.3.1 Kolme välähdystä tai alle -raja-arvo

Kriteeri (taso A)

Verkkosivut eivät sisällä mitään, joka milloinkaan välähtäisi useammin kuin kolme kertaa sekunnissa, tai välähdys on alle yleisen välähdyksen ja punaisen välähdyksen raja-arvojen.

Huomautus: Koska mikä tahansa sisältö, joka ei täytä tätä onnistumiskriteeriä, voi haitata käyttäjän mahdollisuuksia käyttää koko sivua, täytyy kaiken verkkosivun sisällön (riippumatta siitä käytetäänkö sitä täyttämään muita onnistumiskriteereitä vai ei) täyttää tämä onnistumiskriteeri. Katso ohjeidenmukaisuuden vaatimus 5: Häiriöttömyys.

Lue lisää W3:n sivuilta.

Kuvaus

Mikään sivun oleva sisältö ei välky tiheämmin kuin 3 kertaa sekunnissa? Poikkeukset:

Miten tarkistetaan

Esimerkki: Sivuston etusivulla on JavaScriptillä toteutettu automaattisesti kuvia vaihtava “slider-­sovellus”. Slider­-sovellus on suurehko, mutta kuvat vaihtuvat viiden sekunnin välein, kriteeri 2.3.1 täyttyy.

2.3.2 Kolme välähdystä

Kriteerin taso: AAA

Kuvaus

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

Lue lisää W3:n sivuilta.

2.3.3 Animaatio vuorovaikutuksen yhteydessä

Kriteeri (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.

Kuvaus

Verkkosivuilla voidaan käyttää animaatioita, jotka käynnistyvät esimerkiksi hiiren klikkausen seurauksena. Nämä saattavat aiheuttaa osalle käyttäjistä huimausta, päänsärkyä tai pahoinvointia. Siksi käyttäjälle tulisi antaa mahdollisuus poistaa tällaiset animaatiot käytöstä. Animaatio voidaan kytkeä pois esimerkiksi käyttöjärjestelmän "vähennä liikettä" -toiminnon avulla, ja verkkosivun tulisi noudattaa tätä valintaa.

Miten tarkistetaan

Jos sivustolla on käytössä vuorovaikutukseen liittyviä animaatioita, tarkista, että ne on mahdollista kytkeä pois.

2.4 Ohje: Navigoitava

Kuvaus

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

Lue lisää W3:n sivuilta.

2.4.1 Ohita lohkot

Kriteeri (taso A)

Tarjolla on mekanismi sellaisten sisällön lohkojen ohittamiseen, jotka toistuvat useilla verkkosivuilla.

Lue lisää W3:n sivuilta.

Kuvaus

Onko sivulla mahdollista ohittaa verkkopalvelun toistuvat rakenteet, esimerkiksi joka sivulla toistuvat navigointirakenteet? Huomioitavaa:

  • Esimerkiksi hyppylinkkejä (“skip to content" -­linkki) voidaan käyttää.
  • Mikäli sivuilla on toimiva otsikointirakenne (HTML-­otsikointi, <h1>, <h2>, <h3>...), voidaan tätä pitää riittävänä tekniikkana hyppylinkkien sijaan.
  • Mikäli sivuilla käytetään kehyksiä (frames) ja ne on asianmukaisesti otsikoitu, on tämä riittävä tekniikka yksittäisten kehysten ohittamiseen. HTML5­-standardi mahdollistaa navigaatiorakenteiden tunnistamisen nav-­elementin avulla. Tätä eivät kaikki selaimet ainakaan standardin alkuvaiheessa tue.

Miten tarkistetaan

Tarkista löytyykö sivulta hyppylinkkiä, toimivaa otsikkorakennetta ja/tai oikein otsikoituja kehyksiä. Hyppylinkki on yleensä sivun ensimmäisiä fokusoitavia elementtejä.

2.4.10 Osioiden otsikot

Kriteeri (taso AAA)

Sisällön organisoimiseen käytetään osioiden otsikoita.

Huomautus 1: Termiä "otsikko" käytetään tässä yleisessä mielessä, ja sillä tarkoitetaan otsikkotekstejä ja muita tapoja lisätä otsikoita erityyppiseen sisältöön.

Huomautus 2: Tämä onnistumiskriteeri kattaa osiot kirjoitetussa tekstissä, ei käyttöliittymäkomponenteissa. Käyttöliittymäkomponentit käsitellään onnistumiskriteerissä 4.1.2.

Lue lisää W3:n sivuilta.

Kuvaus

Sisältö on jäsennelty käyttäen väliotsikoita. Eri aiheita käsitteleville sisällön osille tulee antaa aihetta kuvaava otsikko, jotta sisällön lukeminen ja osioiden välillä liikkuminen on helpompaa.

2.4.10 Osioiden otsikot

Kriteeri (taso AAA)

Sisällön organisoimiseen käytetään osioiden otsikoita.

Huomautus 1: Termiä "otsikko" käytetään tässä yleisessä mielessä, ja sillä tarkoitetaan otsikkotekstejä ja muita tapoja lisätä otsikoita erityyppiseen sisältöön.

Huomautus 2: Tämä onnistumiskriteeri kattaa osiot kirjoitetussa tekstissä, ei käyttöliittymäkomponenteissa. Käyttöliittymäkomponentit käsitellään onnistumiskriteerissä 4.1.2.

2.4.2 Sivuotsikot

Kriteeri (taso A)

Verkkosivuilla on otsikot, jotka kuvailevat aiheen tai merkityksen.

Lue lisää W3:n sivuilta.

Kuvaus

Onko verkkosivuilla kuvaavat ja informatiiviset otsikot (“Page title”)? Sivun otsikko määritellään HTML­-koodin head-­osiossa, esimerkiksi: <title>Yhteystiedot, ota yhteyttä ­ Yritys Oy</title>

Miten tarkistetaan

Tarkista löytyykö verkkosivulta huonosti nimettyjä otsikoita tai samoja otsikoita eri sivuilla.

2.4.3 Fokusjärjestys

Kriteeri (taso A)

Jos verkkosivu voidaan navigoida järjestyksessä ja navigointijärjestykset vaikuttavat merkitykseen tai toimintoon, fokusoitavissa olevat komponentit vastaanottavat fokuksen merkityksen ja toimivuuden säilyttävässä järjestyksessä.

Lue lisää W3:n sivuilta.

Kuvaus

Onko verkkosivun navigoitavien elementtien (linkit, lomake­elementit yms.) navigointijärjestys looginen ja intuitiivinen? Navigointijärjestyksen loogisuus voidaan useimmiten selvittää navigoimalla sivu läpi tab­-näppäimellä. Sivun navigoitavien elementtien tulisi toimia loogisesti eli fokuksen tulisi siirtyä elementistä toiseen johdonmukaisesti. Kriteeri ei täyty esimerkiksi mikäli:

  • Navigaatioelementin linkkien tai lomakkeen kenttien järjestys on muutettu tabindex­-attribuutilla epäloogiseksi.
  • Navigaatiolinkistä avattu DHTML-alinavigaatio, joka liittyy olennaisesti ylempään tasoon, ei saa fokusta heti avaamisen jälkeen, vaan tähän päästäkseen näppäimistöä käyttävän käyttäjän on aloitettava sivun linkkien selaaminen sivun alusta.

Miten tarkistetaan

Navigoi verkkosivu läpi tab-­näppäimellä ja tarkista siirtyykö fokus elementistä toiseen loogisesti ja johdonmukaisesti. Tarkista myös löytyykö sivulta tabindex-­attribuutteja ja muuttavatko ne fokuksen järjestyksen epäloogisesti.

2.4.4 Linkin tarkoitus (kontekstissa)

Kriteeri (taso A)

Jokaisen linkin tarkoitus voidaan selvittää yksin linkkitekstistä tai linkkitekstistä yhdessäohjelmallisesti selvitettävissä olevan linkkikontekstin avulla, paitsi tilanteissa, joissa linkki olisi yleisesti ottaen epäselvä käyttäjille.

Lue lisää W3:n sivuilta.

Kuvaus

Voidaanko jokaisen linkin tarkoitus selvittää yksin linkkitekstistä tai linkkitekstistä ja sen kontekstista yhdessä? Linkkitekstin konteksti voi tarkoittaa esimerkiksi:

  • Ympäröivää kappaletta
  • Listaelementtiä
  • Taulukon solua
  • Taulukon otsikkoa

Miten tarkistetaan

Esimerkki: Linkattu teksti "Lue lisää" on riittävä toteutustapa kriteerin 2.4.4 toteuttamiseksi, mikäli samassa kappaleessa kerrotaan linkin tarkoitus selkeämmin. Mikäli "Lue lisää"­-linkki on kappaleen tai muun kontekstielementin ainoa sisältö, ei kriteeri täyty. Huomioitavaa: Samaan kohteeseen johtavilla linkeillä tulisi olla sama linkkiteksti, eri kohteisiin johtavilla linkeillä eri linkkiteksti.

2.4.5 Useita tapoja

Kriteeri (taso AA)

Käytettävissä on enemmän kuin yksi tapa paikallistaa yksi verkkosivu verkkosivujen joukosta, paitsi silloin kun verkkosivu on prosessin lopputulos tai vaihe.

Lue lisää W3:n sivuilta.

Kuvaus

Verkkosivu on löydettävissä sivustolta useammalla kuin yhdellä tavalla. Sivu löytyy vähintään kahdella tapaa esimerkiksi seuraavista vaihtoehdoista:

  • Sivuston päänavigaatiorakenteesta.
  • Linkeistä muille aiheeseen liittyville sivuille.
  • Sivustokartasta.
  • Sisällysluettelosta.
  • Sivuston kattavan hakutoiminnon avulla.

Miten tarkistetaan

Huomioitavaa: Kriteeri ei päde sivuihin, jotka ovat osa monivaiheista prosessia (esim. verkkokaupan tilausprosessia).

2.4.6 Otsikot ja nimilaput

Kriteeri (taso AA)

Otsikot ja nimilaput kuvailevat aiheen tai merkityksen.

Lue lisää W3:n sivuilta.

Kuvaus

Ovatko otsikot (h1, h2, jne.) kuvaavia ja informatiivisia? Ovatko lomake-­ ja muiden vuorovaikutteisten toimintoelementtien nimilaput (labels) kuvaavia ja informatiivisia? On myös tärkeää, että otsikot ja nimilaput (labels) ovat erottelevia eli että ne eivät ole sekoitettavissa keskenään.

Miten tarkistetaan

Huomioitavaa: Otsikoiden ja nimilappujen ei tarvitse olla pitkiä, mikäli ne vain antavat riittävän vihjeen sisällössä navigoimiseen ja sisällön löytämiseen.

2.4.7 Näkyvä fokus

Kriteeri (taso AA)

Kaikilla näppäimistöltä käytettävillä käyttöliittymillä on käyttömoodi, jossa näppäimistön fokusindikaattori on näkyvissä.

Lue lisää W3:n sivuilta.

Kuvaus

Näkeekö käyttäjä, missä verkkosivun elementissä näppäimistön fokus kulloinkin on? Huomioitavaa: Useimmat graafiset selaimet esittävät fokuksen kohdistumisen ympyröimällä elementin ohuella pisteviivalla. Tämän toiminnon voi poistaa esimerkiksi tyylitiedostomääritysten avulla. Näin ei kannata tehdä ellei tarjoa tilalle jotain paremmin erottuvaa tapaa.

Miten tarkistetaan

Testaa: Käy tabulaattori-­näppäimellä verkkosivu läpi. Mikäli et jossain tilanteessa voi erottaa sitä, missä linkkitekstissä tai ­elementissä fokus on, ei kriteeri 2.4.7 täyty. Esimerkiksi milloin kriteeri 2.4.7 ei täyty:

  • Elementin fokus poistetaan ohjelmallisesti
  • Elementin fokus poistetaan CSS­-tyyleillä

2.4.8 Sijainti

Kriteeri (taso AAA)

Saatavilla on informaatiota käyttäjän sijainnista verkkosivujen joukossa.

Lue lisää W3:n sivuilta.

Kuvaus

Sivustolla liikkuminen on helpompaa, jos käyttäjä näkee koko ajan sijaintinsa verkkosivustossa. Tämän voi tehdä esimerkiksi

  • käyttämällä ns. murupolkua (breadcrumb trail)
  • korostamalla aktiivisen osion ja sivun linkki navigaatiovalikossa (visuaalisesti ja ohjelmallisesti)

Miten tarkistetaan

Siirry jollekin sivuston alasivuista. Tarkista, onko sivun sijainti sivustossa ilmaistu esimerkiksi murupolun avulla tai korostamalla aktiivisen sivun linkki navigaatiovalikossa. Jos navigaatiovalikon linkki on korostettu, tarkista, että se on tehty myös ohjelmallisesti (esim. aria-current-attribuutin avulla), jotta toteutus läpäisee kriteerin 1.3.1 Informaatio ja suhteet.

2.4.9 Linkin tarkoitus (vain linkeille)

Kriteerin taso: AAA

Kuvaus

Jokaisen linkin tarkoituksen tunnistamiseen yksinomaan linkkitekstin perusteella on saatavilla mekanismi, paitsi tilanteissa, joissa linkin tarkoitus olisi yleisesti ottaen epäselvä käyttäjille.

Lue lisää W3:n sivuilta.

2.5.1 Osoitineleet

Kriteeri (taso A)

Kaikki toiminnallisuus, joka hyödyntää monipiste- tai reittiin perustuvia ohjauseleitä, voidaan käyttää myös yhdellä osoittimella ja ilman reittiin perustuvaa elettä, paitsi jos kyseinen ohjaustapa on olennainen.

Monipiste-eleitä käytetään esimerkiksi kosketusnäytöllisissä laitteissa. Tällainen voi olla mm. kuvan suurentamiseen käytettävä nipistysele tai useammalla sormella tehtävät pyyhkäisyeleet. 

Reittiin perustuvat ohjauseleet tarkoittavat pyyhkäisyeleitä, hiirellä raahaamista tai eleitä, joissa kohdistinta täytyy liikuttaa monimutkaisen polun mukaisesti.

Kuvaus

Henkilöillä, joilla on motorisia rajoitteita, tarkat pyyhkäisyeleet, kohdistimen liikuttaminen tarkasti tai hiiren liikuttaminen nappi pohjassa painettuna (raahaus) voivat olla vaikeita. Käyttäjät, jotka käyttävät osoitinkynää (stylus) tai muuta yhden pisteen osoitinta kosketusnäytön käyttämiseen, eivät voi käyttää monen pisteen ohjauseleitä kosketusnäytöllä. Monimutkaiset pyyhkäisyeleet eivät myöskään välttämättä ole kaikkien käyttäjien tiedossa.

Vaatimus monimutkaisen reitin käyttämiseen voi syntyä, jos käytetään monimutkaisia valikkorakenteita, joissa alavalikko aukeaa, kun hiiren vie valikkokohteen päälle, ja sen jälkeen hiiri täytyy siirtää tarkkaa reittiä alavalikon päälle, ettei aktivoida vahingossa toista valikkokohdetta tai ettei alavalikko poistu näkyvistä.

Miten tarkistetaan

Tarkista, ovatko kaikki sivun toiminnallisuudet käytettävissä ilman pyyhkäisy, raahaus-, monipiste-, tai monimutkaiseen reittiin perustuvia ohjauseleitä. 

2.5.2 Osoittimen peruutus

Kriteeri (taso A)

Toiminnallisuuteen, jota voidaan käyttää yhden osoittimen avulla, pätee vähintään yksi seuraavista:

  • Ei down-event:iä: Mikään osa toiminnallisuudesta ei käytä down-event:iä
  • Keskeytä tai kumoa: Toiminnon päättäminen tapahtuu up-eventillä, ja on olemassa mekanismi, jolla toiminto voidaan perua ennen päättämistä tai kumota päättämisen jälkeen
  • Vastakkaisuus: Up-event kumoaa edeltävän down-eventin aiheuttaman tapahtuman

Olennainen: Toiminnon päättäminen down-eventillä on olennaista

Down-event: hetki, kun ohjauslaitteen näppäin painetaan alas tai kosketusnäytöllisessä laitteessa kosketus alkaa

Up-event: hetki, kun ohjauslaitteen näppäin vapautetaan tai kosketusnäytöllisessä laitteessa kosketus päättyy

Kuvaus

Kriteerin tavoitteena on välttää toimintojen suorittamista tahattomasti tai epähuomiossa. Siksi toimintoja ei pitäisi suorittaa heti klikkauksen tai kosketuksen alussa, vaan vasta sen päättyessä, että käyttäjällä on mahdollisuus perua toiminnon suorittaminen. 

Miten tarkistetaan

Tarkista, että vähintään yksi kriteerin ehdoista pätee.

2.5.3 Nimilappu nimessä

Kriteeri (taso A)

Käyttöliittymäkomponenteilla joilla on tekstiä tai tekstiä esittävän kuvan sisältävä nimilappu, elementin nimi sisältää tekstin, joka on visuaalisesti näkyvissä.

Kuvaus

Käyttöliittymäkomponenteilla on olemassa ohjelmallisesti selvitettävä nimi ("accessible name") ja visuaalisesti näkyvillä oleva nimi. Henkilöille, jotka käyttävät tietokonetta puheella, on tärkeää, että nämä kaksi vastaavat toisiaan, jotta he voivat aktivoida komponentin sanomalla ääneen näytöllä näkyvän tekstin. Myös henkilöille, jotka käyttävät "teksti puheeksi" -ominaisuutta ja kuuntelevat ja katsovat verkkosivun sisältöä samanaikaisesti, voi olla hämmentävää, jos kuultu ei vastaa visuaalisesti näkyvillä olevaa tekstiä.

Miten tarkistetaan

Tarkista, että nimilappu ja elementin nimi vastaavat toisiaan.

2.5.4 Liikeohjaus

Kriteeri (taso A)

Toiminnallisuus, jota voidaan käyttää liikuttamalla laitetta, voidaan käyttää myös käyttöliittymäkomponenttien avulla, ja liikeaktivointi voidaan laittaa pois päältä vahingossa aktivoinnin välttämiseksi. Tämä ei koske seuraavia tapauksia:

  • Liikeaktivointi on toteutettu rajapinnan kautta, joka on saavutettavuudeltaan tuettu
  • Liike on olennainen, ja sen poistamisen jälkeen toiminto menettäisi merkityksensä

Kuvaus

Mobiililaitteissa on monenlaisia liikeantureita, joita voidaan käyttää laitteen ohjaamiseen. Esimerkiksi laitteen ravistaminen voi aktivoida kumoa-toiminnon.

Osalla käyttäjistä mobiililaite on kiinnitetty esimerkiksi pyörätuoliin niin, että sen asentoa ei voi vaihtaa. Laitteen kääntäminen eri asentoon voi olla hankalaa myös muiden motoristen tai tilanteeseen liittyvien rajoitteiden vuoksi. Toiminto saatta aktivoitua myös vahingossa, esimerkiksi vapinan tai pyörätuolin tärinän vuoksi.

Miten tarkistetaan

Jos verkkosivulla on käytetty liikkeeseen perustuvia eleitä, ne voi kytkeä pois, ja toimintoja voi käyttää myös käyttöliittymäkomponenttien kautta.

2.5.5 Kohteen koko

Kriteeri (taso AAA)

Kohdistimella aktivoitavan kohteen koko on vähintään 44 kertaa 44 CSS-pikseliä, lukuunottamatta kun

  • Vastaava: kohde on saatavilla vastaavan, vähintään 44 kertaa 44 CSS-pikselin kokoisen linkin tai komponentin kautta
  • Kohde on lauseen tai tekstilohkon sisällä
  • Kohteen koko määrittyy käyttäjäagentin perusteella eikä ole muokattu sisällön tuottajan toimesta
  • Tietynlainen esitystapa on olennainen välitettävän informaation kannalta

Kuvaus

Käyttöliittymäkomponentit, eli linkit, painikkeet, lomakekentät tms. tulee muotoilla visuaalisesti niin, että ne on helppo aktivoida koskettamalla ja hiiren osoittimella klikkaamalla. Tarkka osoittaminen ja klikkaaminen on motorisesti haastavaa, ja se saattaa aiheuttaa ongelmia joillekin. Kohteiden klikattavan alueen tekeminen riittävän suureksi parantaa sivuston käytettävyyttä kaikilla käyttäjillä.

Kriteeri ei koske tavallisia tekstin keskellä olevia linkkejä eikä komponentteja, joiden ulkoasua ei ole määritelty sivuston toimesta.

Miten tarkistetaan

Tarkista, että kaikki sivuston linkit, painikkeet, lomake-elementit ja muut toiminnalliset kohteet ovat riittävän suuria. Elementin koon voi tarkistaa esimerkiksi selaimen kehittäjätyökalujen avulla. Klikattavaan alueeseen lasketaan elementin sisältö, täyte ja reunaviiva. Alue voi siis olla suurempi kuin elementin tekstisisällön koko.

2.5.6 Rinnakkaiset syötemekanismit

Kriteeri (taso AAA)

Verkkosisältö ei rajoita eri syötetapojen käyttämistä, paitsi jos rajoitus on olennaista, pakollista sisällön turvallisuuden vuoksi tai vaaditaan käyttäjän asetusten noudattamiseksi.

Kuvaus

Sivuston käyttötapa ei saa olla rajoitettu vain yhteen syötetapaan kuten vain kosketuksella tai vain näppäimistöllä käytettäväksi. Eri syötemekanismien täytyy toimia rinnakkaisesti niin, että toiminnallisia elementtejä voi käyttää eri tavoin, ja tapaa voi vaihtaa myös käytön aikana. Sivun latautumisen jälkeen ei voi olettaa, että tunnistettu syötetapa on ainoa syötetapa.

Eli kaikkia toiminnallisia elementtejä tulee voida käyttää hiirellä, näppäimistöllä ja kosketuksella.

Miten tarkistetaan

Kokeile käyttää toimintoja käyttäen hiirtä, näppäimistöä ja kosketusta. Kaiken toiminnallisuuden tulisi olla käytettävissä kaikilla tavoilla.

3. Periaate: Ymmärrettävä

Kuvaus

Informaation ja käyttöliittymän toiminnan pitää olla ymmärrettävää.

Lue lisää W3:n sivuilta.

3.1 Ohje: Luettava

Kuvaus

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

Lue lisää W3:n sivuilta.

3.1.1 Sivun kieli

Kriteeri (taso A)

Jokaisen verkkosivun oletusarvoinen luonnollinen kieli voidaan selvittää ohjelmallisesti.

Lue lisää W3:n sivuilta.

Kuvaus

Onko verkkosivun kieli määritetty? Yksinkertaisimmillaan HTML5-­dokumentissa voidaan sivun kieli ilmoittaa HTML-tagissa näin:
<html lang="fi">.

Miten tarkistetaan

Katso verkkosivun lähdekoodista löytyykö HTML-elementistä lang-­attribuuttia. Eri dokumenttityypeillä kielen määritys voi vaihdella. Attribuutin arvoissa käytetään ISO­-639-­1:n standardin mukaista nimeämistä.

3.1.2 Osien kieli

Kriteeri (taso AA)

Sisällön jokaisen tekstikatkelman tai ilmaisun luonnollinen kieli voidaan selvittää ohjelmallisesti, paitsi seuraavien osalta: erisnimet, tekniset termit, määrittämättömän kielen sanat sekä sanat tai ilmaisut, jotka ovat muuttuneet läheisen tekstiympäristön kielen murteelliseksi osaksi.

Lue lisää W3:n sivuilta.

Kuvaus

Onko käyttäjälle kerrottu (lang­-attribuutilla), jos verkkosivun jokin sisältöelementti on esitetty sivulle määritetystä kielestä poikkeavasti? Poikkeukset:

  • Erisnimet
  • Tekniset termit
  • Määrittämättömän kielen sanat sekä sanat tai ilmaisut, jotka ovat muuttuneet läheisen tekstiympäristön kielen murteelliseksi osaksi.

Miten tarkistetaan

HTML5-­tekniikalla verkkosivun elementin kieli voidaan määrittää lang-­attribuutilla:
<p>Tämä kappale on suomeksi</p> <p lang=”en”>This paragraph is in English<p>.

3.1.3 Epätavalliset sanat

Kriteerin taso: AAA

Kuvaus 

Tarjolla on mekanismi tunnistamaan tietyt sanojen tai lauseiden määritelmät, joita käytetään poikkeavalla tai rajoitetulla tavalla, mukaan lukien idiomit ja jargon.

Lue lisää W3:n sivuilta.

3.1.4 Lyhenteet

Kriteerin taso: AAA

Kuvaus

Tarjolla on mekanismi tunnistamaan lyhenteiden laajennettu muoto tai merkitys.

Lue lisää W3:n sivuilta.

3.1.5 Lukemisen taso

Kriteerin taso: AAA

Kuvaus

Kun teksti edellyttää erisnimien ja otsikoiden poistamisen jälkeen 2. perusasteen opetuksen vaatimukset ylittävää lukutaitoa, tarjolla on täydentävää sisältöä tai versio, joka ei vaadi 2. perusasteen opetuksen tasoa edistyneempää lukutaitoa.

Lue lisää W3:n sivuilta.

3.1.6 Ääntäminen

Kriteerin taso: AAA

Kuvaus

Käytettävissä on mekanismi sanojen täsmällisen ääntämistavan tunnistamiseksi silloin, kun sanojen merkitys kontekstissaan ilman ääntämistavan tuntemusta on monitulkintainen.

Lue lisää W3:n sivuilta.

3.2 Ohje: Ennakoitava

Kuvaus

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

Lue lisää W3:n sivuilta.

3.2.1 Fokusointi

Kriteeri (taso A)

Kun mikä tahansa komponentti vastaanottaa fokuksen, se ei aiheuta kontekstin muutosta.

Lue lisää W3:n sivuilta.

Kuvaus

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

Yksi esimerkki väärästä toimintatavasta ovat navigointirakenteina toimivat pudotusvalikot, jotka avaavat sivun heti fokuksen saatuaan. Tämä voidaan testata käymällä valikko läpi näppäimistön avulla. Pudotusvalikkorakenteen tulisi toimia niin, että käyttäjä voi edetä rakenteessa vapaasti näppäinten avulla ja erikseen valita haluamansa sivun esimerkiksi enter­näppäimellä. Fokuksen siirtymisen elementtiin (siirtyminen valikkorakenteen elementtiin tab­näppäimellä) tai sieltä pois ei tulisi itsessään aiheuttaa uuden ikkunan tai sivun avautumista.

Miten tarkistetaan

Käy verkkosivu läpi näppäimistöllä (tabulaattori/nuolinäppäimet).

3.2.2 Syöte

Kriteeri (taso A)

Minkään käyttöliittymäkomponentin asetuksen muuttaminen ei automaattisesti aiheuta kontekstin muutosta, ellei käyttäjää ole ohjeistettu tällaisesta toiminnosta ennen komponentin käyttöä.

Lue lisää W3:n sivuilta.

Kuvaus

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.

Esimerkkejä:

  • Lisättäessä uutta merkintää kalenterilomakkeeseen, radio-­button ­elementin valitseminen lisää kaksi ylimääräistä kenttää lomakkeelle. Tämä ei merkittävästi muuta sivun rakennetta eli tämä kriteeri täyttyy
  • Mikäli edellisessä esimerkissä fokus siirtyy radio­-button -­elementin valitsemisen jälkeen uuteen elementtiin automaattisesti tai avaa pop­up ­ikkunan, on tästä kerrottava käyttäjälle lomakkeen alussa, jotta tämä kriteeri täyttyy.

3.2.3 Johdonmukainen navigointi

Kriteeri (taso AA)

Verkkosivujen joukon useilla verkkosivuilla toistuvat navigointimekanismit esiintyvät aina samassa suhteellisessa järjestyksessä, ellei käyttäjä toisin valitse.

Lue lisää W3:n sivuilta.

Kuvaus

Pysyykö useilla sivuilla toistuvien navigaatioelementtien linkkijärjestys samana verkkopalvelun eri sivuilla? Huomioitavaa: Tämä kriteeri ei kiellä sivukohtaisia alinavigaatiorakenteita tai sitä, että navigaatiorakenne korvataan esimerkiksi alitasollaan jollain tietyllä sivulla. Sen sijaan kriteeri ei täyty esimerkiksi mikäli:

  • Saman navigaatiorakenteen sisäinen linkkijärjestys verkkopalvelun eri sivuilla vaihtelee.
  • Saman navigaatiorakenteen paikka verkkopalvelun eri sivuilla vaihtelee.

3.2.4 Johdonmukainen tunnistaminen

Kriteeri (taso AA)

Komponentit, joilla on sama toiminnallisuus verkkosivujen joukossa, tunnistetaan johdonmukaisesti.

Lue lisää W3:n sivuilta.

Kuvaus

Saman toiminnon toteuttavat elementit esitetään verkkopalvelun eri sivuilla johdonmukaisesti. On esimerkiksi:

  • Käytettävä samoihin toimintoihin liittyviä graafisia symboleja (esim. tulostimen symboli, eri dokumenttityyppien tunnistesymbolit) yhdenmukaisesti.
  • Toteutettava elementtien nimeäminen yhdenmukaisesti (esim. hakutoiminnossa "Hae" tai "Etsi", ei samassa verkkopalvelussa molempia).

Huomioitavaa:

  • Myöskin tekstivastineet on esitettävä johdonmukaisesti.

3.2.5 Muutos pyydettäessä

Kriteerin taso: AAA

Kuvaus

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

Lue lisää W3:n sivuilta.

3.3 Ohje: Syötteen avustaminen

Kuvaus

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

Lue lisää W3:n sivuilta.

3.3.1 Virheen tunnistaminen

Kriteeri (taso A)

Jos syötevirhe havaitaan automaattisesti, virheellinen kohta tunnistetaan ja virhe kuvataan käyttäjälle tekstimuotoisena.

Lue lisää W3:n sivuilta.

Kuvaus

Jos lomakkeella havaitaan syötevirhe, sen paikka osoitetaan ja virheen kuvaus esitetään tekstimuotoisena. Virhe voidaan kuvata esimerkiksi seuraavilla tavoilla:

  • Asiakaspuolen skriptauksen avulla toteutetulla virheilmoituksella ("Alert box")
  • Sivun nimessä ("Page-­title")
  • Sivun alussa listana
  • Ongelmallisen kohdan label­elementissä

Huomioitavaa:

  • Ilmoitus on kohdennettava vähintään yhdellä tavalla virheelliseen tai puutteelliseen kenttään
  • Useita tapoja voidaan käyttää samanaikaisesti (lista sivun yläreunassa ja lisäksi virheellisen kohdan labelelementissä)

Miten tarkistetaan

Tekstimuotoisen informaation lisäksi muita tapoja kuvata ongelmaa on erittäin suositeltavaa käyttää (väri, muotoilu).

3.3.2 Nimilaput tai ohjeet

Kriteeri (taso A)

Kun sisältö edellyttää käyttäjän syötettä, tarjolla on nimilappuja tai ohjeita.

Lue lisää W3:n sivuilta.

Kuvaus

Onko käyttäjää ohjeistettu riittävästi mikäli hänen edellytetään syöttävän tietoa verkkopalveluun? Mikäli jokin lomake­elementti vaatii:

  • Täyttämisen ylipäätään
  • Täyttämisen tietyssä muodossa
  • Tietyn nimenomaisen arvon
  • Tietyn pituisen arvon,

kerrotaan tästä käyttäjälle.

Miten tarkistetaan

Ensisijaisesti kannattaa käyttää lomakekentän label­-elementtiä. Ohjeita ja esimerkkejä voi antaa myös esimerkiksi fieldset- ja legend-elementtien avulla.

3.3.3 Virheen korjausehdotus

Kriteeri (taso AA)

Jos syötevirhe havaitaan automaattisesti ja korjausehdotukset tunnetaan, ehdotukset esitetään käyttäjälle, paitsi jos tämä vaarantaisi tietoturvan tai sisällön merkityksen.

Lue lisää W3:n sivuilta.

Kuvaus

Jos lomakkeella havaitaan syötevirheitä, korjausehdotukset esitetään käyttäjälle (mikäli ne tunnetaan). Mikäli virheiden kuvaaminen vaarantaisi tietoturvan tai muuttaisi sisällön merkityksen, ei ehdotuksia tarvitse antaa. 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)

Kriteeri (taso AA)

Verkkosivuille, joista seuraa käyttäjälle lakiin perustuvia sitoumuksia tai taloudellisia transaktioita, jotka muokkaavat tai poistavat käyttäjän hallinnoimaa dataa tietovarastossa tai jotka lähettävät käyttäjän testivastauksia, ainakin yksi seuraavista pitää paikkansa: (Taso AA)

  1. Peruttava: Lähetykset ovat peruttavissa.

  2. Tarkastettu: Käyttäjän syöttämä data tarkastetaan syötevirheiden varalta ja käyttäjälle tarjotaan mahdollisuus virheiden korjaamiseen.

  3. Vahvistettu: Käytettävissä on mekanismi informaation tarkistamiseen, vahvistamiseen ja korjaamiseen ennen lähetyksen loppuunsaattamista.

Lue lisää W3:n sivuilta.

Kuvaus

Voiko käyttäjä peruuttaa, tarkistaa tai vahvistaa lähettämänsä syötteen, jos se:

  • Aiheuttaa lakiin perustuvia sitoumuksia.
  • Aiheuttaa taloudellisia seuraamuksia.
  • Sisältää käyttäjän testivastauksia.
  • Muuttaa tai poistaa käyttäjän hallinnoimaa dataa.

Seuraavista vähintään yhden kohdan on toteuduttava, jotta kriteeri 3.3.4 täyttyy:

  • Lähetetty informaatio on peruttavissa.
  • Lähetetty informaatio tarkistetaan syötevirheiden varalta ja käyttäjälle tarjotaan mahdollisuus virheiden korjaamiseen.
  • Käyttäjällä on mahdollista tarkistaa, vahvistaa ja korjata informaatio ennen lopullista lähettämistä.

3.3.6 Virheiden ennaltaehkäisy (kaikki)

Kriteerin taso: AAA

Kuvaus

Verkkosivuille, jotka vaativat käyttäjän lähettämää informaatiota, ainakin yksi seuraavista pitää paikkansa: (Taso AAA)

  1. Peruttava: Lähetykset ovat peruttavissa.

  2. Tarkastettu: Käyttäjän toimittama data tarkastetaan syötevirheiden varalta ja käyttäjälle tarjotaan mahdollisuus virheiden korjaamiseen.

  3. Vahvistettu: Tarjolla on mekanismi tarkistamaan, vahvistamaan ja korjaamaan informaatiota ennen lähetyksen loppuunsaattamista.

Lue lisää W3:n sivuilta.

4. Periaate: Lujatekoinen

Kuvaus

Sisällön pitää olla riittävän lujatekoinen, jotta se voidaan luotettavasti tulkita laajalla joukolla asiakasohjelmia, mukaan lukien avustavat teknologiat.

Lue lisää W3:n sivuilta.

4.1 Ohje: Yhteensopiva

Kuvaus

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

Lue lisää W3:n sivuilta.

4.1.1 Jäsentäminen

Kriteeri (taso A)

Kun sisältö on toteutettu merkkauskieliä käyttämällä, elementeillä on täydelliset alku- ja lopputagit, elementit on järjestetty sisäkkäin määritystensä mukaan, samaa attribuuttia ei ole annettu elementeille moneen kertaan ja kaikki ID-tyyppiset tunnisteet ovat yksilöllisiä paitsi tilanteissa, joissa määritykset sallivat tämänkaltaiset ominaisuudet.

Huomautus: Alku- ja lopputagit, joiden muotoilusta puuttuu jokin kriittinen merkki, kuten päättävä "suurempi kuin" -merkki tai sopiva lainausmerkki attribuutin arvosta, eivät ole täydellisiä.

Lue lisää W3:n sivuilta.

Kuvaus

Onko verkkopalvelun sisältämä HTML­-koodi sellaista, että käytettävät ohjelmat (esim. selaimet ja ruudunlukuohjelmat) pystyvät esittämään (jäsentämään) sen oikein? Kriteeri täyttyy automaattisesti jos käytetään HTML/XHTML-­määrityksen mukaista koodia. Kriteeri ei tätä vaadi, mutta vähintään seuraavien ehtojen tulee täyttyä:

  • Elementtien aloitus­ ja lopetustagit on merkitty oikein.
  • Elementit on järjestetty sisäkkäin oikein ("nesting").
  • ID-­tunnisteet ovat yksilöllisiä.
  • Sivulla ei ole muita merkittäviä HTML/XHTML­-virheitä.

Miten tarkistetaan

Sivu kannattaa tarkistaa esimerkiksi W3C:n validaattorilla.

4.1.2 Nimi, rooli, arvo

Kriteeri (taso A)

Kaikkien käyttöliittymäkomponenttien (mukaan lukien lomake-elementit, linkit ja skriptien tuottamat komponentit) nimi ja rooli voidaan selvittää ohjelmallisesti; tilat, ominaisuudet ja arvot, jotka käyttäjä voi asettaa, voidaan myös asettaa ohjelmallisesti; ja tieto näiden muutoksista on asiakasohjelmien saatavissa, mukaan lukien avustavat teknologiat.

Huomautus: Tämä onnistumisen kriteeri on ensisijaisesti tarkoitettu Web-kehittäjille, jotka toteuttavat tai skriptaavat itse käyttöliittymäkomponentteja. Esimerkiksi standardit HTML-elementit täyttävät jo tämän onnistumiskriteerin, kun niitä käytetään spesifikaation mukaisesti.

Lue lisää W3:n sivuilta.

Kuvaus

Ovatko kaikki 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. Huomioitavaa: Tämä kriteeri kohdentuu lähinnä tilanteisiin, joissa sivustolle on toteutettu käyttöliittymäkomponentteja esimerkiksi skriptaamalla. Kaikissa tilanteissa on varmistuttava siitä, että nämä komponentit antavat riittävästi tietoa käytettävälle avustalle teknologialle ja antavat tämän tekniikan kontrolloida itseään. Käyttöliittymäkomponenttien on täytettävä seuraavat ehdot:

  • Niiden nimi ja rooli voidaan selvittää ohjelmallisesti.
  • Käyttäjän asettamat tilat, ominaisuudet ja arvot voidaan asettaa ohjelmallisesti.
  • Tieto muutoksista on asiakasohjelmien saatavissa.

Esimerkiksi:

  • Fokuksen tila tai sen muutos ilmoitetaan.
  • Lomakkeen valintaruudun tai ­napin tilan muutos ilmoitetaan.
  • Kaikilla käyttöliittymäkomponenteilla on ohjelmallisesti määritettävä nimi.

Miten tarkistetaan

Ohjelmallisesti luoduissa/muokatuissa käyttöliittymäkomponenteissa on usein syytä käyttää WAI­-ARIAa. Esimerkiksi: Sivulla on linkki, joka näyttää divillä toteutetun pop­upin. Pop­upin sulje­-elementti on toteutettu button-­elementtinä (napin sisältönä vain kirjain X). Käytetään WAI­-ARIA:n "aria­-label"­ -attribuuttia tarjoamaan käyttäjälle napin nimi ja rooli:
<button aria-­label="Sulje pop­up" onclick="document.getElementById(popup).style.display='none';" class="close­button">X</button>.

4.1.3 Tilasta kertovat viestit

Kriteeri (taso AA)

Sisältö, joka on toteutettu käyttäen merkkauskieliä, tilasta kertovat viestit voidaan määrittää ohjelmallisesti roolin tai ominaisuuden avulla, joka mahdollistaa sen esittämisen käyttäjälle avustavan teknologian avulla ilman, että fokusta tarvitsee siirtää elementtiin.

Kuvaus

Tärkeät ilmoitusviestit tulee olla toteutettu niin, että viesti tulee luetuksi ääneen myös ruudunlukuohjelmilla.

Esimerkkejä tärkeistä viesteistä:

  • Toiminnon tulos tai onnistuminen
  • Virhe
  • Toiminto on käynnissä ja valmistumista odotellaan
  • Toiminnon edistyminen

Raportointi toteutetaan tyypillisesti käyttämällä ARIA-live -ominaisuutta tai ARIA-roolia alert.

Tämä kriteeri ei koske tilanteita, jossa ilmoitusviesti esitetään sivunlatauksen yhteydessä.

Miten tarkistetaan

Tarkista HTML-koodista, että tärkeissä viesteissä on käytetty sopivia ARIA-tekniikoita.