Selvitys esteettömän verkkonäyttelyn toteuttamisen perusedellytyksistä

Selvitys on Helsingin kaupunginmuseon tilaama. Selvitystyön avulla verkkonäyttelyjen
tekijät pystyvät ottamaan huomioon vammaisryhmien erityistarpeet sisältötuotannossa ja
teknisessä toteuttamisessa. Erityistarpeet toteutuvat noudattamalla Design for All -
periaatetta sekä esteettömyyttä, saavutettavuutta ja käytettävyyttä edistäviä standardeja ja
ohjeistuksia. Esteettömyyden huomioiminen parantaa verkkonäyttelyjen laatua kaikille
käyttäjille.

Sisältö

1. Esteettömyys - erilaisuuden huomioon ottamista

1.1 Apuvälineiden avulla www-sivujen saavutettavuus laajenee
1.2 Puhetta tukevat ja korvaavat kommunikaatiomenetelmät

2. Kansainvälisiä ja kansallisia linjauksia tasa-arvosta verkossa

3. Esteettömien www-sivujen suunnittelu ja toteutus

3.1 Esteetön tekniikka verkkosivuilla
3.2 Sisällön esittäminen
3.3 Käyttöliittymä www-sivuilla
3.4 Käyttöliittymän ulkoasu
3.5 Kuvat ja multimedia - audiovisuaalisten aineistojen käyttö
3.6 Kuinka teet näkövammaisystävälliset www-sivut
3.7 Esteettömyyden testaaminen ja arviointi
3.8 Yhteenvetoa www-sivujen esteettömästä toteutuksesta

4. Erityisryhmille suunnattuja verkkonäyttelyjä

5. Johtopäätökset

Lähteet ja linkit

Selvityksen tekijät
Petri Virtanen ja Jyri Wuorisalo
Avence Digital Oy
15.9.2004

1. Esteettömyys - erilaisuuden huomioon ottamista

Internet-sivuille pääsy ja niiden sisältöön tutustuminen aiheuttaa erilaisia ongelmia
ihmisille, joilla on fyysisiä, aisteihin tai ajatustoimintaan liittyviä rajoitteita. Monet Euroopan
37 miljoonasta vammaisesta saattavat uusmediaa käyttäessään jäädä vaille tarvitsemiaan
tietoja ja palveluja. Julkisen sektorin verkkopalvelujen laajetessa on olemassa vakava
vaara, että merkittävä osuus väestöstä syrjäytyy.
(Euroopan komission tiedonannosta 2001-09-25.)

Esteettömyys, englanniksi accessibility, on sitä, että www-sivut ovat kaikkien
saavutettavissa ja käytettävissä. Sivujen on oltava käytettävissä myös erilaisissa
tilanteissa. Esteettömyyden tarve muodostuu siitä, että ihmisillä on erilaiset lähtökohdat ja
edellytykset aistien, liikuntakyvyn, kielellisten valmiuksien sekä muiden fyysisten ja
psyykkisten seikkojen suhteen.

Esteettömyydessä on kyse siitä, miten hyvin www-sivut ovat sokeiden, kuurojen,
liikuntavammaisten ja CP-vammaisten käytettävissä. Esteettömyydestä hyötyvät myös
ikäihmiset, maahanmuuttajat sekä yleensä ihmiset, joilla on www-sivustojen käytössä jokin
tilapäinen tai pysyvä erityisongelma. Ongelma voi olla myös tekninen, joka johtuu laitteen
ominaisuuksista.

Esteettömyys on erilaisuuden huomioon ottamista. Erilaisuus voi johtua ihmisen
ominaisuuksista, käytetyistä laitteista tai käyttötilanteesta. Monia vammaisuuden muotoja
vastaa jokin tilapäinen, tilannesidonnainen ongelma, joka saattaa koskea monia ihmisiä.
Esimerkiksi vammaa, joka vaikeuttaa käden tarkkaa liikuttamista, vastaa kannettavan
tietokoneen käyttö liikkuvassa kulkuneuvossa. Vastaavasti putkinäköinen, jonka
näkökenttä on suppea, kohtaa samantapaisia ongelmia kuin pieninäyttöistä laitetta
käyttävät.

Esteettömyys ei ole sama asia kuin käytettävyys, englanniksi usability, jolla tarkoitetaan
helppokäyttöisyyttä, ymmärrettävyyttä ja selkeyttä. Käytettävyys korostaa hyvää
toimivuutta tyypillisissä käyttömuodoissa, esteettömyys taas tähtää toimivuuteen myös
epätyypillisissä tilanteissa. Usein esteettömyydessä on ensimmäisenä haasteena se,
miten jokin sisältö tai palvelu saadaan lainkaan käytettäväksi.

1.1 Apuvälineiden avulla www-sivujen saavutettavuus laajenee

Apuväline on tietokoneohjelma tai mekaaninen väline, joka on erityisesti suunniteltu
auttamaan vammaisia henkilöitä selviytymään päivittäisistä toiminnoista. Apuvälineitä ovat
mm. pyörätuolit, lukulaitteet, poimintavälineet jne. Verkkosivujen saavutettavuuden
kannalta keskeisiä tietokoneohjelmiin perustuvia apuvälineitä ovat ruudunlukuohjelmat,
suurennusohjelmat, puhesyntetisaattorit ja puheella ohjattavat ohjelmat, jotka toimivat
yhdessä mm. graafisten selainten (sekä muiden selainten) kanssa. Mekaanisiin
apuvälineisiin kuuluvat mm. erityyppiset näppäimistöt sekä osoittimet.

Kun www-sivut toteutetaan esteettömyysohjeiden mukaisesti, niin lähes kaikki wwwsivuilla
oleva tieto on myös apuvälineiden avulla luettavissa. Sivujen tekijöiden ei tarvitse
erikseen huomioida apuvälineitä.

Puheteknologian kehitys mahdollistaa näppäimistöjen korvaamisen äänikomennoilla.
Tämä on käyttökelpoinen ratkaisu henkilöille, joilla on näkö- tai liikuntavamma.
Näkövammaiset tarvitsevat laitteistoja ja ohjelmia, jotka muuttavat tekstin puheeksi tai
Braille-pistekirjoitukseksi. Liikuntavammaisten avuksi on olemassa erityisnäppäimistöjä.
Myös kuulovammaisille on tarjolla erityistekniikkaa, esimerkiksi videoiden ja kuvien
kuvatekstitys.

Esimerkkejä apuvälineistä www-sivujen käytössä

Ruudunlukuohjelma lukee ruudun sisällön ääneen käyttäjälle. Ruudunlukuohjelmia
käyttävät pääasiassa näkövammaiset. Ruudunlukuohjelmat kykenevät yleensä lukemaan
vain tekstimuotoisena, ei kuvana esitettyä tekstiä.

Suurennusohjelma suurentaa osan näytöstä, jotta sitä on helpompi lukea.
Suurennusohjelmia käyttävät etupäässä heikkonäköiset.

Pistekirjoituksessa käytetään kuutta kohollaan olevaa, erilaisia kuvioita muodostavaa
pistettä esittämään kirjaimia ja numeroita, joita näkövammaiset voivat lukea
sormenpäillään.

Pistenäytössä pistekuviot laskevat ja nousevat elektronisen laitteen, yleensä tietokoneen,
käskystä. Tuloksena on rivi jatkuvasti muuttuvaa pistekirjoitusta. Nykyiset pistenäytöt
voivat olla erikokoisia, aina yhden solun (kuusi tai kahdeksan pistettä) rivistä
kahdeksankymmentä solua sisältävään riviin; useimmissa on kuitenkin 12-20 solua rivillä.

1.2 Puhetta tukevat ja korvaavat kommunikaatiomenetelmät

Puhe on ihmisen ensisijainen kommunikointikeino. Kaikki eivät kuitenkaan pysty
kommunikoimaan riittävän hyvin puheen avulla. Puhetta tukevien ja korvaavien
kommunikointikeinojen käyttö laajenee tietotekniikan avulla. Keinot on jaettu ele- ja
viittomakommunikaatioon, graafiseen kommunikaatioon sekä esinekommunikaatioon.

Viittomat ovat yleisin puhetta tukeva ja korvaava kommunikointimenetelmä. Viittomia
tarkasteltaessa on syytä erottaa toisistaan viittomakieli, viitottu puhe ja tukiviittomat.

Puhetta tukevaa ja korvaavaa graafista kommunikaatiota ovat kuvat, graafiset symbolit ja
kielen kirjoitetut muodot. Usein ensimmäisenä graafisen kommunikoinnin muotona
käytetään kuvia, eli piirroksia ja valokuvia. Yleisimpiä käytössä olevia graafisia
merkkijärjestelmiä ovat blisskieli sekä piktogrammeihin, PCS-symboleihin ja Sigsymboleihin
perustuvat järjestelmät.

Vaikeasti aisti- tai kehitysvammaisen ihmisen voi olla vaikea ilmaista itseään sanojen,
viittomien tai graafisten merkkien avulla. Jos vammaisuus rajoittaa näiden merkkien
havaitsemista tai ymmärtämistä, voidaan käyttää kosketeltavia kommunikaatiomerkkejä.
Joskus voi olla hyödyllistä, että käyttäjä sekä näkee että tuntee merkin muodon.

