Esok-verkosto

WCAG 2.0 -arviointityökalu

Artikkeli on HTML-versio PDF-muotoisesta aineistosta WCAG 2.0 -arviointityökalu Papunet-verkkopalveluyksikkö. Kehitysvammaliitto ry. 12.3.2013.

Sisältö

Johdanto

Tämä dokumentti sisältää W3C:n Web Content Accessibility Guidelines 2.0 -ohjeistuksen mukaan tehdyn, html-muotoisten verkkosivujen arviointityöhön tarkoitetun ohjelistan. Se ei ole toiseen muotoon tehty versio WCAG 2.0 -ohjeistuksesta: siinä on yksinkertaistettu joitain WCAG 2.0 -ohjeistuksen kriteereitä tai ilmaistu ne toisella tavalla sekä annettu ohjeita sivuston testaamiseen WCAG 2.0 -ohjeiden mukaan.

Joitain kriteereitä myös jaoteltu uudestaan, mutta dokumentin rakenne on yhteensopivuuden takia pidetty melko yhtenevänä WCAG2-ohjeistuksen kanssa. Kriteerin otsikon linkki vie WCAG 2.0 suomenkieliseen ohjeiseen. Taulukon ensimmäinen sarake sisältää viittauksen alkuperäiseen W3C:n ohjenumeroon.

Tätä ohjelistaa ei tule käyttää ainoana dokumenttina WCAG2 -ohjeistuksen mukaiseen verkkosivuston tarkistukseen, eikä tätä dokumenttia ole tehty korvaamaan tai täydentämään WCAG 2.0 -ohjeistusta. Käytä ohjelistaa HTML-muotoisen materiaalin tarkistuksen työkaluna ja viittaa viralliseen W3C:n tuottamaan dokumentaatioon. Tutustu WCAG 2.0 -ohjeistukseen ennen tämän dokumentin käyttöä sivustojen arviointityössä!

Lisäksi seuraavat asiat tulee huomioida:

  • WCAG 2.0 -ohjeistus kattaa laajasti verkkoympäristön eri tekniikat, se ei ole tarkoitettu ainoastaan HTML-muotoisen materiaalin validointiin. Tässa ohjelistassa painottuu erityisesti HTML-sisältö. Muutamassa kohdassa on myös viitattu sivuilta ladattaviin dokumenttityyppeihin (.pdf).
  • Dokumentissa on käyty läpi WCAG2 -ohjeistuksen tasot A ja AA, ei tasoa AAA.

Tähän ohjelistaan liittyy erillinen heuristiikkadokumentti, joka melko yhteneväinen tämän dokumentin kanssa. Siinä selite/lisäohje -kentän tilalla on tyhjä sarake kommentteja varten.

Lisäohjeita ja esimerkkejä tarkistuslistan käyttämisestä löytyy artikkelista Ohje verkkosivuston saavutettavuuden arviointiin PapuAccess. Sami Älli. 2013.

