Esteettömyyden arviointi

Sisällysluettelo

Johdanto

Tämän dokumentin tarkoitus on tarajota suhteellisen suoraviivainen tapa arvioida verkkosisvuston esteettömyyttä. Käytännön tasolla sivustoa sanotaan esteettömäksi jos se täyttää tietyn kriteeristön. Kattavin kriteeristö on tällä hetkellä World Wide Web Consortiumin (W3C) Web Accessibility Initiative (WAI) -työryhmän julkaisema 65-kohtainen lista esteettömän verkkosivuston suunnitteluperiaatteista.

WAI-ohjeita täydentämään on nostettu Näkövammaisten Keskusliiton julkaisemat Näkövammaistahojen testausohjeet verkkosivuille. Lähinnä kuriositeetin vuoksi, on mainittu myös Yhdysvaltain Section 508 – lain verkkopalveluihin kohdistuvan osan kriteerit. Käytännön esimerkit tulevat e.m. lähteiden lisäksi omista kokemuksista.

Esteettömyyden arvioinnissa verrataan suunnitteluohjeita sivustoon ja tarkastellaan miten sivusto täyttää ohjeissa määritellyt säännöt. Osa säännöistä on tarkastettavissa koneellisesti, mutta osa vaatii tällä hetkellä vielä inhimillistä päättelyä ja tulkintaa. Tässä ohjeessa ei käytetä ns. automaattisia esteettömyyden arviointityökaluja. Tämä on puhtaasti luottamus- ja käytettävyyskysymys. Tähän mennessä kokeilemani esteettömyyden arviointityökalut ovat läpinäkymättömiä, epäkäytettäviä ja tuottavat kryptisiä tuloksia. Esteettömyystyökalujen sijaan on pyritty valitsemaan sellaisia työkaluja, jotka ovat kohtuullisen helposti ja ilmaiseksi käytettävissä.

Verkkosivujen esteettömyyden tarkastaminen ei ole ollenkaan esteetöntä tai helppokäyttöistä puuhaa. Arviointeja tekevien täytyy osata aika lailla sivujen teknisestä toteutuksesta ja tehdä tulkintoja ohjeviidakossa, jossa ei aivan varmasti voi tietää mihin voi luottaa tai miten jostain asiasta voi oikeasti varmistua. Nämä ohjeet on kirjoitettu ensisijaisesti kolleegoilleni, käytettävyysihmisille, jotka, ainakin osaksi, ovat aika epäteknisiä ihmisiä. Siksi ohjeet on paikoitellen kirjoitettu aika perusteellisesti. Valinta on tehty ihan työmenetelmän kehittämisen ja palautteen varmistamisen takia.

Tätä arviointimenetelmää on testattu ja korjattu kertaalleen. Jossain vaiheessa työskentelyä tulee suuresti helpottamaan arviointilomakkeen verkkoversio ja sitä myöten automatisoitavissa oleva raportin kokoaminen. Kommentit, korjausvaatimukset ja parannusehdotukset voi lähettää osoitteeseen: laura.turkki@adage.fi.

Lyhyesti arviointiohjeesta

Ohjeiden avulla on tarkoitus selvittää:

  1. Sivuston esteettömyysongemat (ei ok)

  2. Kunnossa olevat potentiaaliset ongelmakohdat (ok)

  3. Ohjeiden kohdat, joihin liittyviä potentiaalisesti ongelmallisia tekniikoita tarkastelluilla sivuilla ei ole. (n/a)

Sivuston läpikäyminen on jaoiteltu tarkastelutapojen ja tarkastettavien kohtien mukaan. Näin tehtävien tekemiseen liittyvät sivut käydään läpi systemaattisesti, muutama kohta kerrallaan.

Jokaisen työkalun/tarkastettavan kohdan kohdalla kerrotaan:

Arvioinnissa käytettävät työkalut ja niiden asetusten käyttöohjeet löytyvät liitteestä 1.

Arviointi koostuu seuraavista vaiheista:

  1. Käy tehtävä läpi arvioimatta ensin läpi jollain graafisella selaimella (Mozilla, IE, Opera tai Netscape) ja pura ne yksittäisiksi sivuiksi (Ks. Taulukko 1).
    1. Lisää arviointipohjaan rivejä jos tehtäviä tehdessä harhailet vielä muille sivuille.
  2. Käy läpi tehtävät läpi työkaluittain:
    1. Tee tekniset validoinnit
    2. Käy tehtävät läpi Opera-selaimella
    3. Katso sivuja omien tyylitiedostojen kanssa
    4. Käy tehtävät läpi IE-selaimella
    5. Käy tehtävät läpi ilman hiirtä
    6. Käy tehtävät läpi haluamallasi graafisella selaimella
    7. Käy tehtävät läpi tekstiselaimella ja tee läpikäynnistä oma taulukko (Ks. Taulukko 3).
    8. Varmista tyypilliset ongelmakohdat
    9. Varmista muutama kohta lähdekoodista
    10. Käy ”vaikeat kohdat” läpi yhdessä sivuston teknisen suunnittelijan kanssa
  3. Tee kohdat 1-3 kaikille tehtäville
  4. Kokoa yhteen kaikkien tehtävien tulokset

Arvioitaessa esteettömyyskohtia ei käydä asioita läpi tärkeysjärjestyksessä vaan sujuvuusjärjestyksessä. WAI-ohjeiden tärkeysjärjestys A, AA ja AAA-tasoineen on merkitty jokaiseen ohjeen kohtaan, joten jos haluat tarkastella vain A-tason kohtia, jätä muut huomiotta.

Sisältö

Arviointiohjepaketti sisältää seuraavat tiedostot:

Merkintätavoista ja termeistä

Esteettömyysarvioinnin suhde käytettävyyden arviointiin

Vaikka käytettävyys ja esteettömyys ovat osaksi päällekäisiä, ollaan tällä hetkellä vielä tilanteessa, jossa sivusto voi olla esteetön, muttei käytettävä ja päinvastoin. Käytettävyysarvioinneissa, joko asiantuntija-arviointeina tai käyttäjien kanssa otetaan laajemmin kantaa sivuston toiminnalliseen järkevyyteen, rakenteeseen ja toteustapaan ihmisen muistin, havaitsemisen ja oppimisen suhteen. Esteettömyysohjeiden kaltaista yleispätevää tarkastuslistaa on hankalaa laatia käytettävyysasioista, koska eri sovellusten käytettävimmät ratkaisut riippuvat kontekstista. Kohdat, jotka otetaan huomioon perinteidessä käytettävyyden arvioinnissa on merkitty lyhenteellä KA- käytettävyyden arviointi.

WAI:sta lyhyesti

WAI-ohjeissa huomioonotettavat käyttäjäryhmät määritellään seuraavasti:

WAI-ohjeet verkossa:

NKL ohjeista lyhyesti

Näkövammaistahot, Näkövammaisten koulutus- ja kehittämiskeskus Arlainstituutti, Celia Näkövammaisten kirjasto  ja Näkövammaisten Keskusliitto ovat yhteistyössä tuottaneet selkeät testausohjeet näkövammaisten käyttäjien huomioon ottamiseksi.

Näkövammaistahojen testausohjeet verkkosivuille ja –palveluille verkossa:

Section 508 laista lyhyesti

Disability Act Section 508 verkkopalveluihin kohdistuvan osan (§ 1194.22) kriteereihin viitataan myöhemmin merkinnällä 508x, jossa x merkitsee kappaleen kirjainta.

508-kotisivut:

Arvioinnin alkutoimet

