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ö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
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.
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.
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.
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.
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!".
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ä 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-<)
Jotta sivut olisivat mahdollisimman selkeät, kannattaa kehyksiä käyttää kohtuudella. Sivuston kehyksiin on suositeltavaa käyttää Div-elementtejä
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ää
Otsikointi on joka sivulla hyvä tehdä tasolta H1 alaspäin. Tyylisivuilla joudutaan usein käyttämään nimettyjä tyylejä, jotka vaikeuttavat loogisuuden ylläpitoa.
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.
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: |
![]() |
Mikäli kuvan antama informaatio on laaja (esimerkiksi graafiset taulukot tms.), on hyvä miettiä, voisiko saman informaation laittaa tekstiksi erillisen linkin taakse.
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.
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.
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.
Saavutettavuustestauksen tulokset palvelevat näkövammaisten käyttäjien ohella kaikkia sivustojen käyttäjiä Kun sivuston suunnittelussa otetaan huomioon saavutettavuus ...
Lue saavutettavuustestaamisesta lisää
Millaisen saavutettavuustestauksen tarvitset?
Nopeasti ajateltuna uusin WCAG 2.1 ohjeidenmukainen testaus...
Lue lisää millaisen
saavutettavuustestauksen ja saavutettavuusselosteen tarvitset
Värien selkeä kontrasti tekee sivuston helppolukuiseksi ja miellyttäväksi. Kyse on kirkkauserosta kahden värin välillä jossa kynnystaso on 125, ja värierosta tekstin ja taustavärin välillä, jossa ..
Testaa tekstin ja taustan väri
Verkkosivujen tuottajien ja ostajien kannattaa sivustoja tehdessään ottaa huomioon niiden saavutettavuus. Huonosti toteutetuista sivustoista voi saada enemmän negatiivista ....
Lue lisää onko saavutettavuudella väliä
Vaikka sivustolla olisi tehty saavutettavuustestaus ja se täyttäisi kaikki kriteerit, on mahdollista, ettei sivusto ole saavutettava tai ymmärrettävä...
Lue lisää jos saavutettavuus ei toteudu
näkö on väliaikaisesti tai pysyvästi heikentynyt esim. onnettomuuden tai sairauden vuoksi. Eri tilanteissa kamera voi olla suuri apu ongelmien ratkaisemiseen.
Lue lisää kamerasta arjen apuna
Aiemmissa saavutettavuussuosituksissa on suositeltu tekemään sivusta myös palstoittamaton vaihtoehto. Tätä tarvittiin vanhempien ruudunlukuohjelmien vuoksi,
Lue palstoituksesta lisää
NVDA on ilmainen Windows -käyttöjärjestelmälle suunniteltu ruudunlukuohjelma. NVDA mahdollistaa tietokoneen käytön näkövammaisille henkilöille ilman ...
Lue Nvda ruudunluku -ohjelmasta
Saavutettavuutta vuodesta 2003 lähtien
Kokko-Kokki Oy
Rapakivenkuja 1 C 45, 00710 Helsinki
Gsm 040 5594 739 | email: saavutettavuus[at]omat.fi
Päivitetty 28.05.2015 Webmaster