Esteettömyyden arviointi

Sisällysluettelo

• Johdanto
• Lyhyesti arviointiohjeesta
  • Sisältö
  • Merkintätavoista ja termeistä
  • Esteettömyysarvioinnin suhde käytettävyyden arviointiin
  • WAI:sta lyhyesti
  • NKL ohjeista lyhyesti
  • Section 508 laista lyhyesti
• Arvioinnin alkutoimet
  • Testattavan alueen määrittely
  • Arviointipohjan käyttö
• Arvioinnin tekeminen
  • Tekniset validoinnit
  • Sivuston ja sivun rakenne: Opera-selain
  • Yksittäisten elementtien käytön tarkastaminen: Opera selain – oma tyylitiedosto
  • Tietotaulukot
  • Tekstiselain
  • Ulkoasun hallitseminen: IE
  • Kielenkäyttö: vapaavalintainen selain
  • Lomakkeet:
  • Kuvat ja multimedia: graafinen selain
  • Loput tarkastettavat
  • Varmista koodaajalta
• Liite 1: Työkaluohjelmat ja niiden asetukset
  • Opera-selain
  • Lynx-tekstiselain
  • Internet Explorer –selain (myös IE)
  • Graafinen selain

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:

• mitä tarkastetaan

• miksi tarkastetaan (WAI-ohjeen tai NKL-ohjeen tai 508- kohta ja A-taso)

• miten tarkastetaan

• miten raportoidaan

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:

• esteettömyyden_arviointiohje.doc eli tämä dokumentti

• arviointipohjat, johon löydökset voi kerätä ja jonka lopusta löytyy yhteenveto

  • arviointipohja_AAA.xls

• tyylitiedostot:

  • taulukko_elementit.css – taulukkojen käytön arvioimiseen

  • yksittaiset_ elementit.css – yksittäisten ja ei-suotavien elementtien jahtaamiseen

  • kieli_ elementit.css – muutaman kielenkäyttöön liittyvän toteutuksen tarkastamiseen

  • kuva_ elementit.css – kuvien käyttöön liittyvien kohtien tarkastamiseen

Merkintätavoista ja termeistä

• Elementti –termillä tarkoitetaan yksittäistä XHTML-koodin palasta, kuten <title>- elementtiä. Elementit esitetään ohjeessa niiden erottumisen vuoksi < ja > - merkkien välissä ja lihavoituna. Synonyyminä tägi (eng. tag).

• Attribuutti –termillä tarkoitetaan elementin ominaisuutta. Esimerkiksi <img alt=”kissankuva”>on kuvaa merkkaava <img>-elementti, jonka tekstivastineominaisuus määritellään alt-attribuutin kanssa. Attribuutit merkitään lihavoituna.

• Sivu –termillä tarkoitetaan yksittäistä graafiseen selaimeen avautuvaa näkymää.

• Dokumentti –termillä viitataan yksittäiseen tiedostoon.

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:

• käyttäjät, jotka eivät pysty näkemään, kuulemaan tai liikkumaan tai käyttämään hyväksi eri mediatyyppejä (kuvaa, tekstiä, ääntä) helposti tai ollenkaan

• käyttäjät, joilla on hankaluuksia lukea tai ymmärtää tekstiä

• käyttäjät, jotka eivät käytä näppäimistöä tai hiirtä

• käyttäjät, joilla on käytössään ainoastaan tekstipääte tai hyvin pieni näyttö

WAI-ohjeet verkossa:

• www.w3.org/WAI/ (WAI kotisivu)

• www.w3.org/TR/WCAG10/ (Esteettömyyden suunnitteluohjeet)

• www.w3.org/WAI/eval/ (Esteettömyysohjeiden arviointiohje)

• www.intermin.fi/intermin/hankkeet/juhta/home.nsf/ (WAI-ohjeet suomeksi)

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:

• www.nkl.fi/suositukset/testaus/index.html

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:

• www.section508.gov/

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

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

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:

• Otsikot merkitään h-elementteillä. Esim. <h1> otsikko1 </h1>

Tyypillisiä ongelmia:

• Otsikkoja ei merkitä h-elementtillä (otsikon ympärillä ei näy h-elementtejä)

• Otsikot on toteutettu kuvina.

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:

• Sivulla ainoastaan yksi h1-tason otsikko. Seuraavat otsikot ovat h2-tasolla ja niiden alla käytetään h3-tason otsikkoja.

• Sivulla on selkeä otsikko (otsikko vastaa linkkiä, jonka kautta sivulle siirryttiin) (Tarkastetaan tarkemmin kohdassa Linkkien ja muiden elementtien nimeäminen (WAI-ohje 13.1 (AA), NKL-ohje 6, KA))

