Notice: Undefined variable: seurlyh in /var/www/vhosts/omat.fi/httpdocs/saavutettavuus/jama/tiedot.php on line 168 Notice: Undefined variable: seurlyh in /var/www/vhosts/omat.fi/httpdocs/saavutettavuus/jama/tiedot.php on line 176 Notice: Undefined variable: seurlyh in /var/www/vhosts/omat.fi/httpdocs/saavutettavuus/jama/tiedot.php on line 179 Testausohjeet verkkosivun tekijälle – Testausohjeet verkkosivun tekijälle]
Saavutettavuus
Saavutettavuus, Kokko-Kokki Oy vuodesta 1989
Etusivu   |  Saavutettavuus   |  Ohjeita   |  Yritys   |  Palaute   |  Sivukartta  

Testausohjeet verkkosivun tekijälle

Testausohjeet, liikennevaloissa on vihreä valo

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.

Jaws ohjelmalla  näytetään sivun linkit
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>

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 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;

Kokko-Kokki Oy:n 30 v logo, jossa silinteristä jänis

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.






Apuväline, iso suurennuslasi valolla

Saavutettavuustestaus

Saavutettavuustestauksen tulokset palvelevat näkövammaisten käyttäjien ohella kaikkia sivustojen käyttäjiä Kun sivuston suunnittelussa otetaan huomioon saavutettavuus ... Lue saavutettavuus­testaamisesta lisää

Apuväline, iso suurennuslasi valolla

Tilaa saavutettavuus­testaus

Millaisen saavutettavuus­testauksen tarvitset? Nopeasti ajateltuna uusin WCAG 2.1 ohjeiden­mukainen testaus... Lue lisää millaisen saavutettavuus­testauksen ja saavutettavuus­selosteen tarvitset

Kännykän teksti on himmeä

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ä jossa kynnystaso on 125, ja värierosta tekstin ja taustavärin välillä, jossa .. Testaa tekstin ja taustan väri

kuva kävelytunnelista

Onko saavutet­tavuudella väliä?

Verkkosivujen tuottajien ja ostajien kannattaa sivustoja tehdessään ottaa huomioon niiden saavutet­tavuus. Huonosti toteutetuista sivustoista voi saada enemmän negatiivista .... Lue lisää onko saavutet­tavuudella väliä

Saavutettavuus ei toteudu, tummat kierreportaat nousevat ylöspäin

Jos saavutet­tavuus ei toteudu?

Vaikka sivustolla olisi tehty saavutettavuus­testaus ja se täyttäisi kaikki kriteerit, on mahdollista, ettei sivusto ole saavutettava tai ymmär­rettävä... Lue lisää jos saavutet­tavuus ei toteudu

Kaupassa otetaan tabletilla kuvaa hedelmätiskin hintalapusta

Kamera arjen apuna

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

Palstoitettu www sivu

Sivun palstoitus

Aiemmissa saavutettavuus­suosituksissa on suositeltu tekemään sivusta myös palstoittamaton vaihtoehto. Tätä tarvittiin vanhempien ruudunluku­ohjelmien vuoksi, Lue palstoituksesta lisää

Nvda ruudunlukuohjelma lukee ruudulta tekstiä ja muuta tietoa

NVDA-ruudunlukuohjelma

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