Testattavan alueen määrittely

  1. Valitse 1-5 sivustolla tyypillisesti suoritettavaa tehtävää. Tehtävät ovat askeleita, jotka auttavat käyttäjää pääsemään kohti lopullista tavoitetta. Esimerkiksi jos käyttäjä haluaa Seinäjoelle kyläilemään, voi tehtävänä olla Seinäjoelle menevän junan aikataulun ja lipun hinnan selvittäminen.
  2. Kun tehtävät on valittu, käy ne läpi graafisella selaimella. Tehtävän aikana vieraillut sivut muodostavat läpikäytävät sivut. Kirjaa ylös:
    1. Sivun nimi (Nimi , jolla sivu on myöhemmin tunnistettavissa)

    2. Miten sivulta pääsee eteenpäin

    3. Sivun osoite

    4. Dokumentin otsikko (eli title).

Sivun nimi ja osoite kirjataan ylös, jotta arvioija pysyy kärryllä läpikäydyistä sivuista sekä ongelmakohdista. Tehtävässä eteneminen kirjoitetaan ylös erikseen, koska sitä voi käyttää pohjana ns. kognitiiviselle läpikäynnille, jolla tarkastellaan tehtävän suorittamiseen liittyvien elementtien havaitsemista, tunnistamista ja loogisuutta. Esimerkki tehtävästä Taulukko 1. Tekstiselaimelle etenemistaulukko on tehtävä erikseen (Ks. kohta TekstiselainTekstiselain).

Tehtävä: selvitä miten Helsingistä pääsee Seinäjoelle to 19.9.2002 klo 16 jälkeen.
Sivun nimi Miten pääsee eteenpäin Sivun osoite (URL)
Etusivu Kaukoliikenne –linkki www.vr.fi
VR Henkilöliikenne etusivu Aikataulut ja hinnat –linkki http://www.vr.fi/heo/heo.htm
VR Matkahaku Syötä tiedot, paina Hae aikataulu -nappia http://www.vr.fi/heo/heo.htm

Taulukko 1 Esimerkki VR:n sivuston tyypillisestä tehtävästä ja purkamisesta sivuiksi (www.vr.fi)

Huom1. Kuten esimerkkitaulukon osoitekentästä huomataan tällä sivustolla käytetään kehyksiä, jolloin sivun osoite ei ensimmäisen sivun jälkeen enää päivity.

Huom2. Jos jollain sivulla aukeaa pop-up (uusia pikkuikkunoita), ne kannattaa nimetä erikseen tyyliin: pop-up + otsikko.

Raportointi

Kirjaa tehtävä ja sen vaiheet kirjataan arviointipohjan läpikäytävät sivut- välilehdelle. Näiden lisäksi kirjoita ylös selaimen yläreunassa (tummansinisellä pohjalla) näkyvä sivun otsikko (title). Sivun otsikon esiinkaivamiseen on useita tapoja (Ks. Sivun title-elementin kuvaavuus (NKL-ohje 1))

Perustelut tehtäväpohjaiselle lähestymistavalle

Kokonaisten sivustojen kaikkien sivujen läpikäynti on hidasta ja, varsinkin ulkopuolista arvioijaa käytettäessä, kallista. Yksittäisten sivujen arvioinnissa eivät toiminnallisuuden ja navigoinnin ongelmat ole myöskään niin selvästi näkyvissä kuin toimintasarjoja tehdessä. Tämän takia arvioitava alue määritellään sivustolle tyypillisten tehtävien, kuten varauksen tai ostoksen tekemisen tai yhteys- ja hintatietojen hakemisen, kautta. Tehtävät voivat olla niitä toimintoja, joita on (toivottavasti) käytetty sivuston suunnittelun pohjana.

Muita määrittelytapoja

Kattavammassa läpikäynnissä käytäisiin läpi kaikki erilaiset sivutyypit ja päätasojen etusivut ja kaikki potentiaaliset etusivut. Sopivasta läpikäytävien sivujen laajuudesta kannattaa päättää yhdessä arvioinnin tilaajan kanssa.

Arviointipohjan käyttö

Arvioinnin aikana tehdyt huomiot kerätään arviointipohja_AAA.xls -tiedostoon, jonka pohjalta voidaan tarvittaessa kirjoittaa raportti. Jos tarkastellaan omia sivuja, eikä virallista raporttia tarvita, excell-tiedosto toimii hyvin muistilistana.

Arviointipohja vastaa näitä ohjeita ja ne onkin suunniteltu käytettäväksi vierekkäin. Arviointipohja on jaettu 15:ksi välilehdeksi, joissa jokaisessa käytetään tiettyä tarkastelutapaa. Toiseksi viimeisenä välilehtenä on yhteenvetosivu, johon arvioinnin aikana kerätyt huomiot kootaan.

Raportoi kukin ongelma kerran

Arvioinnin tehostamiseksi oletetaan ongelmat systemaattisiksi. Tämä tarkoittaa esim. sitä, että samaa rakenteellista ongelmaa ei tarvitse raportoida kuin kerran, mutta kaikki huonot tekstivastineet kuville raportoidaan erikseen, jotta tekijä voi korjata ne helposti myöhemmin.

Arvioinnin tekeminen

Tekniset validoinnit

Teknisissä validoinnissa pyritään varmistamaan, että koodi on halutun koodimäärittelyn mukaista. Esimerkiksi HTML-koodista on useita toisistaan hiukan poikkeavia versioita. Apuvälineiden ja selainten tuottamat tulkinnat verkkodokumenteista (eli sivuista) riippuvat koodista. Huolimaton ja määritelmistä poikkeava koodi aiheuttaa hankaluuksia selaimille ja apuvälineille, kuten ruudunlukuohjelmille.

Koodin validius (WAI-ohje: 1.1 (A), 3.1 (AA), 3.2 (AA), 3.6(AA) NKL-ohje 14, 508a)

Koodilla määritellään html-dokumentin rakenne.

Arviointi

