Johdanto | Rakenne | Sisällysluettelo
Suomalaiset näkövammaisorganisaatiot Näkövammaisten koulutus- ja kehittämiskeskus Arlainstituutti, Celia Näkövammaisten kirjasto ja Näkövammaisten Keskusliitto ovat yhteistyössä tuottaneet nämä verkkosivujen testausohjeet. Ohjeiden tarkoituksena on auttaa verkkosivujen ja -palveluiden tekijöitä ja tuottajia saavutettavien ja esteettömien verkkoympäristöjen luomisessa ja testaamisessa.
Testausohjeen zippiversio.
Zipin käyttämiseen tarvitset zipohjelman
Näkövammaisiksi rekisteröityjä henkilöitä on Suomessa noin 80 000. Väestön vanhenemisen myötä näkövammaisten kansalaisten määrä kasvaa dramaattisesti. Näkövammaiset on yksi ryhmä, joka voi selvästi hyötyä verkkopalveluiden lisääntymisestä. Verkkopalveluiden lisääntyvä käyttö edellyttää kuitenkin jatkossa suuremman huomion kiinnittämistä yleiseen käytettävyyteen, esteettömyyteen ja saavutettavuuteen.
Hyvä websuunnittelu lähtee siitä, että sivu voidaan kerralla suunnitella kaikille sopivaksi. Kun otamme huomioon erilaisia käyttäjäryhmiä erilaisine tarpeineen, emme estä minkään ryhmän pääsyä verkkolähteisiin, vaan edistämme internetin käytettävyyttä kaikkien kannalta.
Näkövammaiset tarvitsevat monesti apuvälineitä tietoverkkoja käyttäessään. Heikkonäköiset voivat hyödyntää ohjelmaa, joka suurentaa näytöllä olevan informaation riittävän suureksi. Sokeat henkilöt taas voivat lukea sormenpäillä pistekirjoitusnäytöltä ruudulla olevan informaation. He voivat käyttää myös ruudunlukuohjelmaa ja puhesyntetisaattoria. Ruudunlukuohjelma lukee näytön teksti-informaation ja puhesyntetisaattori muuntaa sen ääneksi, joka kuunnellaan kaiuttimista tai korvakuulokkeista. Pidempi selostus ja kuva näkövammaisten käyttämistä apuvälineistä.
Lisätietoa esteettömyydestä ja saavutettavuudesta:
W3C | WAI-ohjeet suomeksi | Design for All -Suomi
Luvussa "Ohjeiden sisällysluettelo" kaikki testausohjeet on ryhmitelty alaotsikoiden alle. Alaotsikoita ovat muun muassa "Yleissilmäys" ja "Linkit". Testausohjeet on muotoiltu kysymyksiksi kuten "Onko sivun title-elementti kuvaava?". Ohjeisiin liittyvät kysymykset on listattu numerojärjestyksessä 1 - 21. Listatut kysymykset ovat samalla sisällysluettelo, josta pääsee kysymykseen liittyvään selitystekstiin ja mahdollisiin esimerkkeihin.
1. Onko sivun title-elementti kuvaava?
2. Onko sivun rakenne selkeä, looginen ja tarpeeksi väljä?
3. Toimiiko sivu näppäimistöltä?
4. Voiko käyttäjä muuttaa sivun värit, kirjasinkoon ja -tyypin?
5. Onko sivun alussa siirtymälinkki sivun sisältöön?
6. Onko linkeillä niiden sisältöä kuvaavat nimet?
7. Ovatko linkit selkeinä linkkilistoina?
8. Onko samalla rivillä olevat linkit erotettu jollakin erotinmerkillä?
10. Jos sivulla on käytetty palstoitusta, onko tarjolla palstoittamaton vaihtoehto?
11. Onko sivun pääotsikko tasolla H1 ja muut tekstit otsikoitu alemmilla otsikkotasoilla?
12. Onko kappalejako ilmaistu "<p>...</p>" -merkinnällä?
13. Onko sivuilla käytössä PDF-tiedostoja ja onko niille HTML-vastineet?
14. Onko kaikille informaatiota sisältäville kuville kirjoitettu alt-määrite?
15. Jos kuvaan liittyy paljon asiasisältöä, onko informaatio saatavilla tekstimuodossa?
16. Onko täyte- ja koristekuville kirjoitettu tyhjä alt-teksti? (alt="")
19. Onko dynaamiset sivut toteutettu selainriippumattomasti?
20. Onko selaimessa suoritettavia koodeja vältetty?
21. Ovatko kentät alekkain ja onko kenttään liittyvä ohjeteksti sen edessä?
Näkövammaisten käyttämät ruudunlukuohjelmat lukevat sivun title-elementin heti sivulle tultaessa. Title-elementin tekstin tulisi olla sivukohtainen ja kuvattava aina sivun aihepiiriä.
Koodiesimerkki:
<title>webbi Sepon palvelutuotteet</title>
Title-elementti voi olla eri kuin sivun otsikko (H1). Title-elementin teksti tulee esille muun muassa suosikkilistalla, selainikkunan nimessä sekä hakukoneiden tuloslistoissa, joten se kannattaa kirjoittaa niidenkin vuoksi sivua hyvin kuvaavaksi.
Ensimmäisen kerran www-sivulle tullessaan henkilö - sekä näkövammainen että näkevä - pyrkii nopeasti kartoittamaan mitä sivulla on ja löytyykö sieltä etsittävä informaatio.
Näkövammainen joutuu selvittämään sivun sisällön apuvälineen tai heikon näkökyvyn turvin. Mikäli sivulla on valtaisa määrä linkkejä, useita kehyksiä ja paljon tiivistä tekstiä, on tarvittavan tiedon hakeminen työlästä.
Sivu tulisi toteuttaa siten, että tärkein tieto löytyy heti sivun alusta. Linkkien määrän olisi oltava kohtuullinen (enintään 10 - 15 kappaletta) ja niiden sijoittelu tulisi harkita tarkkaan.
Linkkilistat ja leipäteksti tulisi olla sivulla niin väljästi, että heikkonäköinen käyttäjä pystyy havaitsemaan hiiren eri elementtien välistä. Voit tehdä testin: Vie hiiriosoitin sivun laitaan ja kappaleiden väliin. Jääkö osoittimen ympärille niin paljon tyhjää tilaa että se selvästi erottuu sivulla olevista kuvista tai tekstimassasta?
Jos sivu sisältää hakukentän, se olisi hyvä sijoittaa sivun alkuun mutta ei aivan ensimmäiseksi. Jos täytettävä hakusanakenttä on aivan ylhäällä vasemmalla, näkövammaisen ruudunlukuohjelma lukee tällaiselle sivulle tultaessa vain esimerkiksi "muokkaa".
Näkövammaiset internetin käyttäjät eivät käytä hiirtä siinä määrin, kuin näkevät. Tämän vuoksi kaikkiin kohdistuksen mahdollistaviin komponentteihin tulisi päästä näppäimistöä käyttäen. Myös kaikki sivulla olevat toiminnot pitäisi pystyä tekemään näppäinkomennoilla.
Näppäinkomentojen toimivuuden voit kokeilla liikkumalla linkistä tai muusta toiminnosta toiseen sarkain-näppäimellä.
Lähtökohtana on hyvä pitää sitä, että käyttäjä voi itse muuttaa sivun värit ja kirjasimen itselleen sopivaksi esimerkiksi vaihtamalla selaimen asetuksia. On hyvin tavallista, että heikkonäköinen vaihtaa taustan väriksi mustan ja tekstin väriksi keltaisen.
Yllensä sivun taustaväriksi kannattaa valita neutraali väri, joka muodostaa selkeän kontrastin tekstin värin kanssa. Taustakuvaksi on hyvä valita värimaailmaltaan ja kuvioinniltaan maltillinen vaihtoehto.
Koska osa näkövammaisista kuuntelee tai lukee pisteillä sivun informaation, väreillä tai esimerkiksi lihavoinnilla korostettu asiasisältö ei välity. Painotuksen tulisi ilmetä myös itse tekstisisällöstä.
Värisokeiden henkilöiden vuoksi kannattaa välttää punaista ja vihreää lähekkäin käytettynä. Puna-vihreiden sävyjen tulee muodostaa riittävä kontrasti keskenään.
Linkkien väri kannattaa jättää mieluiten määrittelemättä tai ainakin ne pitäisi määritellä lähelle tyypillisiä oletusarvoja.
Tyylitiedoston käyttö sivun ulkoasun muotoilussa olisi erityisen suositeltavaa, koska siinä annetut määritykset voi käyttäjä itse ohittaa haluamallaan tavalla. Jotta ohittaminen olisi mahdollista, on myös varmistettava, että sivu on luettavissa ilman tyylitiedostoa.
Siirtymälinkki antaa käyttäjälle oikotien itse sivun sisältöön ohi navigointilinkkien. Siirtymälinkin voi toteuttaa esim. käyttämällä ruudulla näkymätöntä kuvalinkkiä, kuten tämän dokumentin alussa on tehty. Kun käytetyn linkin koko on vain yksi kuvapiste, se ei näy ruudulla, mutta ruudunlukuohjelmat tunnistavat linkin ja mahdollistavat sen hyödyntämisen.
Koodiesimerkki:
<a href="#sisaltoon"><IMG src="nakymatonkuva.gif" alt="Suoraan
sisältöön" heigh="1" width="1"></a>... tähän tulee navigointi...<a
name="sisaltoon"> ...tähän tulee sivun sisältö tms.
Jokaisen linkin nimen tulisi olla selkeä ja eri niminen kuin muut sivun linkit. Linkin nimen pitää kertoa riittävän tarkasti sisällöstä, johon linkillä viitataan. Kun sivun linkeistä otetaan linkkilista, tulisi käyttäjän tietää linkin nimen perusteella, mihin linkki johtaa.
Esimerkiksi uutissivustoissa käytetään liian usein linkkien nimissä toistuvaa nimeä, kuten "Lue lisää". Tämä ei ole selkeä eikä muista linkeistä erotteleva nimi. Linkkiin tulisi lisätä aihe lyhyesti esimerkiksi "Lue lisää testauksesta".
Jos sivulla on paljon linkkejä, on niistä hyvä tehdä linkkilista. Linkkilistojen toteutukseen kannattaa käyttää ul -tyyppisiä listoja.
Jos listoista tulee kovin pitkiä (useita kymmeniä linkkejä), kannattaa linkit ryhmitellä jonkin kriteerin (aihepiiri tms.) mukaan. Ryhmät tulee otsikoida kuvaavilla väliotsikoilla.
Kannattaa myös harkita kappaleiden sisällä olevien linkkien kokoamista sivun loppuun sijoitettavaksi linkkilistaksi.
Sivun navigointipalkkiin sijoitetaan usein monta linkkiä samalle riville vierekkäin. Tällaisissa tilanteissa linkit täytyy erottaa toisistaan jollakin erotinmerkillä. Linkkien erottaminen tekee rakenteesta helpomman käyttää niin puhesynteesin kuin pistenäytönkin avulla.
Yksi hyvä erotinmerkki on pystyviiva (|), jonka pistenäyttö näyttää pystysuuntaisena viivana ja joka kuulostaa selkeältä myös puhesyntetisaattorilla kuultuna.
Vierekkäisiä linkkejä ei kuitenkaan saisi olla kovin monta. Jos linkkejä on useita, ne kannattaa jakaa vaikkapa kahdelle riville. Tällöin voi myös tarjota niin kutsuttua siirtymälinkkiä, jolla useamman linkin listauksen voi ohittaa. Sivun alussa olevat pitkät linkkilistat ovat erityisen raskaita, kun sivun sisältöä pyrkii selvittämään kaiken vasemmalta oikealle lukevan puhesyntetisaattorin avulla.
Kehysten käyttöön liittyy näkövammaisten kannalta ongelmia mutta huomioimalla muutamia seikkoja niiden käyttö helpottuu.
Kehysten lukumäärän rajoittaminenYhdelle sivulle tulisi sijoittaa korkeintaan kolme kehystä. Kehysten määrän kasvaessa informaation etsiminen sivulta vaikeutuu huomattavasti.
Ei sisäkkäisiä kehyksiäKehyksiä ei saisi olla sisäkkäin. Esimerkiksi sivun keskellä olevan kehyksen sisälle sijoitettu uusi kehys jää melko varmasti näkövammaisen apuvälineeltä huomaamatta.
Kuvaava nimeäminenKehykset tulisi nimetä sisältöä kuvaavasti käyttämällä name-määritettä. Esimerkiksi on informatiivisempaa nimetä sivuston navigointiin tarkoitettu kehys navigointikehykseksi kuin nimetä se ylaframeksi.
Käyttämällä kehysten nimeämiseen name-määritettä myös tekstipohjaiset selaimet saadaan näyttämään kehykseen kuuluvan HTML-tiedoston nimen sijasta kehykseen liittyvä kuvaus.
Koodiesimerkki:
<frame src="navi.html" name="Navigointikehys">
Kirjoita myös kehyksetön vaihtoehto (noframes), jossa on sivun otsikko, sivulla oleva teksti sekä koottuna sivun linkit.
Sivu halutaan usein palstoittaa ulkonäkösyistä kahteen tai useampaan palstaan. Esimerkiksi usein palstoitusta hyödynnetään siten, että vasempaan palstaan sijoitetaan navigointilinkkejä ja oikean puoleiseen tekstiä.
Jos palstoitusta halutaan käyttää, on sivun toteutuksessa oltava erityisen huolellinen esteettömyyden varmistamiseksi. Palstat, kuten mahdollisimman moni muukin sivun ulkonäköön liittyvä asia, olisi parasta toteuttaa tyylitiedoston tarjoamin keinoin.
Taulukoiden käyttö palstoitukseen ei ole suositeltavaa, koska useat ruudunlukuohjelmat ryhtyvät lukemaan sivun rivi riviltä vasemmalta oikealle taulukon rajoista välittämättä. Taulukoita kannattaa käyttää vain taulukoidun tiedon esittämiseen, kuten esimerkiksi aikatauluihin.
Taulukoidun tiedon kuuntelua helpottaa rivien ja sarakkeiden otsikointi sekä yksikkötiedon merkitseminen kuhunkin soluun. Jos taulukko on laaja ja monimutkainen, taulukon sisältämästä tiedosta kannattaa kirjoittaa tiivistelmä.
H1-tason otsikko tarkoittaa pääotsikkoa, joten merkinnällä H1 alkavia otsikoita saisi olla vain yksi kullakin sivulla. Muut sivun otsikot tulisi merkitä tasoilla H2, H3 jne.
Näin sivun rakennetta voidaan otsikointia hyväksi käyttäen selventää ja parantaa sivun käytettävyyttä. Tekstin sisältöä napakasti kuvaava otsikointi ja hyvä yleiskieli selkeyttävät sivun sisällön hahmottamista ja parantavat sivun käytettävyyttä kaikkien kannalta.
W3-konsortion määrittelyjen mukaan tekstikappaleet tulee erottaa toisistaan HTML-koodissa "<p>" -merkinnällä (p-tagilla). Usein tähän tarkoitukseen käytetään virheellisesti br-tagia. br-tagin käyttö aiheuttaa ongelmia esimerkiksi ruudunlukuohjelmalle. Jotkut ohjelmaversiot lukevat jokaisen tyhjällä rivillä olevan br:n kohdalla "tyhjä".
Julkaisutuotannossa suuren suosion saavuttanut PDF (PDF - Portable document format ) on näkövammaisille edelleen suurelta osin saavuttamattomissa. Syynä tähän on julkaisujen sisältämät kuvat ja tiukkaan määritelty ulkoasu.
Kaikissa internet-julkaisuissa tulisi käyttää vain standardin mukaista HTML-kieltä. Näin julkaisun sisällön voi lukea selaimesta riippumatta.
Jos PDF-julkaisuja halutaan sijoittaa sivuille, olisi niille tarjottava vaihtoehtoinen esitystapa. Suositeltavinta olisi käyttää ensisijaisena muotona HTML:ää ja muotoilla sivut käyttäen tyylitiedostoja. Tällöin informaation saa selville selaimesta ja käyttöjärjestelmästä riippumatta.
Sokeiden ja kuurosokeiden henkilöiden käyttämät apuvälineet välittävät vain tekstinä olevan informaation käyttäjälleen. Tästä syystä kaikista kuvista, graafisista painikkeista ja kuvakkeista tulee olla tarjolla vastaava informaatio tekstinä.
Heikkonäköiset henkilöt pystyvät hyödyntämään visuaalista informaatiota esimerkiksi ruudunsuurennusohjelman avulla, mikäli värisävyt ja kontrastit ovat selkeitä.
Yksinkertaisin tapa esittää kuvainformaatio tekstinä on kirjoittaa kuvalle vaihtoehtoinen alt-määrite (vaihtoehtoinen esitystapa: teksti). Alt-määrite kannattaa kirjoittaa huolellisesti, sillä siitä sivua selaava sokea tai heikkonäköinen henkilö saa selville kuvan merkityksen sivulla. Alt-määritteellä on merkitystä myös mobiililaitteilla ja tekstipohjaisilla selaimilla internetiä käyttäville henkilöille.
Tyylisyistä johtuen teksti kuten vaikkapa otsikko halutaan joskus esittää kuvana. Tämä on ongelmallinen tilanne näkövammaisten apuvälineille, jotka pystyvät lukemaan sivuilta vain tekstinä olevan informaation. Ongelmaa voidaan vähentää kirjoittamalla kuvana esitetylle tekstille sen sisältöä kuvaava alt-määrite.
Tämä ei kuitenkaan poista ongelmaa, joka syntyy siitä ettei tällaista tekstiä pysty suurentamaan tai pienentämään käyttäjän tarpeiden mukaan selaimen asetuksista. Kaikkien käyttäjien kannalta paras keino olisi käyttää tyylitiedostoa tekstin määrittelyyn.
Valokuvaesimerkki:
Valokuva koirasta on seuraavan esimerkkitekstin kuvitusta ja sisältää vähän informaatiota. Sillä on kuitenkin sivun asian kannalta oma kuvittava merkityksensä ja siksi sen
sisällöstä on kirjoitettava asiayhteyden ilmaiseva alt-teksti.
"Opaskoiran koulutus jakautuu kaupunki-, maaseutu- ja hallittavuuskoulutukseen. Nykyaikainen yhdyskuntasuunnittelu ja lisääntynyt liikenne asettavat yhä suurempia vaatimuksia opaskoirankäytölle. Kiintopisteet, kuten kadunreunat, puuttuvat hyvin usein ja silloin koirankäyttäjän on vaikea paikallistaa, mistä suojatie alkaa. Koirat on koulutettava entistä enemmän mittatilaustyönä niiden käyttöympäristön mukaan."
Esimerkki toiminnallisesta kuvasta:
Oleellista toiminnallisissa painikkeissa ja kuvakkeissa on se, että alt-tekstistä täytyy ilmetä kuvan toiminta. Esimerkin kuvake on Granum-verkkokirjakaupan kuvake. Klikkaamalla kuvaketta valittu julkaisu siirtyy asiakkaan virtuaaliseen ostoskoriin. Kuvake näyttää ostoskassilta jota kohti nuoli osoittaa. Sen alt-tekstinä "gassiin" on kohtuullisen informatiivinen. Vielä selkeämpi alt-teksti henkilölle, joka ei näe näytöllä olevaa kuvaa tai tekstiä, voisi olla esimerkiksi "klikkaa kirja kassiin".
Esimerkki logo-kuvasta:
Organisaatioiden logojen ilmaiseminen alt-tekstinä on erittäin tärkeää. Sivulle tulevan on nopeasti tiedettävä millä sivulla hän on. Logon alt-tekstiin kannattaakin kirjoittaa organisaation nimi. Jos kuva on myös toiminnallinen painike esimerkiksi organisaation etusivulle, on tämä hyvä tuoda ilmi alt-tekstissä. Mikäli kuva halutaan esitellä tarkemmin vaikkapa graafisilta ominaisuuksiltaan voi sen tehdä kirjoittamalla kuvauksen erilliselle HTML-sivulle tekstilinkin päähän.
Jotkut kuvat, kuten esimerkiksi taulukot, diagrammit ja taidekuvat, sisältävät niin paljon informaatiota, että sisällön esittäminen järkevästi edellyttää kahdenlaista kuvaustapaa. Ensinnäkin alt-määritettä käyttäen kuvalle on hyvä kirjoittaa ytimekäs ja kuvan sisällön asiayhteydessä ilmaiseva teksti. Toiseksi tarvitaan monasti pidempi selostus kuvan sisältämästä informaatiosta. Selostuksesta on hyvä tehdä tekstiversio erilliselle HTML-sivulle esimerkiksi kuvaavaa tekstilinkkiä käyttäen.
Esimerkki kaaviosta
Jos kuvan ainoa merkitys on olla sivulla koristeena, kannattaa harkita mitä alt-tekstiksi kirjoittaa. Monesti riittää tyhjä alt-teksti: alt="".
Näin merkityt kuvat ruudunlukuohjelmat osaavat ohittaa niitä lainkaan noteeraamatta. Täytekuvia tulisi välttää ja käyttää sen sijaan tyylitiedostoa sivulla olevan informaation asetteluun. Mikäli täytekuvia halutaan käyttää, on alt-tekstiksi aina lisättävä jotakin, koska sen puuttuessa ruudunlukuohjelma pyrkii lukemaan jotakin ääneen esimerkiksi kuvan tiedostonimestä. Ei ole kovin hyödyllistä kuulla nimeä "kuva1.gif".
Sivuista, joilla on multimediaesityksiä on mahdollista luoda myös näkövammaisille käyttökelpoisia.
Sokeiden ja vaikeasti heikkonäköisten kannalta automaattisesti käynnistyvä ääni ja liike saattavat tuottaa suuria ongelmia. Näkövammaisen käyttämä ruudunlukuohjelma voi mennä sekaisin ja heikon näön varassa sivua selaavan henkilön saattaa olla vaikea hahmottaa mitä eri kohdissa sivua tapahtuu.
Jos sivulle on upotettu esimerkiksi äänimaailma ja siellä on myös tekstilinkkejä, ruudunlukuohjelma saattaa kyllä antaa kuunnella äänen. Muun informaation olemassaoloa tai sitä, miten sivulta pääsee pois ruudunlukuohjelmalla ei kenties enää pystykään selvittämään.
Vastaavasti itsekseen vierivä ja vilkkuva teksti sekä animoidut kuvat saavat ruudunlukuohjelman sekaisin. Esimerkiksi vierivä teksti kaappaa puhesyntetisaattorin huomion kokonaan itselleen saaden apuvälineen änkyttämään. Joillakin tekniikoilla, kuten Javalla ja Flash-esityksenä tehdyille rullaaville teksteille, voi tehdä staattisen vaihtoehdon.
Flash-toteutuksiin liittyy erityinen ongelma: ne ottavat näppäimistön kontrollin itselleen. Tästä seuraa, että esimerkiksi normaali sarkainnäppäimellä liikkuminen ei onnistu esityksen käynnistyttyä. Tämä on monille vakava ongelma. Siksi Flash-esitys kannattaa sijoittaa omalle sivulle, joihin vain viitataan linkillä varsinaiselta www-sivulta. Ennen esitystä on hyvä olla huomautus siitä, mitä sivulla on.
Käyttäjän tulisikin ainakin itse voida päättää haluaako hän katsoa animaatiota vai ei. Jos animoitu kuva sisältää sivun kannalta oleellista informaatiota, on hyvä kirjoittaa sille alt-teksti tai tarpeen mukaan vaikka pidempi selostus. Mikäli animaatio on koristeena alt-tekstiksi riittää alt=" ".
Lähtökohtana näkövammaisille sopivien multimediasivujen tuottamisessa voisikin olla se, että liikkuvana kuvana, videona, sovelmina ja muilla erityistekniikoilla tehdyn materiaalin saisi käyttöönsä valitsemalla kyseisen esitysmuodon linkistä.
Multimediaesityksen lisäksi, esimerkiksi valikossa tai listassa, voisi olla valittavana sisällöstä myös vaihtoehtoinen tekstiversio. Linkin nimestä on ilmettävä materiaalin sisältö ja missä muodossa informaatio esitetään. Multimedialle vaihtoehtoisen tekstiversion linkin nimessä tai esityksen alussa on ilmaistava selkeästi myös miltä osin versio vastaa itse multimediaesitystä.
Aina ei ole tietysti mahdollista tehdä alkuperäistä esitystä vastaavaa tekstiversiota. Tällaisissa tapauksissa olisi kuitenkin pyrittävä mahdollistamaan se, että multimediaesitys ei käynnistyisi automaattisesti sekä tarjoamaan edes alt-tekstinä lyhyt kuvaus esityksestä.
Tekstiversioiden tarjoaminen auttaa myös sellaisia käyttäjiä, joilla on hitaat, kalliit tai PDA-laitteisto. Tekstiversio palvelee myös sellaisia henkilöitä, joilla ei jostakin syystä sillä hetkellä ole välineitä esityksen käyttämiseen, mutta voivat palata sivulle myöhemmin.
Dynaamisilla sivuilla tarkoitetaan yleensä sivuja, joiden sisällöstä osa tuotetaan ohjelmallisesti joko palvelimessa tai asiakkaan selaimessa. Käyttäjä voi päätellä sivujen olevan dynaamisia, jos ne sisältävät muuttuvaa aineistoa kuten uutisia, tiedotteita, keskustelua, tietoja säästä, urheilutuloksia tai tilitietoja.
Näkövammaisen kannalta dynaamisten sivujen toteutustapa on tärkeä. Koska näkövammaiset - ja muutkin sivujen selaajat - käyttävät erilaisia selaimia, tulee sivut toteuttaa mahdollisimman monissa selaimissa toimivalla tekniikalla. Tekstipohjaisiakaan selaimia ei tule unohtaa toteutusta suunniteltaessa.
Toimivin tapa toteuttaa dynaamiset sivut on tuottaa selaimelle valmista HTML-koodia jo palvelimessa. Silloin sivujen käytettävyys ei riipu käyttäjän selaimen ominaisuuksista (tuesta eri skriptikielille, javalle jne.), vaan jopa HTML-koodia oikein näyttävä tekstipohjainenkin selain kelpaa sivujen katsomiseen.
Selaimessa suoritettavaa koodia tulisi välttää; Java-, Javascript-, Visual Basic- ja muut selaimessa suoritettavat ohjelmat tekevät sivuista usein käyttökelvottomat tekstipohjaisia selaimia käyttäville. Graafistakin selainta käyttävä näkövammainen voi joutua hankaliin tilanteisiin: esimerkiksi varoituksetta aukeavat uudet selainikkunat ja alasvetovalikot jne. voivat sotkea ruudunlukuohjelman niin, ettei sivua voi selata tai osaa linkeistä käyttää.
Esimerkkinä ongelmista voi mainita lomakkeet, joiden submit-painike on toteutettu Javalla / Javascriptillä. Tekstipohjainen selain lynx ei esimerkiksi pysty lähettämään tällaista lomaketta eteenpäin. Javascriptin käyttö linkin URLeissa voi myös aiheuttaa ongelmia.
Yksinkertainen ja toimiva ratkaisu dynaamisten sivujen toteuttamiseen on tuottaa selaimelle valmista HTML-koodia palvelimessa käyttäen CGI-tekniikkaa, javaa, php:tä tai muuta palvelimessa toimivaa ratkaisua.
Lomakkeiden toteuttamisessa kannattaa käyttää mahdollisimman paljon HTML-koodia ja hyödyntää tyylitiedostoja (Cascading Style Sheets, CSS). Java Scriptin, Visual Basicin jne. käyttö ei ole suositeltavaa. Jos niiden käyttö on jostain syystä välttämätöntä, on huolehdittava siitä, että sivun sisältö on kuitenkin luettavissa kaikilla selaimilla.
Heikkonäköisen ja ruudunlukuohjelmaa käyttävän henkilön kannalta on erittäin tärkeää, että lomakkeen kentät pyritään sijoittamaan alekkain ja niihin liittyvät ohjetekstit sijoitetaan mahdollisuuksien mukaan kentän eteen samalle riville. Muuten ruudunlukuohjelman voi olla mahdotonta selvittää mikä teksti mihinkin kenttään liittyy.
Mikäli lomakkeeseen tuleva kenttä on leveä, eikä ohjeteksti mahdu samalle riville, olisi se syytä sijoittaa heti edelliselle riville ennen täyttökenttää. Mitä selkeämpi ohjeteksti on ja mitä lähempänä itse kenttää, sen varmemmin näkövammainen pystyy ruudunlukuohjelmansa avulla selvittämään mistä kulloinkin on kysymys.
Radio-painikkeiden kohdalla painikkeeseen liittyvä teksti voi olla myös painikkeen perässä samalla rivillä. Tärkeää olisi kuitenkin ilmaista selkeästi onko kyseessä radio-painike vai ns. checkbox-tyyppinen valinta. Kehotukset "valitse vain yksi" tai "valitse yksi tai useampi" ovat selkeitä tapoja ilmaista asia.
Tämän ohjeiston ovat laatineet: Reijo Juntunen, Virpi Jylhä, Petri Laatunen ja Maria Söderholm
Kaikki kommentit testausohjeisiin liittyen toivotaan lähetettävän osoitteeseen ilpo.soini@arlainst.fi
