Testausohjeet verkkosivun tekijälle

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 on helppo tapa tehdä tyylikästä saavutettavuutta

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.

Ruudunluku ohjelma näyttää sivun linkit

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>Saavutettavuus.fi | Testausohjeet verkkosivun tekijälle</tittle>

<h1> Testausohjeet verkkosivun tekijälle </h1>

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 linkkien 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, jolloin ensisilmä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. Kontrastin riittävyyden voit tarkastaa Testaa tekstin ja taustan väri -sivulla

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 (Cascading Style Sheets). 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ä linkkiä, 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:
Koodiesimerkki siirtymälinkistä sivun sisältöön:

<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ö tai muu vastaava.

Tai käyttämällä CSS: n text-indent -arvoa.
text-indent: -1000em;

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

Ovatko nimet kuvaavia?

Linkkien nimien tulee olla kuvaavia. Pelkästä linkin nimestä tulee saada selville, minne se 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. Sivuston kehyksiin on suositeltavaa käyttää Div-elementtejä

Sivun palstoitus

Aiemmissa saavutettavussuosituksissa 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

Otsikko

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ä se auttaa ruudunlukuohjelman käyttäjiä.. 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 30 v logo, jossa silinteristä jänis#34;

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.

On käyttäjiä, joilla ei syystä tai toisesta ole käytössä javascriptiä, sekä selaimia, jotka eivät tue sitä. Html5 -standardi tukeutuu paljon javascriptiin. W3 2.x standardin mukaisesti todetaan häiriöttömyydestä: eri teknologiat, jotka eivät ole saavutettavuudeltaan tuettuja tai jos niitä käytetään tavalla, joka ei noudata ohjeita, eivät saa estää käyttäjiä saavuttamasta sivustossa olevaa informaatiota.

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.