jukka k. korpelajukka k. korpela jokaiselle ... · usein ilmi kaikenlaista muutakin korjattavaa...

Jukka K. KorpelaJukka K. Korpela

www-sivut jokaiselle sopiviksiEsteettömien verkkosivujen tekemisen opas kaikille tekijöille ja teettäjille

TIEKE Tietoyhteiskunnan kehittämiskeskus ry

TIEKE_esteettömyys220503 22.05.2003 08:46 Sivu 11

Esteettömien verkkosivujen tekemisen opas

2

Esteettömyyden arviointiMiksi arviointi? 4Silmäilytestit 5Tarkempi tarkastelu 6Näppäilytestit 7Tarkistaminen erilaisilla selainasetuksilla 7Tarkistaminen ”erilaisilla” selaimilla 8Entä automaattiset tarkistukset? 10Milloin kannattaa arvioida? 10

Esteetön pääsy: toimiva etusivu ja navigointiKohtuullisesti asiaa pääsivulle 11Linkit linkkeinä 12Auta ohittamaan ”vakiojutut” 12Vähemmän tärkeä loppuun 13Eri kielet eri sivuille 13Viittaa versioihin selvästi 13Pitkälle sivulle sisällysluettelo 14Auta eksynyttä 14Jos käytät kehyksiä (frames), … 15

Esteetön perussisältö: selkeää ja havainnollistaTarjoa vaihtoehtoja 16Jaottele jouhevasti 16Nosta tärkeimmät asiat esiin 16Yksinkertaista yleiskieltä 17Kuvita kunnolla 19

Sisällön esteetön toteuttaminenHTML on verkkosivujen äidinkieli 19Pelkkä PDF-muoto ei riitä 20Otsikoi oivasti 20Korosta loogisesti ja visuaalisesti 21Linkit 22Tee taitto mukautuvaksi 23Kirjasinlajit ja -koot 23Tietojen taulukointi 24Taulukoiden parantaminen 25Kuvittamisen tekniikka 25Kuvien vaihtoehtotekstit 26Kuvia voi muokata ja sijoittaa linkin taakse 27Luetelmat 27Värit 29Lomakkeet 30Kielimerkkaus 31

Erikoistekniikoita koskevia ohjeitaTekstivaihtoehdot elementeille 33Karttalinkit (image maps) 34Skriptit ja muut vastaavat 36Lisätietoja 37Esimerkkejä sivustoista 37

Esteettömyyden arvioinnin muistilista 39

JulkaisijaTIEKE Tietoyhteiskunnan kehittämiskeskus rySalomonkatu 17 A, 00100 Helsinkipuh. (09) 4763 0400http://www.tieke.fiUlkoasu ja taittoWorkshop PälviäKuvatMinni HavasPainopaikkaEdita OyCopyrightTIEKE Tietoyhteiskunnan kehittämiskeskus ryISBN 952-9714-29-7Helsinki 2003Sähköinen opas osoitteessawww.tieke.fi/esteettomyysopas/kirjanen/kirjanen.html

Sisällys


Tämä opas on tarkoitettu ensi sijassa verkkosivujen tekijöille.Toinen tärkeä kohderyhmä ovat tekijöiden esimiehet ja sivujenteettäjät; näille suositellaan erityisesti ensimmäistä lukua, Es-teettömyyden arviointi. Niille, jotka ”vain” tuottavat sisältöä,jonka muut liittävät verkkosivuille, kannattaa lukea ensisijaises-ti luku Esteetön perussisältö: selkeää ja havainnollista.

Opas pyrkii olemaan riippumaton siitä, millä ohjelmilla verk-kosivuja tehdään. Erityistä teknistä osaamista ei oleteta. Loppu-puolella on kuitenkin asioita, jotka koskevat vain niitä, jotkakäyttävät eräitä erityisiä tekniikoita sivuillaan.

Opas käsittelee sitä, miten verkkosivut saadaan mahdollisim-man hyvin kaikkien ihmisten käytettäviksi, myös esimerkiksivanhusten, lasten, vammaisten ja liikkeellä olevien. Laajempi esi-tys, joka perustelee menetelmiä ja sisältää viittauksia tarkempiintietoihin, on verkossa oleva TIEKEn Esteettömyysopas.

Opas on tehty yhteistyössä Stakesin ja Suomen DfA (Design-for-All) -verkoston kanssa. Oppaan käsikirjoituksen on tehnytJukka K. Korpela ja viimeistellyt TIEKEn esteettömyysasiantun-tija Reetta Riikonen.

TIEKE kiittää kaikkia yhteistyöstä ja toivoo oppaalle runsasta käyttöä.

Helsingissä 15.05.2003Aatto J. Repo ToiminnanjohtajaTIEKE Tietoyhteiskunnan kehittämiskeskus ry

www-sivut jokaiselle sopiviksi

Lukijalle

Esteettömyyden merkitys onilmeisintä rakennetussaympäristössä. Pyörätuolillapääsee vain tarpeeksileveästä ovesta ja portaitapitkin ei ollenkaan.Esteettömässä rakennuk-sessa ei saa olla korkeitakynnyksiä, eikä liian kapeitaoviaukkoja. Myös hisseissäon oltava riittävän leveätovet.

Tietoyhteiskunnan esteetovat vähemmän havainnolli-sia, mutta se ei vähennä nii-den poistamisen tarvetta.Internetin käyttö on monillesokeille hyvin olennaista;kaikkia kirjoja ei voida jul-kaista sokeainkirjoituksella,mutta kaikki teksti verkkosi-vuilla voidaan tehdä sokei-denkin saavutettavaksi.www-sivujen suunnittelussaon otettava huomioon erilai-set ihmiset. Joskus tämätasa-arvo vaatii erikoisrat-kaisuja ja joskus – www-sivujen esteettömyydessäuseimmiten – vain hyviäyleisiä suunnitteluperiaattei-ta ja toteutuksia.

3



4

Esteettömyyden arviointiArviointia ei tarvitse tehdä kai-kille sivuille, eikä se yleensäolisi mahdollistakaan, ainakaanjokaisen muutoksen jälkeen.Muutamien sivujen kunnollinenarviointi on paljon hyödyllisem-pää kuin kaikkien sivujen pin-nallinen arviointi.

Miksi arviointi?

Seuraavassa kuvattavat esteettömyyden ar-vioinnin yksinkertaiset menetelmät auttavathavaitsemaan, millaisista ongelmista on käy-tännössä kyse ja mitä ne voivat merkitä.Mutta arvioinnista on muutakin hyötyä.

Jos olet aikeissa ryhtyä korjaamaan sivuja,kannattaa yleensä ensin muodostaa karkeaarvio niiden nykytilasta esteettömyydenkannalta. Korjaamiseen tarvittavan työnmäärän ja luonteen selvittäminen on aiheel-lista, jotta osataan aloittaa oikeista asioista javoidaan tehdä realistinen kokonaissuunni-telma. Muuten käy helposti niin, että aloite-taan näpertelemällä eli tekemällä sinänsä oi-keansuuntaisia mutta käytännössä vähämer-kityksisiä korjauksia, ja sitten loppuukin in-nostus tai aika.

Jos taas aiot ruveta tekemään uusia sivuja,sinun kannattaa arvioida aiemmin tekemiä-si sivuja, jotta tiedät, millaisia virheitä kan-nattaa vastedes erityisesti välttää.Vanhoja si-vuja ei ehkä enää korjata, mutta niistä voioppia.

Jos olet vasta aloittamassa verkkosivujentekemisen, niin muiden tekemien sivujen ar-viointi on hyödyllistä. Opit havaitsemaan,

millaisia virheitä usein tehdään ja mitä niis-tä voi seurata. Kannattaa arvioida sentyyppi-siä sivuja, joita itse aikoo tehdä, mutta moni-puolisempikin arviointi voi olla hyödyksi.

Tässä voi ehkä lyödä kaksi kärpästä yhdel-lä iskulla, jos valitset sivuja, joiden tekijöidenvoi olettaa suhtautuvan vakavasti heille lähe-tettävään palautteeseen.Voithan lyhyesti kir-joittaa arviointisi tulokset ja lähettää ne si-vuntekijälle. Lisäksi kun aluksi etsit vaikkapaGoogle-hakupalvelulla sellaisia sivuja, jotkaaihepiiriltään vastaavat omien tulevien sivu-jesi aihetta, ja tutustut niihin, niin voit es-teettömyyden arvioinnin yhteydessä myöskerätä hyödyllisiä linkkejä, löytää taustatie-toja, saada ideoita jne.

Sivujen laatimisen, korjaamisen tai muunmuuttamisen jälkeen tehtävä arviointi puo-lestaan auttaa päättämään, tarvitaanko vieläjoitakin korjauksia, sekä kiinnittämään vastedes huomiota ongelmiin, joita esiintyi.Lisäksi arviointi saattaa olla tarpeen siksi, et-tä sivujen tilaaja tai muu teettäjä on asetta-nut esteettömyysvaatimuksia.


5

Esteettömyyden arviointi

■ Onko sivu kohtuullisen mittainen? Suunnistussivun pitäisi yleensä mahtua kuvaruudulle kerrallaan. Sisältösivu voi olla pitempi,mutta sivu saattaa parantua jakamalla se erillisiksi sivuiksi.

■ Onko selainikkunan ”yläpalkissa”, näkyvä sivun ns. ulkoinen otsikko kuvaava?Ulkoisen otsikon tulisi kertoa, mitä sivu käsittelee, vaikka itse sivua ei vilkaisisi (vai onko siel-lä esimerkiksi Default.asp sivun sisällöstä riippumatta). Eri selaimet esittävät ulkoisen otsikoneri tavoilla. Yläpalkissa esittäminen on useimpien graafisten selainten käyttämä tapa.

■ Selviääkö otsikoista olennaisin? Sisältösivu on parhaimmillaan sellainen, että lukemalla pelkät otsikot saa hyvän käsityksensiitä, mitä sivu käsittelee. Jos suunnistussivulla on paljon linkkejä, kannattaa huomioida, ettäne on ryhmitelty ja ryhmät ovat otsikoitu.

■ Onko sivun sisältö nopeasti hahmotettavissa?Ensivilkaisulla tulee selvitä, onko kyseessä suunnistussivu vai sisältösivu, ja millainen suun-nistussivu tai millaista asiaa sisältävä? Vaikka suunnistussivulla olisi monia erillisiä osia, tulisihahmottua nopeasti, mitä kaikkea sivulla on? Kun otsikoiden lisäksi lukee kunkin kappaleenensimmäisen virkkeen, tulisi olennaisin sisällöstä hahmottua.

■ Onko sivulla erikielisiä tekstejä? Erikieliset tekstit ovat perusteltuja sivuilla, joilta vain tehdään valinta erikielisten versioidenvälillä, samoin kuin viitattaessa sivun muunkielisiin versioihin. Kieliasun tulee muuten ollayhtenäinen, esimerkiksi slangin ja muodollisen kielen sekoittaminen ei ole suotavaa?

■ Onko sivun animaation tai muun liikkuvan elementin mukanaolo perusteltua? Yleensä liikkuvia kuvia tulisi olla vain sivuilla, joiden ainoa tehtävä on jonkin asia havainnollis-taminen ja joilla liikkuva kuva on mukana juuri tätä varten.

Seuraavat esteettömyystarkistukset voi tehdäsilmäilemällä sivua miltei millä tahansa se-laimella. Näihin tarkistuksiin ei tarvita mi-tään erityistä tietoteknistä osaamista, joskinehkä hyvää yleistä arviointikykyä.

Tässä suunnistussivu tarkoittaa sivua, jon-ka päätarkoitus on auttaa käyttäjää löytä-mään häntä kiinnostava sisältö. Tyypillisestikyseessä on jonkinlainen hakemisto- tai ha-kusivu. Sisältösivu puolestaan on sivu, jollaon varsinaista sisältöä. Usein sivuston pääsi-

vulla on yleisluonteista sisältöä kuten yrityk-sen lyhyt yleisesittely, mutta lähinnä pääsivutoimii suunnistussivuna.

On eduksi, jos saat jonkun muun apua ar-viointiin, varsinkin jos kyse on omista sivuis-tasi. Sivuntekijä itse ei useinkaan havaitsehahmotusongelmia, koska niin aihe kuin si-vun rakennekin on hänelle tuttu. Ääneen lu-kemisen testi toimii parhaiten, kun kyse ontodella siitä, että luetaan toiselle ääneen, eikävain omassa mielessä.

Silmäilytestit



6

Esteettömyyden testauksen yhteydessä tuleeusein ilmi kaikenlaista muutakin korjattavaasivuilta, kuten vanhentuneita tietoja, olen-naisia puutteita sisällössä, toimimattomia

linkkejä jne. Havainnot kannattaa kirjata tie-dostoon myöhemmin käsiteltäviksi, koskamuuten ne helposti unohtuvat.

Tarkempi tarkastelu

■ Miten hyvin sivu toimii ääneen luettuna? Tässä jätämme käsittelemättä kuvien, animaatioiden yms. ongelmat, koska niiden tarkasteluvaatii hiukan teknisempää otetta.

