Kokko-Kokki Oy 1989-2009

Testausohjeet verkkosivun tekijälle

Lue myös

Nämä ohjeet eivät ole täydelliset, vaan pikemminkin helppo ja nopea tarkastuslista, jonka avulla saat sivustosi kaikkien luettavaksi.

Tarkempaa tietoa löydät mm. osoitteista

Näkövammaisten Keskusliitto ry Tiedonsaannin esteettömyys
Jukka Korpelan kotisivuilta Web-julkaisemisen opas.
W3

Yleistä

Hyvä suunnittelu helpottaa sivujen tekemistä. Lisäksi se auttaa sivujen yhtenäisyyden ja tyylikkään/siistin ulkoasun saavuttamisessa. Muutosten tekeminen jälkikäteen on usein huomattavasti työläämpää. Kun maltat nähdä vähän vaivaa, tiedät sivustojen olevan varmasti saavutettavia kaikille käyttäjille. Responsiivininen sivu, helppo tapa tehdä tyylikästä esteettömyyttä

Näkövammaisten käyttämät apuvälineet

Näkövammaiset käyttävät tietokoneiden kanssa useita erilaisia apuvälineitä. Heikkonäköiset hyödyntävät erilaisia suurennusohjelmia. Lisäksi esimerkiksi sivustojen asetuksia säätämällä heikkonäköinen voi tehdä sivuston itselleen käytettävämmäksi. Sokeat käyttävät ruudunlukuohjelmaa ja puhesyntetisaattoria tai pistenäyttöä, jolloin tieto saadaan luettua rivi kerrallaan tekstimuodossa.

Testauksen tavoitteena on selvittää, onko sivuston suunnittelussa tai toteutuksessa seikkoja, jotka haittaavat tai estävät näkövammaisia käyttämästä sivustoa.

Yleiskuva

Sivun tittle-elementti

Näkövammaisten käyttämä ruudunlukuohjelma lukee ensimmäisenä sivun Tittle-otsikon, joten sen tulisi olla jokaisella sivulla yksilöllinen. Title-otsikko voi olla täysin eri kuin varsinainen sivun otsikko, sillä sen antama kuvaus on hyödyllinen myös muualla, kuten hakukoneissa.

Esimerkki:

< Tittle>Tervetuloa Kokko-Kokki Oy:n sivuille

< h1>Kokko-Kokki Oy

Miten sivun yleinen rakenne on suunniteltu?

Ensi kertaa sivulle tultaessa sivun ulkoasu antaa kävijälle mielikuvan sivuista. Myös käytettävyys vaikuttaa siihen, käytetäänkö sivuja toistekin. Tämän vuoksi onkin hyvä kiinnittää huomiota Navigointiin eli en asetteluun. Linkkejä ei ole syytä asetella liian ahtaasti, eikä sivulle kannata laittaa liian paljon tietoa. Sivun pääasia on hyvä koota tiivistelmäksi heti sivun alkuun, jolloinen sisilmäyksellä näkee, onko sivulla oleva tieto käyttäjää kiinnostavaa vai ei.

Miten sivustolta voi hakea tietoa?

Käytetäänkö sivustossa kehyksiä? Jos kehyksiä käytetään, millaisia ne ovat. Onko linkkejä sopivasti, liikaa vai liian vähän? Sivun eri elementtien väliin tulee jättää riittävästi tilaa, jotta sivut ovat sopivan väljät. Toimiiko sivusto näppäimistöltä? Tämä on helpointa testata liikkumalla sivuilla linkistä tai muusta toiminnosta toiseen sarkain-näppäimellä. Ellet sarkain-näppäimellä pääse jonnekin, on syytä selvittää, miksi näin on. Myös kaikki sivun toiminnot tulee voida tehdä näppäinkomennoilla.

Voiko sivun värejä, kirjasinkokoa ja kirjasintyyppiä muuttaa?

Monien käyttäjien mielestä on itsestään selvää, että sivustoilla voi tarvittaessa muuttaa kirjasinkokoa. Heikkonäköisille mahdollisuus muuttaa kirjasinkokoa, värejä ja kirjasintyyppiä helpottaa sivun käyttöä huomattavasti. Samoin selkeät värikontrastit lisäävät käyttömukavuutta. Räiskyvät värit ovat hetkellisesti mukavia, mutta pidemmällä ajalla niiden katsominen on raskasta. Useille värisokeille punavihreäkontrastin erottaminen on vaikeaa, joten näitä värejä käytettäessä on syytä miettiä, miten ne erottaa toisistaan. Testaa tekstin ja taustan väri

