0

SAAVUTETTAVUUSRAPORTTIHämeenlinnan responsiivinen verkkosivusto

Tapio Haanperä

Juha Sylberg

Avaava

Katariina Saksilaisen katu 6 B, TH4

00560 Helsinki

puhelin 045 135 8932

www.avaava.fi

1

SISÄLLYS

SAAVUTETTAVUUSRAPORTTI

Hämeenlinnan responsiivinen verkkosivusto

1. Johdanto 2

2. Taustaa 4

3. Yleiskatsaus 5

4. Arvioinnin tulokset ja kehittämisehdotuksia 6

5. Sivustolle tehdyt korjaustoimenpiteet sekä niiden vaikutukset käyttäjille 25

6. Sivuston arvioiminen tehtyjen muutosten jälkeen WCAG 2.0-kriteerein 28

7. Lisätietoa saavutettavuudesta 37

1. JOHDANTO 1/2

A

B

A

Tilaaja:

Kaisa Paavilainen

verkkotoimittaja

Raatihuoneenkatu 9, 3. krs.

PL 84, 13101 Hämeenlinna

Saavutettavuuskartoitus/toimittaja

Karanttia Oy Perusturva / Avaava

Katariina Saksilaisen katu 6 B

00560 Helsinki

Yhteyshenkilöt:

Tapio Haanperä

Juha Sylberg

Saavutettavuusasiantuntija

+358 46 923 0905

juha.sylberg@avaava.fi

2

Tässä raportissa arvioidaan Hämeenlinnan responsiivisen

verkkosivuston saavutettavuutta.

Kartoitus on tehty vuoden 2015 syyskuussa.

Kehittämiskohdat sekä niiden liitteenä olevat suunnitteluohjeet

perustuvat vammaisjärjestöjen ja eri käyttäjäorganisaatioiden

suosituksiin ja WCAG 2.0 ohjeistukseen

Arviointi tehtiin WCAG 2.0 AA-tason kriteeristön mukaisesti.

Tätä kriteeristöä käytetään myös valmisteilla olevan

eurooppalaisen julkisten verkkopalveluiden saavutettavuus-

direktiivin pohjana.

Saavutettavuus arvioitiin ensisijaisesti näkövammaisten

ruudunlukuohjelmaa käyttävien henkilöiden kannalta. Jonkin

verran sivustoa katsottiin myös tekstinsuurennusohjelmaa

käyttävien heikkonäköisten henkilöiden kannalta.

Vähemmälle huomiolle jätettiin kognitiivinen saavutettavuus.

Nyt tehty arvio ottaa kantaa ensisijaisesti html-koodin

oikeellisuuteen, kun taas kognitiivinen saavutettavuus

perustuu paljon sisällöntuottajien tuottamaan tekstiin, jota on

helppo korjata myös valmiissa sivustossa. Sen sijaan html-

koodin rakenteiden muuttaminen valmiiseen sivustoon on

huomattavasti työläämpää.

JOHDANTO 2/2

A

B

A

3

Arviointi aloitettiin yleiskatsauksella tutustumalla sivustoon

ruudunlukuohjelmalla. Esiarviossa voitiin todeta, että

Hämeenlinnan kaupungin verkkosivut olivat teknisesti melko

hyvät saavutettavuuden suhteen. Ruudunlukuohjelmalla

sivustoa läpikäydessä ei tullut vastaan suurempia teknisiä

esteitä, jotka olisivat täysin estäneet sivuston käytön.

Sivustolla oli kuitenkin joitain yksittäisiä esteellisiä

elementtejä, joita sokea ruudunlukuohjelman käyttäjä tai

näppäimistökäyttäjä ei voinut käyttää tai joiden käyttäminen

oli hyvin hankalaa. Löydettyjen havaintojen perusteella

verkkosivustolle tehtiin korjausehdotuksia saavutettavuuden

parantamiseksi. Korjausehdotuksissa keskityttiin erityisesti

sivuston käyttöön näkövammaisten ruudunlukuohjelman

käyttäjien kannalta.

Sivuston laajuuden vuoksi (yli 5000 alasivua), tässä

arvioinnissa paneuduttiin:

•sivuston yleisen rakenteen kehittämiseen

•usein toistuvien esteellisten elementtien korjaamiseen

Kävimme läpi myös sivuston sisältöön liittyviä asioita ja siitä,

miten sisällöstä on mahdollista tehdä saavutettavampaa.

Lainsäädännöllinen tilanne

EU:n komissio valmistelee direktiiviä verkkopalveluiden

saavutettavuudesta. Direktiivin tarkoitus on parantaa

verkkopalveluiden saavutettavuutta kaikkien käyttäjien

kannalta, mutta erityisesti tavoitteena on huomioida

vaikeimmassa asemassa olevien näkövammaisten

ruudunlukuohjelmaa käyttävien henkilöiden tarpeet.

Lainsäädännön on tarkoitus kattaa kaikki julkiset

verkkopalvelut. Lainsäädäntö on vielä

valmisteluvaiheessa, mutta sen tarkoitus on olla