Koodin kelpoisuuden arvioimiseen tarvitset sivun osoitteen. (Sivun voi myös ladata arvioitavaksi omalta koneelta). Validointi kannattaa suorittaa joko W3C:n omalla validaattorilla (http://validator.w3.org/).

Tarkastelun tulos kirjataan koodin-validointi - välilehdelle, kohtaan ”koodin validius.

Validaattoritestin tulos kohtaan koodin validius voi olla joku seuraavista:

  1. Sivun koodi on standardinmukaista. Hyvä. Kirjaa: ok

  2. Käytettyä koodaustapaa ei ole ilmoitettu. Sivua ei voi validoida, koska dokumentin tyyppiä (Document Type declaration) ei ole ilmoitettu. Tällöin validaattori ei tiedä mihin standardiin verrata sivun koodia. Kirjaa: ei määritelty DTD:tä (WAI-ohje 3.1)

  3. Sivun koodissa on virheitä eli se ei noudata standardia. Listataan virheet jos niitä ei ole monta. Jos virheitä on paljon, kannattaa sivukohtainen tarkastelu validaattorilla tehdä korjausvaiheessa. Kirjaa: Virheitä ja muutama esimerkkivirheistä

    1. Jos validaattori ilmoittaa ” document type does not allow element "LI" here; missing one of "UL", "OL", "DIR", "MENU" start-tag” kyseessä on todennäköisesti väärin merkitty lista. (WAI-ohje 3.6) Kirjaa huomiosi Listojen merkintä ok/ei – kohtaan.

    2. Jos jokin validaattorin tuloksista on tyyliä ” Line 85, column 79: required attribute "ALT" not specified”, tarkoittaa tämä sitä, että kuville ei ole määritelty tekstivastinetta. Kirjaa huomiot Puuttuvat alt-tekstit kohtaan.

Tyylitiedostojen validointi (WAI-ohje: 3.3 AA)

Tyylitiedostoilla hallitaan sivujen ulkoasua. Myös tyylitiedostojen tulee olla standardinmukaisia.

Arviointi

Tyylitiedoston tarkastamiseen tarvitset sen osoitteen. (Tiedoston voi ladata tarkistettavaksi myös omalta koneelta). Validaattori löytyy osoitteesta: http://jigsaw.w3.org/css-validator/.

Tarkastelun tulos kirjataan tyylitiedostot –välilehdelle, kohtaan Tyylitiedoston validius -kohtaan.

Tyylitiedoston osoitteen löytää joko sivun koodista tai sen voi nähdä käyttämällä esim. Opera-selaimen ”user mode – show structural elements” – moodia. Sivun alussa kerrotaan silloin mitä tyylitiedostoja sivu käyttää.

Graphic1

Kuva 1. Esimerkki tyylitiedoston löytymisestä.

Eri sivut voivat käyttää samaa tyylitiedostoa, jolloin se tarvitsee tarkastaa vain kerran.

Validaattoritestin tulos voi olla:

  1. Tyylitiedosto on validia CSS:ää. Hyvä. Kirjaa tyylitiedoston osoite ja ok.

  2. Tyylitiedosto ei ole validi. Kirjaa: tyylitiedoston osoite ylös ja virheet (jos muutama) ja muuten ”virheitä” .

  3. Tyylitiedostoon ei pääse käsiksi. Kirjaa: tyylitiedoston osoite ja havaintosi. (Tyypillinen ongelma jos sivusto on suojattu (eli urlin alussa on https http:n sijaan). Tällöin tyylitiedoston voi ensin avata selaimeen (osoitteen perusteella), tallentaa sen omalle koneelle ja sitten ladata validaattoriin.

Sivuston ja sivun rakenne: Opera-selain

Koko sivuston ja yksittäisten sivujen selkeä rakenne helpottaa käyttäjiä hahmottamaan toimintamahdollisuuksiaan ja löytämään etsimänsä nopeammin. Erilaisten rakenteellisten elementtien korrekti käyttö on apuvälineiden järkevän toimimisen ehto.

Arvioinnissa käytetään hyväksi Opera –selaimen valmiita tyylitiedostoja, jotka nostavat näkyville tiettyjä rakenteeseen liittyviä elementtejä.

Otsikkojen merkitseminen (WAI-ohje 5.4 AA)

Otsikot tulisi merkitä header-elementteillä (h1, h2, .., h6). Vaikka otsikonnäköisen ulkoasun voisi tehdä myös muilla tavoilla, esim. taulukon otsikkoa merkitsevällä th-elementtillä, ei niitä suositella käytettäväksi, koska rakenteesta tulee silloin epäselvä. (Sivu voi olla visuaalisesti ok, mutta huttua niille, jotka kuuntelevat sivuja.)

Arviointi:

Ota Opera-selain käyttöösi ja aseta ”user mode – show structural elements” – moodi päälle.

Katso otsikot ja käytetäänkö niiden merkitsemiseen h-elementtejä. Kirjaa tulokset rakenne- välilehdelle.

Hyvä rakenne:

Tyypillisiä ongelmia:

Hierarkinen otsikkorakenne (WAI-ohje: 3.5, NKL- ohje 11)

Sivun otsikot merkitään elementteillä h1, h2, h3, jne. Otsikoiden ulkoasun voi määritellä tyylitiedostossa.

Sivun otsikkohierarkian tulee rakentua niin, että sivun pääotsikko on h1- tasoa, seuraavat otsikot h2 ja niiden alla olevat otsikot h3-tasoa. Pääotsikoita (h1) tulee olla vain yksi.

Arviointi:

Ota Opera-selain käyttöösi ja aseta ”user mode – show structural elements” – moodi päälle.

Katso h-elementtien käyttö ja kirjaa tulokset rakenne- välilehdelle.

Hyvä rakenne:

Tyypillisiä ongelmia:

Tekstikappaleiden merkitseminen (NKL-ohje 12)

Samalla tavalla kuin otsikot tulee merkitä otsikoiksi (vrt. Otsikkojen merkitseminen (WAI-ohje 5.4 AA)), pitää myös tekstikappaleet merkitä omiksi kokonaisuuksiin. Käytännössä tämä tarkoittaa sitä, että tekstikappale alkaa <p> - elementillä ja loppuu </p> - elementtiin. Tekstikappaleiden eteen ja jälkeen voi määritellä tyhjää tilaa tyylitiedostossa. <br>-elementtien käyttö tuottaa ongelmia ruudunlukuohjelmille.

Arviointi:

Ota Opera-selain käyttöösi ja aseta ”user mode – show structural elements” – moodi päälle.

Katso <p>-elementtien käyttö ja kirjaa tulokset rakenne- välilehdelle. Jos tekstimassassa näyttää olevan muita välejä, kohdissa todennäköisesti käytetään <br>-elementtejä, jotka aiheuttavat ongelmia ruudunlukuohjelmille. <br>-elementtien käyttö varmistetaan vielä kohdassa Vältä W3C:n teknologioiden ominaisuuksia, joita WAI-ohjeissa neuvotaan välttämään (WAI-ohje 11.2 , NKL-ohje 12).

Hyvä rakenne:

Tyypillisiä ongelmia:

Sisällön linearisoinnin toimivuus (WAI-ohje: 5.3, NKL-ohje 10)

Taulukoita käytetään varsin laajasti sivuston palstoitukseen ja lay-oytin muotoilemiseen. Sivuston tulisi kuitenkin toimia myös silloin kuin taulukkototeutus linearisoidaan, eli sen pitäisi olla luettavissa taulukon solu kerrallaan samassa järjestyksessä (esim. rivi kerrallaan vasemmalta oikealle, ylhäältä alas) kuin se esitetään koodissa. Lukujärjestyksen vio määritellä myös koodissa.

Arviointi:

Ota Opera-selain käyttöösi ja aseta ”user mode – show structural elements” ja ”disable tables”– moodit päälle. Katso onko rakenne järkevä kun sivun sisältö linearisoidaan. Kokeile tehdä tehtävät. Kirjaa tulokset ylös Rakenne – välilehdelle.

Toimiva linearisointi:

Tyypillisiä ongelmia:

Vierekkäinen teksti (WAI-ohje 10.3 AAA)

Osa ruudunluku ohjelmista ei käsittele taulukoita kunnolla, vaan lukee sivua rivi riviltä, solujen rajoista huolimatta. Tällöin vierekkäisissä soluissa oleva teksti saatetaan lukea rivi kerrallaan pötkönä. Esim. alla olevassa kuvassa teksti luettaisiin järjestyksessä: Uutiset – Lapset – Polikliniikka.net – Kotimaa – Lasten ohjelmat – Potilasohjeet ...

Graphic2

Kuva 2. Esimerkki vierekäisestä tekstistä

Jos sivu käyttää kehyksiä, voivat selaimessa vierekkäin nähtävissä olevat tekstit olla peräisin eri dokumenteistä. (Ks. ohjeita kehyksien käytön huomaamiseen Käytetäänkö sivulla kehyksiä?)

Arviointi:

Katso sivua, onko sillä tekstiä rinnakkaisissa sarakkeissa? Kirjaa huomiosi Rakenne-välilehdelle.

Vierekkäiset linkit (WAI-10.5 (AAA), NKL-ohje 8)

Vierekkäin sijaitsevien linkkien välissä tulee olla joko ei-linkki elementti ja tyhjiä välejä.

Arviointi:

Katso onko sivulla vierekäisiä linkkejä. Näkyykö niiden välissä ei-linkki elementti, kuten | - merkki? Kirjaa huomiosti Rakenne-välilehdelle.

Linkkilistat ja niiden tarve (NKL-ohje 7, KA)

Jos sivulla on paljon linkkejä, on niistä hyvä tehdä linkkilista. Linkkilistojen toteutukseen kannattaa käyttää ul -tyyppisiä listoja. Jos listoista tulee kovin pitkiä (useita kymmeniä linkkejä), kannattaa linkit ryhmitellä jonkin kriteerin (aihepiiri tms.) mukaan. Ryhmät tulee otsikoida kuvaavilla väliotsikoilla. Kannattaa myös harkita kappaleiden sisällä olevien linkkien kokoamista sivun loppuun sijoitettavaksi linkkilistaksi.

Vilkaisulukemisen tukemiseen suositellaan listojen käyttämistä jo silloin kun listassa on kaksi elementtiä. Näin esim. vaihtoehdot näkyvät paremmin.

Arviointi:

Onko sivulla yleensä paljon linkkejä? Onko tekstin keskellä useita linkkejä? Onko pitkät linkkilistat ryhmiteltynä osuvien otsikoiden alle? Kirjaa huomiosti Rakenne-välilehdelle.

Hyvä:

Tyypillinen ongelma:

Käytetäänkö uudelleenohjaus tai -päivitys –toimintoa(WAI-ohje: 7.4 (AA), 7.5(AA), 508p)

Sivujen uudelleenlataamisen tai uudelleenohjauksen eli käyttäjän siirtämisen sivulta toiselle sivun tai sisällön päivittäminen tietyssä ajassa sekoittaa varsinkin vanhojen selainten toimintaa (vieraillut sivut menee sekaisin) ja käyttäjää (ei voi tietää kuinka kauan käyttäjä haluaa olla sivulla; riippuu myös siitä kuinka isoja muutokset ovat).

Osa käyttäjistä tarvitsee pidemmän ajan sivun käyttöön, pitäisi käyttäjälle olla mahdollista:

a) tietää vanhentumisaika b) saada tarvittaessa lisäaikaa