Puhetta tukevien ja korvaavien kommunikaatiomenetelmien käyttö www-sivuilla tarkoittaa
esimerkiksi viittomakielisiä videoita ja symbolikieliin perustuvia käyttöliittymiä. Näiden
menetelmien käyttö edellyttää kunkin vammaryhmän korkeaa asiantuntemusta.

2. Kansainvälisiä ja kansallisia linjauksia tasa-arvosta verkossa

Europaan unioni ottaa selkeästi kantaa esteettömyyden lisäämiseksi myös tietoverkoissa.

eEurope 2002-tietoyhteiskunta kaikille -toimintasuunnitelman tavoitteen 2 (Investoinnit
ihmisiin ja taitoihin) osiossa "Kaikille mahdollisuus osallistua tietotalouteen" kiinnitetään
erityistä huomiota julkisen sektorin verkkosivujen saavutettavuuteen ja todetaan, että ne
on jo alun perin suunniteltava niin, että vammaisilla on pääsy tietoihin ja kaikki
mahdollisuudet hyötyä sähköisistä viranomaispalveluista.

eEurope 2005 -toimintasuunnitelmassa asiaa tarkennetaan seuraavasti:
Toimintasuunnitelman tarkoituksena on saattaa Internet kaikkien ulottuville, jotta
henkilökohtaisiin tarpeisiin, liikuntavammaan, ikään tai sairauteen liittyvä sosiaalinen
syrjäytyminen voidaan välttää.

Toimintasuunnitelmien keskeisenä tavoitteena on World Wide Web Consortiumin (W3C)
esteettömyysohjeiden edistäminen sekä Design for All -periaatteen toteuttaminen.

Design for All tarkoittaa sosiaalisesti vastuullista suunnittelua. Se merkitsee tuotteissa
helppokäyttöisyyttä, ympäristöissä esteettömyyttä ja palveluissa saavutettavuutta ja
toimivuutta. Tieto- ja viestintätekniikan osalta tämä tarkoittaa sitä, että etsitään sellaisia
laitteisiin, ohjelmistoihin ja apuvälineisiin sijoitettavia ominaisuuksia, jotka edistävät
helppokäyttöisyyttä.

USA:ssa lainsäädäntö antaa ohjeita verkkopalveluiden esteettömästä toteutuksesta. Se
vaatii, että esteettömyysohjeita noudatetaan julkisten organisaatioiden verkkosivuilla ja -
palveluissa. Ohjeet ovat nimellä Web Accessibility for Section 508.

Suuryrityksistä monet tietotekniikan alan yritykset ovat tunnustaneet esteettömyyden
tärkeäksi:
IBM Accessibility Center, http://www-3.ibm.com/able/
Microsoft Accessibility, http://www.microsoft.com/enable/
Sun Microsystems Accessibility Program, http://www.sun.com/access/

Suomessa Julkisen hallinnon tietohallinnon neuvottelukunta JUHTA on valtion ja kuntien
yhteinen elin, joka antaa suosituksia julkiselle hallinnolle. JUHTA on hyväksynyt julkisen
hallinnon verkkosivuja koskevat suunnitteluohjeet, jotka tukevat esteettömyyttä. Vuonna
2000 vahvistettu Julkishallinnon WWW-sivuston suunnittelun ohjeet (JHS 129), joissa
keskeisinä periaatteina pidetään "saavutettavuutta (esteettömyyttä), löydettävyyttä,
palvelevuutta ja osallistuvuutta".

Valtiovarainministeriön hallinnon kehittämisosasto on laatinut julkisten verkkopalvelujen
laatusuositukset.

Stakes koordinoi Design for All -verkostoa, jonka tehtävänä on esteettömyyden
edistäminen tiedottamisella ja koulutuksella.

Sisäasiainministeriön julkaisu Kohti verkkoasiointia (2002) sisältää lähtökohtia wwwsivujen
tekijöille:

Saatavuus
Tasa-arvoisen tietoyhteiskunnan perusedellytys. Käyttäjien pääsy vaivattomasti palvelun
käyttäjäksi.

Esteettömyys
Verkkopalvelun fyysinen, kognitiivinen ja sosiaalinen esteettömyys. Design for all -
periaatteen noudattaminen, jolloin eri käyttäjäryhmien tarpeet huomioidaan.

Kohtuuhintaisuus
Taloudelliset mahdollisuudet eivät saa ratkaisevasti rajoittaa sellaisten henkilöiden ja
ryhmien verkkopalveluiden käyttöä, jotka ehkä kaikkein eniten voisivat hyötyä uusista
teknologian mahdollisuuksista.

Tietoisuus palvelun olemassaolosta
Käyttäjien tietoisuus palvelun olemassaolosta ja sen hyödyistä.

Soveltuvuus käyttäjän tarpeeseen
Käyttäjien osallistuminen palvelun suunnitteluun. Käyttäjäystävällisyys ja tarpeiden
tunnistaminen, jotta palvelusta saatava hyöty on mahdollisimman suuri.

3. Esteettömien www-sivujen suunnittelu ja toteutus

Helppokäyttöisten ja esteettömien www-sivujen tekemisessä on huomioitava käytettävät
ohjelmointitekniikat sekä sisällön, toimintojen ja ulkoasun vaikutukset tiedon
ymmärrettävyyteen eri käyttäjäryhmien parissa.

Lähtökohta www-sivujen tekemisessä on niiden toteuttaminen esteettömästi alusta asti.
Sivuista ei pidä tehdä esim. tekstiversiota näkövammaisille, vaan kannattaa tehdä sivut jo
suoraan näkövammaisille sopiviksi. Tekstiversio on perusteltu silloin, jos sivuilla esitettävä
tieto perustuu graafisiin esityksiin kuten pylväsdiagrammeihin ja kaavioihin.

"Sisällöntuottajien tulisi turvautua vaihtoehtoisiin sivuihin vain silloin, kun muut ratkaisut
epäonnistuvat, sillä vaihtoehtosivuja yleisesti päivitetään harvemmin kuin "ensisijaisia"
sivuja. Vanhentunut sivu voi olla yhtä turhauttava kuin esteellinen sivu, sillä alkuperäisellä
sivulla esitettävä tieto on kummassakin tapauksessa saavuttamattomissa."
Web Content Accessibility Guidelines 1.0, kohta 11.4

Vaihtoehtoisten esitysmuotojen käyttö on perusteltua, jos niiden käyttö lisää merkittävästi
www-sivujen saavutettavuutta siitäkin, mihin päästään noudattamalla teknisiä
esteettömyyssuosituksia. Esimerkiksi kuvallisesti esitettyjen vaihtoehtojen tarjoaminen
tekstisisällölle voi auttaa lukihäiriöisiä, ja kuuroille on apua viittomakielisistä esityksistä.

Hyvän verkkosivun pikaohjeet

- Rakenna sivut niin, että tärkein asia on alussa.
- Käytä mahdollisimman selkeää ja helppoa kieltä.
- Tee ensin yksinkertainen sivu ja sommittele ulkoasu erikseen ns. tyylitiedostolla.
- Tee kertovat linkit, joista heti näkee, mitä sisältöä linkin takana on.
- Tarjoa kuville ja äänille tekstivaihtoehto.

3.1 Esteetön tekniikka verkkosivuilla

Esteettömyys saavutetaan noudattamalla yksinkertaisia suunnitteluperiaatteita ja sopivia
toteutustekniikoita.

Teknisesti esteetön www-sivu toteutetaan noudattamalla W3C/WAI-ohjeistuksia
verkkosisällön saavutettavuudesta. Ohjeet kertovat miten verkkosivujen sisältö voidaan
saattaa vammaisille sopivaan, saavutettavaan muotoon. Ohjeet koskevat sekä yleisiä
suunnitteluperiaatteita että eri tekniikoiden soveltamista.

WAI-ohjeisto määrittelee kolme esteettömyystasoa: AAA (paras), AA ja A. Tasoluokitus
määräytyy tarkistuskohtien ehtojen täyttymisestä. Tasoluokitus perustuu siihen, miten
suuri kyseisen tarkistuskohdan vaikutus saavutettavuuteen on. Mitä varhaisemmassa
suunnitteluvaiheessa esteettömyys otetaan huomioon, sitä helpommin esteettömyys
toteutuu. Uusien sivustojen tekemisessä on hyvä tähdätä suoraan AAA-tasoon. Vanhoja
sivustoja korjattaessa voidaan keskittyä aluksi saavuttamaan alin taso A.

World Wide Web Consortium (W3C) on kansainvälinen yhteenliittymä, jossa on mukana
laajasti yrityksiä, yhteisöjä ja laitoksia. Se kehittää tekniikoita ja laatii suosituksia Webin ja
sen käytön edistämiseksi.
Osoite: http://www.w3.org/

WAI on lyhenne sanoista Web Accessibility Initiative. Se on W3C:n toiminta-alue, jossa
edistetään esteettömyyttä mm. selaimia ja sivunteko-ohjelmia parantamalla. Webin
sisältöjen esteettömyyden perusdokumentti on Web Content Accessibility Guidelines.
Osoite: http://www.w3.org/WAI/

WAI-ohjeet on suomennettu JUHDAN (julkisen hallinnon tietohallinnon neuvottelukunta)
toimesta nimellä Web Content Accessibility Guidelines 1.0 - Verkkosisällön
saavutettavuusohjeet W3C.
Osoite: http://www.intermin.fi/juhta