yhteensopiva WCAG2.0 ohjeistuksen kanssa muutamaa

poikkeusta lukuun ottamatta.

Poiketen W3C-ohjeistuksesta, direktiivistä luultavasti

jätetään pois vaatimus videoiden tekstitykseen. Myös

joitakin tiedostotyyppejä jätetään direktiivin ulkopuolelle.

Sen sijaan näyttää siltä, että esimerkiksi tyypillisesti

saavutettavuuden kannalta ongelmalliset Flash-videot on

sisällytetty direktiivin piiriin.

Kuntalaisen sähköisessä asioinnissa välttämätöntä

sähköistä tunnistautumista ei ole direktiivissä erikseen

mainittu ja sen saavutettavuus tuleekin aina tarkastella

tapauskohtaisesti.4

Arvioinnissa käytetyt välineet

Verkkosivun arviointitestaukset suoritettiin viidellä

näkövammaisilla henkilöillä tyypillisesti käytössä olevalla

laitteistolla:

•Windows 7 pro käyttöjärjestelmä, Internet Explorer 10

selain. Jaws ruudunlukuohjelma.

•Windows 7 pro käyttöjärjestelmä, ja NVDA

ruudunlukuohjelma, Chrome selain.

•iPad Air 2. iOS 9 käyttöjärjestelmä. Safari selain ja

VoiceOver ruudunlukuohjelma.

•MacBook Pro, OS X El Capitan, Safari, VoiceOver.

•iPhone 6 . iOS 9. VoiceOver.

2. TAUSTAA

Sivusto on pääasiallisesti toteutettu saavutettavilla tekniikoilla ja on monelta

osin teknisesti saavutettava

Sivustolla olevista esteellisistä elementeistä voidaan suhteellisen pienellä

vaivalla tehdä täysin esteettömiä

Sivuston rakennetta voidaan selkeyttää ja oikean sisällön löytämisestä

voidaan pienillä parannuksilla tehdä vaivattomampaa myös

näkövammaisille ja muille näppäimistökäyttäjille

3. YLEISKATSAUS

1. Logo 2. Hakutoiminto

3. Päänavigaatio

4. Alanavigaatio 5. Sivun pääsisältö6. Täydentävä

sisältö

7. Sivusta riippumattomia yleisiä tietoja

4. ARVIOINNIN TULOKSET JA KEHITTÄMISEHDOTUKSET

Hämeenlinnan sivuston rakenne

Sivuston rakenteesta

Seuraavaksi käydään läpi sellaisia oleellisia tekijöitä ja toimintoja, jotka

koskettavat koko verkkosivustoa ja jotka tulee huomioida kaikilla sivuilla.

Arvioinnisa käytiin läpi sivusto respo.hameenlinna.fi – Työpöytäversio

Etusivulla oleva rakenne toistuu suurelta osin myös muilla sivuilla. Etusivun ja

sivuston rakenteen kehittäminen parantaa koko sivuston saavutettavuutta.

Pelkän etusivun saavutettavuus usein korreloi vahvasti koko sivuston

saavutettavuuden kanssa

Sivun otsikko - Title <title>

Tämä luetaan ruudunlukukäyttäjälle ensimmäisenä, kun hän avaa uuden sivun

Sivun titlen tulisi kuvastaa sivun sisältöä ja olla yhdenmukainen yksittäisen sivun sisällön kanssa

Title on käytännössä usein sama kuin sivun ensimmäinen otsikko

Sivun titleen lisäksi kaupungin nimi

Usealla eri sivustoilla voi olla sivu, jonka nimi on “Etusivu”

Auttaa käyttäjää tietämään, millä sivulla hän on

Tällä hetkellä title on:

Asiointi - respo.hameenlinna.fi - NOT FOR

COMMERCIAL USE

Tulisi olla:

<title>Asiointi - Hämeenlinnan

kaupunki</title>

Otsikot ja otsikkorakenne <h>

Otsikoiden ja otsikkorakenteiden tulisi olla loogisia ja selkeitä

Toimii yksittäisen sivun sisällysluettelona

Tämä auttaa erityisesti sokeita ruudunlukuohelman käyttäjiä:

Löytää nopeasti ja vaivattomasti oleellinen ja mielenkiintoinen sisältö

Navigoida vaivattomasti sivun eri osioiden välillä

Esimerkiksi etusivulla tulisi olla näin

<h1>Hämeenlinnan kaupunki</h1>

<h2>TIEDOTTEET</h2>

<h3>Esimerkkitiedote 1</h3>

<h3>Esimerkkitiedote 2</h3>

…

<h2>KUULUTUKSET</h2>

<h2>PÄÄTÖKSET</h2>

<h2>TAPAHTUMAT</h2>

<h3>Esimerkkitapahtuma 1</h3>

<h3>Esimerkkitapahtuma 2</h3>

<h2>KOKOUKSET</h2>

Footer:

<h1>PALVELUT</h1>

<h1>ANNA PALAUTETTA</h1>

Otsikot ja otsikkorakenne <h>