Arviointi:

Kirjaa tulokset Rakenne –välilehdelle.

Tyypillisiä uudelleenohjauksia:

Uudelleen ohjausta tai – päivitystä voidaan tehdä myös muilla tavoin ja periaatteessa sivun sisällön muuttumisen voi nähdä vain jos onnistuu olemaan sivulla oikeaan aikaan, joten tämä kohta kannattaa varmistaa sivun tekijöiltä (Ks. kohta Varmista koodaajalta)

Kehyksettömän version tarjoaminen (NKL-ohje 9)

Kehyksettömällä versiolla tarkoitetaan <noframes> - elementtin sisällä olevaa sisältöä. Ko. elementin sisältö näkyy samalla sivulla kuin FRAME-elementit. Tee tarkastus ainakin etusivulle.

Arviointi:

Valitse Opera-selaimen yläosasta View -valikko ja sieltä Source (tai pikanäppäinyhdistelmä Ctrl+f3), niin saat näkyviisi lähdekoodin, josta voit katsoa mitä <noframes> – elementti sisältää. Hyvässä tapauksessa siellä on ainakin linkit sivun pääosioihin.

Toimiva kehyksetön versio

Tyypillisiä ongelmia:

Yksittäisten elementtien käytön tarkastaminen: Opera selain – oma tyylitiedosto

Yksittäisiin koodielementteihin liittyy ongelmia: osaa ei suositella enää käytettäväksi, osaa voidaan käyttää väärin ja osa aiheuttaa ongelmia tietyille apuvälineille.

Yksittäisten elementtien helppoon esiinkaivamiseen käytetään tarkoitusta varten tehtyä tyylitiedostoa yksittaiset_tagit.css.

Blockquote-elementin (väärin)käyttö (WAI-ohje: 3.7 AA)

<blockquote> -elementit sisentävät tekstiä. Niitä tulisi käyttää ainoastaan lainausten yhteydessä, mutta toisinaan niitä käytetään vain visuaalisen sisennyksen aikaansaamiseksi, mikä vääristää ohjelmien saamaa tietoa ja sen myötä hämmentää käyttäjää. Visuaalinen sisennys tulisi toteuttaa tyylitiedostolla.

Arviointi:

Vaihda käyttöösi oma tyylitiedosto yksittaiset_tagit.css Onko sivulla <blockquote>-elementtejä? Kirjaa tulokset ylös Yksittäisiä elementtejä– välilehdelle. (Näkyy myös ”user mode – show structural elements” – tyylitiedostolla). Ohje oman tyylitiedoston käyttöönottoon liitteessä 1.

Oikein käytetty lainausmerkintä:

Tyypillisiä ongelmia:

Vältä W3C:n teknologioiden ominaisuuksia, joita WAI-ohjeissa neuvotaan välttämään (WAI-ohje 11.2 , NKL-ohje 12)

Muun muassa seuraavia elementtejä ei tulisi käyttää: <br>, <font>, <applet>, <center>, <basefont>, <dir>, <isindex>, <menu>, <s>, <strike> ja <u>

Arviointi:

Vaihda käyttöösi oma tyylitiedosto yksittaiset_tagit.css Onko sivulla yllämainittuja-elementtejä? Kirjaa tulokset ylös Yksittäisiä elementtejä– välilehdelle. Ohje oman tyylitiedoston käyttöönottoon liitteessä 1.

Hyvä:

Ongelma:

Tietotaulukot

Tietoa esitetään taulukokomuodossa (Esim. Taulukko 2) kun tietoa yksittäisistä toimijoista on paljon tai tietoja pitää pystyä vertailemaan helposti tai silloin kun taulukkomuotoisella esitystavalla saadaan tieto selkeämmin esille kuin kirjoittamalla se auki. Taulukot muodostavat erityisen haasteen tiedon linearisoimiselle. Linearisoitujen taulukoiden avuksi on kehitetty useita html- ominaisuuksia, kuten mahdollisuus linkittää taulukon otsikoita ja soluja toisiinsa tai mahdollisuus tarjota taulukosta yhteenveto.

Nimi

Kotipaikka

Ikä

Paavo Paavonen Helsinki 34
Liisa Liisanen Porvoo 23

Taulukko 2. Esimerkki tietotaulukosta.

Määrittele tietotaulukon otsikkosolut (WAI-ohje 5.1 A, 508g)

Tietoa sisältävän taulukon otsikot tulee merkitä taulukon otsikoiksi (<th>-elementillä). Tietotaulukon vastakohta on esimerkiksi taulukkorakenne, jota käytetään, jotta saataisiin aikaan haluttu lay-out ja joka sisältää tekstiä, kuvia yms elementtejä.

Arviointi:

Onko sivulla tietotaulukoita? (esim. luettelo ihmisistä ja heidän osoitteistaan ja puhelinumeroistaan)? Jos on, niin, ovatko taulukon otsikot (esim. nimi, osoite, puhelinnumero) merkitty taulukon otsikoiksi?

Vaihda käyttöösi tyylitiedosto taulukko_tagit.css Onko sivulla th-elementtejä? Kirjaa tulokset ylös Taulukot– välilehdelle.

