Papunetin WCAG 2.2 -tarkistuslista

WCAG 2.2 on WCAG-ohjeistuksen uusin versio, joka julkaistiin 5.10.2023. Laki digitaalisten palveluiden tarjoamisesta perustuu kuitenkin toistaiseksi WCAG-ohjeistuksen versioon 2.1 ja sen tasoon AA. Vielä ei ole tiedossa, milloin uudet WCAG 2.2 -kriteerit tulevat osaksi lainsäädäntöämme.

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

Alkuperäinen WCAG 2.2 -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.2 -virheet.

Tämän tarkistuslistan tekemiseen on hyödynnetty alkuperäistä WCAG 2.2 -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)

• Kai­kil­la ku­vil­la ja ku­va­pai­nik­keil­la on tar­koi­tus­ta ku­vaa­va teks­ti­vas­ti­ne.
• Ku­vil­la, joi­den tar­koi­tus ei ole vä­lit­tää si­säl­töä (ko­ris­teel­li­set ku­vat), on tyh­jä alt-teks­ti (alt=””).
• Kai­kil­la link­kei­nä toi­mi­vil­la ku­vil­la tu­lee olla lin­kin koh­det­ta ku­vaa­va teks­ti­vas­ti­ne.
• Komplek­sis­ten ku­vien (ku­vaa­jat, graa­fit, kaa­viot) yh­tey­des­sä ku­van in­for­maa­tio on esi­tet­ty teks­ti­nä joko sa­mal­la tai eril­li­sel­lä si­vul­la. Alt-teks­tin tar­koi­tus täs­sä on ker­toa ly­hyes­ti, mitä kuva esit­tää.
• Lo­ma­ke­pai­nik­keet ovat ku­vaa­via.
• Teks­ti­vas­ti­neet on syy­tä pi­tää ly­hyi­nä – enin­tään 120 merk­kiä.

Ohje 1.2 – Ai­ka­si­don­nai­nen me­dia

Tar­joa vas­ti­ne (esi­mer­kik­si teks­ti­tys ja ku­vai­lu­tulk­kaus) ai­ka­si­don­nai­sel­le me­dial­le ku­ten vi­deoil­le ja ää­ni­tie­dos­toil­le.

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 Pelk­kä au­dio ja pelk­kä vi­deo (tal­len­net­tu) (Taso A)

• Tal­len­net­tu au­dio (pelk­kä ääni) on esi­tet­ty myös kir­joi­tet­tu­na teks­ti­nä.
• Tal­len­ne­tun vi­deon (ei ään­tä) si­säl­tö on esi­tet­ty kir­joi­tet­tu­na teks­ti­nä. Jos al­ku­pe­räi­nen vi­deo ei si­säl­lä ään­tä, sama si­säl­tö voi­daan esit­tää myös au­dio­na.

1.2.2 Teks­ti­tys (tal­len­net­tu) (Taso A)

• Tal­len­ne­tuis­sa vi­deois­sa on teks­ti­tyk­set.

1.2.3 Ku­vai­lu­tulk­kaus tai me­dia­vas­ti­ne (tal­len­net­tu) (Taso A)

• Vi­deoi­den si­säl­tö on esi­tet­ty­ teks­ti­nä tai vi­deos­ta on saa­ta­vil­la myös ku­vai­lu­tul­kat­tu ver­sio.
• Vaa­di­taan, jos vi­deol­la ole­vaa vi­su­aa­lis­ta si­säl­töä ei ole esi­tet­ty al­ku­pe­räi­ses­sä ää­ni­rai­das­sa.

1.2.4 Teks­ti­tys (suo­ris­sa lä­he­tyk­sis­sä) (Taso AA)

• Kai­kel­le synk­ro­noi­dus­sa me­dias­sa ole­val­le suo­ral­le au­dio­si­säl­löl­le (vi­deot, pelk­kää ään­tä si­säl­tä­vät lä­he­tyk­set, vi­deo­kon­fe­rens­sit, verk­ko­lä­he­tyk­set) on tar­jol­la teks­ti­tyk­siä.

1.2.5 Ku­vai­lu­tulk­kaus (tal­len­net­tu) (Taso AA)

• Kai­kis­ta vi­deois­ta on saa­ta­vil­la ku­vai­lu­tulk­kaus.
• Vaa­di­taan, jos vi­deol­la ole­vaa vi­su­aa­lis­ta si­säl­töä ei ole esi­tet­ty al­ku­pe­räi­ses­sä ää­ni­rai­das­sa.

1.2.6 Viit­to­ma­kie­li (tal­len­net­tu) (Taso AAA)

• Viit­to­ma­kie­li­nen vi­deo on saa­ta­vil­la kai­kel­le sel­lai­sel­le me­dia­si­säl­löl­le, joka si­säl­tä­ä ään­tä.

1.2.7 Pi­den­net­ty ku­vai­lu­tulk­kaus (tal­len­net­tu) (Taso AAA)

• Jos al­ku­pe­räi­seen vi­deoon on mah­do­ton­ta li­sä­tä ku­vai­lu­tulk­kaus­ta (esi­mer­kik­si siksi, että alkuperäisessä ääniraidassa on lii­an ly­hyi­tä tau­ko­ja), vi­deos­ta tu­lee teh­dä uusi ver­sio, jos­sa on so­pi­vat tauot ja ku­vai­lu­tulk­kaus.

1.2.8 Me­dia­vas­ti­ne (tal­len­net­tu) (Taso AAA)

• Vi­deo- ja ää­ni­si­säl­tö­jä ku­vai­le­vat teks­ti­ver­siot ovat saa­ta­vil­la kai­kel­le tal­len­ne­tul­le me­dial­le.

1.2.9 Pelk­kä au­dio (suo­ris­sa lä­he­tyk­sis­sä) (Taso AAA)

• Kai­kil­le ään­tä si­säl­tä­vil­le suo­ril­le lä­he­tyk­sil­le on saa­ta­vil­la ku­vai­le­va teks­ti­ver­sio.

Ohje 1.3 – Mu­kau­tet­ta­va

Si­säl­tö voi­daan esit­tää eri ta­voin (esi­mer­kik­si yk­sin­ker­tai­sem­man aset­te­lun avul­la) in­for­maa­tio­ta tai ra­ken­net­ta me­net­tä­mät­tä.

1.3.1 In­for­maa­tio ja suh­teet (Taso A)

• Esi­tys­ta­vas­sa vä­lit­ty­vät in­for­maa­tio, ra­ken­ne ja suh­teet voi­daan sel­vit­tää oh­jel­mal­li­ses­ti tai ne ovat saa­ta­vil­la teks­ti­nä.
• Se­mant­tis­ta merk­kaus­ta on käy­tet­ty oi­kein esi­mer­kik­si ot­si­koi­den (<h1>), aluei­den/​​​maa­merk­kien, lis­to­jen (<ul>, <ol>, <dl>) ja ko­ros­te­tun teks­tin (<strong>, <code>, <abbr>, <blockquo­te>) osal­ta.
• Tau­lu­koi­ta (<table>) on käy­tet­ty tau­luk­ko­muo­dos­sa ole­van da­tan esit­tä­mi­seen. Tau­lu­kon so­lut on yh­dis­tet­ty nii­den ot­si­koi­hin (tun­nis­tei­siin). Jos tau­lu­kos­sa on se­los­te (cap­tion), se on yh­dis­tet­ty tau­luk­koon oh­jel­mal­li­ses­ti.
• Lo­mak­kei­den teks­ti­muo­toi­set ni­mi­la­put on yh­dis­tet­ty syö­te-ele­ment­tei­hin oh­jel­mal­li­ses­ti. Toi­siin­sa liit­ty­vät syö­te-ele­men­tit on ryh­mi­tet­ty – field­set/​​​le­gend. ARI­Aa voi­daan hyö­dyn­tää, jos stan­dar­di HTML ei tar­joa riit­tä­vän hy­viä kei­no­ja kun­nol­lis­ten ni­mi­lap­pu­jen ja oh­jei­den te­ke­mi­seen.
• Si­vun eri osiot on tun­nis­tet­tu käyt­täen joko HTML5-aluei­ta (re­gions – esi­mer­kik­si <hea­der>, <nav>, <main> ja <foo­ter>) tai ARIA-maa­merk­ke­jä (land­marks – esi­mer­kik­si role=”ban­ner”, ”na­vi­ga­tion”, ”main” ja ”con­ten­tin­fo”).