Sokeiden käyttämät apuvälineet tuovat huonosti esiin tekstin lihavoinnin ja kursivoinnin. Tämän vuoksi asiasisällölliset painotukset on hyvä ilmaista myös tekstissä.

Yksi mukavimmista, ja tekijällekin helpoimmista, tavoista saada tyylikkäät yhtenäiset sivut on käyttää tyylitiedostoa (CSS). Tyylitiedoston käyttö voi alkuun tuntua hankalalta, mutta sen antamat mahdollisuudet ovat todella laajat.

Linkit

Siirtymälinkit sivulla

Etenkin näkövammaista käyttäjää auttaa, jos sivun alkuun laitetaan siirtymä suoraan sivun "varsinaisen" osuuden alkuun. Käytettävät ruudunlukuohjelmat lukevat sivun alusta alkaen kaiken. Näin esimerkiksi tilanteessa, jossa sivulla on kaksikymmentä, lukee käytettävä ruudunlukuohjelma ensin nämä linkit ja vasta sen jälkeen sivun tekstin. Siirtymä voidaan toteuttaa esimerkiksi näkymättömällä kuvalinkillä, jota on käytetty tällä sivulla.

Esimerkki:

< a href="sisaltoon">< IMG src="nakymatonkuva.gif"
alt="sisältöön" heigh=0 width=0>< /a>
Ja kun varsinainen teksti alkaa, eli tässä koodi on liitetty ensimmäiseen otsikkoon
< a name="sisaltoon">

Jos sivulla on paljon tekstiä, on sivun alkuun hyvä laittaa lista sivun sisällöstä, jolloin linkin avulla on helppo päästä haluttuun kohtaan. Lisäksi on hyvä laittaa "sivun alkuun".

Ovatko nimet kuvaavia?

Linkkien nimien tulee olla kuvaavia. Pelkästä linkin nimestä tulee saada selville, minne vie. Kun käytetään kuvaa, tulee siihen lisätä tekstikuvaus määreellä "alt!".

Tarvitaanko listoja?

Linkkejä on usein varsin paljon. Tällöin on hyvä miettiä, miten olemassa olevista linkeistä saisi selkeät listat. Nämä listat lisäävät kaikkien käyttömukavuutta.

Mikäli tekstin seassa on useita linkkejä, olisi ne hyvä koota tekstin loppuun erilliseksi listaksi.

Samalla rivillä olevat linkit

Samalla rivillä olevien linkkien väliin on hyvä laittaa jokin erotinmerkki, joka helpottaa niiden erottamista toisistaan. Hyvä, ja usein käytetty, erotinmerkki on pystyviiva (|, joka tehdään näppäinyhdistelmällä altgr-<)

Kehykset

Jotta sivut olisivat mahdollisimman selkeät, kannattaa kehyksiä käyttää kohtuudella. Näkövammaisille vaikeimpia ovat sisäkkäiset kehykset, joita käytössä olevat apuvälineet eivät huomaa.

Jos käytät kehyksiä, nimeä ne kuvaavasti "name" määreellä.

Esimerkki:
< frame src="navi.html" name="Navigointikehys">

Jos sivu on monimutkainen, voi olla hyvä harkita kehyksettömän (no frames) vaihtoehdon tekemistä. Tähän sivuun laitat otsikon, sivun tekstit ja linkit.

Sivun palstoitus

Osa käytettävistä apuvälineistä ei osaa erottaa palstoja toisistaan, vaan lukee tekstin rivi kerrallaan.

Aiemmissa esteettömyyssuosituksissa on suositeltu tekemään sivusta myös palstoittamaton vaihtoehto. Tätä tarvittiin vanhempien ruudunlukuohjelmien vuoksi, sillä ne eivät välttämättä lukeneet sujuvasti taulukoita. Lue palstoituksesta lisää

Teksti