WAI ohjeet on tehty seuravista näkökulmista:

- Kyseinen henkilö ei ehkä näe, kuule, kykene liikkumaan tai käsittelemään tietynlaista
informaatiota kovinkaan helposti tai lainkaan.
- Tekstin lukeminen tai ymmärtäminen voi tuottaa vaikeuksia.
- Henkilöllä ei ole käytössään näppäimistöä tai hiirtä tai hän ei kykene käyttämään niitä.
- Käytössä on pelkkä tekstinäyttö, hyvin pieni näyttö tai hidas Internet-yhteys.
- Henkilö ei kenties puhu tai ymmärrä sujuvasti dokumentissa käytettyä kieltä.
- Henkilö saattaa olla tilanteessa, jossa näkö, kuulo tai kädet ovat keskittyneet muuhun
(esim. henkilö ajaa autoa, työskentelee meluisassa ympäristössä jne.)
- Käytössä on vanhempi selainversio, täysin eri selain, ääniselain tai eri käyttöjärjestelmä.

Tavoitteena WAI-ohjeissa on sujuvasti muuntuvien sivujen suunnittelu:

- Erota rakenne esitystavasta (sisällön, rakenteen ja esitystavan ero).
- Liitä mukaan tekstiä (sekä tekstivastineet). Teksti voidaan esittää tavoilla, joita miltei
kaikki selaimet pystyvät tulkitsemaan ja jotka ovat saavuttavia miltei kaikille käyttäjille.
- Tuota dokumentteja, jotka toimivat vaikka käyttäjä ei näe ja/tai kuule. Anna tietoa, joka
palvelee samaa käyttötarkoitusta kuin ääninauha tai videokuva, mutta on muodossa, joka
sopii myös muin aistein käytettäväksi. Tämä ei tarkoita, että sivustosta olisi luotava
ääniversio näkövammaisia varten. Näkövammaiset käyttäjät voivat käyttää apunaan
ruudunlukuohjelmaa sivujen teksti-informaation saavuttamiseksi.
- Luo dokumentteja, jotka eivät ole riippuvaisia tietyntyyppisistä laitteista. Sivuja tulisi voida
käyttää ilman hiirtä, pienen näytön avulla, näytöllä jolla on pieni resoluutio,
harmaasävynäytöllä, ilman näyttöä, pelkän äänen tai tekstin avulla jne.

WAI-ohjeiden käyttö lisää www-sivujen monimuotoisuuta. Ohjeet vastaavat esimerkiksi
kysymykseen miten kuvat voidaan tehdä saavutettaviksi. Jotkut käyttäjät eivät voi lainkaan
nähdä kuvia, toiset puolestaan saattavat käyttää tekstipohjaisia selaimia, jotka eivät tue
kuvia; toiset ovat saattaneet ottaa pois käytöstä kuvia tukevan toiminnon (esim. hitaan
Internetyhteyden takia). Ohjeet eivät kuitenkaan suosittele kuvien välttämistä
saavutettavuuden parantamiseksi. Sen sijaan ohjeissa neuvotaan käyttämään
tekstivastinetta, joka tekee kuvasta saavutettavan.

3.2 Sisällön esittäminen

Esteettömyys on otettava huomioon myös sisällön näkökulmasta. Tärkeitä kysymyksiä
ovat: mitä sivuston tulisi saavuttaa, mikä on kohderyhmä, mitä tietoa tuotetaan ja miten
aihetta rajataan. Lähtökohtana on käyttää selkeää kieltä luettavuuden varmistamiseksi.
Luettavuudella tarkoitetaan sitä, että teksti on helppoa ja joutuisaa lukea.

Hyödyntämällä selkokielen periaatteita voi parantaa www-sivujen luettavuutta. Selkokieli
on eri asia kuin sujuva ja helposti ymmärrettävä yleiskieli. Selkokieli on vielä
yksinkertaistetumpaa; sitä kirjoitettaessa pyritään ottamaan huomioon vastaanottajan
kielellinen kyvykkyys.

Selkokielisen tekstin kirjoittamisesta voidaan antaa seuraavanlaisia ohjeita:

1. Mieti, mitä haluat sanoa ja kenelle. Rajaa aihe, jätä ylimääräinen aines pois. Tarkista,
että suunnittelemasi tekstin rakenne on johdonmukainen.

2. Tekstiä voidaan mukauttaa sanaston, kielen rakenteiden, lauseiden ja tekstin tasolla.
Sanaston mukauttamisessa tärkeää on suosia yleisiä, tavanomaisia sanoja sekä pyrkiä
selittämään ne sanat, jotka olettaa lukijalle vieraiksi. Ole varovainen kielikuvien ja
abstraktien ilmausten sekä suurten lukujen käytössä.

Kielen rakenteissa kannattaa välttää vaikeita ja monimutkaisia sijamuotoja sekä
verbirakenteita. Passiivilauseet on hyvä korvata aktiivilauseilla aina, kun se on mahdollista.

Selkokielessä on syytä kiinnittää huomiota lauseiden pituuteen: kirjoita lyhyitä lauseita,
ilmaise mieluummin vain yksi tärkeä asia lauseessa. Suora sanajärjestys on usein
helpompi hahmottaa kuin epäsuora.

Erilaisia sidoskeinoja käyttämällä kirjoittaja luo tekstistä yhtenäisen kokonaisuuden, jota
lukijan on helppo seurata. Sidoskeinoja ovat esimerkiksi pronominiviittaukset sekä
konjunktiot ja muut sidesanat, joilla lauseita ja lauseenosia voi yhdistää.

Kirjoita konkreettista kieltä, anna esimerkkejä.

Vältä viittauksia toisiin kohtiin tekstissä.

3. Käytä aikuisten kieltä, kun kirjoitat aikuisille.

4. Tarkista teksti. On hyvä, jos voit luetuttaa tekstisi jollakulla kohderyhmän edustajalla.

Lähde: PAPUNET - selkeää ja esteetöntä kommunikointia, sivustoa koordinoi
Kehitysvammaliiton Tietotekniikka- ja kommunikaatiokeskus Tikoteekki.
Osoite: www.papunet.fi

Selkokielen soveltamisen lisäksi kannattaa kiinnittää huomiota seuraaviin asioihin:

- Otsikointi ja väliotsikointi. Hyvä suositus on, että otsikossa on kolme tai neljä sanaa,
joista yksi on toimintaa ilmaiseva verbi. Otsikon pitäisi yleensä tiivistää, mitä tekstissä
sanotaan. Väliotsikoiden käyttö jakaa tekstin osiin ja korostaa tärkeää asiaa sekä samalla
valmistaa lukijaa siihen, mitä on tulossa.
- Kappalejako rytmittää luettavuutta. Yhdessä kappaleessa kannattaa esittää vain yksi
pääajatus.
- Sanavalintoihin on syytä kiinnittää erityisesti huomiota, koska esim. tekniset termit,
sivistyssanat ja arkikieliset ilmaukset vaikeuttavat tekstin lukemista.
- Välimerkkien käytöllä on iso merkitys, koska ne ohjaavat lukemaan tekstin
ymmärrettävämmin.
- On vältettävä lyhenteiden käyttöä, koska ne hidastavat lukemista ja voivat olla vieraita.
Puhesyntetisaattorit ei useinkaan voi tietää, miten lyhenne pitää lukea.
- Vertauksien käyttöä on varottava. Kuvasanonnat ja vertaukset usein elävöittävät kieltä,
mutta niihin liittyy myös riskejä, kuten se, että kulttuurierojen takia niitä ei ymmärretä tai ne
ymmärretään väärin.
- Kirjoitusvirheet vaikeuttavat tekstin ymmärtämistä.

3.3 Käyttöliittymä www-sivuilla

Sivuista tulisi tehdä ymmärrettäviä ja helposti navigoitavia. Helpon ja yksinkertaisen kielen
käyttö ei yksinään riitä, vaan sivuilla ja niiden välillä tapahtuvaan liikkumiseen on
käytettävä helposti ymmärrettäviä menetelmiä. Navigointityökalujen ja -informaation
liittäminen sivuille varmistaa niiden saavutettavuuden ja käytettävyyden.

Kaikki käyttäjät eivät kykene hyödyntämään visuaalisia merkkejä kuten kuvakarttoja, sivun
kokoon suhteutettuja vierityspalkkeja, vierekkäisiä kehyksiä tai grafiikkaa, joka ohjaa
graafisten selainten näkevää käyttäjää. Myös asiayhteys voi kadota, mikäli käyttäjä näkee
vain osan sivusta kerrallaan; joko siksi että sivua käytetään sana kerrallaan
(puhesyntetisaattorin tai pistenäytön avulla), tai siksi, että sivua käytetään osa kerrallaan
(pienen näytön tai suurennusohjelman avulla). Käyttäjän on vaikea ymmärtää suuria
taulukoita, luetteloita, valikoita jne. ilman navigointia helpottavaa informaatiota.

Graafinen käyttöjärjestelmä ja www-selain ovat käyttöliittymiä, mutta myös www-sivusto
muodostaa käyttöliittymän. Käyttöliittymällä tarkoitetaan sitä tapaa, jolla sisältö on
käyttäjän käytettävissä. Käyttöliittymän käytettävyys eli helppokäyttöisyys on wwwsivuston
keskeinen tavoite.