1.3.2 Mer­ki­tyk­seen vai­kut­ta­va jär­jes­tys (Taso A)

• Lu­ke­mis- ja na­vi­goin­ti­jär­jes­tys ovat loo­gi­sia ja in­tui­tii­vi­sia.
• Nämä mää­räy­ty­vät koo­din pe­rus­teel­la – lu­ke­mi­nen ja na­vi­goin­ti ta­pah­tu­vat sii­nä jär­jes­tyk­ses­sä kuin ne on esi­tet­ty HTML:ssä.

1.3.3 Ais­tin­va­rai­set omi­nais­piir­teet (Taso A)

• Oh­jeet si­säl­lön ym­mär­tä­mi­sek­si ja hal­lit­se­mi­sek­si ei­vät riipu pel­käs­tään ais­tin­va­rai­sis­ta omi­nais­piir­teis­tä ku­ten muo­dosta, koosta, vi­su­aa­li­sesta si­jain­nista, suun­nasta tai äänestä.
• Ei siis näin: ”Pai­na oi­keal­la yl­hääl­lä ole­vaa vih­re­ää ne­liö­tä” tai ”Kun kuu­let kel­lon ää­nen, voit jat­kaa”.

1.3.4 Asen­to (Taso AA)

• Si­säl­lön esit­tä­mi­sen kan­nal­ta ei ole vä­liä, kat­so­taan­ko sitä vaa­ka- vai pys­ty­asen­nos­sa, lu­kuun ot­ta­mat­ta sel­lai­sia ta­pauk­sia, jois­sa asen­to on olen­nai­nen.

1.3.5 Mää­rit­te­le syöt­teen tar­koi­tus (Taso AA)

• Käyt­tä­jä­tie­to­jen ke­rää­mi­seen tar­koi­tet­tu­jen syö­te­kent­tien tar­koi­tus voi­daan sel­vit­tää oh­jel­mal­li­ses­ti.
• Käytännössä: syö­te­ken­til­lä on au­tocomple­te-att­ri­buut­ti.

1.3.6 Mää­rit­te­le tar­koi­tus (Taso AAA)

• Si­vun eri osiot on tun­nis­tet­tu käyt­täen joko HTML5-aluei­ta (re­gions) tai ARIA-maa­merk­ke­jä (land­marks).
• Käyt­tö­liit­ty­mä­kom­po­nent­tien pa­rem­man tun­nis­ta­mi­sen apu­na on käy­tet­ty ARI­Aa.

Ohje 1.4 – Erot­tu­va

Auta käyt­tä­jiä nä­ke­mään ja kuu­le­maan si­säl­tö li­sää­mäl­lä taus­tas­ta erot­tu­va etua­la.

1.4.1 Vä­rien käyt­tö (Taso A)

• Vä­riä ei käy­te­tä ai­noa­na vi­su­aa­li­se­na kei­no­na vä­lit­tä­mään in­for­maa­tio­ta tai mer­ki­tys­tä eikä erot­ta­maan vi­su­aa­li­sia koh­tei­ta toi­sis­taan.
• Vä­riä ei käy­te­tä ai­noa­na kei­no­na erot­ta­maan link­ke­jä muus­ta ym­pä­röi­väs­tä teks­tis­tä, pait­si jos:
  • link­ki­teks­tin ja sitä ym­pä­röi­vän teks­tin tum­muus­kont­ras­ti on vä­hin­tään 3:1 ja
  • link­ki­teks­ti ero­te­taan ym­pä­röi­väs­tä teks­tis­tä myös muil­la ta­voil­la (esi­mer­kik­si link­ki­teks­tis­tä tu­lee al­le­vii­vat­tu), kun link­ki saa näp­päi­mis­tö­koh­dis­tuk­sen tai hii­ren koh­dis­tin vie­dään lin­kin pääl­le.

1.4.2 Au­dion kont­rol­loin­ti (Taso A)

• Käyt­tä­jäl­lä on jo­kin me­ka­nis­mi py­säyt­tää, kes­keyt­tää, vai­men­taa tai sää­tää voi­mak­kuut­ta au­to­maat­ti­ses­ti tois­tu­vil­le ää­nil­le, joi­den pi­tuus on yli 3 se­kun­tia.

1.4.3 Kont­ras­ti (mi­ni­mi) (Taso AA)

• Teks­tin (myös teks­tiä esit­tä­vät ku­vat) ja taus­tan vä­li­nen tum­muus­kont­ras­ti on vä­hin­tään 4,5:1.
• Iso­ko­koi­sen teks­tin (vä­hin­tään 18 pt / 24 px) tai li­ha­voi­dun (14 pt / 19 px) tekstin ja taus­tan vä­li­nen tum­muus­kont­ras­ti on vä­hin­tään 3:1.

1.4.4 Teks­tin koon muut­ta­mi­nen (Taso AA)

• Teks­tin ko­koa voi­daan suu­ren­taa 200 %:iin asti il­man si­säl­lön ja toi­min­nal­li­suu­den me­net­tä­mis­tä.
• Teks­tin ko­koa muu­te­taan se­lai­na­se­tuk­sis­ta il­man avus­ta­via tek­no­lo­gioi­ta.

1.4.5 Teks­tiä esit­tä­vät ku­vat (Taso AA)

• Ku­via ei saa käyt­tää teks­ti­muo­toi­sen si­säl­lön esit­tä­mi­seen, mi­kä­li sama vi­su­aa­li­nen esi­tys­ta­pa on mah­dol­li­nen käy­te­tyl­lä tek­no­lo­gial­la (esi­mer­kik­si HTML + CSS).
• Poikkeus: lo­go­tyy­pit, jois­sa teks­ti on osa lo­goa tai brän­din ni­meä.
• Jos si­vul­la on esi­mer­kik­si ku­va­muo­dos­sa ole­va teks­tiä si­säl­tä­vä in­fo­graa­fi, var­mis­ta että kaik­ki sii­nä ole­vat asiat on esi­tet­ty myös teks­ti­nä itse HTML:ssä.

1.4.6 Kont­ras­ti (pa­ran­net­tu) (Taso AAA)

• Tekstin (myös tekstiä esittävät kuvat) ja taustan välinen tummuuskontrasti on vähintään 7:1.
• Iso­ko­koi­sen teks­tin (vä­hin­tään 18 pt / 24 px) tai li­ha­voi­dun (14 pt / 19 px) tekstin ja taus­tan vä­li­nen tum­muus­kont­ras­ti on vä­hin­tään 4,5:1.

1.4.7 Hil­jai­nen taus­ta­ää­ni tai ei taus­ta­ään­tä (Taso AAA)

• Pu­het­ta si­säl­tä­vil­lä ää­ni­rai­doil­la ei ole taus­ta­ään­tä tai taus­ta­ää­ni on hy­vin hil­jai­sel­la, jot­ta puhe erot­tuu sel­keäs­ti.
• Poikkeukset: au­di­tii­vi­set CAPTC­HA-var­men­teet, au­dio­lo­got sekä musii­kil­li­set il­mai­sut ku­ten lau­lu.

1.4.8 Vi­su­aa­li­nen esi­tys­ta­pa (Taso AAA)

• Teks­ti­loh­kot tai enem­män kuin yh­den virk­keen si­säl­tä­vät teks­tit:
  • Ri­vit ovat enin­tään 80 merk­kiä pit­kiä.
  • Tekstiä ei ole ta­sat­tu sekä va­sem­paan että oi­ke­aan reu­naan.
  • Riviväli (rivin korkeus) on vähintään puolitoista riviä kappaleiden sisällä.
  • Kap­pa­lei­den vä­lit ovat vä­hin­tään puolitoista ker­taa suu­rem­mat kuin ri­vi­vä­lit.
  • Taus­ta­vä­ri ja edus­tan väri on mää­ri­tel­ty.
  • Si­vusuun­tais­ta vie­rit­tä­mis­tä ei tar­vi­ta, jos teks­tin koko kak­sin­ker­tais­te­taan.