■ Onko sisältösivulla selvä kappalejako? Tavallisesti kappalejako on verkkosivuilla sellainen, että kappaleiden välillä on rivin verran tyh-jää tilaa. Muutkin kappalejaon esitystavat ovat mahdollisia, esimerkiksi kappaleen alun sisen-täminen.

■ Onko sivun kieliasu luettava? Kappaleiden tulisi olla kohtuullisen mittaisia, ei liikaa sivistyssanoja ja erikoistermejä ja oikein-kirjoituksen tulisi olla kunnossa. Kieliasun luettavuudesta saa yleensä käsityksen jo muutamankappaleen perusteella. Arviointi pitää tietysti suhteuttaa sivun tarkoitukseen: onko sisältö esi-tetty niin yksinkertaisesti, kuin tarkoitus suinkin sallii?

■ Erottuvatko linkit muusta tekstistä tarpeeksi selvästi?Erottavana seikkana voi toimia muun muassa väri, alleviivaus, kirjasinlaji ja sijoittelu. Yleensäon hyvä, jos erottavia seikkoja on vähintään kaksi, koska käytännössä esimerkiksi värin käyt-tö ei aina toimi.

■ Erottuvatko peräkkäiset linkit toisistaan selvästi? Tämä ei toteudu, jos samalla rivillä on peräkkäin linkkejä ilman, että niiden välissä on muutakuin tyhjää tilaa.

■ Viittaavatko linkit aineistoon, joka vaatii jonkin erityisen ohjelman? Periaatteessa tämä selviää vain kutakin linkkiä seuraamalla. Onko tällaisten linkkien yhteydes-sä asiasta huomautus esim. ”PDF-muotoinen”? Onko sellaiselle aineistolle tarjolla vaihtoehtoi-nen linkki, jonka kautta aineisto löytyy esteettömämmässä muodossa?

■ Aukeavatko linkit niitä normaalisti seurattaessa alkuperäiseen selainikkunaan? Uusiin ikkunoihin aukeaminen aiheuttaa usein ongelmia.


7


Oikein tehtyä verkkosivua voi käyttää myösilman hiirtä. Yksinkertainen testi onkin pan-na hiiri pois ja yrittää käyttää sivustoa. Tosintämä edellyttää, että testaaja on tutustunutsiihen, miten hänen selaimessaan voi asioitatehdä näppäinkomennoilla, mutta tämä onmuutenkin hyödyllistä.

Erityisen tärkeää tällainen testaus on si-vuilla, joilla on vuorovaikutteisuutta kutenlomakkeita. Muutoin kyse on lähinnä siitä,

miten sujuvaa linkkien käyttö on.Useimmissa selaimissa voi siirtyä linkistä

tai lomakkeen kentästä seuraavaan tab-näp-päimellä. Käyttämällä tab-näppäintä niin,että shift-näppäin on alas painettuna, voi vas-taavasti siirtyä taaksepäin. Linkin seuraami-nen onnistuu yleensä Enter-näppäimellä, jaedelliselle sivulle voi palata esimerkiksi käyt-tämällä vasemmalle osoittavaa nuolinäp-päintä yhdessä Alt-näppäimen kanssa.

Näppäilytestit

Tarkistaminen erilaisilla selainasetuksilla

Usein sanotaan, että verkkosivut pitäisi tar-kistaa mahdollisimman monella selaimella.Paljon olennaisempaa on kuitenkin tarkistaane eri selailutilanteissa. Samaa selainta voi-daan käyttää hyvin monella tapaa.

Seuraavassa on yleisiä testausohjeita, jotkaedellyttävät selaimen asetusten muuttelua.Testaus voidaan tehdä erilaisilla selaimilla,mutta tässä annettavat konkreettiset ohjeetasetusten muuttamisesta koskevat suomen-kielisen Internet Explorerin (IE), version 5tai uudemman, käyttöä.

Osa näistä kohdista testaa suoraan sivuntoimivuutta tavallisella selaimella eri tilan-teissa, osa taas pyrkii matkimaan ”epätavalli-sen” selaimen toimintaa.

Tarkista ennen testaamiseen ryhtymistä,

että selaimessasi on säädetty kirjasinkoko(fonttikoko) itsellesi mahdollisimman sopi-vaksi. Tämä tarvitsee yleensä tehdä vain ker-ran kussakin selaimessa. Ota huomioon, ettäkirjasinlaji (fonttityyppi) vaikuttaa eri koko-jen luettavuuteen. Käytä tarvittaessa sopivaatestisivua, jolla on mahdollisimman vähänmitään ulkoasuun liittyviä sivukohtaisia ase-tuksia.

IE:ssä: Näytä Æ Tekstin koko. Tarjolla onvain viisi vaihtoehtoa. Lisäksi koko saattaajoissakin tilanteissa yllättäen muuttua, jolloinse on uudestaan asetettava em. tavalla. Tar-kempi säätäminen on hiukan vaativampaa japerustuu ns. käyttäjän tyylisäännöstön käyt-töön. Useimmissa selaimissa fonttikoon sää-täminen on helpompaa.

■ Kulje sivun sisällä linkistä toiseen tab-näppäimen avullaOnko järjestys looginen? Onko mukana tarpeettomia linkkejä?

■ Vakionavigointi

Jos sivun alussa on ns. vakionavigointi eli sivuston kaikilla sivuilla oleva linkkikokoelma, voikosen ohittaa näppäimistöä käytettäessä? Käytännössä tämä merkitsee, että ennen vakionavi-gointia on linkki, joka vie sen ohitse, sivun varsinaisen sisällön alkuun.

■ Lomakkeen täyttäminenJos sivulla on lomake, täytä se käyttäen pelkästään näppäimistöä. Lisäksi lähetä lomake, jostähän ei sisälly esimerkiksi tilaamista tai muuta vastaavaa.

Oikein tehtyäverkkosivuavoi käyttäämyös ilmanhiirtä.



8

■ Arvioi kirjasinkokoOnko sivun kirjasinkoko sopiva, niin että teksti on helposti luettavissa mutta ei turhan suurta?Osa sivuista yrittää pakottaa kirjasinkoon joksikin määrätyksi, ja tästä voi tulla ongelmia.

■ Säädä kirjasinkoko hyvin suureksiMuuttuuko sivulla näkyvä koko todella? Pysyykö sivu silti kasassa? Kokeile myös hyvin pie-nellä kirjasinkoolla. (IE:tä koskeva ohje oli edellä; tässä tarkoitetaan vaihtoehtoja ”suurin” ja”pienin”.)