Navigointi www-sivulla

Navigoinnilla tarkoitetaan tapaa suunnistaa eli navigoida sivuston eri osiin. Navigoinnin
selkeys ja helppo opittavuus on käyttäjälle erityisen tärkeää. Navigointirakenteen
suunnittelu on oleellinen vaihe sivuston tekemisessä. Navigoinnin yleinen toteuttamistapa
on vakionavigointi eli sivuston jokaisella sivulla on navigointivalikko. Vaihtoehtona on se,
että kullakin sivulla on linkki pääsivulle, jossa on sopiva navigointivalikko. Molemmat tavat
toimivat ja molemmissa on omat ongelmansa. Vakionavigointia käytettäessä on syytä
välttää useita navigointivalikoita, jotta ei käy niin, että sisällölle jää vähän tilaa.
Navigointivalikoiden yleisimmät sijoituspaikat ovat vasemmalla ja ylhäällä.

Oleellista on kuitenkin navigoinnin sijoittelu tyylitiedostojen avulla. Tämä tekniikka
parantaa varsinkin ruudunlukuohjelmistojen käyttäjien navigointia, kun navigointivalikot
sijoitetaan rakenteessa sisällön jälkeen. Sommittelun avulla sitten määritellään missä
valikot näkyvät.

Sivuston sivukartta tai sisällysluettelo sekä navigointipolun näyttäminen helpottaa sivuston
hallintaa ja tiedon löytymistä. Käyttäjälle on tärkeää tietää aina missä on menossa
sivustolla ja miten pääsee takaisin etusivulle.

Linkkien käyttö

Jokaiselle www-sivulle kannattaa sijoittaa ainakin yksi linkki. Tärkein linkki on se, joka
viittaa siihen asiayhteyteen, johon sivu kuuluu. Pienissä sivustoissa voi riittää, että
jokaiselta alasivulta on linkki pääsivulle, jossa on alasivujen luettelo linkkilistana.

Yletön linkkien käyttö johtaa sekaannukseen. Linkit, jotka johtavat ulkopuolisille sivuille on
syytä laittaa tekstin loppuun ja laittaa niiden yhteyteen kuvaus linkin kohteesta. Varsinkin
tiedostoihin kuten pdf- tai doc-tiedostoihin viittaavat linkit ovat ongelmallisia, koska ne
edellyttävät erillisohjelman käyttöä, tälläisistä linkeistä on mainittava selkeästi.

Linkkien osalta on erityisen tärkeää huolehtia siitä, että sivu toimii myös ilman selaimen
suorittamia skriptejä. Jos linkkeihin liitetään skriptejä, joilla esimerkiksi avataan
JavaScriptillä linkki uuteen, määräkokoiseen ikkunaan tai määrättyyn kehykseen, on
huolehdittava siitä, että linkki toimii ilman JavaScriptiäkin.

Kuvan käyttöä linkkinä tulee välttää. Paras ratkaisu on tehdä tekstilinkki, jonka yhteydessä
on kuva. Jos kuitenkin käytetään kuvaa linkkinä, niin kuvalle on tehtävä toimiva alt-teksti.

Kieliversiot

Kieliversioiden käytössä ei ole hyvä ajatus panna erikielisiä versioita samasta sisällöstä
yhdelle sivulle. On parempi, että kukin versio on omana sivunaan ja sivut on linkitetty
toisiinsa. Kielivalintasivulle on päästävä myös sivuston sisältä, ainakin etusivulta.

3.4 Käyttöliittymän ulkoasu

Käyttöliittymä on useimmiten näköaistiin perustuva, ja siksi se toimii paljolti näkyvän
ulkoasun pohjalla. Esteettömän ulkoasun ohjeita ovat:

- Käytä tekstin muotoiluun ja ulkoasun hallintaan tyylitiedostoja. Älä käytä kuvia tekstin
sijasta - käytä mieluummin tekstiä ja tyylitiedostoja.

- Älä turvaudu pelkästään väreihin. Varmista, että teksti ja kuvat ovat ymmärrettäviä myös
ilman värejä. Jos informaation välittämiseen käytetään pelkästään värejä, tieto ei välity
käyttäjille, jotka eivät erota tiettyjä värejä toisistaan tai joilla on käytössään
harmaasävyinen tai ei-visuaalinen näyttö. Jos teksti ja tausta ovat väreiltään
samankaltaisia, ne eivät synnytä tarpeeksi voimakasta kontrastia yksivärisellä näytöllä
tarkasteltuna tai jos käyttäjä on esimerkiksi värisokea.

Osoitteessa http://www.vischeck.com/ voi testata värisokeuden vaikutusta sivujen
näkymiseen.

- Taustakuvan käytössä on syytä olla varovainen, koska se hidastaa sivun latautumista,
saattaa tehdä sivun lukemisen vaikeaksi ja levottoman tuntuiseksi. Taustakuvan käyttöä
kannattaa harkita jo siksikin, että sen käyttötarkoitus on vain koristaa sivua.

- Taulukkotaittoa ei pidä käyttää, taulukoiden oikea käyttö on näyttää taulukkomaista
tietoa.

- Kehyksiä ei tarvitse käyttää. Kehykset vaikeuttavat ruudunlukuohjelmistojen toimintaa.

- Kahta tai usempaa palstaa ei kannata käyttää, koska sisällön luettavuus kärsii. Se mikä
toimii painetussa mediassa ei välttämättä toimi www-sivulla.

Tekstin fyysiseen luettavuuteen vaikuttavat useat tekijät:

- Teksti on parhaiten luettavissa kun se on mustaa tai hyvin tummaa vaalealla taustalla.
- Tekstin värinä ei pidä käyttää sinistä, koska selaimet yleisesti esittävät käymättömät linkit
tummansinisellä.
- Kirjasintyyppi eli fontti. Sivulla ei pidä käyttää useita eri fontteja, kolme on maksimi
(otsikot, leipäteksti ja kuvateksti).
- Tekstityylien kanssa on syytä olla maltillinen. Lihavoinnin ja kursiivin käyttö tehokeinona
vähenee, jos niitä käyttää paljon. Lisäksi kursiivi on usein vaikeasti luettavissa näytöltä.
Suuraakkosten käyttöä on vältettävä, pienaakkosten luettavuus on paljon parempi.
- Kiinteitä tekstikokoja ei pidä käyttää. Kussakin käyttöympäristössä selaimet valitsevat
tekstin koon esitystilanteeseen sopivaksi. Käyttäjän on päästävä tarvittaessa itse
vaikuttamaan tekstikoon asetuksiin selaimesta käsin.
- Rivin leveys, riviväli sekä merkkien ja sanojen väli on asetettavissa typografian sääntöjen
mukaisesti tyylitiedostoilla.

3.5 Kuvat ja multimedia - audiovisuaalisten aineistojen käyttö

Kuvia, ääniä, videoita ja animaatioita käytetään tekstin havainnollistamiseen, koristeluun ja
olennaisen sisällön esittämiseen. Multimedian käyttö ei saa olla esteenä sivuston käytölle.

Esteettömyysohjeet eivät kehota sisällöntuottajia luopumaan media-aineistojen käytöstä,
vaan kertovat miten multimediasisältö saadaan suuremman yleisön ulottuville. Koska
tekstisisältö voidaan esittää käyttäjälle eri muodoissa kuten synteettisenä puheena,
pistekirjoituksena tai visuaalisesti esitettynä tekstinä, esteettömyysohjeet edellyttävät, että
graafiselle ja äänimuotoiselle informaatiolle laaditaan tekstivastineet (text equivalents).
Tekstivastineet täytyy laatia siten, että ne välittävät käyttäjälle kaiken tarpeellisen sisällön.

Ei-tekstimuotoiset vastineet (non-text equivalents) (esim. visuaalisen esityksen
ääniselostus; kirjoitetun tarinan vastineena video, jossa henkilö viittoo tarinan jne.)
parantavat saavutettavuutta niiden käyttäjien kannalta, jotka eivät voi käyttää hyväkseen
visuaalista informaatiota tai kirjoitettua tekstiä, kuten monet näkö- ja kuulovammaiset sekä
kognitiivisista ja oppimisvaikeuksista kärsivät. Ei-tekstimuotoisesta vastineesta on apua
myös niille, jotka eivät voi tai osaa lukea. Ääniselostus on yksi esimerkki visuaalisen
informaation ei-tekstimuotoisesta vastineesta. Multimediaesityksen visuaalisen osuuden
ääneen selostaminen hyödyttää niitä, jotka eivät näe.

Tekstinauha (text transcript) on vastine äänimuotoiselle informaatiolle, johon kuuluu
sekä puhuttua ääntä että äänitehosteita.

Tekstitys (caption) on tekstimuotoinen versio videoesityksen ääninauhasta ja se on
synkronoitu kuva- ja ääninauhan kanssa. Tekstitys esitetään yleensä kuvan päällä sen
alalaidassa, ja siitä on hyötyä kuulovammaisille ja huonokuuloisille sekä tilanteissa, joissa
ääninauhaa ei kuule (esim. meluisassa tilassa).

Yhdistetty tekstinauha (collated text transcript) yhdistää tekstityksen ja visuaalisen
informaation tekstikuvauksen (kuvaukset tapahtumista, elekielestä, grafiikasta ja
kohtausten vaihtumisesta). Nämä tekstivastineet tekevät visuaalisen sisällön
saavutettavaksi kuurosokeille sekä niille, jotka eivät voi käyttää videokuvaa, animaatioita
jne.