1.4.9 Teks­tiä esit­tä­vät ku­vat (ei poik­keus­ta) (Taso AAA)

• Teks­tiä esit­tä­viä ku­via on käytetty vain ko­ris­tee­na tai kun tiet­ty teks­tin esi­tys­ta­pa on olen­nai­nen in­for­maa­tion vä­lit­ty­mi­sek­si.

1.4.10 Res­pon­sii­vi­suus (Taso AA)

• Sivu voi­daan esit­tää 320 CSS-pik­se­lin le­vyi­se­nä me­net­tä­mät­tä toi­min­nal­li­suut­ta tai si­säl­töä, eikä sivusuuntaista (horisontaalista) vierittämistä tarvita.
  • Jos si­vua voi­daan vie­rit­tää vain si­vusuun­nas­sa, si­säl­tö­jen tu­lee mah­tua korkeudeltaan 256 CSS-pik­se­liin.
• Käytännössä: verk­ko­si­vua voi se­la­ta ja si­säl­tö­jä pys­tyy lu­ke­maan il­man si­vusuun­tais­ta vie­rit­tä­mis­tä.
  • Suu­rin osa si­vul­la ole­vis­ta si­säl­löis­tä näy­te­tään kän­ny­kän näy­töl­lä al­lek­kain.
• Tämä mah­dol­lis­taa ruu­dun suu­ren­ta­mi­sen tie­to­ko­neel­la 400 %:iin asti il­man, että käyt­tä­jän tar­vit­see vie­rit­tää nä­ky­mää si­vusuun­nas­sa. Kri­tee­ri siis aut­taa eri­tyi­ses­ti ih­mi­siä, joil­la on heik­ko nä­kö­ky­ky.
• Esimerkkejä poikkeuksista: suu­ret tau­lu­kot, suu­ret ku­vat (kar­tat, ku­vaa­jat, yms.).

1.4.11 Ei-teks­ti­muo­toi­sen si­säl­lön kont­ras­ti (Taso AA)

• Seu­raa­van­lais­ten ele­ment­tien vi­su­aa­li­ses­sa esi­tys­ta­vas­sa kont­ras­ti­suh­de vie­rei­seen vä­riin/​​​vä­rei­hin on vä­hin­tään 3:1:
  • Käyttöliittymäkomponentit: Vi­su­aa­li­nen in­for­maa­tio, joka vaa­di­taan käyt­tö­liit­ty­mä­kom­po­nen­tin ja sen eri ti­lo­jen tun­nis­ta­mi­seen, lu­kuun ot­ta­mat­ta inak­tii­vi­sia kom­po­nent­te­ja tai sitä, jos käyt­tä­jä­agent­ti mää­rit­te­lee uu­den si­säl­lön vi­su­aa­li­sen esi­tys­ta­van ja si­säl­lön tuot­ta­ja ei ole sitä muo­kan­nut.
  • Graafiset objektit: Gra­fii­kan osat, joi­ta vaa­di­taan si­säl­lön ym­mär­tä­mi­sek­si, lu­kuun ot­ta­mat­ta ta­pauk­sia, jois­sa ul­koa­su on olen­nai­nen tie­to­si­säl­lön vä­lit­tä­mi­sek­si.
• Olen­nais­ta on, että esi­mer­kik­si ku­vak­keen olen­nai­nen si­säl­tö ja pai­nik­keen muo­to erot­tu­vat.
• Var­mis­ta, että syö­te­ken­tät erot­tu­vat sel­väs­ti muus­ta si­säl­lös­tä. Täl­lä py­ri­tään var­mis­ta­maan se, että vai­keas­ti heik­ko­nä­köi­nen käyt­tä­jä erot­taa sel­väs­ti, mis­sä syö­te­kent­tä on.

1.4.12 Teks­tin vä­lis­tys (Taso AA)

• Käyt­tä­jän pi­tää si­säl­tö­jä ja toi­min­nal­li­suu­tta me­net­tä­mättä voi­da mu­kaut­taa teks­tiä siten, että
  • ri­vi­vä­li on 1,5 ker­taa fon­tin ko­koi­nen
  • tyh­jä tila kap­pa­lei­den jäl­keen on 2 ker­taa fon­tin ko­koi­nen
  • kir­jain­ten väli on 0,12 ker­taa fon­tin ko­koi­nen
  • sa­no­jen väli on 0,16 ker­taa fon­tin ko­koi­nen.

1.4.13 Si­säl­tö osoit­taes­sa tai koh­dis­taes­sa (Taso AA)

• Jos osoit­ti­men vie­mi­nen ele­men­tin pääl­le tai koh­dis­tuk­sen siir­tä­mi­nen ele­ment­tiin tuo nä­ky­viin li­sää si­säl­töä ja osoit­ti­men tai koh­dis­tuk­sen pois siir­tä­mi­nen pii­lot­taa si­säl­lön, seu­raa­vat eh­dot pä­te­vät:
  • Piilotettavissa: on ole­mas­sa me­ka­nis­mi, jol­la nä­ky­viin tul­leen si­säl­lön saa pii­lo­tet­tua siir­tä­mät­tä osoi­tin­ta tai koh­dis­tus­ta, lu­kuun ot­ta­mat­ta ta­paus­ta, jos­sa si­säl­tö on syö­te­vir­hees­tä ker­to­va teks­ti tai se ei pei­tä tai kor­vaa muu­ta si­säl­töä.
  • Osoi­tet­ta­vis­sa: jos osoit­ti­men vie­mi­nen ele­men­tin pääl­le tuo nä­ky­viin uut­ta si­säl­töä, osoi­tin voi­daan vie­dä il­mes­ty­neen si­säl­lön pääl­le ai­heut­ta­mat­ta sen ka­toa­mis­ta.
  • Py­sy­vä: uusi si­säl­tö py­syy nä­ky­vis­sä kun­nes osoi­tin tai koh­dis­tus on siir­ret­ty pois, käyt­tä­jä on pii­lot­ta­nut si­säl­lön tai sen si­säl­tö ei enää päde.
• Poikkeus: käyt­tä­jä­agent­ti mää­rit­te­lee uu­den si­säl­lön vi­su­aa­li­sen esi­tys­ta­van, eikä si­säl­lön tuot­ta­ja ole sitä muo­kan­nut.

2. Hal­lit­ta­va

Ohje 2.1 – Käy­tet­tä­vis­sä näp­päi­mis­töl­tä

Var­mis­ta, että si­vus­toa voi­daan se­la­ta ja kaik­kia si­vus­tol­la ole­via toi­min­to­ja voi­daan käyt­tää pel­käl­lä näp­päi­mis­töl­lä il­man hiir­tä ja kos­ke­tus­ta.

2.1.1 Näp­päi­mis­tö (Taso A)

• Kaik­ki toi­min­nal­li­suus on käy­tet­tä­vis­sä näp­päi­mis­töl­tä kä­sin. (Kaik­kia link­ke­jä, pai­nik­kei­ta ja lo­ma­ke-ele­ment­te­jä voi käyt­tää pel­käl­lä näp­päi­mis­töl­lä.)
• Poikkeus: ta­pauk­set, jois­sa sa­man toi­min­non to­teut­ta­mi­nen ei ole mah­dol­lis­ta pel­käl­lä näp­päi­mis­töl­lä.
• Esi­mer­kik­si ham­pu­ri­lais­va­li­kot on vä­lil­lä to­teu­tet­tu si­ten, et­tei nii­tä voi käyt­tää pel­käl­lä näp­päi­mis­töl­lä.

2.1.2 Ei näp­päi­mis­tö­an­saa (Taso A)

• Näp­päi­mis­tön koh­dis­tus ei mil­loin­kaan lu­ki­tu si­vun mi­hin­kään ele­ment­tiin. Jos näp­päi­mis­töl­lä voi­daan siir­tyä jo­hon­kin si­vun ele­ment­tiin, sii­tä on mah­dol­lis­ta näp­päi­mis­tön avul­la myös pääs­tä pois.
• Käyt­tä­jää oh­jeis­te­taan, jos näp­päi­mis­tö­koh­dis­tin on siir­ret­tä­vis­sä ele­men­tis­tä jo­ten­kin muu­ten kuin ylei­sim­mil­lä ta­voil­la, joita ovat esi­mer­kik­si nuo­li­- tai esc-näp­päi­n tai sar­kai­n (tab).
• Esi­mer­kik­si pop up -ik­ku­nat on vä­lil­lä to­teu­tet­tu si­ten, et­tei nii­tä voi sul­kea pel­käl­lä näp­päi­mis­töl­lä.