Oheista otsikkorakennetta olisi hyvä noudattaa myös muilla sivuilla

Sivun pääsisällön otsikko on aina H1-tason otsikko

Seuraavan kerran H1-tason otsikoita voi käyttää footerissa

Otsikkotasojen oikeaoppinen käyttö helpottaa sokeita käyttäjiä

Esimerkiksi Asiointi-sivulla tulisi olla näin

<h1>Asiointi</h1>

<h2>Asioi verkossa</h2>

<h2>Kaupunki sosiaalisessa mediassa</h2>

<h2>Tule paikan päälle palvelupisteeseen</h2>

<h2>Soita ja kysy</h2>

<h2>Yhteystiedot</h2>

<h2>Anna palautetta</h2>

<h2>Tee kuntalaisaloite</h2>

<h2>Yhdistykset Kanta-Hämeessä</h2>

<h2>Suomi.fi</h2>

<h1>Palvelut</h1>

<h1>Anna palautetta</h1>

Kuvat ja kuvatekstit <alt=“…”>

Kuvilla tulisi olla niitä kuvaava vaihtoehtoinen tekstivastine

Tekstivastineiden käyttö auttaa hakukoneoptimoinnissa

Dekoratiivisille kuville ei suositella tekstivastineita

Vältä sellaisten kuvien käyttöä, joissa on pelkkää tekstiä

Poikkeuksia voivat olla esimerkiksi logot

Jos kuva on linkki, vaihtoehtoinen teksti on erityisen tärkeä

Tulisi olla

Vasemmassa ylälaidassa oleva Hämeenlinnan

kaupungin “logo”:

<alt=“Hämeenlinnan kaupunki - etusivulle”>

Dekoratiivinen kuva, joka ei sisällä mitään

merkityksellistä informaatiota:

<alt=“”>

Hyppylinkki sivun pääsisältöön

Käyttäjille voidaan tarjota hyppylinkki, jolla voidaan ohittaa kaikki sivusta toiseen toistutava sisältö: hakutoiminnot, navigaatiolinkit, mainokset, ylälaidan bannerit yms.)

Hyppylinkin tulisi olla sivun ensimmäinen elementti

Auttaa kaikkia, jotka selaavat verkkosivuja käyttäen pelkkää näppäimistöä

Tulisi olla

<body>

<a href=“#paasisalto”>Hyppää sisältöön</a>

…

<main id=“paasisalto”>

<h1>Asiointi</h1>

Maamerkit - Landmarks

Jaottelee sivun eri osat suuremmiksi kokonaisuuksiksi:

banneri; hakutoiminto; päänavigaatio; alanavigaatio; pääsisältö; täydentävä sisältö; yleiset tiedot

Auttaa sokeita käyttäjiä:

siirtymään sivun eri osioiden välillä

havaitsemaan, missä kohtaa sivua käyttäjä kulloinkin on

Näiden käyttö navigoinnin tukena verkkosivuilla on kasvanut huomattavasti näkövammaisten keskuudessa

Tulisi olla

Logo ja kielivalinta:<header>…<div id”……” role=“banner”>…</div>

Hakutoiminto:<div id=“……” role=“search”>…</div>…</header>

Päänavigaatio:<nav id=“……” role="navigation" aria-label="Päänavigaatio">…</nav>

Alanavigaatio (Asiointilinkit):<nav id=“……” role="navigaton" aria-labelledby=“leftnavheading”> …</nav>

Pääsisällön: <main role="main">

Täydentävä sisältö (oikea laita):<aside id=“……” role=“complementary"…</aside>

Footer: Palvelut ja Anna Palautetta (footer . sivun alaosa):<footer id=“……” role="contentinfo">…</footer>

Asiointi-sivu jaettuna maamerkeillä

1. Logo (Banner) 2. Hakutoiminto (Search)

3. Päänavigaatio (navigation)

4. Alanavigaatio

(navigation)5. Sivun pääsisältö (main)

6. Täydentävä

sisältö

(complementary)

7. Sivusta riippumattomia yleisiä tietoja (contentinfo)

Yhdenmukaisuus ja lukemisjärjestys

Käyttäjä olettaa eri sivuilla olevien samanlaisten asioiden olevan samassa paikassa

Parantaa käytettävyyttä kaikille

Erityisen tärkeää sokeille ja kognitiivisista haasteista kärsiville käyttäjille

Toisiinsa liittyvien asioiden tulisi olla peräkkäin

Linkit

Varmista, että linkit ovat visuaalisesti tunnistettavissa linkeiksi

Linkkien nimeäminen kunnolla on tärkeää:

Linkin tarkoitus tulee käydä selväksi kontekstista riippumatta

Linkistä tulee käydä selväksi, mille sivulle käyttäjä ohjataan

Moni sokea käyttäjä käy verkkosivuilla läpi pelkkiä linkkejä

Ei näin:<a href=“…”>Paina tästä</a><a href=“…”>Lue lisää…</a>

Tulisi olla