■ Toista testi jos kirjasinkoko ei muuttunutkaanJos edellisessä kohdassa ei kirjasinkoko muuttunutkaan, vaikka asetusta muutettiin, toistatesti niin, että pakotat selaimen noudattamaan käyttäjän asettamaa kirjasinkokoa. (IE:ssä: Työkalut ➝ Internet-asetukset... ➝ Yleiset ➝ Muotoiluasetukset, rasti ruutuun ”OhitaWeb-sivuilla määritetyt fonttikoot”.

■ Testaa sivua selaimen oletusvärejä käyttäenTestaa sivua ”ilman värejä”, siis selaimen oletusvärejä käyttäen, käytännössä yleensä mustaavalkoisella. IE:ssä: kuten edellä, mutta rasti ruutuun ”Ohita Web-sivuilla määritetyt värit”.

■ Säädä selainikkunan leveyttäSäädä selainikkunan leveyttä esimerkiksi puoleen tai kolmannekseen kuvaruudun leveydestä.

■ Ota sivun tyylisäännöstöt (style sheets, CSS) pois käytöstäTämä on useissa selaimissa helppoa. Mutta IE:ssä ei suoraan onnistu, vaan tarvitaan kierto-tie, joka ei ole työläs mutta käsitteellisesti ehkä hankala. Jos tämän testin haluaa tehdä IE:llä,voi tutustua dokumentissa Käyttäjän tyylisäännöstö Internet Explorerissa oleviin ohjeisiin.

■ Poista Javascript tai vastaava käytöstäIE:ssä: Työkalut Æ Internet-asetukset… Æ Suojaus, sitten valitaan ”Internet” ja napsaute-taan painiketta ”Mukautettu taso…”, ja kohdassa ”Komentosarjat”, alakohdassa ”Salli aktiivi-set komentosarjat” valitse vaihtoehto ”Poista käytöstä”.

Tarkistaminen ”erilaisilla” selaimilla

Edellä kuvatut testit voi periaatteessa tehdäsamanaikaisesti niin, että teet kaikki kyseisetsäädöt ja sitten käytät sivua tai kokonaista si-vustoa; tosin 2. kohta sisältää kokeilemistaeri kirjasinkokoja käyttäen, mutta tämä onyleensä helppo tehdä ”lennosta”. Käytännös-sä sellaisella testauksella havaitsee useimmis-

taa sivuista lähinnä sen, että sivulla on paljonongelmia esteettömyyden kannalta, ei niin-kään ongelmien luonnetta ja syitä. Jos halu-taan sivusta vähänkään yksilöity esteettö-myysraportti, täytyy tehdä kukin mainituistatesteistä erikseen.

Kätevä testausväline on Opera-selain, jonkasaa osoitteesta ”http://www.opera.com”. Senkäytössä on apua Opera-VUKK:sta. Operansisällä saa control-B:llä esille ikkunan Näp-päinoikotiet Operassa; siinä kuvatut mene-

telmät helpottavat niin esteettömyyden tes-tausta kuin muutakin selailua.

Operalla voi ensinnäkin tehdä varsin käte-västi ne testit, jotka edellä kuvattiin. Esimer-kiksi Javascriptin kytkeminen pois käytöstä


9


■ Ota kuvat pois käytöstäTällöin kuvien tilalla näkyvät sivuntekijän määräämät vaihtoehtotekstit. Onko sivu tällöinymmärrettävä? Napsauttamalla pientä, kameran näköistä kuvaketta, joka on selaimen osoite-rivin edellä, voit vaihtaa selaimen tilaa kolmen vaihtoehdon välillä: lataa ja näytä kuvat; älänäytä kuvia; näytä vain jo ladatut kuvat.

■ Ota taulukot pois käytöstä Tällöin Opera ”linearisoi” taulukot eli esittää taulukon solujen sisällöt vain peräkkäin, mikä vas-taa monien selailutilanteiden ainoaa toimintamahdollisuutta. Menettely (suomenkielisessä ver-siossa): Alt P, sitten valinta ”sivun tyyli”, sitten ruksit pois Taulukot-valinnoista.

■ Ota evästeet (cookies) pois käytöstä Näppäily: F12, kaksi kertaa e, enter. On totta, että evästeet usein helpottavat käyttöä ja siisparantavat esteettömyyttä, mutta huonoissa toteutuksissa sivu ei lainkaan toimi ilman eväs-teitä.

■ Ota kehykset (frames) pois käytöstäHuonosti tehdyt kehyksiä käyttävät sivut ovat tällöin esimerkiksi täysin tyhjiä tai niillä on vainkehotus hankkia kehyksiä tukeva sivu tai esim. teksti ”This page uses frames, but yourbrowser doesn't support them”.

■ Muodosta sivun kaikkien linkkien lista näppäilyllä control-J Onko linkkien määrä kohtuullinen (enintään muutamia kymmeniä)? Ovatko linkkien nimetkuvaavia myös itse sivusta irrallaan? Jos vain kuulisit linkkien listan, pystyisitkö sen avullasuunnistamaan eteenpäin? Jos listassa on samoja nimiä, viittaavatko ne samaan kohtee-seen? (Esimerkiksi niin sanotut click here -linkit rikkovat näitä periaatteita vastaan.)

Toinen hyvä testausväline on tekstiselainLynx. Se ei kuitenkaan ole yhtä monipuoli-nen kuin Opera. Itse Lynxin asemesta voi-daan testailuun käyttää myös verkossa toimi-vaa palvelua Lynx Viewer. Sitä kannattaakäyttää ainakin silloin, kun sivusto käyttääkehyksiä. Lynx nimittäin esittää kehyksiäkäyttävän sivun siten, että siitä näkyvät ke-hysten nimet, ja juuri näitä nimiä esimerkik-si sokeat tarvitsevat.

Pystyisitkö itse valitsemaan järkevästi seuraa-vista vaihtoehdoista?

FRAME: leftFRAME: topFRAME: mainFRAME: bottom

tai käyttöön sujuu (suomenkielisessä Ope-rassa) painamalla ensin F12-toimintonäp-päintä ja sitten s-näppäintä. Mutta lisäksiOperalla voi tehdä testejä, joita ei kuvattu

edellä, koska niiden tekeminen muilla selai-milla on usein varsin hankalaa tai jopa mah-dotontakin.



10

Entä automaattiset tarkistukset?

■ HTML-syntaksintarkistinHTML-syntaksintarkistin eli validaattori, esimerkiksi WDG validator. Validointi ei, toisin kuinusein väitetään, takaa sivun toimivuutta; ks. kirjoitusta HTML-validaattori – mikä se on .

■ CSS-tarkistin kuten W3C CSS validator.

■ Linkkien teknisen toimivuuden tarkistinesimerkiksi Xenu’s Link Sleuth.

■ Waveesittää sivun visuaalisessa muodossa (selaimessa) siten, että siitä ilmenee eräitä loogisenrakenteen perusasioita.

■ Eräiden esteettömyyteen liittyvien piirteiden tarkistinkuten A-Prompt. Huomioi huomautukset esteettömyyden tarkistamisen välineiden ongelmista.

■ UsableNeton maksullinen palvelu. Sillä voi tuottaa varsin yksityiskohtaisen raportin koko sivustosta.Palvelussa on maksuttoman kokeilun mahdollisuus.

■ Tekstin kieliasun tarkistinesimerkiksi MS Word -ohjelman sisältämä.

Kunnollinen esteettömyysarviointi on melkotyölästä, koska esteettömyydessä on kyse hy-vin monimuotoisesta ongelmakentästä. Yh-den sivun arviointiin saattaa hyvinkin men-nä tunti, vaikka osa edellä kuvatuista testeis-tä jätettäisiin tekemättä.

Muutama kaikkein keskeisin ja muutamatyypillinen esimerkkisivu kannattaa arvioida,kun sivuston korjaamiseen ryhdytään tai kunsivustoon on tehty olennaisia rakennemuu-toksia. Tärkeimmät sivut kuten sivuston pää-sivu kannattaa tarkistaa suhteellisen pienen-

kin muutoksen jälkeen, yksinkertaiset teksti-muutokset yms. pois lukien.

Jos sivuille tehdään iso esteettömyyskor-jaus, kannattaa arvioida sivuston esteettö-myys sekä ennen muutosta että sen jälkeen.Tämä antaa käsityksen siitä, mitä on saavu-tettu, ja auttaa arvioimaan toiminnan tulok-sellisuutta, vastaavien parannusten vaikutus-ta vastaisuudessa jne. Lisäksi saadaan listaasioista, jotka jäivät tässä vaiheessa korjaa-matta.

Seuraavista automaattisista tarkistusvälineis-tä voi olla apua, mutta ne tarkistavat vain joi-takin teknisiä seikkoja, jotka muodostavat

vain pienen osan esteettömyydestä tai kuulu-vat yleiseen toimivuuteen.

Milloin kannattaa arvioida?


11

Esteetön pääsy: toimiva etusivu ja navigointi

■ Esimerkki:<title>Jälleenmyyjät (Matti Meikäläinen Ky)</title><h1>Jälleenmyyjät</h1><p>Matti Meikäläinen Ky:n tuotteiden jälleenmyyjiä ovat...</p>


Kohtuullisesti asiaa pääsivulle

Sivuston pääsivulla on hyvä olla pääotsikko,virkkeen tai kahden mittainen esittely ja pe-rusvalikko, josta pääsee seuraavan tason si-vuihin. Tätä perusrakennetta voi harkitustitäydentää kuvalla, lyhyellä uutisella, muuta-milla keskeisillä yhteystiedoilla jne.

Hyvä tavoite on, että pääsivu mahtuu ker-ralla näkyviin, kun sitä katsellaan selainikku-nassa, jonka koko on puolet tyypillisen tieto-koneen kuvaruudusta. Jos tämä koko selvästiylittyy, kannattaa harkita osiin jakamista.

■ Esimerkki:<title>Hilavitkutintuotantoa - Matti Meikäläinen Ky</title><h1>Hilavitkutintuotantoa - Matti Meikäläinen Ky</h1><p><img src=”hilav.png” alt=”” align=”right”>Valmistamme hilavitkuttimia, jotka sopivat Suomenoloihin. Tuotteillamme on viiden vuoden takuu.</p><ul><a href=”tuotteet.html”>Hilavitkutinmalliemme esittelyt</a><a href=”demot.html”>Esimerkkejä hilavitkuttimiemme soveltuvuudesta</a><a href=”jall.html”>Jälleenmyyjät</a><a href=”esitt.html”>Yritysesittely: Matti Meikäläinen Ky</a></ul>

Päävalikossa on hyvä olla suhteellisen pienimäärä vaihtoehtoja, joista on helppo valita,esimerkiksi 5–7. Jos kuitenkin halutaan pää-sivulle laajempi valikko, on hyvä jakaa se loo-gisiin osiin, joilla on omat otsikot ja joistakussakin on pienehkö määrä vaihtoehtoja.

Jokaisella sivulla tulee olla title-elementti.

Sen tulisi kuvastaa kunkin sivun sisältöä, eisivustoa kokonaisuutena. Toisaalta sen tulisiolla alle 60-merkkinen, jos mahdollista. Senteksti näkyy tyypillisesti selainikkunan ylä-palkissa. Teksti on usein sama kuin sivunpääotsikossa, mutta se voi olla myös eri taval-la muotoiltu.

Toimivan pääsivun tarkoitus on edistää organi-saation, yrityksen jne. toimintaa. Hyvä pääsivumahtuu kerralla näkyviin ja siinä on vain koh-tuullisesti asiaa. Sivulla on tärkeää olla näkyväätekstiä, ei pelkkää grafiikkaa.

Hyvä tavoiteon, että pääsi-vu mahtuu ker-ralla näkyviin,kun sitä katsellaan se-lainikkunassa,jonka koko onpuolet tyypilli-sen tietoko-neen kuva-ruudusta.



12

Linkit linkkeinä

Pääsivulla ja muilla ”suunnistukseen” käytet-tävillä sivuilla on erityisen tärkeää, että viit-taukset alasivuille ovat normaaleja linkkejä,eivät esimerkiksi Javascriptillä, Javalla tai ns.karttalinkeillä (image map) tehtyjä. Jos kui-tenkin käytät muuta tekniikkaa kuin tavalli-sia linkkejä, huolehdi siitä, että sivu toimiimyös ilman Javascriptiä tai Javaa tai kuviatms.

Jos käytät kuvaa linkkitekstin asemesta,jotta saat linkin näkymään halutunlaisena,kirjoita kuvalle vaihtoehtoteksti. Kyseinenteksti sisältää tällöin kuvassa näkyvän tekstin.Jos kyseessä muunlainen kuva kuin teksti ku-vana, esimerkiksi omenan kuva viittaamassaomenoita käsittelevään sivuun, niin vaihto-ehtotekstiksi sopii kuvan tarkoitusta vastaavasanallinen ilmaisu, esim. ”Omenat”.

■ Esimerkki:<a href=”linkit.html”><img alt=”Linkit” src=”linkit.gif” border=”0”></a>

Jos sivun alussa on sivustokohtainen ”va-kionavigointi” eli linkit tai painikkeet, joistapääsee sivuston muihin osiin, kirjoita ihan al-kuun ns. piilolinkki sivun varsinaisen sisällön

alkuun. Sama koskee muita laajahkoja aineis-toja, jotka toistuvat samanlaisina joka sivunalussa.

Auta ohittamaan ”vakiojutut”

■ Tämä voidaan tehdä lisäämällä taulukkoon tyhjä elementti seuraavaan tapaan:<table><tr><td></td><td rowspan=”2” valign=”top”>Sivun varsinainen sisältö</td></tr><tr><td valign=”top”>Vakionavigointi</td></tr></table>

Tässä transp.gif viittaa yksipikseliseen läpi-näkyvään gif-kuvaan, joka on käytännössänäkymätön .

Toinen vaihtoehto on järjestää asiat niin,

että vakionavigointi on esimerkiksi puhese-lainten ja linkistä toiseen siirtymisen kannal-ta sivun lopussa vaikka sijaitseekin näkyväs-sä esityksessä sivun vasemmassa laidassa.

■ Kaaviomainen esimerkki:<a href=”#alku”><img alt=”Sivun sisältöön: Hilavitkuttimien valmistus”src=”transp.gif” border=”0” width=”1” height=”1”></a>tähän väliin ”vakionavigointi” (esim. linkkitaulukko)<h1 id=”alku”>Hilavitkuttimien valmistus</h1><p>Hilavitkuttimien> teollinen valmistus perustuu yleensä


13


Sivuista ei ole syytä tehdä erillisiä tekstiver-sioita kuin erikoisissa poikkeustapauksissa.Jos sellainen on kuitenkin tehty eikä asiaa olevielä korjattu tekemällä normaaleista sivuistaesteettömiä, niin tekstiversioon on syytä vii-tata sivun alussa. Muutoinhan esimerkiksiääniselaimen käyttäjä joutuu ensin kuuntele-

maan sisältöä, joka aiheuttaa hänelle ongel-mia, ennen kuin hän kuulee tiedon linkistäsopivampaan versioon. Jos alkuun sijoittami-nen ei ole mahdollista, on parempi sijoittaalinkki loppuun kuin jonnekin keskelle, sillälopusta käyttäjät usein etsivät apua, jos sivul-la on ongelmia.

Asiat, jotka ovat sivuston käyttäjälle vähem-män tärkeitä ainakin jatkuvassa käytössä,kannattaa yleensä sijoittaa sivun loppuun.

Tekniset tiedot sivun päivittäjästä, päivi-tyshetkestä, copyright-merkintä yms. on

yleensä paras panna sivun loppuun, ehkä pie-nemmällä kirjasinlajilla ja ehkä vaakaviivaa(hr) niiden edellä käyttäen. Tällöin ne on hel-pompi hahmottaa sivun varsinaisesta sisäl-löstä erottuviksi.

■ Esimerkki:<hr><small>© 2002 <a href=”http://www.tieke.fi/”>TIEKE</a>. Päivitetty viimeksi 2002-04-01.</small>

Eri kielet eri sivuille

Vältä erikielisten tekstiversioiden sisällyttä-mistä samalle sivulle. On parempi tehdä yk-sikielisiä sivuja, joilta löytyy linkit muunkie-lisiin versioihin. Linkkitekstien on tällöinkuitenkin hyvä olla sen version kielellä, johon

kyseinen linkki viittaa.Vältä myös vieraskielisiä lainauksia. Pa-

rempi tapa on kirjoittaa suomennettu lainausja liittää sen oheen linkki alkutekstiin.

Viittaa versioihin selvästi

Jos jokin sisältö on useana aivan erityyppise-nä esityksenä, tarjoa perussivulla linkit erivaihtoehtoihin selkeästi, esimerkiksi luetel-mana. Tarjoa ennen linkkejä riittävästi tietoavaihtoehdoista niin, että jokainen voi valitahänelle sopivimman.

Tee linkeistä sivun vaihtoehtoisiin versioi-hin yksinkertaisia. Erikielisiin versioihin vii-tattaessa ei ole syytä käyttää maiden lippuja.Sen sijaan itse sivun nimi kullakin kielellä onhyvä ratkaisu.

■ Esimerkki englanninkielisellä sivulla linkit suomen- ja ruotsinkieliseen versioon: <div>In Finnish - <span lang=”fi”>Suomeksi:<a href=”http://www.byroo.example/fi/”>Iloisuusvirasto</a>.</span></div><div>In Swedish - <span lang=”sv”>På svenska:<a href=”http://www.byro.fi/sv/”>Glädjebyrån</a>.</span></div>

■ Jos joudut käyttämään lipunkuvia, kirjoita ainakin hyvät alt-tekstit, tyyliin:<img src=”fi.gif” alt=”Suomeksi: Iloisuusvirasto”>.

Vähemmän tärkeä loppuun

Tarjoa ennenlinkkejä riittä-västi tietoavaihtoehdoistaniin, että jokai-nen voi valitahänellesopivimman.



14

Pitkälle sivulle sisällysluettelo

Yleensä verkkosivun on hyvä olla melko ly-hyt. Tähän päästään jakamalla sisältö sopi-viin ”annospaloihin”. Joskus kuitenkin sivuon pitkä, esimerkiksi sen takia, että jokin ai-neisto on tarjolla myös yhtenä tiedostonamuun muassa helppoa tulostamista varten.

Kirjoita pitkän sivun alkuun sisällysluette-lo, jonka kohdat ovat linkkejä alaotsikoihin.”Pitkänä” voi pitää ainakin sivua, joka pape-rille tulostettuna on pitempi kuin kolme A4-arkkia. Lyhyemmälläkin sivulla sisällysluette-lo usein auttaa.

■ Sisällysluettelo voidaan tehdä seuraavaan tapaan:<ul><li><a href=”#tiiv”>Tiivistelmä ehdotuksista</a></li><li><a href=”#teht”>Työryhmän toimiksianto</a></li>— —</ul>

■ Linkkien kohteet määritellään tällöin esimerkiksi seuraavasti:<h2 id=”tiiv”>Tiivistelmä ehdotuksista</h2>

Jokaisella sivulla tulisi olla ainakin yksi link-ki, jonka kautta käyttäjä löytää sivun asiayh-

teyden ja mahdollisuuden suunnistaa sivus-ton muille sivuille. Yksinkertaisimmassa ta-pauksessa sivun lopussa tai alussa on linkkipääsivulle. Se on hyvä kirjoittaa niin, ettälinkkiteksti jo sanoo, mistä on kyse.

Muista, että monet päätyvät sivulle esi-merkiksi seuraamalla muualla olevaa linkkiätai tutkimalla tekemänsä haun (esimerkiksiGoogle-haun) tuloksia. He tarvitsevat jotain,josta heti näkee, missä ollaan.

Pienessä sivustossa (esimerkiksi alle kym-menen sivua) riittää, että pääsivulla on linkitkaikkiin sivuihin ja kaikilla sivuilla linkit pää-sivuun. Isoille sivustoille on hakutoimintoerittäin hyödyllinen.

Keskikokoiselle sivustolle riittää tehdä esi-merkiksi erillinen sivu, jossa on linkit kaik-kiin sivuihin niiden otsikon mukaan aakkos-järjestyksessä, ja viitata siihen pääsivulla.

■ Esimerkki:<a href=”lista.html”>Sivuston kaikki sivut aakkosjärjestyksessä</a>

Auta eksynyttä


15


Kehysten käytön monille ihmisille aiheuttamia ongelmia voidaan huomattavasti vähentää:1. Kehyksille annetaan (name-määritteissä) nimetNimet kuvaavat niiden merkitystä, ei sijoittelua. Nimet kirjoitetaan samalla kielellä kuin sivu muu-tenkin. Siis esimerkiksi ”sisältö”, ei ”oikea” eikä ”content”, jos sivu on suomea.

2. Kehyksetön vaihtoehto noframes-elementtiinKehyssivulle, frameset-elementin sisälle, kirjoitetaan kehyksetön vaihtoehto noframes-element-tiin. Yksinkertaisimmillaan se koostuu otsikosta ja linkistä siihen valikkosivuun, joka kehysver-siossa on navigointikehyksessä.

3. Kehyksiä vähänKehyksiä käytetään vain pieni määrä, tyypillisesti kaksi tai ehkä kolme. Erityisesti vältetäänsisäkkäisiä kehyksiä.

Jos käytät kehyksiä (frames), …

■ Esimerkki:<frameset cols=”150,*”><frame name=”valikko” title=”Sivuston päävalikko” src=”navi.html”><frame name=”sisältö” title=”Sisältökehys” src=”sis.html”><noframes><h1>Rossumin universaalit robotit</h1><p>Pyydämme siirtymään <a href=”nav.html”>päävalikkosivullemme</a>.</p></noframes>

</frameset>



16

Esteetön perussisältö: selkeää ja havainnollista

Tärkeimmät asiat kannattaa esittää ensin. Tä-mä pätee paitsi sivun tasolla myös sen osissa,kappaleen pitäisi alkaa pääasian sanomisella.Vaikka esimerkiksi tutkielman tärkeimmätpäätelmät saadaankin kiteytyiksi vasta työnlopussa, niin verkkosivulla päätelmien paik-ka on alussa.

Sisällöntuotannossa kannattaa merkitämuistiin, mitä tekstin eri osia kannattaa ko-rostaa, kuten kappaletta suhteessa muihin

kappaleisiin tai sanoja kappaleiden sisällä.Teknisessä toteutuksessa voidaan päättää, mi-tä korostustekniikoita käytetään, usein on pa-ras nostaa keskeiset asiat esille otsikoihin, si-vun alkuun ja kunkin kappaleen alkuun. Tä-mä ei estä käyttämästä lisäksi ulkoisia koros-tuskeinoja, kuten sivun ensimmäisen kappa-leen esittämistä isommalla kirjasinlajilla.

Tarjoa vaihtoehtoja

On hyvä, jos sama sisältö voidaan tarjotavaihtoehtoisissa muodoissa, esimerkiksi teks-tinä eri kielillä (esimerkiksi suomi, ruotsi,englanti), yksinkertaistettuna tekstinä (kutenselkokielellä), kuvakertomuksena, videoesi-tyksenä ja viittomakielellä. Käytännössä tie-tenkin mahdollisuudet tällaiseen ns. moni-kanavaisuuteen ovat usein varsin rajalliset.

Vaihtoehtoisten esitysmuotojen tarjonta

on erityisen tärkeää:• kun on olennaista, että sisältö on kaikkienkansalaisten saavutettavissa • kun sisältö on tarkoitettu ennen muutavammaisille • kun sisältö on luonteeltaan sellaista, että senomaksumisessa on suurta hyötyä esimerkik-si kuvallisesta esityksestä tai äänestä.

Jaottele jouhevasti

Sisältösivu kannattaa jakaa osiin, joilla on ha-vainnolliset, sisältöä vastaavat otsikot. Useinsivun asiasisältö voidaan luontevasti jakaaisohkoihin osiin ja nämä puolestaan pienem-piin, yhden tai muutaman kappaleen mit-taisiin osiin. Ainakin kolmen kappaleen vä-lein on hyvä olla jonkintasoinen väliotsikko.

Hyvä nyrkkisääntö on, että pelkät otsikotlukemalla pitäisi jo saada yleiskäsitys sivun si-sällöstä. Ihanteellinen otsikko sisältää kolmetai neljä sanaa, joista yksi on toimintaa ilmai-seva verbi. Tähän ei useinkaan päästä, mutta

sen vakava tavoittelukin auttaa. Erityisen tär-keä se on uutisissa.

Käytännössä jaottelu ja otsikointi usein to-teutetaan samalla, kun sivuun teknisesti lisä-tään otsikkoelementit, ks. kohtaaOtsikoi oi-vasti. Periaatteessa voidaan toki menetelläniin, että sisällöntuottaja vain merkitsee jol-lakin sovitulla tavalla, mitkä tekstit ovat min-kintasoisia otsikoita, ja tekninen toteuttajahoitaa loput.

Nosta tärkeimmät asiat esiin

Mitä keskeimmästä sivusta on kyse, sitä tärkeämpää on, että kieli on help-poa yleiskieltä. Otsikot lukemalla pitäisi saada yleiskäsitys sivun sisällöstä.


17

Esteetön perussisältö: selkeää ja havainnollista

ta

Nyrkkisääntöjä:• aloita kappale ydinvirkkeellä, josta ilmenee kappaleen pääsisältö tai ainakin aihe • virkkeet lyhyiksi – mutta ei töksähtäviksi • jaksota pitkät virkkeet pilkuilla • sanavarastona normaali yleiskieli • konkreettista kieltä, ei käsitteellisyyttä • kerro kuka tekee mitä, ei kenen toimesta suorittamista toteutetaan • vältä erityissanastoa, lyhenteitä, erikoissymboleita ja koodeja; jos joudut käyttämään niitä,

anna selitykset • jätä pois tarpeettomat asiat, ja sano tarpeelliset suoraan • vältä viitteellistä, vihjailevaa kieltä varsinkin valikoissa.

■ Esimerkki erään tietosivun kielestä ja siitä, miten sitä voisi parantaa:

Joukkoliikenteen matkakortti ja siihen liittyvät tarkastukset

Kapulakieli:Tarkastajat näkevät myös kenen henkilökohtainen matkakortti on kyseessä ja voivat epäselvissätapauksissa pyytää matkustajaa todistamaan henkilöllisyytensä. Jos matkustajalla ei ole esittäämitään henkilöllisyyden osoittavaa todistusta, ei sen puuttumisesta kirjoiteta tarkastusmaksua(42 euroa) vaan tarkastaja pyytää matkustajaa antamaan tiedot suullisesti tai vaihtoehtoisestikirjallisesti näitä tilanteita varten laaditulle lomakkeelle. Tarkastaja tarkistaa annetut tiedot pai-kan päällä puhelimella väestörekisterikeskuksesta.

Selkokieli:Jos matkustat henkilökohtaisella matkakortilla, voi tarkastaja pyytää sinua todistamaan henki-löllisyytesi. Jos sinulla ei ole mitään henkilöllisyystodistusta, niin tarkastaja kysyy sinulta henki-lötietojasi. Hän pyytää sinua joko kertomaan ne suullisesti tai kirjoittamaan ne erityiselle lo-makkeelle. Sitten tarkastaja saman tien tarkistaa puhelimella, että antamasi tiedot vastaavat vä-estörekisterissä olevia tietoja.

Yksinkertaista yleiskieltä

Kirjoita niin yksinkertaista kieltä, kuin vies-tinnän tarkoitus sallii. Verkkosivujen tavalli-simpia ongelmia on, että kieli on raskasta ja

vaikeatajuista, esimerkiksi vaikeaa virkakiel-tä, sekavaa tajunnanvirtaa tai yliampuvaamarkkinointikieltä.

Mitä keskeisemmästä sivusta on kyse, sitä tär-keämpää on, että kieli on helppoa yleiskieltä.Asia kannattaa jakaa osiin ja tasoihin: kerrosuurelle yleisölle tärkeät perusasiat sivulla, jo-ka on hyvin selvällä kielellä kirjoitettu, ja lii-tä loppuun linkki tai linkkejä tarkempiin se-

lostuksiin. Tämä on myös usein ratkaisu sii-hen ongelmaan, että tekstin ymmärrettävyysvaatii sen voimakastakin lyhentämistä ja yk-sinkertaistamista.Voit siis jättää pois perussi-vuilta ne asiat, jotka kiinnostavat vain pientäosaa lukijoista.


18

Monet asiat on helpompi ymmärtää, kun neesitetään kuvilla. Mitä konkreettisemmistaasioista on kyse, sitä enemmän kuvat autta-vat. Kuva voi olla piirros, valokuva, tietoko-neella tehty diagrammi tai kaavakuva tms.

Myös orientoivista ja vain koristeellisista-kin kuvista on usein apua. Sivun aihepiiriäheijasteleva kuva, mahdollisesti jopa tausta-kuva, voi auttaa lukijaa mielessään suuntau-tumaan teemaan ja pitämään sen mielessään.

Jotta kuva toimisi, sen tulisi olla mahdolli-simman yksiselitteinen ja selkeä. Valokuvissaon usein se ongelma, että ei ole selvää, mitkäasiat ovat olennaisia ja mitkä vain sattuvatolemaan mukana kuvassa. Myös esimerkiksikaaviokuva voi sisältää liiaksi yksityiskohtia.Epäselväksi voi jäädä myös se, mikä on kuvantarkoitettu viesti.

Kuvien on syytä olla melko pieniä. Hyvänyrkkisääntö on, että leveyden ylittäessä 400kuvapistettä (pikseliä) alkaa tulla ongelmia jaettä 600 kuvapisteen jälkeen ongelmat ovatisoja. Ehdottomia rajoja ei kuitenkaan ole.

Verkkosivuille voidaan toteuttaa myös liik-kuvia kuvia. Niitä on syytä välttää, harvojapoikkeustapauksia lukuun ottamatta. Sa-moin on syytä yleensä välttää kuvia, joissa onräikeitä värejä. Tekstiä ei yleensä tulisi esittääkuvina; poikkeuksena ovat logot ja sellaisettavaramerkit, joissa ulkoasu on osa itse sym-bolia.

Kun päätetään ottaa mukaan kuva, tulisimyös ratkaista, millainen kuvateksti siihenehkä liitetään ja mikä on kuvan vaihtoehto-teksti. Nämä ovat eri asioita: kuvateksti ontarkoitettu luettavaksi kuvan ohessa, vaihto-ehtoteksti kuvan sijasta silloin, kun kuvaa eisyystä tai toisesta nähdä.

Esimerkiksi valokuva valtiomiesten tapaa-misesta ei yleensä itsessään sano mitään, elleisiihen liity kuvatekstiä, joka kertoo, ketkä ta-pasivat, missä tarkoituksessa jne. Kuvateksti

voi usein puuttua; esimerkiksi pelkkä koris-tekuva ei sellaista yleensä kaipaa. Vaihtoehto-tekstin tulee aina olla mukana, mutta se voiolla tyhjä, jos kuva on pelkkä koriste tai joskuva vain havainnollistaa jotakin, joka on jotekstissä täysin sanottu.

Vaihtoehtoteksti syntyy parhaiten siten, et-tä sitä harkitaan jo sisältöä suunniteltaessa javalittaessa. Jos otamme mukaan tämän ku-van, niin mitä haluamme näkyvän tai kuulu-van sen tilalla, jos itse kuva ei ole käyttäjännähtävissä? Toisin päin sanottuna: mitä kir-joittaisit, jos et voisi käyttää kuvaa?

Hyvän kuvituksen tekeminen on vaativaaja työlästä. Vähän kuvia on kuitenkin yleensäparempi vaihtoehto kuin huono, harhaan-johtava tai hämmentävä kuvitus.

Kuvita kunnolla

Kuvateksti ontarkoitettuluettavaksi kuvan ohessa,vaihtoehto-teksti kuvan sijasta silloin,kun kuvaa eisyystä tai toi-sesta nähdä.



19

Yleensä HTML-muoto on esteettömin tapatoteuttaa verkkosivut. Sitä myös käytännössäyleensä käytetään, vaikka monet sivunteko-ohjelmat piilottavatkin HTML-koodin si-vuntekijän silmiltä.

Tämän luvun ymmärtäminen (ja esteettö-mien verkkosivujen tekeminen) vaatii käy-tännössä jonkin verran HTML:n osaamista.Lisäksi on osattava muokata sivun HTML-koodeja joko suoraan taikka sellaisilla väli-neillä, että sivuntekijä tietää, mitä tapahtuu.

Esimerkiksi FrontPage-ohjelmilla voi kyl-lä tehdä ja muokata verkkosivuja näkemättäHTML-koodia. Myös monet esteettömyyttäparantavat toimenpiteet voi tehdä suoraanohjelman valikoiden kautta. Mutta esimer-kiksi kuvan yksinkertainen lisääminen sivul-le tuottaa koodin, joka ei sisällä lainkaan teks-tivaihtoehtoa. Mutta napsauttamalla kuvaa

hiiren oikeanpuoleisella napilla ja valitsemal-la ”Kuvan ominaisuudet…” saadaan esille ik-kuna, jossa voi kirjoittaa alt-tekstin, kohtaan”Vaihtoehtoiset esitykset”, alakohtaan ”Teks-ti”. Toinen vaihtoehto on valita ohjelmanNäytä-valikosta kohta HTML ja muokatasuoraan sivun HTML-koodia eli kirjoittaaimg-elementtiin alt-määrite.

Seuraavassa kuvataan esteettömyyttä pa-rantavia menettelyjä HTML-koodin tasolla.Yksi syy tähän on, että asioiden tekeminen si-vunteko-ohjelmien valikoiden kautta vaihte-lee suuresta ohjelmasta ja jopa ohjelman ver-siosta toiseen. Lisäksi osa menettelyistä ontehtävissä vain HTML-koodia käsittelemällä.Suomenkielistä opastusta HTML:ään löytyymuun muassa Makupalat-linkkikirjastonHTML-osasta.

Sisällön esteetön toteuttaminen

Tämä luku käsittelee sitä, mitensisällöstä tehdään verkkosivu.Vaikka itse sisältö olisi esteetön-tä, voivat teknisen toteutuksenvirheet luoda esteitä sisällön vastaanottamiselle. Esimerkiksitekstin taittaminen moneen palstaan aiheuttaa verkkosivuillausein suuria ongelmia käyttäjille.


HTML on verkkosivujen äidinkieli



20

Valitse otsikkomerkkaus loogisesti: pääotsik-ko eli koko sivun otsikko on h1-elementti, si-vun ylimmällä tasolla osiin jakavat alaotsikotovat h2-elementtejä jne.

Usein on vältetty otsikkoelementtien käyt-töä ja käytetty sen sijaan toisenlaista merk-kausta kuten font-elementtejä sen takia, ettäselaimet esittävät otsikot ”liian isoina ja liha-vina”. Ongelma on kuitenkin ratkaistavissasiististi käyttämällä tyylisäännöstöjä (CSS),joilla voidaan viritellä näkyvää ulkoasua tar-

kastikin. Lyhyt johdanto aiheeseen ja parityypillistä esimerkkiä löytyvät linkistähttp://www.cs.tut.fi/~jkorpela/www/tyylit.html

Otsikoille on hyvä määritellä id-määrit-teet, joiden avulla otsikoihin eli käytännössäsivun osiin voi viitata linkeillä. Vaikka et itseaikoisi niin tehdä, joku muu voi haluta viita-ta sinun sivusi erityiseen osaan, esimerkiksiopastaakseen jonkun lukemaan juuri hänelletärkeää asiaa.

Pelkkä PDF-muoto ei riitä

Vähemmän tärkeiden sivujenkin tulisi ollakaikkien saavutettavissa, ei esimerkiksi vainPDF-muodossa. HTML-muodon rinnallakäytettynä PDF-muoto sen sijaan on useinhyödyllinen. Usein kuitenkin verkkosivujentoteuttaja saa jonkin aineiston vain PDF-muodossa.

Jo MS Word-muotoinen vaihtoehto, jokaon sivuntekijän melko helppo tuottaa PDF-

muodostakin, parantaa tilannetta jonkin ver-ran. Joka tapauksessa on syytä mainita linkinyhteydessä, että se viittaa esim. PDF-muotoi-seen dokumenttiin. Maininnan voi tehdä eritavoin ja siitä voi ehkä tehdä linkin doku-menttiin, joka kertoo, miten PDF-tiedostojavoi käyttää.

■ Esimerkki: (Dokumentti on <a href=”http://www.cs.tut.fi/~jkorpela/pdf.html” title=”Tietoa PDF-muodosta ja sitä käsittelevistä ohjelmista”><abbr title=”Portable Document Format”>PDF</abbr></a>-muotoinen.)

Usein on apua kaikille siitä, että esimerkiksiPDF- ja Word-muotoisten tiedostojen sisäl-lön lyhyet tiivistelmät ovat saatavilla esteettö-mässä muodossa. Käytännössä tämä tarkoit-

taa esim. sitä, että HTML-sivulla on linkkejäsellaisiin tiedostoihin ja linkkien yhteydessätiivistelmät.

Otsikoi oivasti

■ Esimerkki:<h2 id=”auki”>Aukioloajat<h2>


21


Korosta loogisesti ja visuaalisesti

Merkitse tekstin korostettavat sanat ensisijai-sesti loogisella merkkauksella, em (korostus,emphasis) ja strong (vahva korostus). Näidentyypilliset esitysasut selaimissa ovat kursi-vointi ja lihavointi. Tyylisäännöstöllä voi ha-luttaessa pyrkiä vaikuttamaan näkyvään esi-tysasuun.

Harkittu ja hillitty värien käyttö voi toimia

hyvin, samoin kirjasinlajin vaihto. Sen sijaanhuonoja korostuskeinoja etenkin verkkosi-vuilla ovat alleviivaus, suuraakkosilla kirjoit-taminen ja harventaminen.

Kokonaisten kappaleiden korostamiseen eiole kovin hyvää tapaa HTML:ssä. On tokimahdollista merkata kappaleen koko sisältöem- tai strong-elementiksi.

■ Esimerkki:<p class=”em”><em>Muista irrottaa laite sähköverkosta, ennen kuin avaat sen. Muutoin voitsaada tappavan sähköiskun.</em></p>

Kokonainen kappale kursivoituna tai liha-voituna ei kuitenkaan ole helppolukuinen.Esimerkkimme on lyhyt, mutta joskus halu-taan painottaa pitkiäkin kappaleita. Luetta-vuutta voi auttaa tyylisäännöstöllä, jonka

mukaan korostuskeino on jokin muu kuin se,mitä selain normaalisti käyttäisi. Esimerkissäon tähän jo varauduttu sillä, että p-elemen-tille on annettu oma class-määrite.

■ Tyylisäännöstöön voidaan tällöin kirjoittaa esimerkiksi näin:p.em em { font-style: normal; }p.em border: solid #a00000 0.1em;

padding: 0.2em; }

Esimerkissä on ulkoisena korostuskei-nona kappaleen esittäminen laatikos-sa, jolla on punertava kehys. Moniamuitakin keinoja voidaan käyttää,esimerkiksi tekstin lievää suuren-tamista, hiukan erilaista tausta-väriä jne., ei kuitenkaan kovinmonia keinoja yhtäaikaa. Sisen-täminen on yksi mahdollinenkorostuskeino, mutta ei kovin sel-keä, koska sitä käytetään niin mo-nenlaisiin tarkoituksiin.

Yhtä tärkeää kuin on korostaatärkeitä asiakohtia on välttää liianlaajojen osien korostamista ja liianvahvoja korostuskeinoja. Jos koros-tat kaikkea, et korosta mitään: teks-tisi onkin tasapaksua, vain pak-summalla.

Yhtä tärkeääkuin on koros-taa tärkeitäasiakohtia onvälttää liianlaajojen osienkorostamistaja liian vahvojakorostus-keinoja.



22

T I E K E

■ Esimerkki:<div><a href=”/”>Hypermystiikan tutkimuskeskus</a>,<a href=”/nolla/”>Nollatutkimuksen yksikkö</a>. 1.4.2003.</div>

■ Esimerkki:<a href=”http://www.tieke.fi”><img alt=”” src=”tiekelogo.png”width=”27” height=”26” style=”vertical-align:middle; border:none”> TIEKE</a>

Esitysasu on tällöin seuraavanlainen:

Linkit

Kirjoita linkkien tekstit sellaisiksi, että ne ovatmielekkäitä ja kuvaavia irrallisinakin, esimer-kiksi sivun kaikkien linkkitekstien listassa.Älä käytä sellaisia linkin nimiä kuin ”klikkaa

tästä”. Älä käytä samaa tekstiä kahden linkintekstinä, elleivät ne viittaa samaan kohtee-seen.

■ Esimerkki linkistä:<a href=”ehd2022.html”>Ehdotus vuoden 2022 toimintasuunnitelmaksi</a>

Kirjoita joka sivulle ainakin linkki, joka viit-taa siihen asiayhteyteen, johon sivu kuuluu.

Usein se voi samalla toimia sivun eräänlaise-na allekirjoituksena.

Vältä linkkien sirottelemista tekstin sekaan.Usein on parempi koota linkit sivun loppuuntai ainakin tekstikappaleen jälkeen. Jos sivul-le tulisi kymmeniä linkkejä, on ehkä parem-pi tehdä erillinen linkkisivu, jolla linkit onryhmitelty otsikoiduiksi kokonaisuuksiksi.

Käytä normaaleja HTML:llä tehtyjä link-kejä mieluummin kuin JavaScriptillä toteu-tettuja.Vältä linkkien tekemistä sellaisiksi, et-

tä ne normaalisti käytettäessä avaavat uudenikkunan.

Usein on hyvä, että linkin yhteydessä onkuva. Sen sijaan pelkkä kuva linkkinä onyleensä huono ratkaisu. On mahdollista teh-dä niin, että sekä kuva että teksti toimivatlinkkinä samaan kohteeseen. Tällöin on pa-rasta yhdistää ne yhdeksi linkiksi.


23


Jos siis teemme palstoituksen HTML-taulu-kolla, kannattaa HTML-merkkaus kirjoittaayksinkertaiseksi. Ulkoasun yksityiskohtia onhelpompi viritellä CSS:llä.

Esimerkiksi palstojen yläreunojen tasaa-minen onnistuu säännöllä td {vertical-align:top;}. Sarakkeet saa keskenään saman-

levyisiksi säännöllä td {width: 50 %;}.Jos teet palstoitetun listan, esimerkiksi

linkkilistan, pyri huolehtimaan siitä, että seon riveittäin luettuna mielekäs. Jos lista onaakkosellinen, on siis parempi, että se eteneeriveittäin eikä sarakkeittain.

Tee taitto mukautuvaksi

Jos teet sivuillesi erityisen taiton taulukoillatai muutoin, huolehdi siitä, että sivusi toimi-vat silloinkin, kun kirjasinkoko on hyvin suu-ri. Vältä kiinteitä (pikselimääräisiä) sarakele-veyksiä. Erityisesti vaarallista olisi luottaa sii-hen, että kirjasinkoko on jokin määrätty, jaasettaa taulukon soluille kiinteät koot senmukaan.

Jos kuitenkin taitat sivun kiinteään levey-teen, vältä ainakin yli 500 pikselin leveyttä.Vältä myös sellaisia kuvia, tietotaulukoita jamuita rakenteita, jotka tyypillisissä oloissavaativat yli mainitun leveyden. Jos esimerkik-si kuvan pitää olla leveämpi, harkitse, voitkotehdä kuvasta pienennetyn version, joka toi-mii linkkinä täysikokoiseen versioon.

■ Yksinkertaisen palstoituksen, jossa kaksi suunnilleen samankokoista kokonaisuutta on rinnakkain, voi tehdä seuraavanlaisella HTML-merkkauksella:<table><tr><td>Ensimmäisen palstan sisältö.</td><td class=”col2”>Toisen palstan sisältö.</td></tr></table>

■ Tähän voidaan liittää vaikkapa seuraavanlainen tyylisäännöstö, joka tekee palstojen väliin värillisen pystyviivan:.col2 {border-left: solid #090 0.06em;padding:0.5em; }

Kirjasinlajit ja -koot

Jos halutaan asettaa kirjasinlaji, on helpointatehdä se CSS:ssä, asettamalla font-size-omi-naisuus. Jos halutaan sama kirjasinlaji kokosivulle, niin periaatteessa riittää asettaa se bo-dy-elementille. Käytännössä on selainten vir-heiden takia hyvä ottaa caption, th ja td mu-kaan listaan, jos sivulla on taulukoita.

Kirjasinkoon asettaminen (esim. <font si-ze=”...”>) on yleensä tarpeetonta ja usein hai-tallistakin. Tavallisesti on parasta antaa käyt-täjän valinnan vaikuttaa sellaisenaan.

Joskus on kuitenkin hyvä ehdottaa suh-teellista fonttikokoa. Lähinnä tämä koskeefonttikoon lievähköä pienentämistä silloin,



24

■ Esimerkkejä:<style type=”text/css”>body, caption, th, td { font-face: Arial, sans-serif; }h1 { font-size: 110%; }</style><h1>Pienen sivun pääotsikko</h1><p>Tavallinen kappale.</p><p><small>Tämä on vähemmän tärkeä kappale.</small></p>

Tietojen taulukointi

Monet tiedot sopivat parhaiten taulukkoinaesitettäviksi. Tämä koskee esimerkiksi tilasto-tietoja ja hinnastoja.

Pyri kirjoittamaan ennen taulukkoa sekäselostus siitä, millainen taulukko on tulossa,että mahdollisuuksien mukaan sanallinenkuvaus taulukon olennaisimmasta sisällöstä,viestistä. Ellei taulukko ole pieni, on ennentaulukkoa hyvä olla piilolinkki, jolla taulukonvoi ohittaa.

Tee taulukoista kohtuullisen pieniä niin,että taulukon sisältö on hahmotettavissa.Väl-tä erityisesti taulukoita, joissa on hyvin mo-nia sarakkeita. Tarvittaessa jaa aineistouseammaksi taulukoksi.

Jos taulukko on laaja, harkitse sitä, että teetsiitä oman sivunsa ja sille ehkä vaihtoehdok-si linearisoidun version, joka sopii paremminesimerkiksi ääneen luettavaksi. Yksi hyvävaihtoehto voi olla hakutoiminto, jolla saajostakin tietomassasta haluamansa tiedot, sensijaan että koko tietomassa olisi www-sivullataulukkona.

Seuraavassa esimerkki kaavamaisen taulu-kon perusrakenteesta, jossa on erotettu toi-sistaan otsakesolut (th, table header) ja sisäl-tösolut (td, table data) sekä sijoitettu otsikko-rivit thead-elementin sisään ja taulukon var-sinainen tietoaines tbody-elementin sisään.

■ Esimerkki:<table><caption>Taulukon otsikko</caption><thead>

<tr><th>otsikkosolu</th><th>otsikkosolu</th>...</tr></thead><tbody>

<tr><td>sisältösolu</td><td>sisältösolu</td>...</tr><tr><td>sisältösolu</td><td>sisältösolu</td>...</tr>

</tbody></table>

kun jokin teksti on vähemmän tärkeää kuinnormaaliteksti. Se voidaan tehdä CSS:ssäfont-size-ominaisuudella (esim. font-size:

80%) taikka HTML:ssä esimerkiksi small-merkkauksella.

Tee taulukoistakohtuullisenpieniä niin, ettätaulukon sisäl-tö on hahmo-tettavissa.


25


Kirjoita taulukko niin, että se toimii myös ri-veittäin ääneen luettuna. Tämä saattaa joskusvaatia ”yksiköiden viemistä soluihin”, niin et-tä solussa on esimerkiksi ”100 m” eikä vain”100”. Tämä koskee tapauksia, joissa – toisinkuin esimerkissämme – eri sarakkeet sisältä-vät erilaatuisia suureita. Ota kuitenkin huo-mioon, että taulukon vaatima leveys ei mie-lellään saisi kasvaa yli 500 pikselin.

Valitse taulukkoon otettavien lukujentarkkuus sopivaksi, ottaen huomioon, mitentarkkaa informaatiota esityksen sisältö vaatii.Edellä olevassa taulukossa oli tarkoitus esit-tää tarkat luvut, mutta usein tarkkuuden pie-nentäminen (esim. 205 000 tai jopa 200 000eikä 204 962) parantaa havainnollisuutta jaluettavuutta.

Taulukoiden parantaminen

Taulukon esteettömyyttä voi parantaa lisää-mällä merkkaukseen seuraavat table-ele-menttiin summary-määrite, joka kuvaa tau-lukon rakenteen, th-elementteihin abbr-määritteitä, jotka ehdottavat solun sisällölle(käytännössä sarakkeen tai rivin nimelle) ly-hyemmän tai muuten sujuvamman lukuta-van, th-elementtiin määrite scope=”row”taiscope=”col” sen mukaan, onko kyseessä rivin

vai sarakkeen otsikkosolu.Näitä käytettäessä ensisijaisesti ajatellaan

ihmisiä, jotka käyttävät puheselainta. Kysei-set määritteet auttavat useita selaimia luke-maan taulukon sisältöä paremmin; esimer-kiksi solun sisällön lukeminen muodossa ”Is-lanti, maa-ala, satatuhatta kaksisataaviisi-kymmenä” on selkeämpää kuin pelkän luvunlausuminen.

■ Esimerkki taulukosta, jossa käytetty edellä kuvattuja menettelyjä:<table summary=”Ensimmäisessä sarakkeessa on valtion nimi, toisessa valtion kokonaispinta-ala ja kolmannessa sen maapinta-ala. Yksikkönä on neliökilometri.”><caption>Pohjoismaiden pinta-alat (km2)</caption><thead><tr><th scope=”col”>maa</th><th scope=”col” abbr=”ala”>kok.pinta-ala</th><th scope=”col” abbr=”maa-ala”>maapinta-ala</th></tr>

</thead><tbody><tr><th scope=”row”>Ruotsi</th> <td>449 964</td> <td>410 928</td></tr><tr><th scope=”row”>Suomi</th> <td>337 030</td> <td>305 470</td></tr><tr><th scope=”row”>Norja</th> <td>324 220</td> <td>307 860</td></tr><tr><th scope=”row”>Islanti</th> <td>103 000</td> <td>100 250</td></tr><tr><th scope=”row”>Tanska</th> <td> 43 070</td> <td> 42 370</td></tr></tbody></table>

maa kok.pinta-ala maapinta-alaRuotsi 449 964 410 928Suomi 337 030 305 470Norja 324 220 307 860Islanti 103 000 100 250Tanska 43 070 42 370

■ Esimerkkitaulukko:

Pohjoismaiden pinta-alat (km2)



26

Johtaja Nemo Ignotus:asiakaspalvelu

Johtaja Nomen Nescio:tietojärjestelmät

Johtaja Aliquis Alter:

hallinto ja talous

Ylipääjohtaja Nomen Notetur: yleinen johtaminen ja kehittäminen

■ Esimerkissä käytetty merkkaus on seuraava:<p align=”center”><em>Erityisviraston organisaatio2020-04-01 alkaen</em><br><img alt=”Ylipääjohtaja Nomen Notetur: yleinen johtaminen ja kehittäminen.Johtaja Nemo Ignotus: asiakaspalvelu.Johtaja Nomen Nescio: tietojärjestelmät.Johtaja Aliquis Alter: hallinto ja talous.”src=”org.png” width=”477” height=”114”></p>

Erityisviraston organisaatio 2020-04-01 alkaen:

Seuraavassa on esimerkki kuvasta, joka tar-vitsee kuvatekstin. Itse kuva esittää vain al-keellisen organisaation. Kuvateksti kertoo,mistä organisaatiosta on kyse ja milloin ku-van mukainen tilanne on tullut voimaan.Tässä kuvateksti on liitetty kuvaan siten, ettäteksti ja kuva ovat taulukossa, jolla on reuna-viivat. Näin teksti ja kuva tavallaan sidotaantoisiinsa visuaalisesti. Esimerkkikuva on sikä-li hiukan huono, että siinä laatikoilla on mel-

ko tummat taustat, mikä heikentää tekstinluettavuutta etenkin mustavalkoisissa paperi-tulosteissa.

Toisaalta yksinkertaisten organisaatiokaa-vioiden sisältö kannattaisi usein esittää mie-luummin vain tekstinä, ehkä listarakennettakäyttäen.Yllä esitetty tekniikka sopii myös ti-lanteisiin, joissa kuvan käytöstä saadaan sel-vää etua. Esimerkiksi uutiskuvatekstissä ker-rottaisiin tällöin, keitä kuvassa on jne.

Kuvittamisen tekniikka

Jos kuva ei ole pelkkä koriste, on siihen useinhyvä liittää kuvateksti. Huolehdi lisäksi esi-merkiksi tekstissä olevilla viittauksilla (esim.”Seuraava kuva havainnollistaa, miten ——”) siitä, että kuvien ja tekstin yhteydet toi-siinsa tulevat selviksi. Mutta näiden lisäksikannattaa käyttää erityisiä tekniikoita, joillakuvan ja tekstin yhteenkuuluvuus ilmaistaan.

Jos kuva liittyy selkeästi johonkin teksti-kappaleeseen, on yleensä kätevää sijoittaa ku-

va kappaleen osaksi. Määritteelläalign=”right” (img-elementissä) saadaan täl-löin kuva tekstin oikealle puolelle, määrit-teellä align=”left” vastaavasti vasemmalle.Vaihtoehtoisesti voidaan käyttää pientä tau-lukkoa, jossa on teksti yhdessä solussa, kuvaviereisessä solussa, taikka asemointia CSS:llä.Joka tapauksessa olennaista on pyrkiä siihen,että kuvan ja tekstin välinen yhteys on selvä.

■ Esimerkki merkkauksesta:<p><img alt=”” title=”Esimerkkikuva, jossa on abstraktia "taidetta"”src=”paint.gif” width=”183” heigh=”69” align=”right”style=”margin-left:0.5em”>Jos kuva - -


27


Seuraavana vinkkejä:

1. Kuvan sisältönä on tekstiä: alt-tekstiksi tietysti kirjoitetaan sama teksti. Esimerkiksioheiselle kuvalle sopii alt=”Linkit”. Parempi vaihtoehto voi olla käyttää kuvan asemesta vaintekstiä ja CSS:llä pyrkiä tekemään teksti ulkoasultaan halutuksi.

2. Puhtaasti koristeellisille kuville sopii alt=””. Missään tapauksessa ei pidä ruvetaselittelemään koristekuvaa sanallisesti, ellei sivu todella käsittele koristekuvien tekemistä!

3. Erottimina käytettäville kuville alt-tekstiksi sopii merkkijono. Se toimii samalla tavoinerottimena, esimerkiksi alt=”|” (linkkien väliin) tai alt=”*” (luetelmalistan kunkin kohdan alkuun).

4. Kuvakkeelle (icon), jota käytetään esimerkiksi navigointisymbolina, kirjoitetaan merkitystävastaava sanallinen vaihtoehto. Mitä selvemmin teksti sanoo kuvakkeen merkityksen, senparempi; esimerkiksi alt=”Sivun alkuun.” on yksiselitteisempi kuin alt=”Ylöspäin” tai alt=”Up”.

5.Tekstin sisällä olevalle kuvalle, joka esittää jotain erikoissymbolia, sopii teksti, jotakäytettäisiin, jos kyseistä symbolia ei voisi edes kuvalla esittää. Esimerkki: Tämä lisäsi <imgalt=”alfa” src=”alpha.gif”>-säteilyä.

6. Havainnollistavalle kuvalle, joka vain esittää visuaalisessa muodossa jonkin asian, joka onjo kerrottu tekstissä, sopii alt=””.

7. Jos kuvalla on itsenäinen informaatiosisältö eli se on esimerkiksi kaaviokuva jonkinjärjestelmän toiminnasta, yritä ensisijaisesti kirjoittaa alt-teksti, joka esittää sanallisesti samansisällön tai olennaisimman osan siitä. Usein joudutaan hätäratkaisuun: alt-tekstinä onhakasulkeissa oleva kuvaus kuvan luonteesta, esim. alt=”[Hilavitkuttimen toimintakaavio]”.Pyri silloin kirjoittamaan erillinen sanallinen vaihtoehto linkin taakse.

8. Joissakin erikoistapauksissa on tarpeellista käyttää alt-tekstiä erityisen tiedonantamiseen niille, jotka eivät näe kuvaa. Tästä yksi esimerkki on piilolinkkitekniikka, toinenon selainpohjaisen karttalinkin tilalla esitettävä selostus siitä, että palvelu on luonteeltaanvisuaalinen, ja mahdollisesti siitä, mistä on saatavissa jokin korvaava palvelu.

Kuvien vaihtoehtotekstit

Kirjoita jokaiselle kuvalle alt-teksti, joka esit-tää kuvalle vaihtoehdoksi sopivan tekstin.Mistä tietää, millainen teksti sopii? Hyvä kei-no on lukea mielessään sivu ääneen niin, ettäkuvien tilalla ovat kyseiset tekstit.

Edellä oli esimerkki kuvasta, jolle on ai-heellista kirjoittaa pitkähkö alt-teksti. Yleen-sä sopivat vaihtoehtotekstit ovat paljon ly-hyempiä.

■ Esimerkki:alt=”Vienti 1. neljänneksellä 20 miljardia euroa, 2. neljänneksellä 27 miljardia, 3. neljänneksellä 90 miljardia, 4. neljänneksellä 20 miljardia.”

Jos kuva onesimerkiksijonkin tilastongraafinen esitys, kannattaa selkiyttää sitä kirjoittamalla alt-tekstiksi tilaston olen-naisin sisältö.



28

Jos verkkosivun toteuttajalle annetaan isojakuvia sivuun liitettäväksi, on syytä harkitaniiden pienentämistä sopivilla tekniikoilla.Tämä tarkoittaa kahta eri asiaa: kuvatiedos-ton koon pienentämistä muuntamalla kuva-formaattia (jolloin kuvan näkyvä asu ei ehkähavaittavasti muutu) tai kuvan näkyvän koonpienentäminen (jolloin myös tiedoston kokopienenee). Kuvaformaatti on syytä muuttaaainakin silloin, kun kuva on toimitettu BMP-muodossa.

Jos tarjolla olevan kuvan leveys on yli 400kuvapistettä, niin kuvan näkyvää kokoa kan-

nattaa yleensä pienentää. Varsin usein kuvanlaatu pysyy olennaisesti samana, kun pienen-täminen tehdään oikein.

Jos kuva on iso ja kärsii pienentämisestä taijos samalle sivulle tulisi monia isohkoja ku-via, kannattaa vakavasti harkita ns. thumb-nail-tekniikkaa. Tämä merkitsee, että kuvas-ta muodostetaan pienennetty versio, joka si-joitetaan itse sivulle siten, että se on linkkitäysikokoiseen versioon.

Edellä kuvatun kaltaiseen kuvien muok-kaukseen on monia ohjelmia, esimerkiksilaadukas ilmaisohjelma Irfanview.

Luetelmat

Kirjoita selvät luetelmat listaelementeiksi: ul(numeroimaton lista) tai ol (numeroitu); joson vaikea valita näiden välillä, valitse ol. ”Sel-vä luetelma” on monikohtainen luetelmaasioita, jossa kohdat eivät ole aivan lyhyitä.

Pyri tekemään luetelmasta tasapainoinenniin, että sen kohdat ovat laajuudeltaan toisi-aan vastaavat. Yleensä kannattaa ennen lue-telmaakirjoittaa lyhyt teksti, joka kertoo, mi-tä on tulossa.

■ Esimerkki:<div>Suomessa tavataan kolmea lajia joutsenia:</div><ol><li>kyhmyjoutsen</li><li>laulujoutsen</li><li>pikkujoutsen.</li></ol>

Kuvia voi muokata ja sijoittaa linkin taakse


29


■ Esimerkki:<ul><li>1 Kasvu

<ul><li>1.1 Normaali kasvu</li><li>1.2 Lyhytkasvuisuus</li><li>1.3 Pitkäkasvuisuus</li><li>1.4 Lihavuus</li></ul></li>

<li>2 Sukupuolen kehitys</li></ul>

■ Jos tähän liittyy tyylisäännöstö:ul { list-style-type: none; }ul ul { margin-left: 1em;}niin esitysasu on seuraavantapainen:1 Kasvu 1.1 Normaali kasvu1.2 Lyhytkasvuisuus1.3 Pitkäkasvuisuus1.4 Lihavuus2 Sukupuolen kehitys

Sisäkkäiset listat (hierarkkiset listat) ovatongelmallisia. Erityisesti ääneen luettaessatai listan pientä osaa katsottaessa ei ole sel-

vää, missä oikein ollaan menossa, ei ehkä se-kään, millä jäsennyksen tasolla ollaan.

Seuraavassa ratkaisuvaihtoehtoja: 1. Tee yksitasoinen lista, jonka kohdat ovat linkkejä yksitasoisiin listoihin.

2. Käytä rakennetta, jossa uloin lista on numeroitu numeroilla 1, 2, 3 jne. ja sisemmät kirjai-milla a, b, c. Tällöin kuulija ainakin voi hahmottaa, millä tasolla kulloinkin mennään. Teknisestivoit toimia kahdella tavalla: a. Sisemmille listoille käytetään merkkausta <ol type=”a”>. b. Käytetään tyylisäännöstöjä, yksinkertaisimmassa tapauksessa sääntöä ol ol {list-style-type:lower-alpha} (joka kehottaa selainta käyttämään kirjaimilla numerointia kaikissa ol-elementeis-sä, jotka ovat ol-elementin sisällä).

3. Käytä sekä sisemmille että ulommille listoille sellaista edellä kuvattua tapaa, jossa ei käy-tetä listaelementtejä, esimerkiksi taulukkoa, ja sisällytä esimerkiksi kaksitasoinen numerointiitse tietoihin.

4. Kuten edellisessä vaihtoehdossa, mutta tee listat ul-elementeillä ja ehdota CSS:llä ”pallu-koiden” pois jättämistä visuaalisesta esityksestä.

Tällaisia sisäk-käisiä listoja tarvitaan esimer-kiksi monitasoi-sissa sisällys-luetteloissa. Esimerkissäm-mekin varmaan-kin tekstit olisi-vat linkkejä, mutta tämä puolion jätetty tästäpois, jotta lista-rakenne tulisiselvemmin esille.



30

Käytä värejä hillitysti. Tumma teksti vaaleah-kolla pohjalla on yleensä paras. Vältä tum-mahkoa tekstiä tummalla pohjalla sekä hyvinkirkkaiden värien (esim. puhdas punainen

tai voimakkaan keltainen) käyttöä laajoillepinnoille tai suurille tekstimäärille. Vaaleateksti tummalla pohjalla on useimmille vai-kealukuista.

Värit

Älä luota väreihin vaan varmista olennaiseninformaation välittyminen muilla keinoin.Älä esimerkiksi tee niin, että taulukon solunväri yksinään sisältää jonkin olennaisen in-formaation, vaan varmista tiedon välittymi-nen tekstillä (esim. solun sisällä olevalla kir-jaimella).

Älä poista linkkien alleviivausta. Ei pidäluottaa siihen, että värit tai asiayhteys kerto-

vat, mikä on linkkiä ja mikä ei. Vältä muutta-masta linkkien värejä kovin erikoisiksi. Josasetat linkkien värit, aseta teksti, vierailemat-tomat linkit ja vieraillut linkit keskenään eri-värisiksi.

Jos haluat ehdottaa tekstin, linkkien taitaustan värin taikka taustakuvion, nämäkaikki tulisi ehdottaa yhdessä, yhteensopiva-na kokonaisuutena.

■ Esimerkki CSS-tekniikasta:body{ background : #e7ffff url(tausta.png); color : #000; }a:link{ color : #009; background : transparent; }a:visited{ color : #609; background : transparent; }a:hover{ color : #f66; background : transparent; }a:active{ color : #f00; background : transparent; }


31


Lomakkeet

Tarjoa lomakkeen käytölle vaihtoehdoksi pu-helinnumero, sähköpostiosoite ja postiosoi-te, jos se suinkin on mahdollista. Esimerkiksipalautelomake on hyvä vaihtoehtona, mutta

silti ei ainoana vaihtoehtona.Sähköpostiosoitteen on syytä olla sivulla nä-kyvissä, ei vain mailto-linkissä.

■ Esimerkki:<div><label for=”sukunimi”>Sukunimi:</label><input id=”sukunimi” size=”30” name=”sn”></div>

■ Seuraavassa on esimerkki yksinkertaisesta hakulomakkeesta:Haku Finlex-säädöstietopankista. Tutustu tarvittaessa Finlexin käyttöliittymän ohjeisiin. Etsittävien säädösten kielen valintasuomiruotsi Hakusana: Hae

Lomakkeen rakentamisen perusteita:1. Kirjoita lomake-elementti (form-elementti) niin suppeaksi, että sen sisällä on vain itse loma-ke täyttöohjeineen.

2. Kirjoita ennen lomakkeen syöttökenttiä kaikki ne tiedot, jotka käyttäjän on syytä tietää, ennenkuin rupeaa täyttämään lomaketta.

3. Kirjoita lomakkeen kentät HTML-dokumenttiin sellaiseen järjestykseen, joka vastaa lomak-keen normaalia täyttämisjärjestystä.

4. Anna ennen kutakin kenttää selitys siitä, mikä tieto käyttäjää pyydetään antamaan ja missämuodossa, esimerkiksi näin: Anna nimesi (sukunimi, etunimi)

5. Vältä tilanteita, joissa käyttäjä joutuu valitsemaan kovin monesta valmiista vaihtoehdosta.Käyttäjälle voi olla helpompi käyttää tekstinsyöttökenttää.

6. Älä sisällytä lomakkeeseen <input type=”reset”> -kenttää tai sijoita se ensimmäiseksi.

7. Sisällytä lomakkeeseen aina <input type=”submit”> -kenttä tai vastaava (viimeiseksi kentäk-si tietysti).

8. Vältä käyttämästä <input type=”submit”> -kentän asemesta ”kuvapainiketta” <inputtype=”image”>. Jos kuitenkin käytät kuvapainiketta, kirjoita sen kuvalle vaihtoehtoinen tekstikolmeen kertaan: alt-määritteen, name-määritteen ja value-määritteen arvoksi.

Lisäksi lomak-keiden tekemi-sessä on hyväkäyttää label-elementtejä,jotka merk-kauksen tasol-la ilmaisevatkenttien jatekstien vastaavuudet.



32

Kielimerkkaus

■ Sivulla käytetyn kielen voi merkata lang-määritteillä, esimerkiksi:<html lang=”fi”> (dokumentin yleiskieli on suomi)<blockquote lang=”sv”> (sitaatti on ruotsinkielinen)<cite lang=”en”> (kirjan nimi tms. on englanninkielinen).

Muiden tavallisten kielten koodeja ovat mm.:saksa de, ranska fr, venäjä ru.

Käytännössä kielimerkkauksen hyöty onvielä pieni, mutta toisaalta kuitenkin senkäyttäminen uusilla sivuilla on pieni vaiva,

jos rajoitutaan laajojen kokonaisuuksien kie-len merkkaamiseen. Tämä tarkoittaa lähinnäkoko sivun kieltä ja vieraskielisten sitaattienkieltä.

Hakulomakkeen täyttämisen ja lähettämisenjälkeen saatavan vastaussivun tulisi sisältääheti alussa olennaisimmat asiat kuten yleis-tieto haun onnistumisesta (esim. ”Löytyi 42dokumenttia”).

On hyvä, jos sivulla on sama lomake uu-destaan niin, että sen kentissä on valmiiksikäyttäjän jo syöttämät tiedot. Mutta tämänpitäisi olla tulosten jälkeen.

■ Esimerkin merkkaus (kun eräät ns. piilokentät jätetään tässä esittämättä):<form action=”http://www.finlex.fi/lains/ajantasa/ajantasapikahaku.php”><div>Haku Finlex-säädöstietopankista. Tutustu tarvittaessa<a href=”http://www.finlex.fi/ohje/content.html#kayttoliittyma”>Finlexin käyttöliittymän</a> ohjeisiin.</div><fieldset><legend>Etsittävien säädösten kielen valinta</legend>

<div><input type=”radio” id=”sk” name=”kieli” value=”suomi” checked><label for=”sk”>suomi</label></div>

<div><input type=”radio” id=”rk” name=”kieli” value=”ruotsi”><label for=”rk”>ruotsi</label></div>

</fieldset><div><label for=”data”>Hakusana:</label>

<input id=”data” name=”ehto” size=”30” class=haku></div><div><input type=”submit” value=”Hae”></div></form>

Mainittakoon, että label-merkkauksen an-siosta voi käyttäjä tehdä kielivalinnan nap-sauttamalla joko pientä pyöreää ”radiopaini-

ketta” tai siihen liittyvää tekstiä. Tämä oneduksi silloin, kun käyttäjällä on vaikeuksiakäden tarkassa liikuttamisessa.


33

Erikoistekniikoita koskevia ohjeita

Vaihtoehtojen tarjoaminen ”upotetulle” ainekselle

Tarjoa tekstivaihtoehto paitsi kuville myöskaikelle muulle sisällölle, joka ei ole tekstiä.Tekstivaihtoehto voi olla tyhjä, mutta vain,jos siihen harkinnan jälkeen päädytään, esi-merkiksi kun animaatio on vain koristeenatai vain havainnollistaa asiaa, joka on jo se-lostettu tekstissä.

Seuraava kooste esittää eräiden ”upotus-elementtien” osalta sen, miten vastaava teks-tivaihtoehto tai muu luotettavammin toimi-va vaihtoehto teknisesti esitetään. Yksityis-kohtaisia menettelyjä on kuvattu esimerkiksisivustossa WDG HTML 4.0 Reference jakoosteessa HTML Quick List.

Videot, äänitteet, sovelmat ja muut erityis-tekniikoita vaativat asiat kannattaa yleensäpanna linkin taakse. Silloin on hyvä linkin

yhteydessä selostaa, millaisesta esityksestä onkyse, ja mahdollisuuksien mukaan tarjota sil-le jokin tekstivaihtoehto ja kenties myösstaattisina kuvina esitetty vaihtoehto.

Entä jos ei ole mahdollista esittää visuaali-selle esitykselle varsinaista tekstivaihtoehtoaja esitys on kuitenkin sisällöltään olennai-nen? Silloin on syytä kirjoittaa sellainenmuodollinen vaihtoehto, joka selostaa, mil-laisesta esityksestä olisi kyse ja mitä tekniik-kaa se vaatisi.

Vältä pre-elementillä tai muilla tekniikoil-la toteutettuja ”Ascii-grafiikoita” tai ”käsinmuotoiltuja” taulukoita tai ainakin pane nelinkin taakse tai sijoita ennen esitystä linkki,jolla esityksen voi ohittaa.

Erikoistekniikoita koskevia ohjeitaVerkkosivuilla käytettävät erikoistekniikat kuten Javascript ja Flash vaativat omanosaamisensa. Yleensä niihin liittyvät esteettömyysmenetelmät ovat helpompiakuin itse perustekniikat. Tämän luvun ohjeet on luonnollisestikin tarkoitettu vainniille, jotka käyttävät tai aikovat käyttää kutakin tekniikkaa.

Tekstivaihtoehdot elementeille

• applet Java-sovelma applet-elementin sisältö(mahdollisten param-elementtien jälkeen) tai alt-määrite

• area linkkikartan alue alt-määrite • bgsound taustaääni ei mitään, tai linkki äänitiedostoon • button painike, joka suorittaa tarvittaessa noscript-elementti; lisäksi button-merkkaus

selainskriptin on syytä luoda dynaamisesti selainskriptillä • embed erilaisten aineistojen upotus noembed-elementti,

jonkin ns. lisäosan (plug-in) avulla joka sijaitsee embed-elementin sisällä • frameset kehysten (kehysjoukon) määrittely noframes, jota on käsitelty edellä • iframe upotettu kehys (inline frame) iframe-elementin sisältö • ilayer inline layer (Netscapen tekniikkaa, nolayer-elementti, jossa on esim. linkki dokumenttiin,

väistymässä) johon ilayer-elementin src-määrite viittaa • img kuva alt-määrite, jota on käsitelty edellä • input type=”image” kuvapainike lomakkeessa alt-, name- ja value- määrite • layer layer (Netscapen tekniikkaa, nolayer-elementti, jossa on esim. linkki dokumenttiin,

väistymässä) johon layer-elementin src-määrite viittaa • map selainpohjainen karttalinkki erillinen tekstilinkkivalikko (tai ainakin linkki sellaiseen)

upotukseen merkitys vaihtoehdon käytetty elementti tarjoamisen tekniikka



34

■ Esimerkki:<div>Valitse hedelmä:<a href=”o.html”>omena</a>, <a href=”k.html”>kiivi</a> tai<a href=”p.html”>päärynä</a>.</div><img src=”fruit.gif”alt=”Edelliselle vaihtoehtoinen valikko”title=”Esimerkki: valitse hedelmä, niin saat tietoa sen ravintoarvosta”width=”305” height=”164” align=”right” usemap=”#fruit” border=”0”></a></p><map name=”fruit”><area href=”o.html” alt=”omena”

title=”Omena, ulkomainen, kuorineen” coords=”0,60,92,160”><area href=”k.html” alt=”kiivi”

title=”Kiivi, punnittu kuorineen” coords=”96,43,217,155”><area href=”p.html” alt=”päärynä”

title=”Päärynä, punnittu kuorineen” coords=”225,13,300,156”></map>

Karttalinkit (image maps)

Navigointi- tai muuta valikkoa ei yleensäkannata tehdä karttalinkillä, vaan on parem-pi käyttää normaaleja linkkejä.

Karttalinkki on kuitenkin hyvä tarjotanormaalin linkkilistan rinnalla, jos valintavoidaan tehdä olennaisesti graafisena, esi-

merkiksi valitsemalla kartasta alue. Jos käytätkarttalinkkejä, kirjoita kaikille area-elemen-teille alt-määritteet. Lisäksi on syytä kirjoittaakarttalinkin rinnalle tekstilinkkien lista.

Palvelinpohjainen karttalinkki on perusteltuerikoistapauksissa. Tyypillisin on oikea kart-ta, josta voi valita minkä tahansa pisteen jasaada esimerkiksi suurimittakaavaisemmankartan, jossa kyseinen piste on keskipisteenä.

Tällöin on syytä selventävästi sanallisesti (en-nen karttalinkkiä) kertoa, että palvelu perus-tuu ratkaisevasti visuaaliseen esitykseen.


35


Skriptit ja muut vastaavat

Huolehdi siitä, että sivu toimii jollakin tavoinmyös ilman selaimen suorittamia skriptejä(client-side scripting) tai muita erikoisteknii-koita.

Jos kuitenkin sivu toimii vain, jos se-

lainskriptit ovat käytössä, kerro tämä selväsa-naisesti heti sivun alussa. Käytä tällöinnoscript-elementtiä, jolloin ilmoitus jää pois,kun skriptit ovat käytössä.

■ Esimerkki:<noscript><p style=”font-size:150 %”>Tämän sivun ainoa sisältö on eurolaskin,joka toimii JavaScriptillä. Selaimesi ei tue JavaScriptiä, taisiitä on JavaScript-tuki kytketty pois toiminnasta.</p></noscript>

Erilaisia tapauksia:1. Skripti toteuttaa jonkin olennaisen ”navigoinnin” esimerkiksi siten, että normaalin linkin ase-mesta on <a href="javascript:window.open(...)">. Korjaa tämä muuttamalla rakenne normaa-liksi linkiksi, haluttaessa sellaiseksi, jossa on sopiva onclick-määrite., kuten esim. <a href=”ohje.html” onclick=”window.open('ohje.html','','width=200,height=150');return false”>

2. Skripti näyttää muuttuvia tietoja, esimerkiksi ostosten summaa, kun käyttäjä täyttää ostolo-maketta. Käytä tällöin skriptikieltä myös kentän tuottamiseen.

3. Skripti vaihtaa sivulla olevan kuvan toiseksi, kun kursori viedään sen päälle. Tällaiset eivätyleensä ole olennaisia, eikä mitään erityistä tarvitse tehdä.

4. Skripti saattaa yrittää ohjailla selainta, esimerkiksi tunnistaa käyttäjän selaimen taikka käy-tössä olevan kuvaruudun (tai selainikkunan) koon ja tämän mukaisesti ohjata selaimen sopi-vaksi katsotulle sivulle. Huolehdi ainakin siitä, että sivulla on staattisena sisältönä jokin järkeväperusvaihtoehto (tai linkki sellaiseen).

5. Lomakkeen tietojen esitarkistus ennen lähettämistä. Tämä kannattaa tehdä onsubmit-mää-ritteellä form-elementissä (pikemminkin kuin lähetyskentässä olevalla onclick-määritteellä).Muuten ei tarvitse tehdä mitään erikoista, kunhan muistetaan, että selainpäässä on kuitenkintehtävä vastaavat tarkistukset.



■ Esimerkki:<meta http-equiv=”Refresh” content=”10; URL=uusi.html”><title>Sivu on siirretty</title><body><h1>Sivu on siirretty!</h1><p>Tässä osoitteessa ollut sivu on siirretty toiseen osoitteeseen.Ellei selaimesi siirry siihen automaattisesti 10 sekunnissa,seuraa tätä linkkiä <a href=”uusi.html”>uuteen osoitteeseen</a>.</p>

Vältä <meta http-equiv=”Refresh” ...-rakennetta. Kyseistä rakennetta on melkousein käytetty joko selaimen ohjaamiseen(redirect) vanhalta sivulta uudelle tai sivunsäännölliseen virkistämiseen määrätyin aika-välein.

Uuteen osoitteeseen ohjaamisessa on pa-rempi käyttää palvelimessa tapahtuvaa uu-delleenohjausta, josta on tietoja palvelimenohjeissa. Jos kuitenkin käytät meta-ohjausta,niin sisällytä vanhalle sivulle myös normaalilinkki uuteen osoitteeseen.

Jos sivulle rakennetaan määrävälein tapahtu-va virkistys, on syytä heti alussa varoittaakäyttäjää asiasta ja antaa hänelle linkki vaih-

toehtosivulle, jolta automaattinen päivitty-minen puuttuu.

while(1==1)siivoaHuoneesi( );

Älä jankuta!

36


37


■ Suomi.fi, Suomen julkisen hallinnon portaaliTietoa ja palveluita on jäsennetty käyttäjän tarpeiden, ei hallinnollisen organisaation mukaan.Yleisilme on asiallisen rauhallinen.

■ Google-hakupalveluVerkon tunnetuimpia ja hyödyllisimpiä palveluita. Hakujen tulosten esitystavassa on toivomisenvaraa, mutta peruskäyttöliittymä on yksinkertainen ja selkeä mutta ei tylsän näköinen.

■ Papunet – sivusto puhevammaisuudesta ja selkokielestäSivuston aihepiirinäkin on esteettömyys, mutta sen lisäksi se itse on esimerkki monista esteet-tömyyttä parantavista ratkaisuista kuten kuvasymbolien käytöstä sanallista viestiä tukemaan.

■ Rikoslaki webissäLuvuittainen rakenne, jossa itsessään raskaslukuinen lakiteksti on esitetty ulkonaisesti selkeäs-sä muodossa. Mukana linkkejä selventäviin, lakikieltä huomattavasti yleistajuisempiin selityk-siin. Vertaa Finlex-sivustossa olevaan rikoslakiin, joka on ”yhtä pötköä” oleva teksti.

■ Evoluutio ja evoluutioteoriaEsimerkki sisältösivusta, jossa vaikeaa aihetta pyritään lähestymään monelta kannalta.Huomaa erityisesti: selkeä sisällysluettelo ja tiivistelmä (”Evoluutio pähkinänkuoressa”) alussa,tekstin ohessa sitä tukeva kuvitus.

■ RahapajaSelkeä rakenne, jossa ei ole pyritty ahtamaan liikaa tietoa yhdelle sivulle. Hillitty kuvitus, jossaasiasisältöä tukevat kuvat tulevat hyvin esille.

Lisätietoja

Verkkosivut kaikkien ihmisten, myös van-husten, lasten, vammaisten ja liikkeellä ole-vien käytettäviksi. Tavoite on lyhyesti perus-teltu Esteettömyysesitteessä, jonka pohjaltaon laadittu myös painettu, TIEKEn ja

Stakesin yhdessä julkaisema esite Verkkosivutkaikkien käytettäviksi. TIEKEn Esteettö-myysopas sisältää runsaasti lisätietoja, ja kä-sillä oleva ohje on paljolti tehty siitä lyhentä-mällä.

■ Englanniksi havainnollista aineistoa esteettömyyden toteuttamisesta löytyy:• Web Accessibility for Section 508 • WebAIM: How-To & Resources • Dive Into Accessibility.

Esimerkkejä sivustoista

Seuraavassa on eräitä esimerkkejä suhteelli-sen esteettömistä sivustoista, joista voi saadahyviä ideoita omien sivujensa parantami-

seen. Ne eivät suinkaan ole kaikilta osin täy-dellisiä, mutta niissä on vakavasti pyritty es-teettömyyteen ja siinä pitkälti onnistuttu.


Esteettömien web-sivujen tekemisen opas

38

Tässä esitetään luvussa Esteettömyyden arviointiesitettyjä testausmenetelmiä vastaavat kysymykset.Voit arvioida sivustoa esimerkiksi kouluarvosana-asteikoilla 4–10 kunkin kysymyksen osalta ja kirjoit-taa tarvittaessa sanallisen selityksen eri paperille.Myöhemmin, esimerkiksi sivuston parantamisen taimuun muutoksen jälkeen, voit käydä arvioinninuudelleen läpi ja merkitä uudet arvosanat vanhojenviereen. Voit myös käyttää verkossa olevaa arviointi-lomaketta, joka vastaa tätä listaa ja jolla voi tuottaatulostettavan raportin.

Sähköinen opas osoitteessa:www.tieke.fi/esteettomyysopas/kirjanen/kirjanen.html


39

Esteettömyyden arvioinnin muistilista

■ Silmäilytestit1 Onko sivu kohtuullisen mittainen?2 Onko ulkoinen otsikko kuvaava?3 Selviääkö olennaisin otsikoista?4 Onko nopeasti hahmotettavissa, mitä sivulla on?5 Saako sisältösivusta sen olennaisimman sisällön, jos otsikoiden

lisäksi lukee kunkin kappaleen ensimmäisen virkkeen?6 Onko kielenkäyttö yhtenäistä,

esim. ei tarpeettomasti eri kieliä sekaisin?7 Jos sivulla on animaatio tai muuta liikkuvaa,

onko sen mukanaolo perusteltua?

■ Tarkempi tarkastelu8 Miten hyvin sivu toimii ääneen luettuna?9 Onko sisältösivulla selvä kappalejako?

10 Onko sivun kieliasu luettava?11 Erottuvatko linkit muusta tekstistä tarpeeksi selvästi?12 Erottuvatko peräkkäiset linkit toisistaan selvästi?13 Aukeavatko linkit niitä normaalisti seurattaessa

alkuperäiseen selainikkunaan?

■ Näppäilytestit14 Toimiiko liikkuminen linkistä toiseen tab-näppäimellä hyvin?15 Onko sivun alussa oleva ns. vakionavigointi ohitettavissa

linkkiä seuraamalla?16 Jos sivulla on lomake, voiko sen täyttää vain näppäimistöä käyttäen?

■ Tarkistaminen erilaisilla selainasetuksilla17 Onko sivun kirjasinkoko sopiva?18 Muuttuuko sivun kirjasinkoko suoraan selaimen asetusten mukaan?19 Kun kirjasinkokoa (tarvittaessa pakolla) muutetaan,

pysyykö sivu kasassa?20 Toimiiko sivu myös ilman värejä?21 Toimiiko sivu ilman tyylisäännöstöjä?22 Toimiiko sivu ilman Javascriptiä?

■ Tarkistaminen ”erilaisilla” selaimilla23 Toimiiko sivu, kun kuvat korvautuvat vaihtoehtoteksteillä?24 Toimiiko sivu, kun taulukot linearisoidaan?25 Toimiiko sivu ilman evästeitä?26 Toimiiko sivu kehyksettömässä tilassa?27 Onko sivun kaikkien linkkien lista käyttökelpoinen?

Esteettömyyden arvioinnin muistilista


TIEKE Tietoyhteiskunnan kehittämiskeskus ryISBN 952-9714-29-7Helsinki 2003

Sähköinen opas osoitteessa

www.tieke.fi/esteettomyysopas/kirjanen/kirjanen.html

T I E K E

Tämä opas käsittelee sitä, miten verkkosivut saadaan mahdollisimman hyvin kaikkien ihmisten

käytettäviksi. Myös vanhukset, vammaiset, lapset jaliikkeellä olevat käyttävät Internettiä.

Opas on tarkoitettu ensisijaisesti verkkosivujentekijöille, mutta myös teettäjien on hyvä olla perilläverkkosivujen esteettömyyden tuomista hyödyistä.


jukka k. korpelajukka k. korpela jokaiselle ... · usein ilmi kaikenlaista muutakin korjattavaa...

Documents