WCAG 2.0 -arviointityökalu

WCAG 2.0 -arviointityökalu 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 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 HTMLmuotoisen 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. A-taso on merkitty vaaleanvihreällä, AA-taso tummemmalla vihreällä. 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. Idea tähän ohjelistaan on saatu WebAim.org-sivuston WCAG 2.0 -muistilistasta [http://webaim.org/standards/wcag/checklist]. Tämä dokumentti on tuotettu helpottamaan WCAG 2.0 -ohjeistuksen käyttöä html-sivujen tarkistamistyössä. Copyright of the original 2010 W3C (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply for the original and the translation. @ Papunet-verkkopalveluyksikkö sivu 1

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. Nro A Heuristiikka Selite / lisäohje OK 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. 1.1 A Linkitetyillä kuvilla ja lomakkeiden kuvapainikkeilla on kuvaava tekstivastine tai -arvo. 1.1 A Käyttäjän kannalta epäolennaisille kuville on annettu määre alt="" tai toteutettu ne css-taustakuvana. 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. Mikäli kuva on linkin sisällä, on kuvan alt-attribuutin kuvattava linkin kohdetta. Kaikilla kontrollielementeillä (esim. lomakkeiden painikkeilla) on oltava kuvaava tekstivastine. 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 1.1 A CAPTCHA tai muuta vastaavat ratkaisut on toteutettu saavutettavasti. 1.1 A Lomakkeiden kentillä on kuvaavat nimet (label). 1.1 A Kaikelle muulle ei-tekstimuotoiselle sisällölle on annettu tekstivastine. Huomioitavaa: Kuvissa on aina oltava alt-määre, joko tyhjänä tai tekstisisällön omaavana. 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. Jos label-elementtiä ei voida käyttää, käytetään titleattribuuttia. 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ä. @ Papunet-verkkopalveluyksikkö sivu 2

1.2 Aikasidonnainen media: Tarjoa vastine aikasidonnaiselle medialle. Nro A Heuristiikka Selite / lisäohje OK 1.2.1 A Audiomuotoiselle sisällölle (podcastit, mp3-tiedostot ym.) on olemassa vastaavan informaation sisältävä tekstimuotoinen vastine. 1.2.1 A Videoille on olemassa vastaavan informaation sisältävä tekstimuotoinen vastine tai audiotiedosto. 1.2.2 A Verkkosivuilla olevat videot (esimerkiksi YouTube -videot) on tekstitetty. 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ä. 1.2.4 AA Tahdistettu (synkronoitu) tekstitys tarjotaan kaikelle suoralle multimediasisällölle, jos sisällössä on ääntä. 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: Ei koske suoria (live) lähetyksiä. Tämä kohta on relevantti vain mikäli video ei sisällä ääniraitaa. Huomioitavaa: Ei koske suoria (live) lähetyksiä. 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. 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ä. Esimerkiksi: äänilähetykset webcastit videoneuvottelut yms. 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ä. Nro A Heuristiikka Selite / lisäohje OK 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. @ Papunet-verkkopalveluyksikkö sivu 3

1.3.2 A HTML-koodin kautta määrittyvä sivun luku- ja navigaatiojärjestys on looginen ja intuitiivinen. 1.3.3 A Verkkosivustolla esitettävien ohjeiden ymmärtäminen ei vaadi kykyä kuulla tai nähdä. 1.4 Erottuva: Helpota käyttäjiä näkemään ja kuulemaan sisältö. Mikäli HTML/DOM -lähdekoodi on järjestykseltään looginen, täyttyy tämä kriteeri. Ei-looginen koodi on CSSasettelulla 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. Esimerkiksi ei seuraavilla tavoilla: "Klikkaa pyöreää kuviota jatkaaksesi" "Ohjeet löytyvät oikeasta palstasta yrityksen logon alapuolelta" "Voit jatkaa kuultuasi äänimerkin" Nro A Heuristiikka Selite / lisäohje OK 1.4.1 A Väri ei ole ainoa keino, jolla verkkosivun sisältö, elementit tai toiminnot erotetaan toisistaan. 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. 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. 1.4.4 AA Verkkosivu on luettava ja sitä voidaan käyttää ilman ongelmia, mikäli tekstin kokoa kasvatetaan 200%. 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. 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. 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/ 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. @ Papunet-verkkopalveluyksikkö sivu 4

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ä. 2.1.1 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). 2.1.2 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: Sivukohtaiset pikatoimintonäppäinyhdistelmät tai accesskey-ominaisuuden käyttäminen eivät saa häiritä selainten tai ruudunlukuohjelman näppäintoimintojen käyttöä. Accesskeyominaisuuden käyttäminen ei yleensä ole tarpeellista tai suositeltavaa. 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öä. 2.2.1 Jos sivulla tai sovelluksella on aikaraja, käyttäjän on mahdollista kytkeä aikaraja pois päältä, säätää sitä tai jatkaa sitä. 2.2.2 Automaattisesti käynnistyvä liikkuva, välkkyvä tai vierivä sisältö, voidaan käyttäjän toimesta keskeyttää, pysäyttää tai piilottaa. 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. 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ö @ Papunet-verkkopalveluyksikkö sivu 5