Esimerkki Asumaan-sivulta (linkkinä oleva osuus on alleviivattu);oikealla on teksti: “Voit selata verkossa neljä kertaa vuodessa ilmestyvää asukaslehteäparempi teksti: “Selaa verkossa Hämeenlinnan kaupungin asukaslehteä. Lehti ilmestyy neljä kertaa vuodessa.

Näin linkin tarkoitus tulee käyttäjälle selväksi ilman kontekstia

Murupolku

Auttaa käyttäjää hahmottamaan paremmin, missä kohtaa sivustoa hän on

Tärkeä ominaisuus, jos sivuston navigaatiorakenne on syvä

Hämeenlinnan sivulla tämä on toteutettu onnistuneesti…

paitsi, että etusivulle johtavan linkin kohdalla on pieni talon kuva, jossa ei ole vaihtoehtoista tekstivastinetta

Etusivu / Asiointi / Palvelupisteet /

Hauhon kirjasto-palvelupiste

Sosiaalisen median linkit

Toistaiseksi sosiaalisen median linkkejä on vaikea ja osittain mahdotonta käyttää ruudunlukuohjelmalla

Tältä SoMe -linkit kuulostavat ruudunlukuohjelmalla sokealle käyttäjälle:

Facebook frameLike buttonLike0Facebook frame end+1 frame0+1 frame endTweet button frameLink tweetLink 0Tweet button frame endLink graphic share on mouse over

Tulisi olla näin

Sosiaalinen media

Tykkää sivusta Facebookissa

Suosittele tätä Google+ -palvelussa julkisesti käyttäjänä Matti Meikäläinen

Jaa Twitterissä

(Muiden jakamisvaihtoehtojen kohdalla käyttäjä viedään erilliselle sivulle)

Yhteystiedot

Yhteystietojen näkyminen jokaisella sivulla on tärkeää

Yhteystietojen löytäminen on tehtävä helpoksi

Yhteystiedot on hyvä esittää yhdenmukaisella tavalla sivusta riippumatta

Yhteystietojen luettavuus helpoksi:

Vaihde (03) 6211 —> Vaihde 03 6211

Hakutoiminto

Hakutoiminnon on hyvä olla esillä kaikilla sivuilla

Käyttäjälle täytyy olla selvyys siitä, mihin hakutoimintoa voi käyttää

mistä ja mitä haetaan

HTML-koodiin on laitettava asianmukaiset labelit sokeita käyttäjiä varten

Tällä hetkellä:

hakupainikkeen linkki