Otsikointi on joka sivulla hyvä tehdä tasolta H1 alaspäin. Tyylisivuilla joudutaan usein käyttämään nimettyjä tyylejä, jotka vaikeuttavat loogisuuden ylläpitoa.

Mitä tageja on käytetty kappalejakoon?

Kappalejakoon tulisi käyttää tageja < p>, sillä tagin ruudunlukuohjelma lukee "tyhjä".

Mikäli tekstivaihtoehtona on sekä html että pdf, olisi pdf-muodon hyvä olla haettavissa erillisen linkin takaa. Tällöin html-muotoa voisi lukea sivustolla ja pdf-muotoa tiedoston latauksen jälkeen erillisellä ohjelmalla.

Kuvat ja kuvalinkit

Kaikille kuville tulisi olla oma alt= taginsa, sillä muutoin ruudunlukuohjelmat lukevat kuvat sellaisenaan. Pienille koristekuville käy alt=" ", joka ei näiden kohdalla vaikuta sivun käytettävyyteen. Kaikkien muiden kuvien kohdalla tulee käyttää kuvan sisältöä kuvaavaa tekstiä, jolloin näkövammainen käyttäjä saa tiedon kuvasta.

Esimerkki:
yrityksen logo alt="Kokko-Kokki Oy:n logo, jossa silinteristä lentää tähtiä, diskettejä ym. tavaraa"

Mikäli kuvan antama informaatio on laaja (esimerkiksi graafiset taulukot tms.), on hyvä miettiä, voisiko saman informaation laittaa tekstiksi erillisen linkin taakse.

Multimedia

Jos sivuilla on käytetty multimediaesityksiä tai Flash-animaatioita, ne olisi hyvä laittaa linkin tai painikkeen taakse, jotta käyttäjä voisi itse valita, haluaako katsoa multimediaesityksen. Tärkeää on, että multimediaesitykseen liittyy myös sanallinen kuvaus esityksen keskeisimmästä sisällöstä. Esimerkiksi upotetut äänimaailmat ja vierivät tekstit vaikeuttavat huomattavasti sivujen saavutettavuutta.

Dynaamiset sivut

Dynaamisilla sivuilla tarkoitetaan sivuja, joissa osa informaatiosta tuotetaan joko palvelimella tai käyttäjän selaimessa. Näkövammaiselle käyttäjälle paras ratkaisu on palvelimella tapahtuva dynaamisuus, joka tuottaa luettavaksi puhdasta HTML koodia.

Javaskript ym. selaimella tapahtuva dynaamisuus ei näy kaikille käyttäjille. Tällöin osa sivun informaatiosta jää saavuttamattomiin. Lisäksi Java-, Javascript- ja Visual Basic -koodilla tuotetut skriptit saattavat sotkea ruudunlukuohjelman tai olla näkymättä lainkaan.

Lomakkeet

Eräs ongelma ovat erilaiset lomakkeet. Lomakkeiden suunnittelussa ja toteutuksessa tulisi käyttää mahdollisimman paljon HTML-koodia. Lisäksi lomakkeissa on hyvä tavoitella yksinkertaisuutta ja selkeyttä. Lomakkeissa tulisi, mahdollisuuksien mukaan, olla ensin ohjeteksti ja sen jälkeen täytettävä kenttä.

Radiopainikkeissa (valitse yksi vaihtoehto) ja ns. checkbox -painikkeissa (valitse sopivat vaihtoehdot) teksti voi olla myös painikkeen jälkeen.

Testaa tekstin ja taustan väri

Värien selkeä kontrasti tekee sivuston helppolukuiseksi ja miellyttäväksi. Kyse on kirkkauserosta kahden värin välillä ja värierosta tekstin ja taustavärin välillä.

Tilaa saavutettavuustestaus

Esteettömyystestauksen tuloksia voidaan käyttää sivustojen helppokäyttöisyyden lisäämiseen (käytettävyys) ja sivustojen hakukonenäkyvyyden parantamiseen (hakukoneoptimointi.



* Sivun alkuun

Kokko-Kokki Oy
Vanha Puroniitynpolku 3 D 29
Käyntiosoite: Rapakivenkuja 4 N 95
Gsm: 040 5594 739 | email: tero.kokko[]kokkoy.fi

Päivitetty: 7.5.14 Webmaster