Idea tähän ohjelistaan on saatu WebAim.org-sivuston WCAG 2.0 -muistilistasta [http://webaim.org/standards/wcag/checklist].

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

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

NroAHeuristiikkaSelite/lisäohjeOK
1.1 A Käyttäjän kannalta olennaista informaatiota sisältäville kuville on annettu kuvaava ja riittävän informaation sisältävä tekstivastine. Yleensä tekstivastine annetaan kuvalle alt-atribuutin avulla.
Tekstivastineen informaatiosisällön riittävyyden arvioiminen saattaa joskun tuntua ongelmalliselta. Mieti asia näin: Mikäli luet tekstivastineen henkilölle, joka ei pysty näkemään kuvaa, tulee kuvan sisältö ja tarkoitus hänelle ymmärretyksi.
1.1 A 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.
1.1 A Käyttäjän kannalta epäolennaisille kuville on 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
1.1 A CAPTCHA tai muuta vastaavat ratkaisut on 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 [http://en.wikipedia.org/wiki/CAPTCHA] tarkoittaa kuvaa tai muuta elementtiä, jonka avulla testataan onko käyttäjä ihminen. Yleensä testinä on kuvana esitetty teksti, joka käyttäjän on toistettava tekstikenttään.
1.1 A Lomakkeiden kentillä on kuvaavat nimet (label). Jos label-elementtiä ei voida käyttää, käytetään title-attribuuttia.
1.1 A Kaikelle muulle ei-tekstimuotoiselle sisällölle on 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-tekstuaalinen sisältö on ensisijaisesti tarkoitettu aikaansaamaan tietty aistinvarainen kokemus, niin tekstivastineet tarjoavat vähintään kuvailevan tunnistetiedon ei-tekstuaalisesta sisällöstä.

1.2 Aikasidonnainen media: Tarjoa vastine aikasidonnaiselle medialle.

 

NroAHeuristiikkaSelite / lisäohjeOK
1.2.1 A Audiomuotoiselle sisällölle (podcastit, mp3-tiedostot ym.) on olemassa vastaavan informaation sisältävä tekstimuotoinen vastine. Huomioitavaa: Ei koske suoria (live) lähetyksiä.
1.2.1 A Audiomuotoiselle sisällölle (podcastit, mp3-tiedostot ym.) on olemassa vastaavan informaation sisältävä tekstimuotoinen vastine. Tämä kohta on relevantti vain mikäli video ei sisällä ääniraitaa.
Huomioitavaa: Ei koske suoria (live) lähetyksiä.
1.2.2 A Verkkosivuilla olevat videot (esimerkiksi YouTube -videot) on tekstitetty

Huomioitavaa:

  • 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.
1.2.3 A Verkkosivuilla oleville videoille on olemassa kuvaileva tekstivastine tai kuvaileva ääniselite, mikäli videon oma ääniraita ei sisällä riittävää informaatiota kaikesta videon sisällöstä.

Huomioitavaa:

  •  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ä.
1.2.4 AA Tahdistettu (synkronoitu) tekstitys tarjotaan kaikelle suoralle multimediasisällölle, jos sisällössä on ääntä.

Esimerkiksi:

  • äänilähetykset
  • webcastit
  • videoneuvottelut yms.
1.2.5 AA Erillinen kuvaileva ääniselite on tarjolla kaikelle videosisällölle, mikäli videon oma ääniraita ei sisällä riittävää informaatiota videon sisällöstä. Huomioitavaa: Mikäli kriteerissä 1.2.3 on valittu käytettäväksi kuvailevaa ääniselitettä, täyttyy kriteeri 1.2.5 automaattisesti.

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

NroAHeuristiikkaSelite / lisäohjeOK
1.3.1 A Käytetään HTML-kieltä verkkosivun elementtien merkitsemiseen.

Esimerkiksi:

  • Käytetään otsikoita (<H1>, <H2> …), listoja (<ul>, <ol>, <dl> ja tekstimääritteitä (<strong>, <code>, <abbr>, <blockquote>) ja käytetään niitä oikein
  • Käytetään taulukoita taulukkomuotoisen datan esittämiseen. Yhdistetään tarvittaessa taulukon solut oikeaan otsakkeeseen (header). Otsikoidaan (caption) taulukot jos tarpeellista ja käytetään yhteenvetoja (summary).
  • Yhdistetään nimilaput (label) lomakkeen syötekenttiin (input). Ryhmitellään lomakkeen kentät käyttäen fieldset- ja legend-elementtejä.

Huomioi myös ladattavien tiedostojen kriteerin mukainen toiminta. Esimerkiksi .pdf-tiedostot on otsikoitava oikein.
1.3.2 A HTML-koodin kautta määrittyvä sivun luku- ja navigaatiojärjestys on 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.
Testaa: 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 numeroidun kappaleet tai listat eivät ole loogisessa järjestyksessä, tämä kriteeri ei täyty.
1.3.3 A Verkkosivustolla esitettävien ohjeiden ymmärtäminen ei vaadi kykyä kuulla tai nähdä.

Esimerkiksi ei seuraavilla tavoilla:

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

1.4 Erottuva: Helpota käyttäjiä näkemään ja kuulemaan sisältö.

NroAHeuristiikkaSelite / lisäohjeOK
1.4.1 A Väri ei ole ainoa keino, jolla verkkosivun sisältö, elementit tai toiminnot erotetaan toisistaan.

Huomioitavaa:

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.2 AA Verkkosivulla on mekanismi äänen pysäyttämiseksi, keskeyttämiseksi, hiljentämiseksi tai sen voimakuuden säätämiseksi, mikäli se 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.
1.4.3 AA Tekstillä tai tekstiä esittävällä kuvalla kontrastisuhde on vähintään 4,5:1.
Isolla tekstillä (yli 18px tai 14px lihavoituna), kontrastisuhde on vähintään 3:1.

Kontrastivaatimusta ei ole:

  • logoille tai brändin nimille
  • koristekuville tai vastaaville sivuston käytön kannalta epäolennaisille elementeille

Huomioitavaa:

Verkosta löytyy useita hyviä kontrastisuhdeanalysaattoreita. Yksi hyvä on: http://webaim.org/resources/contrastchecker/
1.4.4 AA Verkkosivu on luettava ja sitä voidaan käyttää ilman ongelmia, mikäli tekstin kokoa kasvatetaan 200%.

Huomioitavaa:

 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.
1.4.5 AA  Kuvaa ei käytetä esittämään tekstiä, ellei se ole välttämätöntä

Kuvaa voidaan käyttää esimerkiksi:

  • logoissa
  • silloin, kun informaatiota ei saada välitettyä oikein tekstimuotoisena

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

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

NroAHeuristiikkaSelite / lisäohjeOK
2.1.1 A Sivun kaikki toiminnot ovat käytettävissä näppäimistön kautta. Poikkeuksena tekniikat, joita on mahdotonta suorittaa näppäimistöllä (esim. esimerkiksi vapaalla kädellä piirtäminen).
 Huomioitavaa: 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 A Näppäimistön fokus ei milloinkaan lukitu sivun mihinkään elementtiin.
Käyttäjä voi aina ja poikkeuksetta siirtyä kaikkiin (ja pois kaikista) sivun elementeistä.		 Huomioitavaa: Mikäli fokus on siirrettävissä elementistä jotenkin muuten kuin nuoli- tai tab-näppäimillä, tästä ohjeistetaan käyttäjää.
Testaa: 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.2 Tarpeeksi aikaa: Anna käyttäjille tarpeeksi aikaa lukea ja käyttää sisältöä.

NroAHeuristiikkaSelite / lisäohjeOK
2.2.1 A Jos sivulla tai sovelluksella on aikaraja, käyttäjän on 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.
2.2.2 A Automaattisesti käynnistyvä liikkuva, välkkyvä tai vierivä sisältö, voidaan käyttäjän toimesta keskeyttää, pysäyttää tai piilottaa.

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.
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.2 A Automattisesti päivittyvä sisältö voidaan käyttäjän toimesta keskeyttää, pysäyttää tai piilottaa tai käyttäjä voi manuaalisesti säätää sen päivittymistä.

Automaattisesti päivittyvä sisältö voi tarkoittaa esimerkiksi:

  • sivun uudelleenohjausta tai sivun päivittämistä
  • AJAX-tekniikan avulla päivittyvää kenttää tai ilmoitusta.

Poikkeus: 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 kanssan (vrt. edellisen kohdan jälkimmäinen esimerkki).

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

NroAHeuristiikkaSelite / lisäohjeOK
2.3.1 A Mikään sivun sisältö ei välky tiheämmin kuin 3 kertaa sekunnissa

Poikkeukset:

  • välkkyvä sisältö on kooltaan pieni
  • välähdysten kontrastisuhde on pieni
  • välähdysten sisältämä määrä punaista on rajattu.

Kriteerin täyttävä esimerkki: Sivuun upotetussa elokuvassa kirkas salaman välke on editoitu niin, että sen välkyntänopeus on enintään kolme kertaa sekunnissa.
Katso yleiset ohjeet välähdyksistä ja punaisten välähdysten raja-arvoista: http://www.w3.org/Translations/WCAG20-fi/#general-thresholddef .

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

NroAHeuristiikkaSelite / lisäohjeOK
2.4.1 A Sivulla on mahdollista avulla ohittaa verkkopalvelun  toistuvat rakenteet

Huomioitavaa:

  • Esimerkiksi hyppylinkkejä (“skip navigation -linkki”) voidaan käyttää.
  • Mikäli sivuilla on toimiva otsikointirakenne (headings), voidaan tätä pitää riittävänä tekniikkana hyppylinkkien sijaan. Kaikki selaimet eivät kuitenkaan tue otsikoiden avulla navigointia.
  • 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 stardardin alkuvaiheessa tue.
2.4.2 A Verkkosivuilla on kuvaavat ja informatiiviset otsikot (“Page title”). Erityisesti kannattaa välttää samojen otsikoiden käyttämistä sivuston eri sivuilla.
2.4.3 A Verkkosivun navigoitavien elementtien (linkit, lomake-elementit yms.) navigointijärjestys on looginen ja intuitiivinen.
 

Navigointijärjestyksen loogisuus voidaan useinmiten 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 tabindex-attribuutilla muutettu epäloogiseksi.
  • Navigoitavien elementtien epälooginen järjestys on CSS-tekniikan avulla muutettu loogiseksi. Koko navigaatiorakenteen (joka HTML-koodissa tulee sisällön jälkeen) voi sijoittaa tyylien avulla sisällön vasemmalle puolelle, jolloin näppäimistöltä käytettynä sisältöön siirrytään ensin. Tämä toimintatapa täyttää kriteerin.
  • 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.
2.4.4 A Jokaisen linkin tarkoitus voidaan selvittää yksin linkkitekstistä tai linkkitekstistä ja sen kontekstista yhdessä.

Linkkitekstin konteksti voi tarkoittaa esimerkiksi:

  • ympäröivää kappaletta
  • listaelementtiä
  • taulukon solua
  • taulukon otsikkoa

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 AA Verkkosivu on löydettävissä sivustolta useammalla kuin yhdellä tavalla.

Sivu löytyy vähintään kahdella tapaa esimerkiksi seuraavista vaihtoehdoista:

  • sivuston päänavigaatiorakenteesta
  • listasta, jossa on linkkejä tiettyyn sivuun
  • liittyvistä muista sivuista
  • sivuston sisällysluettelosta
  • sivustokarttasta
  • sivuston kattavan haun avulla.
2.4.6 AA  Otsikot (h1, h2, jne.) ovat kuvaavia ja informatiivisia Lomake- ja muiden vuorovaikutteisten toimintoelementtien nimilaput (labels) ovat kuvaavia ja informatiivisia. 
 On myös tärkeää, että otsikot ja nimilaput (labels) ovat erottelevia eli että ne eivät ole sekoitettavissa keskenään.
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 AA Käyttäjä näkee sen, missä verkkosivun elementissä näppäimistön fokus kulloinkin on.

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.


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.

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

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

NroAHeuristiikkaSelite / lisäohjeOK
3.1.1 A Verkkosivun kieli on määritetty. Yksinkertaisimmillaan HTML5-dokumentissa voidaan sivun kieli ilmoittaa html-tagissa näin: <html lang="fi">.
3.1.2 AA Mikäli verkkosivun jokin sisältöelementti esitetään sivulle määritetystä kielestä poiketen, kerrotaan tämä käyttäjälle  lang-attribuutilla (esim. <blockquote lang="se">).

 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.

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

NroAHeuristiikkaSelite / lisäohjeOK
3.2.1 A

Kun verkkosivun jokin elementti vastaanottaa fokuksen, sen seurauksena

  • sivu ei merkittävästi muutu
  • pop-up -ikkuna ei avaudu
  • näppäimistön fokus ei siirry loogisesta paikastaan
  • ei tapahdu mitään muuta muutosta, joka voisi hämmentää tai disorientoida käyttäjää
 Yksi esimerkki väärästä toimintatavasta ovat navigointirakenteina toimivat pudotusvalikot, jotka avaavat sivun tai uuden valikkotason heti fokuksen saatuaan. Tämä voidaan testata käymällä valikko näppäimistöä käyttäen.
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.
3.2.2 A

Kun käyttäjä syöttää tietoa tai on vuorovaikutuksessa jonkin verkkosivun elementin (esim. lomake-elementin) kanssa, 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ää webkalenterilomakkeeseen, 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 uusiin kenttiin 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 AA Verkkopalvelun useilla sivuilla toistuvien navigaatioelementtien linkkijärjestys ei muutu verkkopalvelun eri sivuilla.

Huomioitavaa: Tämä kriteeri ei millään tavalla 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

AA

 

Saman toiminnon toteuttavat elementit on tunnistettavissa 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).

3.3 Syötteen avustaminen: Auta käyttäjiä välttämään ja korjaamaan virheitä.

NroAHeuristiikkaSelite / lisäohjeOK
3.3.1 A Lomakkeiden syötevirheistä kerrotaan käyttäjälle ja virheen kuvaus esitetään tekstimuotoisena. Kuvaus myös kohdistetaan virheelliseen kohtaan.

Virhe voidaan kuvata esimerkiksi seuraavilla tavoilla:

  • Asiakaspuolen skriptauksen avulla toteutulla 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 label-elementissä)

Tekstimuotoisen informaation lisäksi muita tapoja kuvata ongelmaa on erittäin suositeltavaa käyttää (väri, muotoilu).
3.3.2 A Käyttäjää ohjeistetaan riittävästi silloin kun 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.
    Ensisijaisesti kannattaa käyttää lomakekentän label-elementtiä. Ohjeita ja esimerkkejä voi antaa myös esimerkiksi fieldset ja legend -elementtien avulla.
3.3.3 AA Jos lomakkeen syötevirhe havaitaan automaattisesti (asiakas- tai palvelinpuolella) ja korjausehdotukset tunnetaan, ehdotukset esitetään käyttäjälle.

Mikäli virheiden kuvaaminen vaarantaisi tietoturvan tai 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 AA Jos verkkosivulla voi muokata tai poistaa dataa, joka saattaa aiheuttaa lakiin perustuvia sitoumuksia, taloudellisia seuraamuksia tai lähettää käyttäjän testivastauksia, käyttäjä voi peruuttaa, tarkistaa tai vahvistaa lähettämänsä syötteen. Seuraavista vähintään yhden kohdan on toteuduttava, jotta kriteeri 3.3.4 täyttyy:
1.Lähetetty informaatio on peruttavissa.
2.Lähetetty informaatio tarkistetaan syötevirheiden varalta ja käyttäjälle tarjotaan mahdollisuus virheiden korjaamiseen.
3.Käytäjällä on mahdollista tarkistaa, vahvistaa ja korjata informaatio ennen lopullista lähettämistä.

4. Lujatekoinen - Sisällön pitää olla riittävän lujatekoinen.

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

NroAHeuristiikkaSelite / lisäohjeOK
4.1.1 A Vältetään merkittäviä HTML/XHTML- virheitä.

Sivu kannattaa aina tarkistaa esimerkiksi W3C:n validaattorilla: http://validator.w3.org/
Huomioitavaa: Virheet eivät välttämättä ole näkyviä graafisilla selaimilla, koska selaimet pyrkivät aina esittämään verkkosivun mahdollisimman hyvin virheistä huolimatta. Virheet saattavat kuitenkin estää sivuston käytön esimerkiksi ruudunlukuohjelmalla.
Tarkista ainakin seuraavat asiat:

  • 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ä.
4.1.2 A HTML-koodaus on kaikilta osin toteutettu niin, että verkkosivu on mahdollisimman saavutettava.

HUOM! Standardinmukainen HTML-koodi täyttää tämän vaatimuksen automaattisesti.
Huomioitavaa: Tämä kriteeri kohdentuu lähinnä tilanteisiin, joissa sivustolle on kehitetty omia käyttöliittymäkomponentteja. 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. 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.

Lähteet

  1. WCAG 2.0 -arviointityökalu Papunet-verkkopalveluyksikkö. Kehitysvammaliitto ry. 12.3.2013.
  2. Projekti saavutettavuuden arviointimallin kehittämiseksi PapuAccess. Sami Älli. 15.3.2013.

Muut lähteet