“__dopostback(‘ctl00…”

Parannusehdotus:

Linkki/painikkeen label: “Hae”

Esimerkkinä Etusivu ja Anna palautetta –sivu

Seuraavaksi käydään osittain läpi sivujen Etusivu ja Anna palautetta –sivu

pääsisältöjä ja kerrotaan miten kehittää saavutettavuutta ja käytettävyyttä

näiden sivujen pääsisällössä.

Tässä kohtaa ei käydä läpi sivujen muita osia (navigaatiorakenteet,

yhteystiedot, sosiaalisen median linkit yms.)

Etusivu

Etusivulta pääsee helposti siirtymään muille sivuille

Sivun keskellä oleva “karuselli” ei ole saavutettava sokealle

Tällä hetkellä kuvissa ei ole tekstivastineita

Tiedotteet, Kuulutukset, Päätökset SEKÄ Tapahtumat, Kokoukset -välilehdet ovat vaikeasti hahmotettavissa ruudunlukuohjelmalla

“Kaikki tiedotteet >” -linkin teksti katoaa, kun siihen kohdistaa näppäimistön

Anna palautetta

“Katso ohjevideo”

Tällaiset ovat hyödyllisiä ja havainnollistavia

On kuitenkin tarpeellista antaa ohjeet myös tekstiversiona

Navigoimisen helpottamiseksi, kaikki eri aiheet, joista palautetta voi antaa, olisi hyvä otsikoida

Helpottaa näppäimistökäyttäjiä löytämään haluamansa aiheen nopeammin ja vaivattomammin

Miten tältä sivulta palataan Hämeenlinnan kaupungin sivulle?

Anna palautetta: Ikäihmisten palvelut

Palautteet eri osiot olisi hyvä jaotellla selkeämmin käyttäen kunnollista otsikkorakennetta

Pakollisten kenttien havaitseminen on sokealle mahdotonta:“Sinisellä -merkillä merkityt kentät ovat pakollisia”“Ahe #” —> “Aihe (pakollinen):”

Osa painikkeista on nimeämättömiä - sokea ei siis voi tietää, mitä niiden painamisesta seuraa

Anna palautteen sijainti kohta on sokealle henkilölle tällä hetkellä mahdoton

Kartta osuuden ohittamisen ruudunlukijalla vaaditaan yli 40 näppäinpainallusta

Etunimi- ja sukunimikentillä ei ole omia labeleita

25

A

B

A

Vasemman yläkulman logo

Hämeenlinnan kaupungin vasemmassa ylälaidassa

olevaan logoon/linkkiin etusivulle on nyt lisätty kuvaava

tekstivastine (alt=”Hämeenlinnan kaupunki – etusivu”)

ruudunlukuohjelman käyttäjille.

Hakupainikkeen nimilappu (label)

Hakutoiminnon Hae –painikkeeseen on lisätty kuvaava

nimilappu (label “Hae”) ruudunlukuohjelman käyttäjille.

Staattisten linkkien nimet

Sivustolla on yleisesti ottaen selkeytetty useiden

staattisten linkkien nimeämistä. Tämä helpottaa

huomattavasti sellaisia ruudunlukuohjelman käyttäjiä,

jotka navigoivat linkkien avulla. Osa linkeistä

generoidaan automaattisesti. Tällaisten linkkien

nimeämiskäytäntöön ei ole puututtu.

5. SIVUSTOLLE TEHDYT KORJEUSTOIMENPITEET JA

NIIDEN VAIKUTUKSET KÄYTTÄJILLE

26

A

B

A

Sivujen pääotsikot (title)

Eri alasivuilla on nyt asianmukaiset ja kuvaavat

pääotsikot (title). Tämä auttaa kaikkia käyttäjiä

hahmottamaan, millä sivulla käyttäjä on.

Ruudunlukuohjelman käyttäjille tämä (title) luetaan

usein ensimmäisenä, kun sivu aukeaa. Hyvin nimetty

sivun pääotsikko auttaa myös hakukoneoptimoinnissa.

Sosiaalisen median linkit ja painikkeet

Sosiaalisen median linkkien ja painikkeiden osalta on

nyt otettu käyttöön saavutettavuuslaajennus, joka

mahdollistaa niiden käytön myös ruudunlukuohjelmilla.

Staattinen otsikkorakenne (<h1>, <h2>, … <h6>)

Eri alasivujen staattiset otsikkorakenteet on nyt

muutettu selkeämmäksi näppäimistökäyttäjille. Sivuja

voi vaivattomasti selata otsikkorakenteen avulla

käyttäen sivuilla esiintyviä <h1>, <h2>, … ja <h6> -

elementtejä.

27

A

B

A

Etusivulla olleet linkit

Etusivulla verkkosivuston aikaisemmassa versiossa

muutama linkki (esim. “Kaikki tiedotteet”) hävisi näkyvistä

(fontin väri muuttui), kun sen päälle kohdisti

näppäimistön. Tämä aiheutti hämmennystä

näppäimistökäyttäjissä. Vika on nyt korjattu.

Sisältö

Sisällöllisesti verkkosivusto oli jo ensimmäisessä

testattavassa versiossa varsin hyvä saavutettavuuden

suhteen. Sisällöntuottajille on kuitenkin annettu ohjeita

entistä saavutettavamman sisällön luomiseen. Näistä

esimerkkeinä linkkien ja kuvien nimeämiset sekä

otsikointiin liittyvät asiat. Verkkosivuston toimittaja oli

antanut osasta näitä edelleen ohjeita, miten ne saadaan

toteutetuksi.

6. SIVUSTON ARVIOIMINEN TEHTYJEN KORJAUSTEN

JÄLKEEN WCAG2.0-KRITEEREIN

28

A

B

A

1.1 Tekstivastineet: Tarjoa tekstivastineet kaikelle ei-tekstuaaliselle sisällölle.

Kriteeri Heuristiikka Sivut (URI) Kommentit OK

1.1.1(A-taso)

Onko käyttäjän kannalta olennaista

informaatiota sisältäville kuville annettu

kuvaava ja riittävän informaation sisältävä

tekstivastine?

http://www.hameenlinna.fi/Palvelu

t/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Sivulla ei ole käyttäjän kannalta

olennaista informaatiota sisältäviä kuvia

NA

1.1.1(A-taso)

Linkitetyillä kuvilla ja lomakkeiden

kuvapainikkeilla on kuvaava tekstivastine

tai -arvo.

http://www.hameenlinna.fi/Palvelu

t/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Sivun kuvalla (talon kuva) ei ole alt

tekstivastinetta

0

1.1.1(A-taso)

Onko käyttäjän kannalta epäolennaisille

kuville annettu määre alt="" tai toteutettu ne

css-taustakuvana?

http://www.hameenlinna.fi/Palvelu

t/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Sivun kuvalla (vammaispalvelut.png) ei

ole alt tekstivastinetta eikä määrettä

määre alt=""

0

1.1.1(A-taso)

Onko CAPTCHA tai muuta vastaavat

ratkaisut toteutettu saavutettavasti?

http://www.hameenlinna.fi/Palvelu

t/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

NA

1.1.1(A-taso)

Onko lomakkeiden kentillä kuvaavat

nimilaput (label)?

http://www.hameenlinna.fi/Palvelu

t/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Hakukentällä on käytetyn tilan puitteissa

riittävä label

2

1.1.1(A-taso)

Onko kaikelle muulle ei-tekstimuotoiselle

sisällölle annettu tekstivastine?

http://www.hameenlinna.fi/Palvelu

t/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Sivun 12 ei tekstimuotoisesta

elementistä 11 on nimetty ja 1 Twitter

elementti nimeämätön

2

29

1.2 Aikasidonnainen media: Tarjoa vastine aikasidonnaiselle medialle.

Kriteeri Heuristiikka Sivut (URI) Kommentit OK

1.2.1(A-taso)

Onko audiomuotoiselle sisällölle (podcastit,

mp3-tiedostot ym.) olemassa vastaavan

informaation sisältävä tekstimuotoinen

vastine?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

NA

1.2.1(A-taso)

Onko videoille olemassa vastaavan

informaation sisältävä tekstimuotoinen

vastine tai audiotiedosto?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

NA

1.2.2(A-taso)

Onko tekstitykset tarjottu kaikelle

nauhoitetulle audiosisällölle

synkronoidussa mediassa?

Tekstityksien tulee tarjota audioraidan

sisältö tekstimuodossa, sisältäen

informaatiota, joka ei välttämättä liity itse

dialogeihin (esimerkiksi "huokaisee", "oven

narahdus" tai "salamointia").

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

NA

1.2.3(A-taso)

Onko verkkosivuilla oleville videoille

olemassa kuvaileva tekstivastine tai

kuvaileva ääniselite (mikäli videon oma

ääniraita ei sisällä riittävää informaatiota

kaikesta videon sisällöstä)?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

NA

1.2.4(AA-taso)

Onko suoran videosisällön ääniraita

tekstitetty.

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

NA

1.2.5

(AA-

taso)

Onko erillinen kuvaileva ääniselite

tarjolla kaikelle videosisällölle?

http://www.hameenlinna.fi/Pal

velut/Vammaispalvelut/Hake

mukset-ja-lomakkeet/

NA

30

1.3 Mukautettava: Tuota sisältöä, joka voidaan esittää eri tavoin (esimerkiksi yksinkertaisemman asettelun avulla) informaatiota tai

rakennetta menettämättä.

Kriteeri Heuristiikka Sivut (URI) KommentitOK

1.3.1

(A-taso)

Onko verkkosivun rakenne ja

elementtien suhteet ilmaistu HTML-

kielen avulla tai vastaava informaatio on

annettu tekstimuotoisena?

http://www.hameenlinna.fi/Palv

elut/Vammaispalvelut/Hakemu

kset-ja-lomakkeet/

Otsikoita ja maamerkkejä on

pääpiirteittäin käytetty oikein.

Navigaatiopalkkien maamerkkien

rolea ei ole määritelty

2

1.3.2

(A-taso)

Onko HTML-koodin kautta määrittyvä

sisällön lukemisjärjestys looginen ja

intuitiivinen?

http://www.hameenlinna.fi/Palv

elut/Vammaispalvelut/Hakemu

kset-ja-lomakkeet/

Pääosin oikein. Ainoa poikkeus 3

tason otsikko Vammaispalvelut

jälkeen tulee h3 tason otsikoita ja

lopun footerissa on jälleen h2 tason

otsikoita

2

1.3.3

(A-taso)

Onko verkkosivuston käyttämiseen

tarkoitetut ohjeet toteutettu niin, että

niiden ymmärtäminen ei vaadi kykyä

kuulla tai nähdä?

http://www.hameenlinna.fi/Palv

elut/Vammaispalvelut/Hakemu

kset-ja-lomakkeet/

NA

1.4 Onko verkkosivustolla esitettävät ohjeet toteutettu niin, että niiden ymmärtäminen ei vaadi kykyä kuulla tai näh

dä?

Kriteeri Heuristiikka Sivut (URI) KommentitOK

1.4.1

(A-taso)

Onko käytetty muitakin visuaalisia

keinoja kuin väriä välittämään

informaatiota verkkosivulla?

http://www.hameenlinna.fi/Palv

elut/Vammaispalvelut/Hakemu

kset-ja-lomakkeet/

On2

1.4.2

(AA-taso)

Onko verkkosivulla mekanismi äänen

pysäyttämiseksi, hiljentämiseksi tai sen

voimakkuuden säätämiseksi mikäli se

käynnistyy automaattisesti ja soi yli 3

sekuntia?

http://www.hameenlinna.fi/Palv

elut/Vammaispalvelut/Hakemu

kset-ja-lomakkeet/

NA

31

1.4.3(AA-taso)

Onko tekstin tai tekstiä esittävän kuvan

kontrastisuhde vähintään 4,5:1? Onko ison

tekstin (yli 18px tai 14px lihavoituna),

kontrastisuhde vähintään 3:1?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

On 2

1.4.4(AA-taso)

Onko verkkosivu on luettava ja voidaanko

sitä käyttää ilman ongelmia, jos tekstin

kokoa kasvatetaan 200%?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

On 2

1.4.5(AA-taso)

Onko vältetty tekstin tarpeetonta

esittämistä kuvamuodossa?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

On 2

2.1 Käytettävissä näppäimistöltä: Toteuta kaikki toiminnallisuus siten, että se on käytettävissä näppäimistöltä.

Kriteeri Heuristiikka Sivut (URI) Kommentit OK

2.1.1(A-taso)

Sivun kaikki toiminnot ovat käytettävissä

näppäimistön kautta.

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Kylla 2

2.1.2(A-taso)

Näppäimistön fokus ei milloinkaan lukitu

sivun mihinkään elementtiin.

Jos näppäimistöllä voidaan siirtyä johonkin

sivun elementtiin, siitä on mahdollista

näppäimistön avulla myös pois.

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Kyllä 2

32

2.2 Tarpeeksi aikaa: Anna käyttäjille tarpeeksi aikaa lukea ja käyttää sisältöä.

Kriteeri Heuristiikka Sivut (URI) KommentitOK

2.2.1

(A-taso)

Jos sivulla tai sovelluksella on aikaraja, onko

käyttäjän mahdollista kytkeä aikaraja pois

päältä, säätää sitä tai jatkaa sitä?

http://www.hameenlinna.fi/Palvelut/

Vammaispalvelut/Hakemukset-ja-

lomakkeet/

NA

2.2.2

(A-taso)

Voidaanko automaattisesti käynnistyvä

liikkuva, välkkyvä tai vierivä sisältö

keskeyttää, pysäyttää tai piilottaa käyttäjän

toimesta?

http://www.hameenlinna.fi/Palvelut/

Vammaispalvelut/Hakemukset-ja-

lomakkeet/

NA

2.3 Sairauskohtaukset: Älä suunnittele sisältöä tavalla, jonka tiedetään aiheuttavan sairauskohtauksia.

Kriteeri Heuristiikka Sivut (URI) KommentitOK

2.3.1

(A-taso)

Mikään sivun oleva sisältö ei välky tiheämmin

kuin 3 kertaa sekunnissa?

http://www.hameenlinna.fi/Palvelut/

Vammaispalvelut/Hakemukset-ja-

lomakkeet/

2

2.4 Navigoitava: Tarjoa käyttäjille tapoja navigoida, etsiä sisältöä ja määrittää sijaintinsa.

Kriteeri Heuristiikka Sivut (URI) KommentitOK

33

2.4.1(A-taso)

Onko sivulla mahdollista ohittaa

verkkopalvelun toistuvat rakenteet,

esimerkiksi joka sivulla toistuvat

navigointirakenteet?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

On. Ainoa parannus olisi hyppää

sisältöön linkki

2

2.4.2(A-taso)

Onko verkkosivuilla kuvaavat ja

informatiiviset otsikot (“Page title”)?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

On 2

2.4.3(A-taso)

Onko verkkosivun navigoitavien

elementtien (linkit, lomake-elementit yms.)

navigointijärjestys looginen ja intuitiivinen?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

On. Poikkeuksena pääsisällön alue

(role=main) ei ole käytetty. Header

elementtiä on käytetty hyvän käytännön

vastaisesti

2

2.4.4(A-taso)

Voidaanko jokaisen linkin tarkoitus selvittää

yksin linkkitekstistä tai linkkitekstistä ja sen

kontekstista yhdessä?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Kyllä. Poikkeuksena sivulla on tyhjä

linkki joka ei sisällä tekstiä (linkki ei näy

ruudulla eikä ruudunlukuohjelma lue

sitä)

2

2.4.5(AA-taso)

Verkkosivu on löydettävissä sivustolta

useammalla kuin yhdellä tavalla.

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Kyllä 2

2.4.6(AA-taso)

Ovatko otsikot (h1, h2, jne.) kuvaavia ja

informatiivisia? Ovatko lomake- ja muiden

vuorovaikutteisten toimintoelementtien

nimilaput (labels) kuvaavia ja

informatiivisia?

http://www.hameenlinna.fi/Palvel

ut/Vammaispalvelut/Hakemukset-

ja-lomakkeet/

Kyllä. Poikkeuksena hakukentän label

johon käytettävissä olevaan tilaan ei

mahdu täydellistä kuvausta. Oppaita ja

linkkejä linkin nimi voisi olla Oppaita ja

linkkejä

2

2.4.7(AA-taso)

Näkeekö käyttäjä, missä verkkosivun

elementissä näppäimistön fokus kulloinkin

on?

Kyllä 2

34

3.1 Luettava: Tee tekstisisällöstä luettavaa ja ymmärrettävää.

Kriteeri Heuristiikka Sivut (URI) Kommentit OK

3.1.1

(A-taso)

Onko verkkosivun kieli määritetty? Ei0

3.1.2

(A-taso)

Onko käyttäjälle kerrottu (lang-attribuutilla), jos

verkkosivun jokin sisältöelementti on esitetty

sivulle määritetystä kielestä poikkeavasti?

Ei. Myös vieraskielisillä sivuilla kieli oli

määritelty http-equiv="Content-Language"

content="fi". Myös näillä sivuilla oli

suomenkielinen ylänavigaatiopalkki

0

3.2 Ennakoitava: Tee verkkosivuista sellaisia, että niiden ilmiasu ja toiminta ovat ennakoitavissa.

Kriteeri Heuristiikka Sivut (URI) KommentitOK

3.2.1

(A-taso)

Kun verkkosivun jokin elementti vastaanottaa

fokuksen, sen seurauksena

• sivu ei merkittävästi muutu

• pop-up -ikkuna ei avaudu

• näppäimistön fokus ei siirry loogisesta

paikastaan

• ei tapahdu mitään muuta muutosta, joka voisi

hämmentää tai disorientoida käyttäjää.

OK2

3.2.2

(A-taso)

Kun käyttäjä syöttää tietoa tai muuttaa jonkin

verkkosivun elementin asetusta tai arvoa,

tämän seurauksena

• sivu ei merkittävästi muutu

• pop-up -ikkuna ei avaudu

• näppäimistön fokus ei siirry loogisesta

paikastaan

• ei tapahdu mitään muuta muutosta, joka voisi

hämmentää tai disorientoida käyttäjää, ellei

tästä ole kerrottu käyttäjälle etukäteen.

OK2

3.2.3

(AA-taso)

Pysyykö useilla sivuilla toistuvien

navigaatioelementtien linkkijärjestys samana

verkkopalvelun eri sivuilla?

Kyllä2

3.2.4

(AA-taso)

Saman toiminnon toteuttavat elementit

esitetään verkkopalvelun eri sivuilla

johdonmukaisesti.

Kyllä2

35

3.3 Syötteen avustaminen: Auta käyttäjiä välttämään ja korjaamaan virheitä.

Kriteeri Heuristiikka Sivut (URI) KommentitOK

3.3.1

(A-taso)

Jos lomakkeella havaitaan syötevirhe, sen

paikka osoitetaan ja virheen kuvaus esitetään

tekstimuotoisena.

http://www.hameenlinna.fi/Valikko/

Googlehaku/?hakusana=H%C3%B

6p%C3%B6%C3%A4

2

3.3.2

(A-taso)

Onko käyttäjää ohjeistettu riittävästi mikäli

hänen edellytetään syöttävän tietoa

verkkopalveluun?

http://www.hameenlinna.fi/Valikko/

Googlehaku/?hakusana=H%C3%B

6p%C3%B6%C3%A4

2

3.3.3

(AA-taso)

Jos lomakkeella havaitaan syötevirheitä,

korjausehdotukset esitetään käyttäjälle (mikäli

ne tunnetaan).

http://www.hameenlinna.fi/Valikko/

Googlehaku/?hakusana=H%C3%B

6p%C3%B6%C3%A4

NA

3.3.4

(AA-taso)

Voiko käyttäjä peruuttaa, tarkistaa tai

vahvistaa lähettämänsä syötteen, jos se:

• aiheuttaa lakiin perustuvia sitoumuksia

• aiheuttaa taloudellisia seuraamuksia

• sisältää käyttäjän testivastauksia

• muuttaa tai poistaa käyttäjän hallinnoimaa

dataa

NA

36

4.1 Luettava: Tee tekstisisällöstä luettavaa ja ymmärrettävää.

Kriteeri Heuristiikka Sivut (URI) KommentitOK

4.1.1

(A-taso)

Onko verkkopalvelun sisältämä

HTML-koodi sellaista, että

käytettävät ohjelmat (esim.

selaimet ja ruudunlukuohjelmat)

pystyvät esittämään (jäsentämään)

sen oikein?

On2

4.1.2

(A-taso)

Ovatko kaikki

käyttöliittymäkomponentit

toteutettu niin, että niitä voidaan

käyttää ohjelmallisesti?

On2

7. LISÄTIETOA SAAVUTETTAVUUDESTA

37

A

B

A

Tuore suomenkielinen tietopaketti saavutettavuudesta:

http://www.celia.fi/celia-asiantuntijana/esteettomyyssalkku/esteettomyyssalkku/

Valtiovarainministeriön SADe-ohjelman Esteettömyystoimintamalli

http://vm.fi/documents/10623/1181303/Esteett%C3%B6myyden+toimintamalli/f32947bb-

1ec3-4256-933f-6d8f93ad6602

Kehitysvammaliiton Papunet- verkkopalveluyksikön projektissa tuotettu julkishallinnon

verkkosivustojen saavutettavuuden arviointimalli

http://papunet.net/saavutettavuus/saavutettavuuden-arviontimalli.

JHS 129 Julkishallinnon verkkopalvelun suunnittelun ja toteuttamisen periaatteet

http://www.jhs-suositukset.fi/web/guest/jhs/recommendations/129

W3C tarkistuslista WCAG 2.0 version verkkosivustojen tekijöitä varten:

http://www.w3.org/WAI/WCAG20/quickref/.

Tarkempi tarkastuslista WWW-sivujen esteettömyyden tarkistamiseen Jyväskylän

yliopiston sivuilla: https://www.jyu.fi/hallinto/esteet/www/tarkistuslista.

W3C validaattorilla voi testata verkkosivun teknistä

saavutettavuutta:http://validator.w3.org/ . Työkalu listaa järjestyksessä sivulla havaitut

virheet lähdekoodissa.

Avaava

Katariina Saksilaisen katu 6 B, TH4

00560 Helsinki

puhelin 045 135 8932

www.avaava.fi