Upload
turun-kaupunki
View
298
Download
0
Embed Size (px)
Citation preview
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
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