• Otsikkoja käytetään reippaasti ja ne vastaavat sisältöä (Tarkastetaan tarkemmin kohdassa Tekstimassojen välttäminen (WAI-ohje 12.3 (AA), WAI-ohje 14.2 (AAA) NKL-ohje 2, KA)) Runsas otsikointi tukee vilkaisulukemista ja auttaa käyttäjää löytämään haluamansa tiedon nopeammin.

Tyypillisiä ongelmia:

• Sivulla useampia h1-tason otsikoita

• Jätetään joku otsikkotaso käyttämättä, esim. sivulla ei käytetä ollenkaan h1 tai h2 – tason otsikoita

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:

• Tekstikappaleet alkavat <p> - elementillä ja loppuvat </p> -elementtiin

Tyypillisiä ongelmia:

• Tekstikappaleita ei ole merkitty <p> -elementtillä

• Tekstikappaleet alkavat <p>-elementtillä, mutta niitä ei suljeta </p> - elementtillä

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:

• Sivuston rakenne toimii edelleen: navigointi- ja erityyppiset sisältöelementit ovat hahmotettavissa ja saavutettavissa.

• Myös linearisoidusta versiosta on helppo nähdä mitkä ovat sivun tärkeimmät tiedot (periaatteessa tärkein tieto sijaitsee sivun alussa)

Tyypillisiä ongelmia:

• Otsikot ajautuvat erilleen sisällöstä.

• Visuaalisesti toistensa lähelle ryhmitellyt tiedot eivät ole enää lähekkäin

• Huima sisäkkäisten taulukkojen määrä (opera-selaimen sivun lopusta löytyy yhteenveto joka laskee taulukkojen määrän)

• Tehtävien tekoon tarvittavat linkit ja tiedot ovat aivan sivun viimeisinä

• Sisältö pirstoutuu

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

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

• Tekstikappaleiden keskellä ei ole linkkejä, vaan linkit on koottu esim. kappaleiden loppuun

• Linkkilistat on otsikoitu kunnolla

Tyypillinen ongelma:

• Epäloogisessa järjestyksessä olevat tolkuttoman pitkät listat

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:

• <META>- elementtillä toteutettu uudelleenohjaus:

  • Opera-selaimessa “user mode – show structural elements” – moodi. Yläreunassa sana Refresh ja jokin arvo esim Refresh: 600, päivittää sivun uudelleen 600 sekunnin välein.

  • Koodissa: <meta HTTP-EQUIV=Refresh CONTENT="600">

  • Tekstiselaimella. Esim. “REFRESH(0 sec): http://www.vr.fi/heo/index.html www.vr.fi”

• Sivut vanhenevat eli yritettäessä palata takaisin päin sivu antaa esim. ”Page has expired” - ilmoituksen

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

• Sisältää sivun otsikon, sivulla oleva tekstin sekä koottuna sivun linkit.

• Etusivu: Tarjoaa ryhmiteltynä linkit kaikkiin tiedostoihin, jotka muuten aukeavat kehykseen

Tyypillisiä ongelmia:

• <noframes> Tämä sivu käyttää IE 4 tai uudempia selaimia </noframes> - tyyppinen ilmoitus

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

• Sivulla on lainaus, esim. ”Ollako vai eikä olla – siinä pulma” ja lainaus on merkitty <blockquote> - elementillä. (Tällä tavalla: <blockquote> Ollako vai eikä olla – siinä pulma </blockquote>)

Tyypillisiä ongelmia:

• Blockquotea käytetään sisennyksen aikaansaamiseksi.

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

• E.m elementtejä ei näy

Ongelma:

• E.m. elementtejä käytetään

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.

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

• Tietotaulukon otsikot merkitty th-elementillä

Ongelma:

• Tietotaulukon otsikoita ei merkitty th-elementillä

• Muita elementtejä kuin tietotaulukoiden otsikkoja merkitty th-elementillä

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

• Tietotaulukon otsikoihin on liitetty tunniste. <TH > - Tunniste: otsikko1 Name</TH>

Ongelma:

• Tietotaulukon otsikoiden tunnisteita ei ole käytetty

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

• Tietotaulukoon on liitetty kuvaava yhteenveto. Esim. <TABLE> - Yhteenveto: This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.

• Tietotaulukkoon on liitetty kuvaava seloste. Esim. <CAPTION>Cups of coffee consumed by each senator </CAPTION>

Ongelma:

• Yhteenvetoa tai selostetta ei ole tai se ei kuvaa taulukon sisältöä

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

• Taulukon otsikosta on tarjolla lyhenne

Ongelma:

• Lyhennettä ei käytetä

Tekstiselain

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

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

• Tehtävän voi suorittaa

Ongelma:

• Tehtävän suorittaminen ei onnistu, kerro miksi, tai ainakin mihin kohtaan tehtävänsuorittaminen kariutui

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

• Sivun alusta löytyy navigoinnin ohituslinkki, kuten ”suoraan sisältöön” tai ”ohita navigaatio”, joka vie sisällön alkuun.

Ongelma:

• Ohituslinkkiä ei ole

• Ohituslinkki on nimetty huonosti

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:

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

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

• Asiallisesti nimetyt kehykset, Esim. ”navigointielementit” (jos sisältää pelkästään navielementit)

Ongelma:

• Käsittämättömät nimet, kuten ”yläframe” tai ”vasenkehys”, eivät kerro käyttäjille mitään kehyksen sisällöstä. (vrt. Linkkien ja muiden elementtien nimeäminen (WAI-ohje 13.1 (AA), NKL-ohje 6, KA))

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

• Kaikki elementit on nimetty niin, että niistä tietää tarkkaan minne niistä pääsee.

Tyypillisiä ongelmakohtia:

• Linkit, jotka eivät kerro mihin ne johtavat, kuten ”Lue lisää” – lue lisää mistä?

• Tekstin sisään kirjoitetut linkit, jotka nimetään huonosti, kuten ”Lataa ohjelma tästä”

• Painikkeet, joita ei ole nimetty kunnolla, vaan jotka tekstiselaimella näkyvät tyyliin ”submit query”

• Samannimisen linkin käyttö useampia paikkoja tarkoittaen

• Erinimisten linkkien johtaminen samalle sivulle

• Sivuotsikoiden ja niille johtavien linkkien poikkeaminen toisistaan

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

• Kaikki teksti suurenee/pienenee elegantisti

Tyypillisiä ongelmakohtia:

• Mikään kohta tekstiä ei suurene/pienene

• Vain osa tekstiä suurenee/pienenee

• Otsikot tai teksti on toteutettu kuvilla

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

• Mikään (kuvat, teksti) ei liiku tai välähtele

• Kaikki linkit aukeavat samaan ikkunaan (ei uusia ikkunoita)

Tyypillisiä ongelmakohtia:

• Mainokset

• Sivustolta poistuvat linkit

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

• Tehtävän voi suorittaa sarkaimella liikkuen

• Kaikkiin sivun linkkeihin ja painikkeisiin pääsee sarkaimella käsiksi

Tyypillisiä ongelmakohtia:

• Haut, joista ei pääse siirtymään muihin elementteihin

• Painikkeet, joihin ei pääse sarkaimella

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

• Elementit merkitty kaikki omalla tavallaan systemaattisesti

• Merkitsemistapa on yleisten käytäntöjen mukainen. (Esim linkki alleviivattu ja sininen, leipäteksti mustaa ja pienempää kuin otsikkotekstit)

Tyypillisiä ongelmakohtia:

• Sekalainen merkintätapa

• Linkit eivät erotu muista elementeistä

• Perinteisiä linkkikorostustyylejä käytetään muihin elementteihin (sininen ja alleviivaus esim. otsikoissa)

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

• Jos käytetään värikoodeja, kerrotaan myös niiden viesti myös tekstinä. (Esim. hankkeen tila: vihreä indikaattori tilakaaviossa ja teksti ”valmis” tai ”oranssi” – kesken.)

Tyypillisiä ongelmakohtia:

• Merkitään jokin asia pelkästään värillä. (Esim. tila: vihreä laatikko)

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

• ota sivusta kuvakaappaus ja siirrä kuva kuvankäsittelyohjelmaan, poista värit tarkastele mustavalkoista kuvaa

• muuta näytön asetukset mustavalkoisiksi ja tarkastele sivua

• printtaa sivu mustavalkoisena ja tarkastele printtiä.

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

• Yksiväriset, vaaleat taustat, tummat teksti yms. elementit

Tyypillisiä ongelmakohtia:

• Vaalean harmaa valkoisella pohjalla

• Valkoinen (ei lihavoitu) ei tarpeeksi tummalla pohjalla

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

• Ei taustakuvaa tai hillityn värinen tausta

• Hillityn väriset ja ei häiritsevät kuviot taustakuvassa

Tyypillisiä ongelmakohtia:

• Voimakkaat kuviot

• Voimakkaat värit

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