2.1.3 Näp­päi­mis­tö (ei poik­keuk­sia) (Taso AAA)

• Kaik­ki toi­min­nal­li­suus on käy­tet­tä­vis­sä näp­päi­mis­töl­tä kä­sin il­man poik­keuk­sia.

2.1.4 Yh­den mer­kin pi­ka­näp­päi­met (Taso A)

• Jos si­säl­töön on to­teu­tet­tu näp­päi­noi­ko­tie, joka käyt­tää vain yhtä kir­jain- (mu­kaan ­lu­kien pie­net ja isot kir­jai­met), vä­li­merk­ki-, nu­me­ro- tai sym­bo­li­näp­päin­tä, vä­hin­tään yksi seu­raa­vis­ta pä­tee:
  • Pois pääl­tä: on ole­mas­sa me­ka­nis­mi, jol­la näp­päi­noi­ko­tien voi lait­taa pois pääl­tä.
  • Uu­del­leen­mää­rit­te­ly: on ole­mas­sa me­ka­nis­mi, jol­la näp­päi­noi­ko­tie voi­daan mää­ri­tel­lä uu­del­leen käyt­tä­mään yhtä tai useam­paa muok­kaus­näp­päin­tä (ctrl, alt jne.).
  • Ak­tii­vi­nen vain koh­dis­taes­sa: tie­tyl­le käyt­tö­liit­ty­mä­kom­po­nen­til­le tar­koi­tet­tu näp­päinoi­ko­tie on käy­tös­sä vain, kun koh­dis­tus on ky­sei­ses­sä kom­po­nen­tis­sa.
• Esi­mer­kik­si You­Tu­be-vi­deo­pal­ve­lus­sa on käy­tös­sä täl­lai­sia yh­den mer­kin pi­ka­näp­päi­miä, joi­den avul­la käyt­tä­jä voi muun muas­sa siir­tyä vi­deol­la eteen­päin, siir­tyä seu­raa­vaan vi­deoon tai muut­taa vi­deon tois­to­no­peut­ta.

Ohje 2.2 – Tar­peek­si ai­kaa

Anna käyt­tä­jil­le tar­peek­si ai­kaa lu­kea ja käyt­tää si­säl­töä.

2.2.1 Sää­det­tä­vä ajoi­tus (Taso A)

• Jos si­vul­la tai so­vel­luk­sel­la on ai­ka­ra­ja, käyt­tä­jäl­lä on mah­dol­li­suus kyt­keä ai­ka­ra­ja pois pääl­tä, sää­tää sitä tai pit­kit­tää sitä.
• Poikkeuksia: re­aa­liai­kai­set ta­pah­tu­mat (esi­mer­kik­si huu­to­kaup­pa), ti­lan­teet, jois­sa ai­ka­ra­ja on vält­tä­mä­tön, tai jos ai­ka­ra­jan pi­tuus on yli 20 tun­tia.

2.2.2 Tauo­ta, py­säy­tä, pii­lo­ta (Taso A)

• Käyt­tä­jä voi kes­keyt­tää, py­säyt­tää tai pii­lot­taa
  • au­to­maat­ti­ses­ti käyn­nis­ty­vän liik­ku­van, välk­ky­vän tai vie­ri­vän si­säl­lön (esi­mer­kik­si ka­rusel­lit, it­ses­tään rul­laa­vat teks­tit, ani­maa­tiot), jon­ka kes­to on yli 5 se­kun­tia
  • au­to­maat­ti­ses­ti päi­vit­ty­vän si­säl­lön (esi­mer­kik­si it­ses­tään päi­vit­ty­vän uu­tis­vir­ran), tai käyt­tä­jäl­lä on mah­dol­li­suus muut­taa päi­vi­tys­vä­lien ajoi­tus­ta.
• Vä­lil­lä si­vus­to­jen etusi­vuil­le on lai­tet­tu täl­lai­nen it­ses­tään pyö­ri­vä ka­rusel­li, jos­sa si­säl­löt vaih­tu­vat au­to­maat­ti­ses­ti. Näi­den koh­dal­la tu­li­si siis olla jon­kin­lai­nen pai­ni­ke, jol­la ne voi py­säyt­tää. Käyt­tä­jän pi­tää pys­tyä lu­ke­maan si­säl­löt omaan it­sel­leen so­pi­vaan tah­tiin.

2.2.3 Ei ajoi­tus­ta (Taso AAA)

• Si­säl­tö­jen lu­ke­mi­seen ja toi­min­to­jen te­ke­mi­seen ei ole an­net­tu ai­ka­ra­jaa.

2.2.4 Kes­key­tyk­set (Taso AAA)

• Käyt­tä­jä voi ly­kä­tä tai es­tää kes­key­tyk­set lu­kuun ot­ta­mat­ta hä­tä­ta­pauk­siin liit­ty­viä kes­key­tyk­siä.

2.2.5 Uu­del­leen tun­nis­tau­tu­mi­nen (Taso AAA)

• Kun to­den­net­tu is­tun­to van­hen­tuu, käyt­tä­jä voi tie­to­ja me­net­tä­mät­tä jat­kaa toi­min­toa uu­del­leen­tun­nis­tau­tu­mi­sen jäl­keen.

2.2.6 Ai­ka­kat­kai­sut (Taso AAA)

• Käyt­tä­jää va­roi­te­taan, jos käyt­tä­jän tie­to­ja voi ka­do­ta käyt­tä­jän inak­tii­vi­suu­den seu­rauk­se­na, pait­si jos tie­to­ja säi­ly­te­tään yli 20 tun­tia sen jäl­keen, kun käyt­tä­jä ei tee mi­tään.

Ohje 2.3 – Sai­raus­koh­tauk­set

Älä suun­nit­te­le si­säl­töä ta­val­la, jon­ka tie­de­tään ai­heut­ta­van sai­raus­koh­tauk­sia.

2.3.1 Kol­me vä­läh­dys­tä tai alle -raja-arvo (Taso A)

• Mi­kään si­vulla 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, vä­läh­dys­ten kont­ras­ti­suh­de on pie­ni ja vä­läh­tä­väs­sä si­säl­lös­sä ei ole pal­joa pu­nais­ta vä­riä.

2.3.2 Kol­me vä­läh­dys­tä (Taso AAA)

• Verk­ko­si­vut ei­vät si­säl­lä mi­tään, joka mil­loin­kaan vä­läh­täi­si useam­min kuin kol­me ker­taa se­kun­nis­sa.

2.3.3 Ani­maa­tio vuo­ro­vai­ku­tuk­sen yh­tey­des­sä (Taso AAA)

• Lii­kea­ni­maa­tio, joka on seu­raus­ta käyt­tä­jän vuo­ro­vai­ku­tuk­ses­ta, voi­daan lait­taa pois pääl­tä, pait­si ti­lan­teis­sa, jois­sa ani­maa­tio on olen­nai­nen käy­tön tai vä­li­tet­tä­vän in­for­maa­tion kan­nal­ta.

Ohje 2.4 – Na­vi­goi­ta­va

Tar­joa käyt­tä­jil­le ta­po­ja na­vi­goi­da, et­siä si­säl­töä ja mää­rit­tää si­jain­tin­sa.

2.4.1 Ohi­ta loh­kot (Taso A)

• Si­vu­nä­ky­män tois­tu­vat osiot (na­vi­gaa­tio­lin­kit yms.) on mah­dol­lis­ta ohit­taa jom­mal­la­kum­mal­la ta­val­la:
  • Te­ke­mäl­lä si­vu­nä­ky­män al­kuun ”Hyp­pää si­säl­töön” -link­ki, joka vie käyt­tä­jän suo­raan si­vu­nä­ky­män pää­si­säl­töön.
  • Käyttämällä kun­nol­lis­ta ja toi­mi­vaa ot­sik­ko­ra­ken­net­ta – ot­si­kot ovat myös oh­jel­mal­li­ses­ti tun­nis­tet­ta­vis­sa ot­si­koik­si <h1…h6>.