Hyvä:

Ongelma:

Liitä taulukon soluihin tieto siitä, minkä otsikon alle ne kuuluvat (WAI-ohje 5.2 A, 508h)

Monitasoisen taulukon soluissa pitäisi olla kuvaus, siitä, minkä otsikon alle mikäkin solu kuuluu. Käytännössä tämä tarkoittaa sitä, että <th> -elementeille määritellään tunniste (id-attribuutti), johon viitataan yksittäisissä soluissa (headers- attribuutilla).

Arviointi:

Käytännössä tätä arviointia tehdessä tehdään oletus, että jos sivun tekijä on määritellyt tunnisteet, on hän tehnyt myös viittaukset soluihin. Vaihda käyttöösi tyylitiedosto taulukko_tagit.css Sivun <th>-elementit näkyvät nyt vihreänä. Elementin perässä näkyy teksti ”tunniste:” ja joko tyhjää tai virheällä tunnisteteksti, kuten otsikko1.

Hyvä:

Ongelma:

Tarjoa yhteenveto taulukon sisällöstä (WAI-ohje 5.5 )

Taulukon yhteenveto tai seloste kertoo taulukon sisällön. Näin käyttäjä voi valita haluaako ylipäätään käydä taulukkoa läpi.

Arviointi:

Vaihda käyttöösi tyylitiedosto taulukko_tagit.css Sivun <table>-elementit näkyvät nyt vihreänä. Elementin perässä näkyy teksti ”tunniste:” ja joko tyhjää tai virheällä yhteenvetotieto

Hyvä:

Ongelma:

Tee lyhenteet taulukon otsikoille (WAI-ohje 5.6 AAA)

Kun taulukkoa käydään läpi lineaarisessa muodossa, läpikäynti nopeutuu, jos soluihin liittyvät otsikot ovat lyhyet. Käytön tehostamiseksi <th>-elementteihin voidaan liittää abbr-attribuutti eli lyhenne taulukon otsikolle.

Hyvää:

Ongelma:

Tekstiselain

Valmistelu: Laadi tehtävien tekemisestä oma taulukkonsa samalla tavalla kuin kohdassa Testattavan alueen määrittely.

Tehtävä: selvitä miten Helsingistä pääsee Seinäjoelle to 19.9.2002 klo 16 jälkeen.
Sivun nimi Miten pääsee eteenpäin kommentit
VR tervetuloa klikkaamalla linkkiä http://www.vr.fi/heo/index.html Auto-refresh
VR henkilöliikenne klikkaamalla linkkiä sisaltoframeset huonosti nimetyt kehykset
VR henkilöliikenne klikkaamalla linkkiä navigointi huonosti nimetyt kehykset
VR Henkilöliikenne - Navigointipalkki sarkaimella VR matkahaku- kohtaan, jonka jälkeen syötetään matkantiedot, jonka jälkeen klikataan linkkiä "Submit Query", kerrotaan hyväksytäänkö cookie huonosti nimetty painike
VR Henkilöliikenteen aikataulut etsitään listasta sopiva yhteys ohjeteksti kertoo, että sopivin yhteys on merkitty harmaalla, mikä ei näy. Ekana listalla ei myöskään näy sopivin yhteys vaan sitä aiempi

Taulukko 3. Esimerkki tekstiselaimella läpikäydystä tehtävästä. Huomaa, että osoitekenttä on vaihdettu kommenttikenttään, johon voi kirjoittaa nopeat havainnot.

Tehtävien suorittaminen (WAI-ohje 8.1 (A tai AA), 6.1 (A), 6.3 (A), NKL-ohje 19, 20)

Voiko tehtävät suorittaa tekstiselaimella? Jos toiminta jakaantuu useammalle eri sivulle, pysyykö tehtävässä kärryillä? Voiko tekstiselaimella havaita ja hallita kokonaisuutta samalla tavalla kuin graafisella selaimella? Tekstiselaimella nähtävät tiedot peilailevat myös sitä miten sivut toimivat ilman tyylitiedostoa.

Arviointi:

Siirry unix/linux/MS-DOS käyttöjärjestelmään. Avaa tekstiselain komennolla lynx osoite (Esim. lynx http://www.vr.fi). Tee tehtävä.

Hyvä:

Ongelma:

Siirtymälinkit navielementtien ohi (WAI-ohje: 13.6 (AAA), NKL-ohje 5)

Piilolinkit navigoinnin ohittamiseksi on tarkoitettu oikopoluiksi sivun sisältöön. Muutoin sivua kuunteleva joutuu aina käymään läpi uudestaan kaikki (tyypillisesti ylhäällä ja vasemmalla) sijaitsevat navigointielementit.

Arviointi:

Ota tekstiselain käyttöösi ja lähde surffaamaan sivuille. Tarkasta onko sivun alussa linkkejä kuten ”Ohita navigaatio” tai ”Suoraan sisältöön”. Samalla voit selvittää onko piilolinkit nimetty osuvasti, eli selviääkö niistä mihin ollaan siirtymässä. (Ks. kohta Linkkien ja muiden elementtien nimeäminen (WAI-ohje 13.1 (AA), NKL-ohje 6, KA))

Hyvä:

Ongelma:

Käytetäänkö sivulla kehyksiä?

Kehyksien käytön voi huomata mm. siten, että Opera-selaimessa ”show structural elements” – tyylitiedosta käyttäessä sivun eri kehysten yläreunaan tulee sininen palkki joka alkaa tekstillä ”content type:”. Eri kehysten alareunaan tulee samaan tapaan teksti” this page contains n font tags and m nested tables”.

Lynxillä kehykset voivat näyttää seuraavien kuvien mukaisilta:

Graphic3

Kuva 3. Kehyksien käyttö voi näyttä lynxissä tältä. Kehys merkitään FRAME -tekstillä, jota seuraa teksti, joka määritellään name-attribuutissa. Kehyksetön <noframes> - versio näkyy alla: ”Nämä sivut on tarkoitettu..”

Graphic4

Kuva 4. Toinen esimerkki kehyksein käytöstä. Tämä kehyssivu seuraa Kuva 3:n sisaltoframeset –linkkiä. Muutaman kehyksen jälkeen siirrytään yleensä sisältödokumentteihin.

Kehysten nimeäminen (WAI-12.1 (A), 12.2 (AA), NKL-ohje 9, 508i)

Tekstiselaimella törmää aika helposti kehyksiin ja niiden onnettomasta nimeämisestä poikiviin ongelmiin. Kehykset nimetään usein suunnittelijan logiikan mukaisesti eikä niitä ole ajateltu muille käyttäjille ymmärrettäviksi.

Arviointi:

Ota tekstiselain käyttöösi ja lähde surfaamaan sivuille. Katso miltä näyttää: Jos sivulla lukee jossain kohdassa FRAME – käytetään sivulla kehyksiä.

Hyvä:

Ongelma:

Linkkien ja muiden elementtien nimeäminen (WAI-ohje 13.1 (AA), NKL-ohje 6, KA)

Kuvaavasti nimetystä linkistä selviää mitä sen takana on.

Arviointi:

Silmäile sivuilla olevia linkkejä, ovatko ne kuvaavasti nimetty. Arvioi myös tekstiselain-välilehden kohtaan ”Miten pääsee eteenpäin” kirjattua tehtävien etenemistä: ovatko käytössä olevat linkit nimetty käyttäjän tavoitteen mukaisesti?

Hyvä:

Tyypillisiä ongelmakohtia:

Sama arviointi tehdään graafisella selaimella kohdassa Linkkien ja muiden elementtien nimeäminen (WAI-ohje 13.1 (AA), NKL-ohje 6, KA).

Näkyvissä kuvatiedoston nimiä (WAI-ohje 1.1, NKL-ohje 14, 508a)

Arviointi

Jos sivuja selatessa näkyy kuvatiedoston nimiä, kuten ”valipalkki_harmaa_vas.gif”, ”px.gif” tai mies-ja-vaimo.gif, kyseessä on tilanne, jossa näille kuville ei ole annettu teksivastinetta, joten kuvien tiedostojen nimet näkyvät.

Ulkoasun hallitseminen: IE

Www-sivujen ulkoasun tulee olla rakenteesta erillinen ja käyttäjän itse muuteltavissa.

Suurentaminen ja pienentäminen (WAI-ohje 3.4 (AA), NKL-ohje 4)

Sivujen tekstin koon tulee olla käyttäjän muunneltavissa.

Arviointi:

Ota IE käyttöösi ja kokele ensin ilman mitään erikoisasetuksia toimiiko tekstin skaalaus. (View-valikko, Text size- kohta, Kokeile Largest ja smallest – vaihtoehtoja (suomeksi?). Muuttuuko sivu? Muuttuuko kaikki teksti? Kirjaa huomiosi Ulkoasu-välilehdelle

Hyvä:

Tyypillisiä ongelmakohtia:

Liikkuvat elementit (WAI-ohje 7.1 (A), 7.2, 7.3, 7.4 (AA), 10.1 (AA), 508j, KA)

Liikkuvat elemnetit kiinnittävät käyttäjän huomion epäolennaisiin tai saattavat pahimmassa tapauksessa keskeyttää käyttäjän tekemän tehtävän. Uusien ikkunoiden hallinta on vaikeaa: kaikki käyttäjät eivät huomaa niitä tai joutuvat ymmälleen kun back-nappula ei enää toimi.

Arviointi:

Katso sivustoa ilman erikoissäätöjä. Onko sivulla liikkuvia/muuttuvia elementtejä? Aukeavatko sivut uusiin ikkunoihin? Jos on, luettele ne Ulkoasu–välilehdellä.

Hyvä:

Tyypillisiä ongelmakohtia:

Sarkaimella liikkuminen (WAI-ohje 9.3 (AA), 9.4 (AAA), NKL-ohje 3, 508p(A)): graafinen selain

Kaikki käyttäjät eivät käytä hiirtä, joten tehtävän tekeminen pitää olla mahdollista myös ilman sitä. Myös kaikkiin sivulla oleviin elementteihin pitää olla mahdollista päästä käsiksi ilman hiirtä.

Arviointi:

Tee tehtävä ilman hiirtä, pelkän näppäimistön varassa. Onnistuuko? Kiinnitä huomiota myös siihen, pääseekö sivuston kaikkiin linkkeihin ja painikkeisiin siirtymään sarkaimella. (Alkaa osoitekentästä.) Sarkaimella liikkumisen seuraaminen voi olla hankalaa ja jos tuntuu, ettei IE:llä asiasta saa mitään tolkkua, voi kokeilla Opera selainta (ilman kuvia tai linearisoituna tms). (Vinkki: takaisinpäin sarkailemaan pääsee pitämällä shift-näppäintä pohjassa.)

Hyvä:

Tyypillisiä ongelmakohtia:

Yhdenmukainen esittämistapa (WAI-ohje 14.3 (AAA), WAI-ohje 13.4 (AA), KA)

Yhdenmukaisuudella tarkoitetaan sitä, että samat elementit kuten linkit, teksti ja otsikot ja navoigointi esitetään aina samalla tavalla läpi sivuston.

Arviointi:

Selaile sivuja ja tarkastele elementtien ulkoasua.

Hyvä:

Tyypillisiä ongelmakohtia:

Tiedon esittäminen myös ilman väriä (WAI 2.1 A, 508c, KA)

Kaikki ihmiset eivät näe kaikkia värejä tai he voivat käyttää laitteita, joissa ei ole käytössä värejä. (Esim. vanhat näytöt, kännykät) Tästä syystä mitään tietoa ei pitäisi tarjota pelkästään värin avulla. Erityisen ongelmallinen on punainen-vihreä – yhdistelmä.

Arviointi:

Selaile sivuja ja tarkastele elementtien ulkoasua.

Hyvä:

Tyypillisiä ongelmakohtia:

Riittävä kontrasti (WAI-ohje 2.2 AA tai AAA, KA)

Taustan ja sen päällä olevien elementtien, kuten taustan ja tekstin, tulee muodostaa riittävä kontrasti, jotta niiden erottamiseen toisistaan ei joudu näkemään erityistä vaivaa. Myös vastavärejä tulisi välttää.

Arviointi:

Selaile sivuja ja tarkastele elementtien ulkoasua. Jos asiat eivät erotu toisistaan kunnolla, ovat suttuisen tai epämääräisen näköisiä, kontrasti ei ole riittävä. Jos asia ei ole aivan varma, voit kokeilla seuraavia tapoja

Mustavalkoisen printtauksen ja kuvankäsittelyohjelmien harmaavärimoodin ongelma on siinä, että ohjelmat tekevät jonkin verran värikorjausta. Paperin resoluutio on myös parempi kuin näytön, jolloin kuva paperilla saattaa näyttää skarpimmalta, kuin ruudulla.

Hyvä:

Tyypillisiä ongelmakohtia:

Taustakuva (NKL-ohje 4, KA)

Hyvä taustakuva ei hankaloita sen päällä olevan tekstinlukemista, vaan on hillitty.

Arviointi:

Selaile sivuja ja tarkastele taustakuvan ja tekstin yhteiseloa.

Hyvä:

Tyypillisiä ongelmakohtia:

Toimivuus ilman tyylitiedostoja (WAI-ohje 6.1 (A), NKL-ohje 4, 508d)

Onko sivulla viivoja tai muita visuaalisia erottimia, jotka auttavat käyttäjää jaottelemaan ja hahmottamaan sivun sisältöä? Onko elementit toteutettu niin, että ne ovat käytettävissä myös ilman tyylitiedostoja?

Arviointi:

Ota IE käyttöösi ja arvioi visuaalisien elementtien käyttöä. Lisätarkastelu tehdään kooditasolla joko sivuston toteuttajan kanssa tai itsekseen. (Ks. Luku Varmista koodaajalta)

Hyvä:

Ongelma:

Navigointia helpottava tieto ja merkintätapa (WAI-ohje 13.5 (AAA), WAI-ohje 13.8 (AAA), WAI-ohje 13.9 (AAA), WAI-ohje 11.3 (AAA), KA)

Sivun navigointimekanismien tulee olla selvästi esillä. Navigointitapoja on useita: jotkut käyttävät navigointipalkkeja, jotkut ensisijaisesti sivun hakutoimintoa, jotkut sivukarttaa, jotkut murupolkua. Koska käyttötapoja on useampia, kannattaa mahdollisuuksien mukaan tarjota useampia vaihtoehtoja. Huomattavan tärkeää eri navigointitapoja esittäessä merkitä ne kunnolla: navigointi elementtien tulee erota muista sivun elementeistä ja käyttäjän sijainnin tulee olla aina kunnolla merkitty.

Myös vaihtoehtojen tulee näkyä: kieliversioiden tulee olla helposti löydettävissä, samoin erilaisten dokumenttimuotojen ilmoitettuna, esim. Ohjeet (pdf 2.6 M) - kertoo käyttäjälle huomattavasti enemmän kuin pelkkä ohje-linkki.

Arviointi:

Merkitse ongelmat navigointitavoissa ulkoasu-välilehdelle.

Kielenkäyttö: vapaavalintainen selain

Näissä kohdissa voit käyttää mitä tahansa haluamaasi selainta.

Sivun title-elementin kuvaavuus (NKL-ohje 1)

Title-elementti on yksi dokumentin identifiointitapoja. Otsikon tulee olla uniikki, kertoa mitä sivu sisältää sekä vastata linkkiä, joka johtaa ko. sivulle.

Arviointi:

Title-elementin voi löytää mm. seuraavilla tavoilla

Hyvä:

Tyypilliset ongelmat

Kielen vaihtuminen toiseksi (WAI-ohje 4.1 A)

Kielen vaihtumisen merkitseminen auttaa hakukoneita, ruudunlukuohjelmia sekä muita välineitä, kuten selaimia ulkoasun määrittelemisessä ja kielentarkastuksessa.

Arviointi:

Selaile sivuja ja tarkastele muuttuuko kieli missään. Jos et halua vilkaista koodiin, onko kohdassa käytetty lang-attribuuttia (Esim. <div lang=”en”>in English</div>, niin ota käyttöösi tyylitiedosto kielen_vaihtuminen.css tai kysy asiaa sivun tekijältä (Kohta Varmista koodaajalta).

Hyvä:

Tyypillisiä ongelmakohtia:

Linkkien ja muiden elementtien nimeäminen (WAI-ohje 13.1 (AA), NKL-ohje 6, KA)

Silmäile sivuilla olevia linkkejä otsikoita ja painikkeita, ovatko ne kuvaavasti nimetty? Arvioi myös kohdassa alussa määritellyn määriteltyjen tehtävien etenemistä: ovatko käytössä olevat linkit nimetty käyttäjän tavoitteen mukaisesti?

Hyvä:

Tyypillisiä ongelmakohtia:

Tekstimassojen välttäminen (WAI-ohje 12.3 (AA), WAI-ohje 14.2 (AAA) NKL-ohje 2, KA)

Verkossa lukeminen tapahtuu usein ”skannaamalla”, jolloin tekstin pitää olla jaoteltuna sopivan pieniksi tekstipätkiksi (ei liian pitkää tai leveää tekstimassaa). Tekstiosille pitää olla osuva otsikko.

Arviointi:

Lue sivujen kaikki teksti. Mieti samalla auttaisiko jonkinlaiset kuva- tai ääniesitykset sivun ymmärtämistä.

Hyvä:

Tyypillisiä ongelmia:

Puhu käyttäjän kieltä (WAI-ohje 14.1 A, KA)

Käytä selkeintä ja yksinkertaisinta kieltä, joka sopii sivuston sisältöön.

Arviointi:

Lue sivujen kaikki teksti.

Tyypillisiä ongelmia:

Lyhenteiden käyttö (WAI-ohje 4.2 AAA, KA)

Käytetäänkö sivustolla ei-vakiintuneita lyhenteitä? Selitetäänkö lyhenteet?

Vakiintuneita lyhenteitä ovat esim. WWF, URL.

Tyypillisiä ongelmia:

Lomakkeet:

Täyttöohjeet ja syöttökentät yhteen (WAI-ohje: 10.2 (AA), WAI-ohje 12.4, NKL-ohje 21)

Lomakkeen täyttö koostuu täyttöohjeesta (Esim. nimi) ja syöttökentästä tai kontrollerista (Esim. pudotusvalikot). Näiden kahden elementin tulee sijaita mahdollisimman lähellä toisiaan, myös linearisoituna.

Graphic5

Kuva 5. Esimerkki täyttöohjeesta ja syöttökentästä.

Arviointi:

Tarkasta lomakesivut. Kokeile miltä sivu näyttää linearisoituna. Kirjaa tulokset Lomakkeet – välilehdelle.

Hyvä:

Tyypillisiä ongelmia:

Käytetäänkö paikanvaraajia syöttökentissä(WAI-ohje: 10.4 AAA)

Paikanvaraaja on syöttökenttään liitettävä ohje siitä, mitä kenttään tulee kirjoittaa, kuten ”Kirjoita nimesi tähän”. Ominaisuus palvelee joitain vanhempia ruudunlukuohjelmia ja aiheuttaa potentiaalisen ongelman muille, varsinkin näkeville, käyttäjille. Jos lomakkeen täytön lopuksi käyttäjä tekee yleissilmäyksen sivulle varmistaakseen, että on täyttänyt kaikki kentät, voi paikanvaraaja hämätä käyttäjää.

Arviointi:

Tarkasta lomakesivut. Onko syöttökentissä paikanvaraajia. Kirjaa huomiosi Lomakkeet – välilehdelle.

Pakollisten kenttien täyttämättä jättäminen (KA)

Arviointi:

Jätä pakolliseksi merkityt kentät täyttämättä. Millainen virhetilanne syntyy? Miten ongelma on merkitty? Kirjaa havaintosi Lomakkeet-välilehdelle.

Kuvat ja multimedia: graafinen selain

Kaikesta ei-tekstimuotoisesta informaatiosta tulee tarjota vaihtoehtoinen tekstimuotoinen kuvaus. Tämä ei tosin koske visuaalisen ilmeen rakennuspalikoita, kuten läpinäkyviä kuvia tai linkkilistojen edessä toisinaan kuvalla toteutettuja listamerkkejä. Tällaisten kuvien tekstivastineen tulee olla tyhjä välilyönti, jotta ne eivät haittaa sivuston tehoksta käyttöä.

Ei-tekstimuotoiset elementit ja niiden vastineet (WAI-ohje 1.1(A), NKL-ohje 14, 15, 16)

Tekstivastine voidaan määrittää esimerkiksi käyttämällä ”alt” tai ”longdesc” – attribuutteja. Koristekuvilla ei tule olla tekstivastinetta, ainoastaan tyhjä välilyönti. Paljon asiaan tietosisältöä sisältäville kuville on hyvä tarjota pidempi tekstiselitys kuin mitä alt-tekstiin kannattaa laittaa.

Arviointi:

Alt-tekstien etsimiseen on monta tapaa:

Hyvä:

Tyypillisiä ongelmia:

Linkkikartat (WAI-ohje 1.2 (A), WAI-ohje 1.5 (AAA), WAI-ohje 9.1 (A), 508e ja f)

Kuvat voivat olla linkkejä kokonaan tai osittain. Silloin kun linkiksi määritellään vain tietty alue kuvaa, puhutaan linkkikartoista.

Linkkikartat voidaan toteuttaa joko palvelimella tai selaimessa toimiviksi. WAI-ohjeessa suositellaan käytettäväksi selainpohjaisia linkkikarttoja jos linkkikartan muodot ovat geometrisiä (nelikulmiot). Linkkikarttojen linkeistä tulee tarjota ylimääräiset linkit.

Otsikoiden toteuttaminen kuvilla (WAI-ohje 3.1 AA)

Otsikot tulisi merkitä <h1>..<h6> -elementeillä, ei kuvilla, koska sivun rakennetta on tällöin hankalampi selvittää. (vrt. Kohta Otsikkojen merkitseminen (WAI-ohje 5.4 AA))

Arviointitapoja:

Tyypillisiä ongelmia:

Multimediaesitysten vastineet ja synkronointi (WAI-ohje 1.3 A, WAI-ohje 1.4 A, NKL 18 508b)

Arviointi:

Multimediaesityksien visuaaliselle tiedolle tulee tarjota tekstivastine, joka etenee muun esityksen mukana. Katso multimedia-esitys. Onko visuaaliselle sisällölle tekstivastine? Eteneekö tekstivastine esityksen kanssa tahdissa?

Multimediaesitysten hallitseminen (NKL 17)

Multimediaesitykset, kuten flash-animaatiot käynnistyvät toisinaan samalla kun käyttäjä saapuu sivulle. Käyttäjän tulisi voida itse valita haluaako katsoa esityksen.

Arviointi:

Tee tehtävä, alkaako jossain kohdissa animaatiot tms. esitykset pyöriä automaattisesti?

Loput tarkastettavat

Tarjolla ainoastaan PDF-dokumentteja (WAI-ohje 11.1 (AA), NKL-ohje 13, KA)

PDF- dokumentit eivät ole kaikkien käyttäjien saavutettavissa. Niille on syytä tarjota vaihtoehto, esimerkiksi XHTML-muodossa.

Arviointi:

Onko sivulla PDF- dokumentteja?`

Hyvä:

Tyypillinen ongelma:

Onko sivustolla sivukartta/sisällysluettelo/vastaava? (WAI-13.3 AA, KA)

Tarvitsisiko sivusto sellaista? Usein, varsinkin laajoista sivustoista olisi hyvä tarjota näkymä rakenteeseen ja sisältötarjontaan. Jos sellainen on, onko se esteetön? Toimiiko sivukartta mm. linearisoituna?

Hyvä sivukartta:

Tyypillisiä ongelmia:

Huomioiva haku (WAI-ohje:13.7 AAA)

Huomioitaessa käyttäjiä, joille hakusanojen oikeinkirjoitus voi tuottaa ongelmia, kuten vieraankielen käyttäjät tai lukihäiriöiset, tulisi tarjota ”ei hakutulosta” –ilmoituksen lisäksi lähelle osuvia vaihtoehtoja, joista käyttäjä voi edetä.

Arviointi:

Syötä hakukenttään sivuston aiheeseen liittyvä sana hieman väärinkirjoitettuna esimerkiksi: säännöt muodossa säänöt.

Hyvä:

Tyypillisiä ongelmia:

Ei kerrota millä hakusanalla haku on suoritettu (käyttäjä ei voi tarkastaa hakua ja huomata virhettä)

ASCII-taide (WAI-ohje 13.10 AAA)

ASCII- taide eli kirjaimista sommitellut kuviot, tuottavat hankaluuksi ruudunlukuohjelmille. Huomiovaa on tarjota niille ohituslinkki.

Arviointi:

Kun näet ASCII taidetta, tarkista voiko sen ohittaa helposti.

Hyvä:

Ongelma:

Lisäohjelmat (508m)

Jos sivujen sisällön tarkastelemiseen tarvitaan lisäohjelma, kuten Flash-player tai Real video –player tai Acrobat Reader, tulee sivun tarjota linkki k.o. ohjelmaan.

Esteetön vaihtoehto (WAI-ohje 11.4 A, 508k)

Jos sivustosta ei yrityksistä huolimatta saada esteetöntä, pitää sivustosta tarjota esteetön versio.

Arviointi:

Palaveroi sivun tekijöiden kanssa tämän arvioinnin jälkeen ja arvioi korjattu sivusto. Jos se on edelleen esteellinen, suosittele erillistä esteetöntä versiota, jota päivitetään rinta rinnan esteellisen version kanssa.

Varmista koodaajalta

Osa arvioitavista asioista on hyvä varmistaa sivuston tekniseltä toteuttajalta, sillä niiden arvioiminen ulkopuolisin silmin on joko vaikeaa tai mahdotonta. Tällaisia kohtia ovat:

Jos skriptejä käytetään tuottamaan sisältöä tai käyttöliittymä elementtejä, sama tieto tulee tarjota myös tavalla, joka on erilaiten apuvälineiden luettavissa.

Liite 1: Työkaluohjelmat ja niiden asetukset

Opera-selain

Lataa Opera-selaimen ilmainen testiversio Operan sivuilta (www.opera.com). Operan sivut on laadittu tukemaan tätä tehtävää ja selain löytyy etusivulta (voit valita haluatko ostaa vai vain downloadata) – ero näillä kahdella selaimella on se, että ostetussa versiossa ei näy mainosbanneria. (hinta 39 USD kirjoitushetkellä). Opera-tiedosto on pieni ja nopea asentaa.

Operan hyödylliset ominaisuudet löytyvät osoitekentän viereisestä tyylivalikosta:

Graphic6
Graphic7

Kuva 6. Opera-selaimen pikavalikot.

Lyhyet kommentit olemassa olevista tyyleistä:

Tarkempa tietoa http://www.opera.com/support/usingopera/stylesheets/index.dml

Oman tyylitiedoston käyttöönotto Operassa

Muutamassa arvioinnissa apuna käytetään omaa tyylitiedostoa, joka nostaa esiin muutamia koodissa käytettyjä elementtejä, joista päätellään erilaisia asioita.

Valitse File (yläreuna) ja Preferences (valikon alin) ja laita rasti ruutuun Author mode: (tai User mode) My style sheet ja hae selaimeen tyylitiedosto.

Graphic8

Kuva 7. Opera-selaimen valikot, joista voi vaihtaa oman tyylitiedoston

Lynx-tekstiselain

Tekstiselaimen käyttö vaatii kirjautumisen unix- tai linux – järjestelmään, joita on käytössä ainakin kaikissa korkeakouluissa ja yliopistoissa. Lynx-selain on saatavissa myös dos-versiona.

Loggaa tunnuksillasi unix-koneelle ja anna komentoriville komento

”lynx http://www.jokusaitti.org” – huomaa, että http:// - alun täytyy olla mukana.

Internet Explorer –selain (myös IE)

Internet explorer löytyy lähes joka koneelta ja on käytetyin selain tällä hetkellä. Erityisen hyväksi selaimeksi esteettömyystarkasteluun sen tekee se, että sivun suurentaminen on kiinnitetty elementteihin, eikä se suurenna kaikkia samassa suhteessa kuin tekevät esim. Opera ja Mozilla.

Asetukset:

Tools – valikko, Internet Options.. -kohta (alin) avaa uuden valikkoikkunan.

Graafinen selain

Graafisella selaimella tarkoitetaan mitä tahansa ei-tekstiselainta, kuten IE, Opera, Mozilla ja Netscape. Kohdissa, joissa puhutaan graafisen selaimen käytöstä voi käyttää vaikka itselleen tutuinta selainta.

Html- validaattori

W3C:n html-validaattorin löydät osoitteesta http://validator.w3.org/. Kirjoita URL osoite-kenttään (Address).

Css-validaattori

W3C:n css-validaattori löytyy osoitteesta http://jigsaw.w3.org/css-validator/

Valitse “Validate your cascading style sheet by URI”

Laura Turkki
Adage Oy

Kurssimateriaalin kommentointi

Kommenttien lhettmistoiminto on poistettu kytst suuren roskapostimrn vuoksi 21.6.2007. Oikeita palautteita tuli reilusti alle promillen luokkaa kaikista viesteist :-( Halutessasi voit lhett palautteesi suoraan Essin toteuttajille .

Muita artikkeleita aiheesta:
Seuraa polkua:
Edellinen: Huomioonottava verkkosivusto on helppokyttinen ja esteetn
Seuraava: Composer ja esteettmyys