Esteetön verkkopalvelu

0
SAAVUTETTAVUUSRAPORTTI
Hä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 frame
Like button
Like
0
Facebook frame end
+1 frame
0
+1 frame end
Tweet button frame
Link tweet
Link 0
Tweet button frame end
Link 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.
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?
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?
ja-lomakkeet/
NA
1.1.1
(A-taso)
Onko lomakkeiden kentillä kuvaavat
nimilaput (label)?
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?
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.
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?
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").
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ä)?
ja-lomakkeet/
NA
1.2.4
(AA-taso)
Onko suoran videosisällön ääniraita
tekstitetty.
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ä.
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?
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ä?
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) Kommentit
OK
1.4.1
(A-taso)
Onko käytetty muitakin visuaalisia
keinoja kuin väriä välittämään
informaatiota verkkosivulla?
kset-ja-lomakkeet/
On
2
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?
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?
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%?
ja-lomakkeet/
On 2
1.4.5
(AA-taso)
Onko vältetty tekstin tarpeetonta
esittämistä kuvamuodossa?
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ä.
2.1.1
(A-taso)
Sivun kaikki toiminnot ovat käytettävissä
näppäimistön kautta.
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.
ja-lomakkeet/
Kyllä 2

32
2.2 Tarpeeksi aikaa: Anna käyttäjille tarpeeksi aikaa lukea ja käyttää sisältöä.
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?
lomakkeet/
NA
2.3 Sairauskohtaukset: Älä suunnittele sisältöä tavalla, jonka tiedetään aiheuttavan sairauskohtauksia.
2.3.1
(A-taso)
Mikään sivun oleva sisältö ei välky tiheämmin
kuin 3 kertaa sekunnissa?
lomakkeet/
2
2.4 Navigoitava: Tarjoa käyttäjille tapoja navigoida, etsiä sisältöä ja määrittää sijaintinsa.

33
2.4.1
(A-taso)
Onko sivulla mahdollista ohittaa
verkkopalvelun toistuvat rakenteet,
esimerkiksi joka sivulla toistuvat
navigointirakenteet?
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”)?
ja-lomakkeet/
On 2
2.4.3
(A-taso)
Onko verkkosivun navigoitavien
elementtien (linkit, lomake-elementit yms.)
navigointijärjestys looginen ja intuitiivinen?
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ä?
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.
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?
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ää.
3.1.1
(A-taso)
Onko verkkosivun kieli määritetty? Ei
0
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) Kommentit
OK
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ää.
OK
2
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.
OK
2
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ä.
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?
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).
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ää.
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?
On 2
4.1.2
(A-taso)
Ovatko kaikki
käyttöliittymäkomponentit
toteutettu niin, että niitä voidaan
käyttää ohjelmallisesti?
On 2

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

Esteetön verkkopalvelu

Recomendados

Recomendados

Más contenido relacionado

Similar a Esteetön verkkopalvelu

Similar a Esteetön verkkopalvelu (20)

Más de Turun kaupunki

Más de Turun kaupunki (8)

Esteetön verkkopalvelu