Äänikuvaus (auditory description) on yksi esimerkki ei-tekstimuotoisesta vastineesta
visuaalisen esityksen tärkeille elementeille. Kuvauksen esittää joko äänitetty ihmisääni tai
synteettinen ääni (etukäteen nauhoitettu tai samalla luotu). Äänikuvaus synkronoidaan
esityksen ääninauhan kanssa yleensä sen sisältämiin luonnollisiin taukokohtiin.
Äänikuvaukset sisältävät tietoa esityksen tapahtumista, elekielestä, grafiikasta ja
kohtausten vaihtumisesta.

Aineistojen liittäminen www-sivulle
Lähtökohtana media-aineistojen käytölle on niiden linkittäminen sivun yhteyteen, ei
upottaminen osaksi sivua. Tälläinen ratkaisu varmistaa sen, että media-aineistot eivät estä
sivun käyttöä. Jos esimerkiksi video on upotettu sivuun, niin video alkaa pyöriä
automaattisesti sivulle tullessa. Tämä johtaa sivun hitaaseen latautumiseen ja
huonoimmillaan virheilmoituksiin siitä, että videon katseluun tarvittavaa ohjelmaa ei ole
asennettu käyttäjän koneelle. Käyttäjän on itsensä kontrolloitava mitä aineistoja hän
käynnistää.

Kuvien käytössä on poikkeuksia tästä käytännöstä, koska kuvat ovat usein keskeinen osa
sivun ulkoasua ja sisältöä.

Kuva

Sivu kannattaa suunnitella ensin ilman kuvia. Sen jälkeen liitetään kuvia siten, että tekstiin
tehdään tarvittavat muutokset ja kuville kirjoitetaan vaihtoehtotekstit. Vaihtoehtotekstit
(img-elementin alt-määritteet) täytyy suunnitella tarkasti, koska merkkien määrä on syytä
olla alle 50.

Kuvien näyttäminen tekstin yhteydessä vie helposti paljon tilaa. Kuvat on syytä näyttää
pieninä kuvina, joista on linkki kuvan ja tekstin kautta isompaan kuvaan. Jos kuvia on
paljon, niin hyvä ratkaisu on niiden linkittäminen pelkästään tekstistä, jolloin annetaan
käyttäjälle valinnan vapaus kuvien katseluun.

Kuvien käyttö linkkinä voi olla ongelmallista. Paras tapa on tehdä linkit tekstistä ja laittaa
kuva viereen, jos kuvan käyttö linkin yhteydessä on oleellista.

Kuvatiedoston koko on tärkeä tekijä www-sivulla. Mitä pienempi tiedosto sitä nopeammin
se latautuu verkosta selaimelle. Kuvien näyttämisessä www-sivuilla käytetään tehokkaasti
pakkaavia tiedostomuotoja, joista yleisimpiä ovat gif, jpeg ja png.

Multimedia (ääni, video ja animaatio)

Multimedian käyttö www-sivuilla lisääntyy jatkuvasti, koska verkkonopeudet kasvavat
laajakaistaliittymien johdosta. Lisäksi multimedian tekninen tekeminen on halventunut mm.
avoimen lähdekoodin ohjelmistojen myötä. Itse multimediasisältöjen tuottaminen on tietysti
edelleen vaativaa, tarinankertomisen taitoja edellyttävää tekemistä.

Multimediaan liitetään usein myös interaktiivisuuden eli vuorovaikutteisuuden käsite. Tämä
tarkoittaa sitä, että käyttäjä pääsee ohjaamaan esitystä. Tyypillinen multimediaesitys on
kuva, jonka eri kohdista napsauttelemalla avautuu uusia sivuja tai media-aineistoja.
Multimedian monimuotoisimpia sovelluksia ovat pelit. Pelejä käytetään nykyään yhä
enemmän viihteen lisäksi myös opetuksessa.

Multimedian tekniseen toteuttamiseen löytyy esteettömiä ratkaisuja, mutta suurin este voi
ollakin multimedian yleinen ongelmallisuus verkossa. Ongelmia tulee käytettävien
tekniikoiden kirjosta, tästä johtuen käyttäjä on jatkuvassa eri multimediaesitysohjelmien
päivityskierteessä. On erittäin tärkeää kertoa sivulla multimedia-aineistossa käytettyjen
tiedostojen formaatti, versio ja koko. Aineiston yhteyteen on hyvä laittaa linkki sivulle, josta
katseluun tarvittavan ohjelman saa.

Multimediaesitykset on syytä toteuttaa yleisillä esitystekniikoilla, joihin on saatavilla
ilmainen katseluohjelma, jotta saavutettavuus on mahdollisimman hyvä. Tälläisiä
tekniikoita ovat esimerkiksi Smil, Flash, Director, Realmedia, Quick Time ja Windows
Media.

Multimediaa ei ole syytä käyttää sivujen koristeluun. Huonoin tapa esimerkiksi äänen
käytössä on laittaa sivulle automaattisesti latautuva taustaääni.

NCAMin sivustolta löytyy tietoa esteettömyyden edistämisestä tieto- ja
viestintätekniikassa.
The CPB/WGBH National Center for Accessible Media (NCAM) is a research and
development facility dedicated to the issues of media and information technology for
people with disabilities in their homes, schools, workplaces, and communities.
Osoite: http://ncam.wgbh.org/

NCAMin Rich Media Accessibility Web -sivusto sisältää tietoa esitystekniikoiden
esteettömyydestä ja esimerkkejä multimediaesityksistä.
Osoite: http://ncam.wgbh.org/richmedia/

3.6 Kuinka teet näkövammaisystävälliset www-sivut

Yksi tapa tehdä teknisesti esteettömät www-sivut on huomioida näkövammaiset
Hankaluuksia tuottaa monesti tapa, jolla sivut on koodattu. Mitä enemmän grafiikkaa sivu
sisältää sitä vaikeampaa näkövammaisen on sivua lukea. Tilanne voidaan kuitenkin
korjata melko vaivattomasti ja siten, ettei sivun ulkonäkö siitä kärsi.

Ohje perustuu World Wide Web Consortium (W3C) suosituksiin sekä Suomessa kerättyyn
palautteeseen ja kokemukseen.

Ohjeet on luettavissa sivustolla:
Näkövammaisten keskusliitto, näkövammaistahojen testausohjeet verkkosivuille ja -
palveluille
http://www.nkl.fi/suositukset/testaus/

3.7 Esteettömyyden testaaminen ja arviointi

Arvioi www-sivuston saavutettavuus sekä automaattisten työkalujen sekä ihmisen
suorittaman tarkistuksen avulla. Automaattiset menetelmät ovat nopeita ja
helppokäyttöisiä, mutta ne eivät paljasta kaikkia ongelmakohtia. Ihmisen tekemä tarkastus
auttaa varmistamaan, että käytetty kieli on riittävän selkeää ja navigointi vaivatonta.

Aloita sivujen arviointi mahdollisimman varhaisessa vaiheessa. Saavutettavuusongelmat
on tällöin helpompi tunnistaa ja korjata. Käytä automaattista arviointityökalua sekä
arvioivaa selainta. Huomaa, että ohjelmatyökalut eivät kykene arvioimaan kaikkia
saavutettavuuteen liittyviä seikkoja, kuten linkkitekstin tai tekstivastineen
tarkoituksenmukaisuutta.

- Arvioi syntaksi (esim. HTML, XML jne.).
- Arvioi tyylitiedostot (esim. CSS).
- Kokeile merkkipohjaista selainta tai sen emulaattoria.
- Kokeile useita graafisia selaimia eri asetuksin:
ääntä ja grafiikkaa lataavina,
ilman grafiikkaa,
ilman ääntä,
ilman hiirtä,
ilman kehyksiä, skriptejä, tyylitiedostoja ja sovelmia.

- Kokeile useita eri-ikäisiä selaimia.
- Kokeile puhuvaa selainta, ruudunlukuohjelmaa, suurennusohjelmia, pientä näyttöä jne.
- Käytä kieliopin ja oikeinkirjoituksen tarkistusohjelmia. Sivua puhesyntetisaattorin avulla
lukeva ei välttämättä pysty selvittämään syntetisaattorin lukemaa, väärinkirjoitettua sanaa.
Kielioppivirheiden korjaaminen helpottaa ymmärtämistä.
- Tarkasta dokumentin selkeys ja yksinkertaisuus. Parhaan arvion tekee kokenut sivujen
toimittaja. Kokenut toimittaja voi parantaa sivujen käytettävyyttä tunnistamalla seikkoja,
jotka saattavat synnyttää tietynlaisesta kielenkäytöstä tai kuvasymbolien käytöstä johtuvia
kulttuurisia väärinymmärryksiä.
- Pyydä vammaisia käyttäjiä arvioimaan sivuja. Sekä jo edistyneemmät että aloittelevat
käyttäjät voivat antaa arvokasta palautetta saavutettavuus- ja käytettävyysongelmista sekä
niiden vakavuudesta.

Työkaluja testaamiseen:

- Bobby testaa sivut W3C:n Web Access Initiative (WAI) mukaisesti.
http://bobby.watchfire.com/bobby/html/en/index.jsp