• Ryhmittely näkyy myös sivun rakenteessa, tarkastetaan koodaajan kanssa.

Ongelma:

• Visuaalinen ryhmittely toteutetaan tyylitiedostoilla, mutta vastaavaa ryhmittelyä ei tarjota rakenteessa.

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

• IE: selaimen yläosassa olevasta tummansinisestä palkista

• Opera: ”user mode – show structural elements” –sivun yläosasta (Esim. <title> Otsikko </title>)

• Tekstiselain: ensimmäisenä oikeassa yläkulmassa

• Koodiin katsominen: head-osiossa löytyy title- elementti

Hyvä:

• Kuvaa sivun sisältöä (Esim. ”Hakutulokset”, ”Yhteystiedot”)

• Samaa titleä ei käytetä usealla sivulla

Tyypilliset ongelmat

• Sama title usealla sivulla

• Title ei kuvaa sivun sisältöä

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

• Kielenvaihtuminen merkitty koodiin

Tyypillisiä ongelmakohtia:

• På svenska ja in English. – kielenvaihtokohdat.

• Erikieliset lainaukset

• Huonostinimetyt painikkeet – esim. lähetä: submit

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

• Kaikki elementit on nimetty sisältöön sopivasti

• Painikkeet ovat imperatiivi-muodossa olevia verbejä (painikkeillä käynnistetään toiminto)

• Linkit ovat läpinäkyviä eli kuvaavat sitä, mihin johtavat

• Otsikot vastaavat niitä linkkejä, joita myötä sivulle saavuttiin

Tyypillisiä ongelmakohtia:

• Linkit, jotka eivät kerro mihin ne johtavat, kuten ”Lue lisää” – lue lisää mistä?

• Tekstin sisään kirjoitetut linkit, jotka nimetään huonosti, kuten ”Lataa ohjelma tästä”

• Painikkeet, joita ei ole nimetty kunnolla, vaan jotka tekstiselaimella näkyvät tyyliin ”submit query”

• Samannimisen linkin käyttö

• Erinimisten linkkien johtaminen samalle sivulle

• Sivuotsikoiden ja niille johtavien linkkien poikkeaminen toisistaan

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

• Ytimekäs teksti

• Listojen käyttö jo kahden listattavan asian kohdalla

• Lyhyet kappaleet

• Ei liian leveitä tekstialueita

• Printtiversion dokumenteista, jotka eivät sovellu ruudulta luettaviksi

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:

• Tarpeettomien teknisten termien käyttö

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:

• Tarpeettomien teknisten lyhenteiden käyttö

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.

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

• Lomakkeessa vain yksi ohje ja kenttä yhdellä rivillä. (Ei vierekäisiä ohjeita ja kenttiä)

• Ohje ja kenttä

• Ohje samalle rivillä kentän kanssa tai ohje heti seuraavalla rivillä kentän ollessa pitkä

• Ohjetekstistä selviää jos käytetään radiobutton (valitse yksi) tai checkbox (valitse monta)- valintoja. Esimerkiksi "valitse vain yksi" tai "valitse yksi tai useampi".

• Pakollisuutta ilmaiseva indikaattori ohjetekstin yhteydessä. (Ei esim. kentän jälkeen)

Tyypillisiä ongelmia:

• Rinnakaisia syöttökenttiä

• Linearisoitaessa täyttöohje ja syöttökenttä eksyvät toisistaan

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:

• Laita kuvat pois päältä selaimesta (Operassa tietty nappi, ks. liite 1), IE:ssä valikosta

• Ota käyttöösi kuva_tagit.css – tiedosto ja tarkastele violettien elementtien tarjoamaa informaatiota (Opera). Kuva jää <IMG> ja </IMG> - elementtien väliin.

• Laita IE-selaimessa kuvien päälle kursori: esiin tulee keltainen tool tip-teksti, joka kertoo tekstivastineen tai jos kuva on linkki, linkin title-kentän sisällön eli tähän ei voi aivan välttämättä luottaa.

• Klikkaa kuvaa hiiren oikealla napilla ja valitse properties-tiedot

Hyvä:

• Kaikille kuville on tekstivastine (alt-teksti)

• Kuvien tekstivstine kuvaa kuvan tarjoaman informaation. (Testi: kuvittele lukevasi sivuja puhelimessa jollekin, välittyykö kaikki tarvittava informaatio)

Tyypillisiä ongelmia:

• Ei tekstivastinetta (tyhjiä <IMG> </IMG>-pareja)

• Käsittämätön tekstivastine

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:

• Ota käyttöösi kuva_tagit.css – tiedosto ja tarkastele violettien elementtien tarjoamaa informaatiota (Opera). Jääkö otsikoita <IMG> ja </IMG> - elementtien väliin.

• Ota kuvat pois päältä, katoaako sivun otsikoita?

Tyypillisiä ongelmia:

• Otsikko toteutettu kuvilla

• Käsittämätön tekstivastine

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

• On PDF:ä, mutta sama tieto on tarjolla myös muussa muodossa

Tyypillinen ongelma:

• Dokumentit tarjolla ainoastaan PDF-muodossa

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:

• Sivukartta on olemassa ja otsikoitu niin että sen löytää

• Sivukartta on sijoitettu paikkaan josta se on helppo löytää (ei esim. tarvitse scrollata esiin)

• Sivukartta on käytettävä: ei liian laaja tai yksityiskohtainen

• Toimii linearisoituna

Tyypillisiä ongelmia:

• Laaja sivusto, ei sivukarttaa hakemisto tms

• Esteellinen sivukartta (lisää sivukarttasivu tarkasteltavien sivujen joukkoon)

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

• Hakukone tarjoaa vaihtoehtoisia tuloksia esimerkiksi seuraavasti:

  • ”Ei tulosta hakusanalla säänöt”

  • ”Tarkoititko termiä säännöt? Tee haku Säännöt-hakusanalla”

Tyypillisiä ongelmia:

• Ei tarjota vaihtoehtoja

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

• Taideteoksen alusta löytyy ohituslinkki, kuten”ohita kissaa kuvaava ASCII-teos”

Ongelma:

• Ohituslinkkiä ei ole

• Ohituslinkki on nimetty huonosti

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:

• Onko palvelin konfiguroitu reagoimaan kieleen? (WAI-ohje 4.3 AAA)
• Käytetäänkö uudelleenohjausta jossain ja käytettänkö ohjaukseen sivuja vai palvelinta? (WAI-ohje: 7.4 (AA) ja 7.5(AA))
• Ovatko scriptit ja niiden event handlerit syöttölaiteriippumattomia (WAI-ohje: 9,2 (AA), 9.3(AA))
• Millaista metadataa käyttäjille tarjotaan? (WAI-ohje 13.2)
• Näppäimistöoikopolut (WAI 9.5 AAA)
• Onko sivu luettavissa myös ilman tyylitiedostoja (WAI 6.1 A, 508d)
• Onko dynaaminen sisältö esteetöntä (WAI 6.5 (AA), WAI 6.2(A), 6.4(AA))
• Onko selaimessa suoritettavaa koodia vältetty (NKL-ohje 20, 508l (A))

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:

Kuva 6. Opera-selaimen pikavalikot.

Lyhyet kommentit olemassa olevista tyyleistä:

• Emulate text browser on sinänsä hyödytön, että se näyttää framet vierekkäin. Sen lisäksi se toimii kuin tekstiselain, eli linkkejä kliksutellaan hiirellä (tabulaattori ei toimi).

• Nostalgia on C64-emulaattori. Turha arviointiin.

• Accessibility layout on tarkoitettu ilmeisesti niille, jotka tarvitsevat isomman tekstin ja kohtuu hyvän kontrastin. Turha arviointiin.

• Show images and links only poistaa näkyvistä tekstin. Suoraa sovellusta ei tule mieleen.

• High contrast (W/B) ja (B/W) muuttaa sivun taustan-tekstin mustavalkoiseksi ja valkomustaksi

• Hide non-linkin images – poistaa näkyvistä kuvat, jotka eivät ole linkkejä.

• Hide certain-sized elements- voisi olla hyödyllinen mutta ei toimi järkevästi

• Disable tables – näyttää sivun linearisoituna, ilman taulukoita.

• Show structural elements näyttää rakenne-elementit kuten taulukot ja otsikot. Näitä katsomalla voi päätellä onko jokin sivu rakennettu hierarkisesti oikein.

• Use default forms design poistaa lomakkeista erityismuotoilun.

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.

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.

• Kun haluat ohittaa sivulla käytetyn tekstinmuotoilun (tämän ohjeen kohta Yhdenmukainen esittämistapa (WAI-ohje 14.3 (AAA), WAI-ohje 13.4 (AA), KA)), valitse toiseksi alimmaiselta riviltä Accessibility – painike ja valitse Formatting – otsikon alta kaikki vaihtoehdot.

• Suurentaminen/pienentäminen: ota kaikki erityisasetukset poispäältä ja muuta View –valikon Text size – alavalikon arvoja. Kokeile esim. Largest ja Smallest – vaihtoehtoja.

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”