2.4.2 Si­vuot­si­kot (Taso A)

• Jo­kai­sel­la si­vu­nä­ky­mäl­lä on ku­vaa­va nimi (<tit­le>). Si­vun nimi mää­ri­tel­lään HTML:ssä head-osios­sa.
• Hyvä si­vuot­sik­ko ker­too ala­si­vun ot­si­kon sekä si­vus­ton ni­men. Esi­mer­kik­si ”Saa­vu­tet­ta­vuus – Pa­pu­net”.

2.4.3 Koh­dis­tus­jär­jes­tys (Taso A)

• Na­vi­goi­ta­vien ele­ment­tien (esi­mer­kik­si lin­kit ja lo­ma­ke­ken­tät) na­vi­goin­ti­jär­jes­tys on loo­gi­nen ja in­tui­tii­vi­nen.
• Ko­kei­le liik­kua si­vul­la käyt­täen näp­päi­mis­tön sar­kain-pai­ni­ket­ta (tab). Koh­dis­tuk­sen tu­li­si men­nä loo­gi­ses­sa jär­jes­tyk­ses­sä. Esi­mer­kik­si en­sin ban­ne­ri, ha­ku­toi­min­to, na­vi­gaa­tio, pää­si­säl­tö ja foo­ter.

2.4.4 Lin­kin tar­koi­tus (kon­teks­tis­sa) (Taso A)

• Jo­kai­sen lin­kin tar­koi­tus (eli mitä lin­kis­tä ta­pah­tuu) on mah­dol­lis­ta sel­vit­tää pel­käs­tä link­ki­teks­tis­tä tai link­ki­teks­tis­tä ja sitä ym­pä­röi­väs­tä kon­teks­tis­ta (esi­mer­kik­si sa­mas­sa kap­pa­lees­sa, lis­tas­sa tai tau­lu­kon so­lus­sa).
• Lin­kit, jois­sa on sama teks­ti ja jotka vie­vät eri si­vuil­le, ovat hel­pos­ti ero­tet­ta­vis­sa toi­sis­taan.
• Esi­mer­kik­si ”Lue li­sää” -link­kien koh­dal­la nii­tä edel­tä­vä teks­ti tai otsikko an­ta­a usein riit­tä­väs­ti viit­tei­tä sii­tä, mitä ky­sei­ses­tä lin­kis­tä ta­pah­tuu.

2.4.5 Usei­ta ta­po­ja (Taso AA)

• Verk­ko­si­vu on löy­det­tä­vis­sä si­vus­tol­ta vä­hin­tään kah­del­la eri ta­val­la, esi­mer­kik­si na­vi­gaa­tio­lin­keillä, ai­hee­seen liit­ty­vien si­vujen listalla, si­säl­lys­luet­te­lolla, si­vu­kart­alla tai si­vus­ton kat­ta­valla haulla.

2.4.6 Ot­si­kot ja ni­mi­la­put (Taso AA)

• Si­vul­la ole­vat ot­si­kot ja lo­mak­kei­den ni­mi­la­put (la­bel) ovat ku­vaa­via.
• Väl­tä sa­man­ni­mis­ten ot­si­koi­den ja ni­mi­lap­pu­jen käyt­töä, pait­si sil­loin, jos ne ovat ero­tet­ta­vis­sa toi­sis­taan asiayh­tey­den tai si­vu­ra­ken­teen pe­rus­teel­la.

2.4.7 Nä­ky­vä koh­dis­tus (Taso AA)

• Näp­päi­mis­tö­koh­dis­tin on koko ajan nä­ky­vis­sä si­ten, että on help­po ha­vai­ta, mikä ele­ment­ti on koh­dis­tet­tu­na.

2.4.8 Si­jain­ti (Taso AAA)

• Si­vun si­jain­ti si­vus­tol­la on il­mais­tu esi­mer­kik­si niin sa­no­tun mu­ru­po­lun avul­la tai ko­ros­ta­mal­la ak­tii­vi­sen osion ja si­vun link­ke­jä na­vi­gaa­tio­va­li­kos­sa.

2.4.9 Lin­kin tar­koi­tus (vain lin­kis­tä) (Taso AAA)

• Jo­kai­sen lin­kin tar­koi­tus on ku­vat­tu link­ki­teks­tis­sä.
• Si­vu­nä­ky­mäs­sä ei ole sa­man­ni­mi­siä link­ke­jä, jot­ka vie­vät eri paik­koi­hin.

2.4.10 Osioi­den ot­si­kot (Taso AAA)

• Si­vu­nä­ky­män eri osil­le on an­net­tu ku­vaa­vat ot­si­kot, jot­ta si­säl­lön lu­ke­mi­nen ja osioi­den vä­lil­lä liik­ku­mi­nen on hel­pom­paa.

2.4.11 Näkyvä kohdistin ei peity (minimi) (Taso AA)

• Kun käyttöliittymäkomponentti vastaanottaa näppäimistökohdistuksen, komponentti on ainakin osittain näkyvissä.

Näin voit testata:
Käy verkkosivun kaikki toiminnalliset kohteet sarkaimella (Tab-painike) läpi. Varmista, että pystyt ainakin osittain näkemään kaikki kohteet, jotka vastaanottavat näppäimistökohdistuksen.
Miksi se on tärkeää:
Näppäimistökäyttäjien tulee voida nähdä, missä kohdassa kohdistin on.

2.4.12 Näkyvä kohdistin ei peity (parannettu) (Taso AAA)

• Kun käyttöliittymäkomponentti vastaanottaa näppäimistökohdistuksen, yksikään komponentin osa ei ole piilossa tekijän luoman sisällön takia.

2.4.13 Näkyvän kohdistuksen ulkoasu (Taso AAA)

• Näppäimistön kohdistuksen ilmaisimen tulee olla riittävän hyvin näkyvissä.

• kohdistimen kontrasti suhteessa taustaan on riittävän suuri – vähintään 3:1 ja
• kohdistimen reunaviivat ovat riittävän paksut, jotta ne on helppo erottaa.

Ohje 2.5 – Syö­te­ta­vat

Tee toi­min­to­jen käyt­tä­mi­ses­tä käyt­tä­jil­le hel­pom­paa eri­lai­sil­la syö­te­ta­voil­la näp­päi­mis­tön li­säk­si.

2.5.1 Osoi­ti­ne­leet (Taso A)

• Toi­min­noil­le, joi­den suo­rit­ta­mi­nen vaa­tii mo­ni­pis­te-eleen (esi­mer­kik­si kah­den sor­men ni­pis­tys) tai reit­tiin pe­rus­tu­van eleen (esi­mer­kik­si raa­haus ja pyyh­käi­sy) käyt­töä, tu­lee tar­jo­ta vaih­toeh­toi­nen tapa suo­rit­taa sama toi­min­to. Kaik­kia toi­min­to­ja pi­tää voi­da käyt­tää ilman liikettä pai­na­mal­la yhtä koh­taa ruu­dul­la.
• Esi­mer­kik­si ku­va­ka­rusel­lia pi­tää voi­da pys­tyä käyt­tä­mään pai­na­mal­la vain yhtä pai­ni­ket­ta ruu­dul­la eikä pel­käs­tään pyyh­käi­se­mäl­lä näyt­töä. Sa­moin kart­taa tu­lee voi­da lii­kut­taa ja lä­hen­tää/​​​loi­ton­taa ruu­dul­la nä­ky­vien pai­nik­kei­den avul­la.
• Poikkeus: mo­ni­pis­te- tai reit­tiin pe­rus­tu­van eleen käyt­tä­mi­nen on ky­sei­sen toi­min­non suo­rit­ta­mi­sen kan­nal­ta olen­nais­ta.

2.5.2 Osoi­tin­lait­teel­la teh­dyn va­lin­nan pe­ruut­ta­mi­nen (Taso A)