- W3C Markup Validation Service.
http://validator.w3.org/

- Lynx-tekstiselaimella voi testata, miten sivu toimii ilman grafiikkaa.
http://www.delorie.com/web/lynxview.html

- Tieken esteettömyysoppaan tarkistuslista.
http://www.tieke.fi/esteettomyysopas/tarkistus.html

3.8 Yhteenvetoa www-sivujen esteettömästä toteutuksesta

Seuraavassa on yhdistetty eri ohjeistuksia.

- Käytä selkeitä ja kuvaavia otsikoita ja linkkien nimiä.
- Aloita kappale virkkeellä, joka ilmaisee, mitä asiaa kappale käsittelee.
- Esitä yhdessä kappaleessa vain yksi pääajatus.
- Vältä slangia, ammattikieltä ja tuttujen sanojen käyttöä erikoisissa merkityksissä.
- Suosi tavallisia sanoja.
- Käytä aktiivisia ilmaisuja mieluummin kuin passiivisia.
- Vältä mutkikkaita virkerakenteita.
- Rakenne: tee sivu sellaiseksi, että se alusta loppuun luettuna on toimiva, mm.
tärkeimmät asiat ovat ensin.
- Tekniikat: käytä yksinkertaista ja loogista HTML-merkkausta, ja sommittele ulkoasu
ensisijaisesti CSS:llä.
- Linkit: nimeä linkit sisältöä kuvaaviksi, ei esimerkiksi "klikkaa tästä".
- Multimedia: tarjoa kaikelle kuva-, ääni-, video- yms. aineistolle tekstivaihtoehto.
- Taulukot: huolehdi, että taulukot ovat mielekkäitä myös riveittäin luettuina.
- Ohitettavuus: tarjoa mahdollisuus ohittaa ne aineistot, jotka voivat olla esteellisiä, kuten
isot taulukot.

- Sivujen organisointi. Käytä otsikoita, listoja ja yhtenäistä rakennetta. Käytä CSS:ää
sommitteluun ja tyyliin kun mahdollista.
- Hypertekstilinkit. Tee linkkitekstistä sellaisenaan ymmärrettävä esim. vältä "klikkaa
tästä" tyyppisiä selityksiä.
- Äänitteet, videot ja muut vastaavat esitykset: vältä itsekseen käynnistyviä esityksiä,
tarjoa mieluummin linkki. Liitä audioon tekstitys ja kuvausteksti sekä videoon kuvaus.
- Kuvat & animaatiot. Käytä alt-attribuuttia selittämään tehtävä.
- Skriptit, appletit & plug-init. Tarjoa vaihtoehtoinen sisältö, jos aktiiviset piirteet ovat
saavuttamattomia tai niitä ei tueta.
- JavaScript: huolehdi siitä, että sivu toimii myös, kun JavaScript ei ole käytössä.
- Kehykset (frames): tarjoa kehyksetön vaihtoehto (noframes) ja anna kehyksille sisältöä
(ei sijaintia) kuvaavat nimet.
- Lomakkeet: yhdelle riville yksi asia eli syöttökentän selitys ja itse kenttä.
- Kuvakartat. Käytä aktiivialueisiin selainpuolen map:iä ja tekstiä.
- Käyrät & kaaviot. Käytä yhteenvetoa tai longdesc-attribuuttia.
- Taulukot. Tee rivien lukemisesta ymmärrettävää. Tee yhteenveto.
- Iso tietomassa kuten laaja taulukko: ellei sitä haluta sijoittaa omalle sivulleen, lisää sitä
ennen linkki, jota seuraamalla sen voi ohittaa.

Ohjeita pyrittäessä kehittämään olemassa olevia sivustoja:

- Perusesteettömyys: Kaikki tekstimuotoinen aineisto on saavutettavissa ilman, että
joutuu kulkemaan sellaisten vaiheiden läpi, jotka eivät toimi pelkässä tekstitilassa. Tätä
rikkoo esimerkiksi sellainen sivusto, jossa kaikki varsinainen asia on tekstiä mutta jossa
ns. navigointi perustuu yksinomaan kuviin.
- Esteellisyyksien selostaminen: Sivuilla kerrotaan selkeästi, mitkä sisällöt ja palvelut
eivät ole kaikkien saavutettavissa. Esimerkiksi jos kuva sisältää olennaista informaatiota,
jolle ei ole tekstivaihtoehtoa, sivulla ainakin kerrotaan tämä ja luonnehditaan, millaista
tietoa siinä on. Tai jos sivun koko idea perustuu vuorovaikutukseen hiirtä käyttäen, tämä
kerrotaan heti alussa.
- Esteellisyyksien vähentäminen: Sivustoa uudelleen jäsentämällä, suunnitteluratkaisuja
muuttamalla ja sisältöä muokkaamalla sitä kehitetään esteettömämmäksi.
- Vaihtoehtojen tarjonta: Sisällöille ja palveluille laaditaan erillisiä vaihtoehtoisia esitys- ja
käyttömuotoja, kuten tekstille selkokielinen vaihtoehto, viittomakielinen videoesitys, asian
esitys kuvina taikka teksti ääneen luettuna. Tässä siis ei ole kyse yksinkertaisemman,
"riisutun" vaihtoehdon kuten "tekstiversion" tarjoamisesta vaan luovuutta vaativasta
monikanavaisuudesta. Myös sisällön kääntäminen eri kielille voidaan lukea tähän
ryhmään.
Lähde: Tieken esteettömyysopas
Osoite: http://www.tieke.fi/esteettomyysopas/

Aina kannattaa muistaa Jakob Nielsenin kymmenen sääntöä, Nielsen, J. (1994). Ten
Usability Heuristics.

1. Näkyvyys: Käytettävän sovelluksen/laitteen tulisi antaa käyttäjälle sopivin väliajoin
sopivaa palautetta siitä, mitä on tapahtumassa. Tämä on tärkeää siksi, että käyttäjän ei
tarvitsisi jäädä miettimään, tekeekö sovellus jotain vai onko tapahtunut jokin häiriö.
Käyttäjän tekemät asiat pitäisi olla selvästi näkyvillä, jotta myös vahingossa tehdyt asiat
tulisivat huomatuksi ennen pahoja virheitä.

2. Yhteensopivuus systeemin ja todellisen maailman välillä: Sovelluksessa ei tulisi käyttää
käyttäjän kannalta vierasta tai outoa sanastoa, esimerkiksi liian teknistä kieltä.
Sovelluksessa pitäisi käyttää luonnollista kieltä. Sisältö tulisi esittää loogisessa
järjestyksessä.

3. Hallitsevuuden ja vapauden tunne käyttäjällä: Käyttäjällä tulisi aina olla selkeä
mahdollisuus päästä pois erilaisista tilanteista ja palata äskeiseen tilaan. Selvästi merkityt
poistumistiet ovat tärkeitä tekijöitä sovelluksessa.

4. Jatkuvuus ja standardit: Sovelluksessa ei pidä esiintyä samaa asiaa sanottuna monella
eri tavalla, sillä se sekoittaa käyttäjää. Pitäisi noudattaa tiettyjä, ennalta määrättyjä
ohjeistuksia ja käyttää hyväksi tunnettujen sovellusten tapoja. Tämä helpottaa
ymmärtämistä nk. siirtovaikutuksen (jo opittu asia vaikuttaa uuden asian oppimiseen)
ansiosta.

5. Virheiden ehkäisy: Käyttäjää pitäisi kaikin tavoin ehkäistä tekemästä virheitä
mieluummin kuin käyttää monia virheilmoituksia. Käyttöliittymän loogisuus ja
käyttäjäkeskeisyys ehkäisevät virheiden tekemistä.

6. Muistikuormituksen minimoiminen: Ei pidä olettaa, että käyttäjä muistaisi kaikkea. On
tärkeää, että käyttöliittymän jokainen osa on looginen ja selkeät ohjeet on helposti
nähtävillä.

7. Käytön tehokkuus ja joustavuus: Käyttöliittymän tulisi tarjota tehokäyttäjille oikopolkuja
eri toimintoihin. Nuo oikopolut tulisi kuitenkin olla sellaisia, etteivät ne sekoita aloittelevaa
käyttäjää. Tällä tavalla käyttöliittymästä tulee monipuolisempi useammille käyttäjille.

8. Minimalistinen suunnittelu: Näytöt eivät saisi sisältää turhaa ja epäolennaista tietoa, sillä
kaikki ylimääräinen aines kilpailee huomiollaan oleellisen aineksen kanssa ja huonontaa
asia perille menoa.

9. Virheistä toipuminen: Mahdolliset virheet tulisi ilmoittaa selväkielisillä virheilmoituksilla,
ei missään nimessä koodeilla. Ilmoitusten pitäisi sisältää kuvaus ongelmasta sekä sen
korjausehdotus.

10. Ohjeet: Sovelluksen tulisi mieluusti olla käytettävissä ilman apua, mutta käytännössä
varsinkin suuremmissa kokonaisuuksissa tämä ei useinkaan ole mahdollista. Ohjeiden
tulisi olla käyttäjän helposti saatavilla ja selattavissa, sekä kohdistettavissa käyttäjän
ongelmaan. Ohjeiden ei pitäisi olla liian pitkiä, vaan selvittää pääaskeleet liittyen
ratkaisuun.