esitetään rinnakkain muun sisällön kanssa. 2.2.2 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ä. 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. 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. 2.3.1 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 rajaarvoista: http://www.w3.org/translations/wcag20-fi/#generalthresholddef 2.4 Navigoitava: Tarjoa käyttäjille tapoja navigoida, etsiä sisältöä ja määrittää sijaintinsa. 2.4.1 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. @ Papunet-verkkopalveluyksikkö sivu 6

2.4.2 Verkkosivuilla on kuvaavat ja informatiiviset otsikot ( Page title ). 2.4.3 Verkkosivun navigoitavien elementtien (linkit, lomake-elementit yms.) navigointijärjestys on looginen ja intuitiivinen. 2.4.4 Jokaisen linkin tarkoitus voidaan selvittää yksin linkkitekstistä tai linkkitekstistä ja sen kontekstista yhdessä. 2.4.5 Verkkosivu on löydettävissä sivustolta useammalla kuin yhdellä tavalla. 2.4.6 Otsikot (h1, h2, jne.) ovat kuvaavia ja informatiivisia. HTML5-standardi mahdollistaa navigaatiorakenteiden tunnistamisen nav-elementin avulla. Tätä eivät kaikki selaimet ainakaan stardardin alkuvaiheessa tue. Erityisesti kannattaa välttää samojen otsikoiden käyttämistä sivuston eri sivuilla. 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 CSStekniikan 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. 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. 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 On myös tärkeää, että otsikot ja nimilaput (labels) ovat erottelevia eli että ne eivät ole sekoitettavissa keskenään. @ Papunet-verkkopalveluyksikkö sivu 7

Lomake- ja muiden vuorovaikutteisten toimintoelementtien nimilaput (labels) ovat kuvaavia ja informatiivisia. 2.4.7 Käyttäjä näkee sen, missä verkkosivun elementissä näppäimistön fokus kulloinkin on. 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. 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ää. 3.1.1 Verkkosivun kieli on määritetty. Yksinkertaisimmillaan HTML5-dokumentissa voidaan sivun kieli ilmoittaa html-tagissa näin: <html lang="fi">. 3.1.2 Mikäli verkkosivun jokin sisältöelementti esitetään sivulle määritetystä kielestä poiketen, kerrotaan tämä käyttäjälle langattribuutilla (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. 3.2.1 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ää 3.2.2 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 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. 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ä @ Papunet-verkkopalveluyksikkö sivu 8

ei tapahdu mitään muuta muutosta, joka voisi hämmentää tai disorientoida käyttäjää, ellei tästä ole kerrottu käyttäjälle etukäteen. 3.2.3 Verkkopalvelun useilla sivuilla toistuvien navigaatioelementtien linkkijärjestys ei muutu verkkopalvelun eri sivuilla. 3.2.4 Saman toiminnon toteuttavat elementit on tunnistettavissa verkkopalvelun eri sivuilla johdonmukaisesti. kerrottava käyttäjälle lomakkeen alussa, jotta tämä kriteeri täyttyy. 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. 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ä. 3.3.1 Lomakkeiden syötevirheistä kerrotaan käyttäjälle ja virheen kuvaus esitetään tekstimuotoisena. Kuvaus myös kohdistetaan virheelliseen kohtaan. 3.3.2 Käyttäjää ohjeistetaan riittävästi silloin kun hänen edellytetään syöttävän tietoa verkkopalveluun. 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 labelelementissä) Tekstimuotoisen informaation lisäksi muita tapoja kuvata ongelmaa on erittäin suositeltavaa käyttää (väri, muotoilu) 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 @ Papunet-verkkopalveluyksikkö sivu 9

3.3.3 Jos lomakkeen syötevirhe havaitaan automaattisesti (asiakas- tai palvelinpuolella) ja korjausehdotukset tunnetaan, ehdotukset esitetään käyttäjälle. 3.3.4 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. -elementtien avulla. 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 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ä. 3. Lujatekoinen - Sisällön pitää olla riittävän lujatekoinen. 4.1 Yhteensopiva: Maksimoi yhteensopivuus nykyisten ja tulevien asiakasohjelmien kanssa, mukaan lukien avustavat teknologiat. 4.1.1 Vältetään merkittäviä HTML/XHTML- virheitä. Sivu kannattaa aina tarkistaa esimerkiksi W3C:n validaattorilla: http://validator.w3.org/ 4.1.2 HTML-koodaus on kaikilta osin toteutettu niin, että verkkosivu on mahdollisimman saavutettava. 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ä. 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. @ Papunet-verkkopalveluyksikkö sivu 10