• Ta­hat­to­man ak­ti­voin­nin vält­tä­mi­sek­si mi­kään käyt­tö­liit­ty­mäe­le­ment­ti ei sai­si ak­ti­voi­tua, kun hii­ren nap­pu­la pai­ne­taan alas tai sor­mi ase­te­taan kos­ke­tus­näy­töl­le. Ak­ti­voin­nin tu­li­si ta­pah­tua vas­ta, kun hii­ren nap­pu­la tai sor­mi nos­te­taan ylös.
• Jos tämä on kui­ten­kin toi­min­nan kan­nal­ta vält­tä­mä­tön­tä, täy­tyy tar­jo­ta kei­no teh­dyn toi­min­non pe­ruut­ta­mi­sek­si.

2.5.3 Ni­mi­lap­pu ni­mes­sä (Taso A)

• Teks­tiä si­säl­tä­vien käyt­tö­liit­ty­mä­kom­po­nent­tien (esi­mer­kik­si lin­kit ja pai­nik­keet) saa­vu­tet­ta­van ni­men (esi­mer­kik­si la­bel, alt-teks­ti tai aria-la­bel) pi­tää si­säl­tää kom­po­nen­tis­sa nä­ky­vä teks­ti.
• Jos esi­mer­kik­si pai­nik­kee­na toi­mi­vas­sa ku­vas­sa lu­kee vi­su­aa­li­ses­ti teks­ti ”Lä­he­tä”, tämän saman ”Lä­he­tä”-teks­tin tu­lee olla osa­na ky­sei­sen käyt­tö­liit­ty­mä­kom­po­nen­tin saa­vu­tet­ta­vaa ni­meä.
• Täl­lä var­mis­te­taan, että ky­seis­tä toi­min­toa on mah­dol­lis­ta käyt­tää myös pu­heel­la eli sa­no­mal­la ää­neen ky­sei­ses­sä toi­min­nos­sa nä­ky­vis­sä ole­va teks­ti.
• On suo­si­tel­ta­vaa si­joit­taa vi­su­aa­li­ses­ti nä­ky­vä teks­ti saa­vu­tet­ta­van ni­men al­kuun.

2.5.4 Käyt­tö liik­keen avul­la (Taso A)

• Toi­min­not, joi­ta käy­te­tään lii­kut­ta­mal­la lai­tet­ta (esi­mer­kik­si ra­vis­ta­mal­la, hei­lut­ta­mal­la, kier­tä­mäl­lä tai kään­tä­mäl­lä), tai jot­ka vaa­ti­vat käyt­tä­jän liik­ku­mis­ta (esi­mer­kik­si vil­kut­ta­mi­sta ka­me­ral­le), voi­daan ot­taa pois käy­tös­tä, jot­ta väl­te­tään toi­min­non ak­ti­voi­tu­mi­nen va­hin­gos­sa. Täl­lais­ten toi­min­to­jen suo­rit­ta­mi­seen on ol­ta­va jo­kin vaih­toeh­toi­nen tapa, joka toi­mi­i pe­rin­teis­ten oh­jaus­ta­po­jen kaut­ta (esi­mer­kik­si pai­nik­keilla).
• Poikkeus: lii­keoh­jaus on toi­min­non suo­rit­ta­mi­sen kan­nal­ta olen­nai­nen.

2.5.5 Koh­teen koko (Taso AAA)

• Hii­rel­lä kli­kat­ta­vien ja sor­mel­la pai­net­ta­vien aluei­den koko on vä­hin­tään 44 x 44 CSS-pik­se­liä.
• Poikkeukset:
  • Koh­de on saa­ta­vil­la jon­kin toi­sen, vä­hin­tään 44 x 44 CSS-pik­se­lin ko­koi­sen lin­kin tai kom­po­nen­tin kaut­ta.
  • Koh­de on virk­keen tai teks­ti­loh­kon si­säl­lä.
  • Koh­teen koko mää­räy­tyy käyt­tä­jä­agen­tin (esi­mer­kik­si verk­ko­se­lain) pe­rus­teel­la eikä si­säl­lön­tuot­ta­ja ole teh­nyt sii­hen muu­tok­sia – esi­mer­kik­si va­lin­ta­ruu­dut (check­box).

2.5.6 Rin­nak­kai­set syö­te­me­ka­nis­mit (Taso AAA)

• Verk­ko­si­säl­tö ei ra­joi­ta eri syö­te­ta­po­jen käyt­tä­mis­tä. Si­vus­ton pi­tää olla käy­tet­tä­vis­sä muu­ten­kin kuin esi­mer­kik­si pel­käs­tään kos­ke­tuk­sel­la tai pel­käs­tään näp­päi­mis­töl­tä.
• Poikkeukset: jo­kin tiet­ty syö­te­ta­pa on käy­tön kan­nal­ta joko olen­nais­ta, pa­kol­lis­ta si­säl­lön tur­val­li­suu­den vuok­si ja/​​​tai vaa­di­taan käyt­tä­jän ase­tus­ten nou­dat­ta­mi­sek­si.

2.5.7 Raahaamista vaativat toiminnot (Taso AA)

• Kaikki toiminnot, jotka käyttävät raahaamisliikettä, on mahdollista suorittaa yhdellä osoittimella ilman raahaamista, ellei raahaaminen ole välttämätöntä tai toiminnallisuus määräytyy käyttäjäagentin toimesta eikä sitä muokata tekijän toimesta.
• Huomautus: Tämä vaatimus koskee web-sisältöä, joka tulkitsee osoitintoimintoja (eli tämä ei koske toimintoja, jotka ovat välttämättömiä käyttäjäagentin tai apuvälineen käyttöön).

2.5.8 Kohdealueen koko (Taso AA)

• Toiminnallisten kohteiden (esimerkiksi linkit, painikkeet, ja lomake-elementit) koko on vähintään 24 x 24 CSS-pikseliä, paitsi kun:
  • Etäisyys: Jos sivulla on lähekkäin alle 24×24 CSS-pikselin kokoisia kohteita, kohteiden välillä tulee olla riittävästi tyhjää tilaa. Toiminnallisen kohteen keskipisteestä tulee olla vähintään 12 CSS-pikseliä lähimpään toiminnalliseen kohteeseen.
• Esimerkki: Vierekkäin on kolme sosiaalisen median kuvalinkkiä. Jokaisen kuvalinkin koko on 10 x 10 CSS-pikseliä. Näiden kuvalinkkien väliin on jätettävä tyhjää tilaa. Tämä voidaan tehdä esimerkiksi lisäämällä jokaisen kuvalinkin vasempaan ja oikeaan reunaan paddingia 6 CSS-pikseliä.
• Poikkeukset:
  • Toinen tapa: Jos samassa sivunäkymässä on kaksi kohdetta, jotka suorittavat saman toiminnon riittää, että vain toinen kohteista täyttää tämän kriteerin ehdot.
  • Sisäkkäinen: Kohde on lauseessa tai sen koko on muutoin rajoitettu tekstin rivikorkeuden toimesta.
  • Käyttäjäagentin hallinta: Kohdealueen koko määräytyy käyttäjäagentin toimesta eikä sitä muokata tekijän toimesta.
  • Oleellinen: Tietyn kohdealueen esitystapa on oleellinen tai laillisesti vaadittu tiedon välittämiseksi.

3. Ym­mär­ret­tä­vä

Ohje 3.1 – Luet­ta­va

Tee teks­ti­si­säl­lös­tä luet­ta­vaa ja ym­mär­ret­tä­vää.

3.1.1 Si­vun kie­li (Taso A)

• Si­vus­ton kie­li on mää­ri­tel­ty oh­jel­mal­li­ses­ti käyt­täen HTML lang-att­ri­buut­tia (esi­mer­kik­si <html lang=“fi-FI”>).

3.1.2 Osien kie­li (Taso A)

• Mi­kä­li si­vul­la on eri kie­lil­lä kir­joi­tet­tua teks­tiä, näi­den eri kie­lil­lä kir­joi­tet­tu­jen osuuk­sien kie­li on mää­ri­tel­ty erik­seen käyt­täen lang-att­ri­buut­tia (esi­mer­kik­si <blockquo­te lang=“en-US”>).

3.1.3 Epä­ta­val­li­set sa­nat (Taso AAA)

• Sa­noi­lle, jot­ka saat­ta­vat olla tul­kin­nan­va­rai­sia, mo­ni­mer­ki­tyk­sel­li­siä, vie­rai­ta tai joi­ta käy­te­tään poik­keuk­sel­li­sel­la ta­val­la, on ole­mas­sa mää­rit­te­ly ja se­li­tys.