Nielsen kirjoittaa kolumneja verkon käytettävyydestä jatkuvasti osoitteessa:
http://www.useit.com/alertbox/

4. Erityisryhmille suunnattuja verkkonäyttelyjä

Erityisryhmille kohdennettuja verkkonäyttelyjä on tarjolla niukasti. Esteettömyysohjeita
eritasoisesti noudattavia verkkonäyttelyjä on tarjolla enemmän. Tavallisesti esteettömyys
on ratkaistu toteuttamalla tekstiversio www-sivustosta, eikä tekemällä sivuja esteettömästi.
Multimediaesitysten esteetön tekeminen on harvinaista. Silmiinpistävää on sekin, että
esteettömälle sivulle pääseminen tapahtuu usein esteellisten sivujen kautta.

Seuraavassa on verkkonäyttelyjä ja myös sivustoja, jotka selkeyttävät muuten
erityisryhmien tarpeita.

Hugo Simbergin verkkonäyttely näkövammaisille
Osoite: http://www.fng.fi/hugo

Verkkonäyttely esittelee Hugo Simbergin taidetta. Kohderyhmänä on näkövammaiset.
Näkövammaisten huomioiminen on toteutettu siten, että ruudunlukuohjelmisto pystyy
lukemaan sivut. Lisäksi teksteille on vaihtoehtoisena esittämistapana äänitiedostot.
Sivustosta on myös tekstiversio.

Huomioita toteutuksesta

- Äänitiedostojen käyttö ei olisi välttämätöntä, koska näkövammaisten käyttämä
ruudunlukuohjelmisto lukee kuitenkin tekstit. Äänitiedostot ovat kuitenkin elävämpää
kuunneltavaa kuin koneen tuottama synteettinen ääni.
- Esteettömyysohjeissa suositaan äänitiedoston kuvakkeen yhteyteen myös tekstilinkkiä.
- Sivukartta lisäisi sivuston käytettävyyttä.
- Vieraskirjasta ei löydy tietoa miten vieraskirjaan kirjoitetaan viesti.
- Sivuston sisältä ei pääse aloitussivulle, jossa on valittavissa sivuston kieli.
- Teosesittely-sivulla ensimmäinen linkki johtaa sivulle, joka ei ole suunnattu
näkövammaisille, koska sivulla ei ole mitään luettavaa ruudunlukuohjelmalle.
- Tekstiversion äänilinkit eivät toimi tekstipohjaisessa selaimessa, esim.
ruudunlukuohjelmistossa.
- Sivuston sommittelussa tärkeitä linkkejä on sijoitettu sivun loppuun kun tieto
tekstiversiosta ja vieraskirjasta olisi hyvä olla ennen astu näyttelyyn -linkkiä.
- Kuvien alt-tekstien yksinkertaistaminen lisäisi käytettävyyttä varsinkin linkkien
yhteydessä, esim. haavoittunut enkeli teoksen linkki: "Haavoittunut enkeli. Yksityiskohta
Haavoittunut enkeli" on monimutkainen.
- Sivustolla on käytetty eteenpäin-nimistä linkkiä, tällöin linkkien title-määreessä voidaan
kertoa tarkemmin linkin kohteesta, eteenpäin-nimen voisi korvata kuvaavammalla nimellä,
esim. "eteenpäin teoksen esittelyssä".

Viittoen opintielle - kuurojenopetuksen historia Suomessa
Osoite: http://www.kl-deaf.fi/portaali/tilap/multimediaindex.html

Viittoen opintielle on vuonna 1999 valmistunut multimediaohjelma, jossa voit tutustua
kuurojenopetuksen historiaan Suomessa 1800-luvulla. Sivusto on tehty ensisijaisesti
viittomakielisille. Tämä on edelleen harvinaista, vaikka viittomakieli on virallinen kieli.
Sivulle pääsyyn käytetään JavaScriptiä, mikä vaikeuttaa sivulle käyttöä, jos JavaScript on
estetty käyttäjän selainasetuksissa.

Ohjelma on toteutettu Macromedian Shockwave -versiona, jonka esteettömästä käytöstä
löytyy tietoa Macromedian sivulta.
Osoite: http://www.macromedia.com/macromedia/accessibility/features/director/

Kuurojen liiton digistrategia
Osoite: http://www.kl-deaf.fi/portaali/info/uutiset/digistr/

Digistrategia on tarkoitettu liitolle itselleen, mutta myös päättäjille, viranomaisille,
palvelujen tuottajille ja laitevalmistajille. Strategia sisältää taustatietojen lisäksi
digistrategian toiminta-ajatuksen, vision, avainalueet, tavoitteet ja toimenpiteet tavoitteiden
toteuttamiseksi, strategian kohderyhmän sekä strategian toimeenpanon.

Sivustolla on vaihtoehtoisina kielinä viittomakieli, selkokieli, suomenkieli ja ruotsinkieli.
Sivustolla on selkeät ohjeet mitä laite- ja ohjelmistovaatimuksia käyttäjältä vaaditaan.

Papunet - selkeää ja esteetöntä kommunikointia
Osoite: http://www.papunet.net

Sivustoa koordinoi Kehitysvammaliiton Tietotekniikka- ja kommunikaatiokeskus Tikoteekki.

Papunet on sivusto puhevammaisuudesta ja selkokielestä. Sivuston tavoitteena on selkeä
ja esteetön tiedonvälitys. Papunet-sivusto on tarkoitettu puhevammaisille ihmisille,
selkokielen käyttäjille, heidän lähi-ihmisilleen sekä ammattihenkilöstölle. Papunet välittää
tietoa kaikille näille ryhmille heidän omilla kommunikointikeinoillaan. Sivusto on myös
kanava tiedonvaihtoon sekä omien kirjoitusten ja taideteosten julkaisemiseen.

Papunet-sivusto jakautuu yleiskielisiin, selkokielisiin, blisskielisiin ja kuvilla toteutettuihin
sivuihin sekä Pähkinä-pelisivuihin. Osaan sisältöä voi valita äänituen tai tekstiversion.

Science Museum
Osoite: http://www.sciencemuseum.org.uk

Sivuston toteutuksessa on huomioitu esteettömyyttä, mutta toteutus sisältää
käytettävyysongelmia.
- Ei turhaa tekstiversiota, koska sivusto toimii ruudunlukuohjelmistolla.
- Tekstipohjaisella selaimella käytettäessä navigointivalikkojen sijoittelu on hankala, mutta
se on tehty mahdolliseksi ohittaa. Suositeltavampi ratkaisu olisi ollut sijoittaa
navigointivalikko tyylitiedoston avulla alalaitaan.
- Linkitettäessä sivuston ulkopuoliselle sivustolle linkin title-määrittelyssä olisi hyvä olla
maininta siirtymisestä pois sivustolta.
19
- Näyttelyissä videot aukeavat itsestään, suositus olisi, että käyttäjä voi itse käynnistää
videot.
- Osasta videoista on erillinen tekstikuvaus henkilöille, jotka eivät näe videoita.

British Museum's COMPASS
Osoite: http://www.thebritishmuseum.ac.uk/compass

COMPASS sisältää British Museumin kokoelmia verkossa.

Graafisella sivustolla ei ole huomioitu esteettömyysohjeita, mutta sivulta löytyy kuitenkin
tekstiversio. Esteettömälle sivulle ei pääse esteettömän sivun kautta.

Teknisiä ongelmia aiheuttavat:
- Tekstiversio ei ole sivun alussa rakenteessa, sommittelussa kylläkin. Käyttämällä
tyylitiedostoa esteettömyysohjeiden mukaisesti ongelma olisi ratkaistavissa.
- Taulukkotaittoon liittyvät kuvat, taulukkotaittoa ei suositella käytettäväksi, koska se
hankaloittaa ruudunlukuohjelmistojen käyttöä.
- Kuvien alt-määreet puuttuvat.
- Koska graafisen sivun kautta on hankala päästä tekstiversioon, niin tekstiversion osoite
olisi syytä olla selkeä, nyt se on kuitenkin vaikea:
http://www.thebritishmuseum.ac.uk/compass/ixbin/hixclient.exe?_IXDB_=compass&search
-form=graphical/edu/main.html&submit-button=search.

Tate Online
Osoite: http://www.tate.org.uk/learning/learnonline/imap.htm

Tate Onlinen i-Map-projektissa on tuotettu näkövammaisille multimediaesityksiä, joissa on
näppäinohjaus. Tarkoituksena on ollut, että esityksiin pääseminen ei edellytä hiiren
käyttöä. Käytännössä kaikki selaimet eivät tue käytettyä tekniikkaa, joten hiirtä tarvitaan
kuitenkin esityksen käynnistämiseksi, jos ei ole käytössä sopivaa selainta. Esitystekniikkaa
täysin esteettömästi tukevia selaimia ei ole mainittu sivulla. Ongelmia tulee myös siitä, että
teksti on oletuksena pientä heikkonäköisten luettavaksi.

Multimediaesityksiin on käytetty Flash-tekniikkaa. Flash-esitysten tekemiseen
esteettömästi on olemassa ohjeet ohjelman valmistajan Macromedian sivuilla.
Osoite: http://www.macromedia.com/macromedia/accessibility/features/flash/

Tools For Inclusion Symbol Rainforest Web-site
Osoite: http://www.widgit.com/rainforest/html/start.htm

Sademetsästä kertova näyttely on suunnattu Rebus-symbolikieltä käyttäville. Sivuja ei ole
toteutettu esteettömyysohjeiden mukaisesti, esim. joillain selaimilla ei edes pääse
näyttelyyn, koska sivusto edellyttää javascriptin käyttöä. Javascriptiä on käytetty sivulla
vain kuvien lataamiseen taustalla ja näyttämiseen ruudulla yhtäaikaisesti, joten sivun
esteellisyys on toteutunut turhaan. Esteettömyysohjeiden mukaisesti pitäisi olla myös
vaihtoehto javascriptin käytölle.
- Sivustosta on kaksi eri kokoista versiota, koska sivuilla käytetyt symbolit ovat kuvia.
Sivun kokoa ei tavallisesti määritellä, jotta käyttäjä voi itse vaikuttaa sivun kokoon.
- Sivustolla voi liikkua näppäinkomennoilla, mutta joihinkin osioihin pääsemiseksi pitää
painaa välilyönti-painiketta Tab-painikkeen sijasta, tämä on kuitenkin kerrottu ohjeissa.

Metropolitan Museum of Art
Osoite: http://www.metmuseum.org/toah/intro/atr/video.htm

Taidehistorian aikajana sisältää videoita, joissa on tekstitykset.

Videoissa käytetty tekniika on QuickTime, joka on esteellinen tekniikka, koska se ei ole
hallittavissa ilman hiirtä.

Dignubia: Exploring the Science of Archaeology
Osoite: http://www.dignubia.org/

Sivusto on suunnattu myös erityisryhmien tarpeisiin. Oletuksena latautuu multimediaversio
(Flash), mutta sivuston voi vaihtaa html-sivustoksi. Sivusto sisältää videoita, joissa on
myös äänellä kerrottuja sisällön kuvauksia sekä tekstikuvauksia videoista. Eri
multimediatekniikoissa on otettu huomioon esteettömyysohjeita.

Ote sivuston hyvin tehdystä esteettömyysselityksestä:

The Dignubia Web site offers a collection of QuickTime videos. These videos were
captioned and described by the Media Access Group at WGBH. In addition to captions
and descriptions, a text transcript is also available. The text transcript includes both
caption text and the text of the audio descriptions, thereby making it possible for people
who are deaf-blind to access the video content.

Dignubia is committed to ensuring that its site is accessible to all users. This Web site
contains a variety of interactive content. This page contains information to assist users in
accessing Dignubia content.

Images

All important images on this site are accompanied by a brief alt-text tag which identifies the
image or its function. If you are using a graphic browser, alt-text tags are visible only if the
browser's automatic image-loading feature is turned off.

Macromedia Flash content

The main interface and the navigation bar used throughout the site are made using
Macromedia Flash MX and are accessible to blind or visually-impaired users with JAWS
4.5 or Window-Eyes 4.2 (or newer). The Flash content is also keyboard-accessible. To
access the Flash content with a screen reader, the Flash 6 player is required.

Dignubia provides an alternative to the Flash navigation for users who prefer an non-Flash
interface. Users can choose to switch to the HTML version (or back to the multimedia
version) of the Flash site from the Dignubia home page.

Macromedia Director content

Dignubia offers a few features build using Macromedia Director. These features are not
accessible to blind users or keyboard-only users, but equivalent information in an alternate
form is available on the site.

Captioned and Described Movie Clips

Dignubia offers several video clips, all of which have closed captions for people who are
deaf or hard of hearing and audio descriptions for people who are blind or visually
impaired. Transcripts of the videos, including the text of the spoken audio and audio
descriptions, are also provided.

Scripting

Parts of the Dignubia site utilize JavaScript. In every instance, the scripting does not
require use of the mouse. Additionally, all content and functionality are available even if
scripting has been disabled in the browser.

Macromedia, Inc
Osoite: http://www.macromedia.com/macromedia/story/

Macromedian historia vuorovaikutteisena multimediaesityksenä, toteutettu Flashtekniikalla.
Esitys toimii näppäinkomennoilla ja videoihin saa tekstityksen.

5. Johtopäätökset

Esteettömien www-sivujen tekemiselle löytyy paljon hyviä ohjeistuksia ja suosituksia.
Verkkosivujen esteettömyyden puolesta on tehty tärkeitä poliittisia päätöksiä niin
kansainvälisellä kuin kansallisella tasolla. Ongelma vain on se, että kuinka ohjeet ja
suositukset saadaan käytäntöön, kuinka tietoa levitetään ja osaamista lisätään.
Esteettömyysajattelu on oltava sisäänrakennettuna varsinkin julkisen sektorin kaikissa
verkkoprojekteissa. Esteettömyyttä noudattavien tulisi myös ilmaista tämä selkeästi
sivuillaan. Tällä hetkellä esteettömyydestä puhutaan huomattavasti enemmän kuin sitä
toteutetaan käytännössä.

Esteettömyyden toteuttamiselle verkkosivustoilla ei ole esteenä, eikä hidasteena talous.
Esteettömyyden huomioiminen ei kasvata sivustojen tuotanto- ja ylläpitokustannuksia,
kyseessä on pikemminkin asenne ja halu tehdä laadukkaampia verkkosivuja.
Esteettömyys asettaa haasteen suunnittelulle, ei tekemiselle. Kustannuksiin toki vaikuttaa
vaihtoehtoisten sisältöjen esittämistavat. Käytettäessä esim. multimediaa monipuolisesti
se on vain huomioitava kustannussuunnitelmaa tehtäessä. Esitystekniikat eivät sinänsä
lisää kustannuksia, vaan ihmisten tekemä työ sisällöntuotannossa. Olennaista on
huomioida sisällöntuotannon alkuvaiheessa erilaisten käyttäjien tarpeet, jolloin sisällön
toimittaminen tapahtuu kustannustehokkaimmin.

Esteettömyyden toteuttamisessa kannattaa edetä pienin askelin. Aluksi otetaan huomioon
W3C/WAI-ohjeet, jolloin perusesteettömyys toteutuu jo teknisellä tasolla ja samalla tulee
tuettua apuvälineitä. Sisällön vaihtoehtoisia esittämistapoja toteutetaan sitten tarpeen ja
resurssien mukaan. Vuorovaikutteista multimediaa käytettäessä esteettömyys ei tuo
juurikaan lisäkustannuksia, jos toteutus tapahtuu alusta asti esteettömyysohjeiden
mukaan. Teknisissä valinnoissa on huomioitava ne tekniikat, jotka tukevat esteettömyyden
toteuttamista.

Taloudellisinta on tehdä uudet sivut alusta asti esteettömyysohjeita noudattaen. Vanhoja
sivuja kannattaa korjata sen verran, että ne edes toimisivat ruudunlukuohjelmistoilla.

Vaihtoehtoisia esittämistapoja käytetään vielä vähän, mutta vuorovaikutteinen multimedia
lisääntyy koko ajan verkossa. Tässäkin on kyse valinnoista. Halutaanko palvella
mahdollisimman monia käyttäjiä vai halutaanko vain koristella sivustoja näyttävillä
multimediakikoilla. Jos on varaa vuorovaikutteiseen multimediaan, niin sitten on
todennäköisesti varaa ottaa huomioon myös erityisryhmien tarpeet.

Lähteet ja linkit

Euroopan Unioni
- e-Inclusion & e-Accessibility
http://europa.eu.int/information_society/topics/citizens/accessibility/

World Wide Web Consortium (W3C)
- Web Accessibility Initiative (WAI)
http://www.w3.org/WAI/

Juhta, julkisen hallinnon tietohallinnon neuvottelukunta
- suosituksia verkkopalvelujen toteuttamiseen
http://www.intermin.fi/juhta

Valtiovarainministeriön hallinnon kehittämisosasto
- julkisten verkkopalvelujen laatusuositukset
http://www.laatuaverkkoon.fi/

Tietoyhteiskunnan kehittämiskeskus, Tieke ry
- Esteettömyysopas
http://www.tieke.fi/esteettomyysopas/
- Esteettömyysesite
http://www.tieke.fi/est

Stakes
- Design for All -verkosto Suomessa
http://www.stakes.fi/dfa-suomi/

Näkövammaisten keskusliitto
- näkövammaistahojen testausohjeet verkkosivuille ja -palveluille
http://www.nkl.fi/suositukset/testaus/

Kehitysvammaliiton Tietotekniikka- ja kommunikaatiokeskus Tikoteekki
- PAPUNET - selkeää ja esteetöntä kommunikointia
http://www.papunet.fi

Kuurojen liitto
- digistrategia
http://www.kl-deaf.fi/portaali/info/uutiset/digistr/

Valtion taidemuseo
- Kulttuuria kaikille -neuvonta
http://www.kulttuuriakaikille.fi/

USA:n esteettömyyslainsäädäntö
- Jim Thatcher: Web Accessibility for Section 508. Laaja kooste, joka tarkastelee asioita
ensisijaisesti Yhdysvaltain lainsäädännön asettamien esteettömyysvaatimusten kannalta.
Nämä vaatimukset, "508", on kirjoitettu hyvin samassa hengessä kuin W3C:n suositukset,
mutta 508-vaatimusten ja WAI-suositusten välillä on painotus- ja muitakin eroja.
http://jimthatcher.com/