3.1.4 Ly­hen­teet (Taso AAA)

• Vie­rai­den ly­hen­tei­den mer­ki­tys on ker­rot­tu vä­hin­tään jol­lain seu­raa­vis­ta ta­vois­ta:
  • Ly­hen­teen al­ku­pe­räi­nen muo­to on avat­tu sil­loin, kun sitä käy­tään en­sim­mäi­sen ker­ran.
  • Ly­hen­teen yh­tey­des­sä käy­te­tään HTML:ssä <abbr>-ele­ment­tiä.
  • Ly­hen­teen koh­dal­la on link­ki sa­nas­toon, jos­sa ly­hen­teen mer­ki­tys käy ilmi.

3.1.5 Teks­tin vai­keus­ta­so (Taso AAA)

• Kun teks­ti edel­lyt­tää pe­rus­kou­lun (tai vas­taa­van noin 9 vuot­ta kes­tä­vän kou­lun) vaa­ti­muk­set ylit­tä­vää lu­ku­tai­toa, tar­jol­la on täy­den­tä­vää si­säl­töä tai ver­sio, joka ei vaa­di pe­rus­kou­lun ta­soa edis­ty­neem­pää lu­ku­tai­toa.

3.1.6 Ään­tä­mys (Taso AAA)

• Jos sa­nan ään­tä­mi­nen on olen­nais­ta si­säl­lön ym­mär­tä­mi­sen kan­nal­ta, ky­sei­sen sa­nan ään­tä­mistapa on ker­rot­tu sa­nan yh­tey­des­sä tai tar­jol­la on link­ki, jos­ta löy­tyy tie­to, mi­ten ky­sei­nen sana ään­ne­tään.

Ohje 3.2 – En­na­koi­ta­va

Tee verk­ko­si­vuis­ta sel­lai­sia, että nii­den il­mia­su ja toi­min­ta ovat en­na­koi­ta­vis­sa.

3.2.1 Koh­dis­ta­mi­nen (Taso A)

• Kun verk­ko­si­vun jo­kin ele­ment­ti vas­taa­not­taa koh­dis­tuk­sen, sen seu­rauk­se­na
  • sivu ei mer­kit­tä­väs­ti muu­tu
  • pop­ up -­ik­ku­na ei avau­du
  • näp­päi­mis­tön koh­dis­tus ei siir­ry loo­gi­ses­ta pai­kas­taan
  • ei ta­pah­du mi­tään muu­ta muu­tos­ta, joka voi­si häm­men­tää tai di­so­rien­toi­da käyt­tä­jää.

3.2.2 Syö­te (Taso A)

• Kun käyt­tä­jä syöt­tää tie­toa tai muut­taa jon­kin verk­ko­si­vun ele­men­tin ase­tus­ta tai ar­voa, tä­män seu­rauk­se­na
  • sivu ei mer­kit­tä­väs­ti muu­tu
  • pop ­up -­ik­ku­na ei avau­du
  • näp­päi­mis­tön koh­dis­tus ei siir­ry loo­gi­ses­ta pai­kas­taan
  • ei ta­pah­du mi­tään muu­ta muu­tos­ta, joka voi­si häm­men­tää tai di­so­rien­toi­da käyt­tä­jää, el­lei täs­tä ole ker­rot­tu käyt­tä­jäl­le etu­kä­teen.

3.2.3 Joh­don­mu­kai­nen na­vi­goin­ti (Taso AA)

• Si­vus­tol­la ole­vien na­vi­gaa­tio­link­kien jär­jes­tys py­syy sa­ma­na eri si­vu­nä­ky­mien vä­lil­lä.

3.2.4 Joh­don­mu­kai­nen mer­kit­se­mi­nen (Taso AA)

• Sa­man toi­min­non to­teut­ta­vat ele­men­tit esi­te­tään verk­ko­pal­ve­lun eri si­vuil­la yh­den­mu­kai­ses­ti. Esi­mer­kik­si:
  • Sa­moi­hin toi­min­toi­hin liit­ty­viä graa­fi­sia sym­bo­le­ja (esim. tu­los­ti­men sym­bo­lia ja eri do­ku­ment­ti­tyyp­pien tun­nis­te­sym­bo­leja) käy­te­tään yh­den­mu­kai­ses­ti.
  • Ele­men­tit on ni­met­ty yh­den­mu­kai­ses­ti (esim. ha­ku­toi­min­nos­sa ”Hae” tai ”Etsi”, ei sa­mas­sa verk­ko­pal­ve­lus­sa mo­lem­pia).

3.2.5 Muu­tos pyy­det­täes­sä (Taso AAA)

• Kon­teks­tin muu­tok­set käyn­nis­ty­vät ai­noas­taan käyt­tä­jän pyyn­nös­tä tai tar­jol­la on me­ka­nis­mi tä­män tyyp­pis­ten muu­tok­sien pois­kyt­ke­mi­sek­si.

3.2.6 Johdonmukainen apu ja ohjeet (Taso A)

• Jos verkkosivu sisältää jotakin seuraavista avun mekanismeista ja mekanismit toistuvat useilla eri sivunäkymillä, niiden tulee esiintyä samassa suhteellisessa järjestyksessä muihin sivun sisältöihin nähden:
  • ihmisen yhteystiedot
  • ihmisen kontaktointimekanismi
  • itsepalveluvaihtoehto
  • täysin automatisoitu kontaktointimekanismi.
• Huomautus: Apumekanismeja voidaan tarjota suoraan sivulla tai ne voidaan tarjota suoran linkin kautta toiselle sivulle, jossa tieto sijaitsee.

Ohje 3.3 – Syöt­teen avus­ta­mi­nen

Auta käyt­tä­jiä vält­tä­mään ja kor­jaa­maan vir­hei­tä.

3.3.1 Vir­heen tun­nis­ta­mi­nen (Taso A)

• Lo­mak­kei­den syö­te­vir­hei­den ku­vaus esi­te­tään in­tui­tii­vi­sel­la ja saa­vu­tet­ta­val­la ta­val­la.
• Vir­heel­li­ses­ti täy­te­tyt lo­ma­ke­ken­tät ovat tun­nis­tet­ta­vis­sa.

3.3.2 Ni­mi­la­put tai oh­jeet (Taso A)

• Lo­mak­kei­den täyt­tä­mis­tä var­ten ja toi­min­nal­lis­ten ele­ment­tien käyt­tä­mi­seen on an­net­tu ku­vaa­vat ni­mi­la­put (la­bel), vih­jei­tä ja riit­tä­vät oh­jeet.

3.3.3 Vir­heen kor­jauseh­do­tus (Taso AA)

• Lo­mak­keis­sa ha­vait­tu­jen syö­te­vir­hei­den kor­jauseh­do­tuk­set esi­te­tään käyt­tä­jäl­le (mi­kä­li ne tun­ne­taan). Tämä kri­tee­ri laa­jen­taa kri­tee­riä 3.3.1 esi­mer­kik­si
  • eh­dot­ta­mal­la vaih­toeh­to­ja kor­jat­ta­vaan kent­tään
  • tar­joa­mal­la lis­tauk­sen kai­kis­ta hy­väk­syt­tä­vis­tä vaih­toeh­dois­ta.

3.3.4 Vir­hei­den en­nal­taeh­käi­sy (oi­keu­del­li­nen, ta­lou­del­li­nen, data) (Taso AA)

• Jos verk­ko­si­vul­la voi muo­ka­ta tai pois­taa la­kiin pe­rus­tu­vaa tie­toa, ta­lou­teen liit­ty­vää tie­toa tai lä­het­tää koe­vas­tauk­sia, ai­na­kin yksi seu­raa­vis­ta pä­tee:
  • Käyt­tä­jä voi pe­ruut­taa lä­he­tyk­sen.
  • Käyt­tä­jän syöt­tä­mä data tar­kas­te­taan syö­te­vir­hei­den va­ral­ta ja käyt­tä­jäl­le an­ne­taan mah­dol­li­suus vir­hei­den kor­jaa­mi­seen.
  • Käyt­tä­jäl­le an­ne­taan mah­dol­li­suus tar­kis­taa, vah­vis­taa ja kor­ja­ta lä­he­tet­tä­vä in­for­maa­tio.

3.3.5 Oh­jeet (Taso AAA)

• Saa­ta­vil­la on kon­teks­ti­sen­si­tii­vi­siä oh­jei­ta.

3.3.6. Vir­hei­den en­nal­taeh­käi­sy (kaik­ki) (Taso AAA)

• Jos käyt­tä­jä voi lä­het­tää in­for­maa­tio­ta, ai­na­kin yksi seu­raa­vis­ta pä­tee:
  • Käyt­tä­jä voi pe­ruut­taa lä­he­tyk­sen.
  • Käyt­tä­jän syöt­tä­mä data tar­kas­te­taan syö­te­vir­hei­den va­ral­ta ja käyt­tä­jäl­le an­ne­taan mah­dol­li­suus vir­hei­den kor­jaa­mi­seen.
  • Käyt­tä­jäl­le an­ne­taan mah­dol­li­suus tar­kis­taa, vah­vis­taa ja kor­ja­ta lä­he­tet­tä­vä in­for­maa­tio.

3.3.7 Tarpeeton toistaminen (Taso A)

• Tiedot, jotka käyttäjä on aiemmin syöttänyt tai jotka on annettu käyttäjälle, ja jotka on syötettävä uudelleen samassa prosessissa, ovat joko:
  • automaattisesti täytettyjä
  • saatavilla käyttäjän valittavaksi.
• Paitsi kun:
  • tiedon uudelleensyöttäminen on välttämätöntä
  • tiedot ovat tarpeen sisällön turvallisuuden varmistamiseksi
  • aiemmin syötetyt tiedot eivät ole enää voimassa.

3.3.8 Saavutettava todentaminen (Taso AA)

• Kognitiivisen toiminnon testi (kuten salasanan muistaminen tai pulman ratkaiseminen) ei ole vaadittu minkään autentikaatioprosessin vaiheessa, ellei kyseinen vaihe tarjoa ainakin yhtä seuraavista:
  • Vaihtoehtoinen tapa: Toinen autentikaatiomenetelmä, joka ei perustu kognitiivisen toiminnon testiin.
  • Avustava mekanismi: Käyttäjää avustava mekanismi kognitiivisen toiminnon testin suorittamisessa.
  • Esineiden tunnistus: Kognitiivisen toiminnon testi on esineiden tunnistamista. Esimerkiksi testi, jossa pyydetään käyttäjää valitsemaan kuvien joukosta kaikki kuvat, joissa näkyy liikennemerkki, on sallittu. Tällaisessa tapauksessa täytyy kuitenkin sisällyttää vaihtoehtoinen tapa (esimerkiksi äänen tunnistaminen) ihmisille, jotka eivät voi nähdä kuvia.
• Huomautus: Esimerkkejä kriteerin täyttävistä mekanismeista ovat:
  • salasanojen syöttämisen tuki salasananhallintaohjelmilla, mikä vähentää muistin tarvetta
  • kopioi ja liitä -toiminto, mikä vähentää kognitiivista kuormitusta uudelleenkirjoittamisen osalta.

Mitä tehdä:
Älä vaadi ihmisiä ratkaisemaan pulmia tai muistamaan  jotakin kirjautuakseen sisään.
Miksi se on tärkeää:
Joillakin henkilöillä, joilla on kognitiivisia rajoitteita, ei ole mahdollista ratkaista pulmia, muistaa käyttäjätunnusta ja salasanaa tai kirjoittaa uudelleen kertakäyttöisiä tunnuskoodeja.

3.3.9 Saavutettava todentaminen (parannettu) (Taso AAA)

• Kognitiivista toimintaa vaativa testi (kuten salasanan muistaminen tai pulman ratkaiseminen) ei ole vaadittu missään tunnistautumisprosessin vaiheessa, ellei siinä tarjota vähintään yhtä seuraavista:
  • Vaihtoehtoinen tapa: toinen tunnistautumismenetelmä, joka ei perustu kognitiivisen toiminnan testiin.
  • Avustava mekanismi: käyttäjää avustava mekanismi kognitiivisen toimintatestin suorittamisessa.

4. Lu­ja­te­koi­nen / Toi­min­ta­var­ma

Ohje 4.1 – Yh­teen­so­pi­va

Mak­si­moi yh­teen­so­pi­vuus ny­kyis­ten ja tu­le­vien asia­kas­oh­jel­mien kans­sa mu­kaan lu­kien avus­ta­vat tek­no­lo­giat.

4.1.1 Jä­sen­tä­mi­nen (vanhentunut ja poistettu) (Taso A)

• HTML/​​​XHTML ei si­säl­lä mer­kit­tä­viä vir­hei­tä – http://​​​va­li­da­tor.w3.org/
• Verk­ko­pal­ve­lun si­säl­tä­mä HTML­ on sel­lais­ta, että käy­tet­tä­vät pää­te­lait­teet, se­lai­met ja avus­ta­vat tek­no­lo­giat pys­ty­vät esit­tä­mään (jä­sen­tä­mään) sen oi­kein.

4.1.2 Nimi, roo­li, arvo (Taso A)

• Käyt­tö­liit­ty­mä­kom­po­nen­tit to­teu­tet­tu niin, että nii­tä voi­daan käyt­tää oh­jel­mal­li­ses­ti. Kri­tee­ri täyt­tyy au­to­maat­ti­ses­ti jos käy­te­tään HTML-/​​​XHTML-­mää­ri­tyk­sen mu­kais­ta koo­dia. Var­mis­te­taan, että eri käyt­tö­liit­ty­mä­kom­po­nen­tit an­ta­vat riit­tä­väs­ti tie­toa it­ses­tään avus­ta­vil­le tek­no­lo­gioil­le ja että nii­tä voi­daan käyt­tää eri oh­jain­lait­teil­la.
• Käyt­tö­liit­ty­mä­kom­po­nent­tien nimi ja roo­li voi­daan sel­vit­tää oh­jel­mal­li­ses­ti.
• Käyt­tä­jän aset­ta­mat ti­lat, omi­nai­suu­det ja ar­vot voi­daan aset­taa oh­jel­mal­li­ses­ti.
• Upo­te­tuil­la mul­ti­me­dia­si­säl­löil­lä on saa­vu­tet­ta­vat ot­si­kot/​​​ni­met.
  • Fra­me- ja ifra­me-koh­teil­la on ku­vaa­vat ni­met (tit­le). Näi­den koh­dal­la on hyvä tit­le-att­ri­buu­tin avul­la ker­toa me­dian tyyp­pi (esi­mer­kik­si vi­deo) sekä sen ot­sik­ko – esi­mer­kik­si ”Vi­deo – Joh­da­tus saa­vu­tet­ta­vuu­teen”

4.1.3 Ti­las­ta ker­to­vat vies­tit (Taso AA)

• Jos käyt­tä­jäl­le esi­te­tään tär­keä il­moi­tus­vies­ti eikä koh­dis­tus siir­ry au­to­maat­ti­ses­ti ky­sei­sen vies­tin koh­dal­le, vies­ti tu­lee to­teut­taa si­ten, että se lue­taan ää­neen ruu­dun­lu­kuoh­jel­mal­la.
• Tä­hän käy­te­tään tyy­pil­li­ses­ti ARIA-roo­lia alert- tai aria-live-att­ri­buut­tia.
• Täl­lai­sia vies­te­jä voi tul­la esi­mer­kik­si
  • lo­mak­kei­den vir­heil­moi­tuk­sis­sa (vir­heil­moi­tuk­set lue­taan käyt­tä­jäl­le au­to­maat­ti­ses­ti)
  • kun käyt­tä­jä vas­taa­not­taa vies­tin cha­tis­sa (näy­töl­le il­mes­ty­vä vies­ti lue­taan käyt­tä­jäl­le au­to­maat­ti­ses­ti)
  • kun käyt­tä­jä li­sää verk­ko­kau­pas­sa uu­den tuot­teen os­tos­ko­riin
  • jos käyt­tä­jän is­tun­to on päät­ty­mäs­sä ja hän­tä ol­laan kir­jaa­mas­sa ulos pal­ve­lus­ta.