ESTEETTÖMYYSKATSAUS / ROVANIEMI Annanpura Oy /

Transkriptio

1 ESTEETTÖMYYSKATSAUS / ROVANIEMI Annanpura Oy /

2 2 SISÄLTÖ 1. YHTEENVETO 14 KAUPUNGIN VERKKOSIVUSTON ESTEETTÖMYYSKATSAUKSESTA... 3 KAIKILLA SIVUSTOILLA SUURIA PUUTTEITA... 3 YLEISARVOSANAT... 4 SAAVUTETTAVUUSDIREKTIIVI VELVOITTAA MYÖS KUNTIA JOHDANTO / TOIMEKSIANTO HAVAINNOT... 6 SIVUSTON ESTEETTÖMYYDEN YLEINEN TASO ON HEIKKO TAULUKKO 25 TESTAUSKRITEERISTÄ KÄYTTÖTAPAUKSET Kuljetuspalveluiden hakeminen Perusterveydenhuollon toimipaikat TIETOJA TESTAUSYMPÄRISTÖSTÄ TESTAUSKRITEERIT YHTEYSTIEDOT...20

3 3 1. Yhteenveto 14 kaupungin verkkosivuston esteettömyyskatsauksesta Annanpura Oy toteutti kevään 2016 aikana Näkövammaisten liiton toimeksiannosta esteettömyystutkimuksen, jonka tarkoituksena oli selvittää Suomen kuntien verkkosivustojen esteettömyyden ja helppokäyttöisyyden tilanne. Tutkimuksen kohteeksi valittiin Näkövammaisten liiton 14 alueyhdistyksen keskuskunnat, minkä ansiosta otos edustaa kooltaan erilaisia kaupunkeja maan eri puolilta hyvin. Kullekin sivustolle suoritettiin esteettömyyskatsaus, jossa sivujen esteettömyyttä ja helppokäyttöisyyttä arvioidaan 25 keskeisen saavutettavuuteen vaikuttavan tekijän avulla. Tutkimuksen kriteerit perustuvat kansainväliseen WCAG 2.0 esteettömyysstandardiin sekä vammaisjärjestöjen laatimiin ohjeistuksiin verkkosivustojen saavutettavuudesta. Kaikilla sivustoilla suuria puutteita Jokaisen tutkitun sivuston kohdalla havaittiin merkittäviä esteettömyyteen liittyviä ongelmia. Yksikään kaupungeista ei yltänyt erinomaiseen tai hyvään yleisarvosanaan, ja kolme sivustoa sai matalimman yleisarvion. Käytännössä kaikilla tutkituilla sivustoilla toimiminen on erittäin hankalaa ja osin mahdotonta muun muassa näkövammaisille, kognitiivisista ongelmista kärsiville sekä ikääntyneille kansalaisille. Tyypillisimpiä ongelmia olivat navigointiin käytettävien valikoiden esteellinen toteutus sekä informaation liian suuri määrä yksittäisellä sivulla. Erityisesti etusivulla oleva sisällön ja toiminnallisuuksien runsaus tekee sivulla toimimisen hyvin hankalaksi useille käyttäjille. Lisäksi tutkimusten mukaan vain kolmasosa sivustolla vierailijoista käy palvelun etusivulla, joten sen sisältämän informaation määrää voitaisiin hyvin vähentää ja keskittyä sisällön ja palveluiden helppoon löydettävyyteen yksittäisiltä sivuilta esimerkiksi hakukoneiden kautta.

4 4 Yleisarvosanat Asteikko: erinomainen / hyvä / keskinkertainen / välttävä / heikko Helsinki Kajaani Lahti Oulu Pori Tampere Joensuu Jyväskylä Kouvola Kuopio Mikkeli Rovaniemi Seinäjoki Turku keskinkertainen keskinkertainen keskinkertainen keskinkertainen keskinkertainen keskinkertainen välttävä välttävä välttävä välttävä välttävä heikko heikko heikko Saavutettavuusdirektiivi velvoittaa myös kuntia Pitkään EU:ssa valmisteilla ollut julkisen sektorin verkkopalvelujen saavutettavuusdirektiivin sisällöstä sovittiin toukokuun 2016 alussa. Direktiivi tulee koskemaan myös kuntien verkkosivustoja ja niillä tarjottavia palveluja. Direktiivin pohjana on kansainvälisen WCAG 2.0 esteettömyysstandardin AA-taso. Tehdyn tutkimuksen perusteella kaikilla 14 kaupungilla on runsaasti kehitettävää direktiivin vaatimusten täyttämiseksi. Esteettömyyden ja helppokäyttöisyyden huomiointi tulee siksi ottaa mahdollisimman pian osaksi kunnan verkkopalvelujen kehitysprosessia. alkaen sivuston määrittelystä aina kehitysvaiheen aikaiseen testaukseen ja julkaistavan palvelun esteettömyyden varmistamiseen asti.

5 5 2. Johdanto / Tässä asiakirjassa raportoidaan havainnot, jotka tehtiin esteettömyyskatsauksen yhteydessä sekä arvioidaan esteettömyyden yleistä tilaa. Testauksessa huomioidaan verkkopalvelun käyttöä näkö- ja kuulovammaisten sekä erilaisista motorisista häiriöistä tai kognitiivisista ongelmista kärsivien käyttäjien kannalta. Sivuston saavutettavuutta ja helppokäyttöisyyttä näiden erityisryhmien osalta arvioidaan 25 keskeisen esteettömyyskriteerin avulla, joilla palvelun merkittävimmät esteettömyyteen liittyvät ongelmat ja puutteet voidaan tunnistaa. Katsauksessa käytetyt kriteerit pohjautuvat kansainväliseen WCAG 2.0 esteettömyysstandardiin sekä eri vammaisjärjestöjen ohjeistuksiin sähköisten palvelujen saavutettavuudesta. Tarkistus kattaa olennaiset verkkopalvelujen tekniseen esteettömyyteen, sisällön ymmärrettävyyteen sekä palvelun helppokäyttöisyyteen vaikuttavat tekijät. WCAG 2.0-standardiin voi tutustua tarkemmin osoitteessa: Testauksen suorittaa esteettömyysasiantuntija, joka varmistaa palvelun saavutettavuuden käytännössä. Testaajilla on laaja kokemus erityisryhmien käyttämistä apuvälineistä ja laitteista. Tutkimusten mukaan koneellisessa tarkistuksessa tavoitetaan vain noin 14 prosenttia esteettömyyteen liittyvistä ongelmista. Tämän vuoksi luotettavan arvioinnin voi tehdä vain asiantuntija, jolla on autenttinen käyttökokemus ja ymmärrys erityisryhmien huomioimisessa verkkopalvelujen suunnittelussa. Katsauksen teknisistä lähtökohdista kerrotaan tarkemmin jäljempänä tässä asiakirjassa,. 3. Toimeksianto Testattu sivusto: Yleisen arvioinnin lisäksi sivuston esteettömyyttä arvioitiin kahden käyttötapauksen avulla. Nämä perustuvat tilanteeseen, jossa näkövammainen henkilö muuttaa uuteen kuntaan ja pyrkii selvittämään omatoimisesti verkkosivustolta, 1) miten vammaispalvelulain mukaisia kuljetuspalveluja haetaan sekä 2) mitkä ovat hänelle tarkoitetun kunnallisen terveyspalvelun yhteystiedot ja mikä on terveysaseman sijainti.

6 6 4. Havainnot Sivuston esteettömyyden yleinen taso on heikko Sivustolla havaittiin yksi suurempi kriittinen ongelma sekä useita merkittäviä puutteita sivujen teknisessä toteutuksessa. Suurin ongelma on päävalikon toimimattomuus näppäimistön kautta, minkä vuoksi valikko on ruudunlukuohjelman ja näppäimistörajapintaan perustuvien motoristen apuvälineiden käyttäjien kannalta täysin esteellinen. Myös ruudunsuurennusohjelmaa käyttävän heikkonäköisen kannalta sivuilla toimiminen on vaivalloista, koska valikko avautuu ja sulkeutuu, kun hiiren kohdistin siirretään joko valikkoalueelle tai siitä pois. Suurimmat ongelmat: - Päävalikkoa ei voi käyttää näppäimistöllä, mistä johtuen se on esteellinen näkövammaisille ruudunlukuohjelman käyttäjille, motorisia apuvälineitä hyödyntäville ja muille ilman hiirtä toimiville - Heikkonäköisten ja lievemmistä motorisista ongelmista kärsivien on vaivalloista käyttää valikoita, koska ne sulkeutuvat heti kun hiiren osoitin siirtyy valikon ulkopuolelle - Sokeiden ja vaikeasti heikkonäköisten ruudunlukuohjelman käyttäjien, suurennusohjelmaa käyttävien heikkonäköisten, kognitiivisista ongelmista kärsivien sekä ikääntyneiden kansalaisten on vaikea hahmottaa sivujen rakennetta ja löytää haluamaansa sisältöä yksittäisellä sivulla olevan runsaan informaation vuoksi - Runsas kuvien määrä tekee sivujen visuaalisesta hahmottamisesta hankalaa monille - Sokeat ja vaikeasti heikkonäköiset ruudunlukuohjelman käyttäjät eivät saa tietoa useiden kuvien merkityksestä, koska niiltä puuttuu asianmukainen tekstivastine - Sivujen rakenteen hahmottaminen hankalaa puutteellisen otsikoinnin takia Sivustolla esiintyvien ongelmien määrää kuvastaa myös se, että sen testaaminen koneellisesti Achecker-ohjelmalla ( ei onnistunut lainkaan.

7 7 4.1 Taulukko 25 testauskriteeristä Esteettömyyskatsauksessa käytettävät kriteerit ovat: 1. Tekstivastineet 2. Lomakkeet 3. Otsikot 4. Selailujärjestys näppäimistöllä 5. Informaatiota vain visuaalisesti 6. Automaattisesti käynnistyvän äänen pysäytys 7. Kontrastit 8. Tekstin koko 9. Saavutettavuus näppäimistöllä 10. Näppäimistön ansa 11. Automaattisesti käynnistyvän median hallinta 12. Välkkyvä sisältö 13. Hyppylinkki pääsisältöön 14. Sivun nimi <title> 15. Selkeät linkit 16. Näkyvä kohdistus 17. Kielimääritys 18. Informaation määrä sivua kohti on riittävän pieni. 19. Sivupohjan rakenteet ja toiminnot on toteutettu niin, että ne noudattavat yleistä 20. Sivupohjan perusosat (sisältö, navigaatio, muut sisäiset linkit) ovat erotettavissa ja eroavat 21. Sivun oleellisin sisältö tai muut toiminnot ovat sivun yläosassa, jotta pystysuuntaista vierittämistä voidaan mahdollisuuksien mukaan välttää. 22. Navigaatiolinkkitekstit vastaavat kohdesivujen sisällön pääotsikoita. 23. Lomakkeiden otsikot ja painikkeet ovat riittävän suuria. 24. Lomake-elementti ja sen otsake ovat hahmotettavissa yhdeksi kokonaisuudeksi. 25. Suurikontrastinen tila

8 8 Sivuston esteettömyyteen liittyvät ongelmat ja puutteet on listattu alla olevassa taulukossa aihealueittain testauskriteerien numeroinnin mukaisesti. 1. Tekstivastineet Runsaasti ongelmia. Sivustolla on paljon kuvia ja linkkeinä toimivia kuvia, joilta puuttuvat tekstivastineet. Ruudunlukuohjelman käyttäjä ei pysty mistään tietämään, mikä kuvan tai linkkinä toimivan kuvan tarkoitus on. Korjausehdotus: Tarkistetaan, että HTML-koodissa on jokaisen kuvan kohdalla ALT-attribuutilla merkitty asianmukainen kuvan sisältöä selittävä tekstivastine. Sisällön tai toiminnallisuuden kannalta epäolennaisilla puhtaasti dekoratiivisilla kuvatiedostoilla tulee olla tyhjä ALT-teksti. 2. Lomakkeet Jonkin verran ongelmia. Lomakekenttiä ei ole nimetty asianmukaisesti, vaan kentän merkityksen joutuu ruudunlukuohjelmalla tarkistamaan selaamalla taaksepäin kentän vieressä olevaan tekstiin. Palautelomakkeeseen on ruudunlukuohjelmalla työlästä päästä, koska sivustolta puuttuu hyppylinkki suoraan pääsisältöön. Lomakekentän pakollisuutta osoittava tähti on saavutettavissa vain visuaalisesti. Jos lomakkeen yrittää lähettää puutteellisin tiedoin, ruudunlukuohjelman kohdistus siirtyy lomakkeessa kenttään palautteen luonne eikä tekstiin, joka ilmoittaa, että lomakkeen lähettäminen ei onnistunut pakollisten tietojen puuttumisen takia. Ruudunlukuohjelman käyttäjä ei saa tietoa kyseisen virheilmoituksen olemassaolosta. Lomakkeet ovat visuaalisesti varsin selkeitä, mutta niiden ääriviivat erottuvat huonosti. Ne ovat ohuita ja niiden kontrastit ovat riittämättömiä. Korjausehdotus: Tarkistetaan, että kaikilla lomakkeiden elementeillä on HTML-koodissa asianmukaiset label-, title- ja id-attribuutit, jotka kuvaavat kyseisten kenttien tarkoitusta. 3. Otsikot Paljon ongelmia. Otsikoiden hierarkkinen järjestys on sattumanvaraista. Sivuilla ei ole pääotsikkoa vaan tason 1 otsikko toimii pääotsikon sijaan linkkinä, jonka merkitys ei ruudunlukuohjelmalla selviä. Lisäksi sivustolla on otsikoita, jotka on visuaalisesti muotoiltu otsikoiksi, mutta joita ei ole määritelty otsikoiksi HTML-koodiin. Ruudunlukuohjelma ei tunnista näitä otsikoiksi lainkaan, jos sivustoa selaa otsikko kerrallaan. Tämä on erityisen suuri ongelma, koska sivustolla ei myöskään ole hyppylinkkiä pääsisältöön ks. kohta 13.

9 9 Sivukartassa ei ole määritelty lainkaan otsikoita, mikä helpottaisi sivukartan selaamista ruudunlukuohjelmalla. Nyt sivukarttaa lukiessa pitää käydä jokainen linkki yksitellen läpi löytääkseen haluamansa. Korjausehdotus: Tarkistetaan, että sivujen otsikointi HTML-koodissa vastaa WCAG-standardin vaatimuksia siten, että jokaisella sivulla on pääsisällön alussa <h1>-tason otsikko. Otsikoinnin tulee edetä hierarkkisesti tasoittain ja olla yhdenmukainen ja looginen. 4. Selailujärjestys näppäimistöllä Jonkin verran ongelmia. Kohdistus pääsivulla siirtyy ensiksi kohtaan haku, joka on oikealla melko ylhäällä. Tämän jälkeen kohdistus siirtyy päävalikkoriville, ja vasta sen jälkeen siirrytään linkkilistaan, joka on aivan sivun oikeassa ylälaidassa. Selailujärjestys ei täysin noudata sivun visuaalista asettelua. Korjausehdotus: Muutetaan sivun HTML-koodia siten, että sivun selailujärjestys näppäimistöllä noudattaa visuaalista asettelua ruudulla ja on myös ruudunlukuohjelman käyttäjän kannalta intuitiivisempi. Jos selailujärjestys on määritetty TABINDEX-attribuuteilla, näistä tulee luopua sivuston uudistuksen yhteydessä ja määrittää elementtien järjestys oikeaksi HTML-koodissa. 5. Informaatiota vain visuaalisesti Jonkin verran ongelmia. Lomakekentän pakollisuutta osoittava merkki on saavutettavissa vain visuaalisesti. Korjausehdotus: Pakolliset kentät tulee värillä merkitsemisen lisäksi ilmoittaa tekstimuodossa. Pakollisen kentän merkkinä oleva tähti olisi hyvä korvata sanalla "pakollinen" tai jos käytetään kuvatiedostoa, sen ALT-tekstivastineeksi HTML-koodiin tulee määrittää kuvaus "pakollinen". 6. Automaattisesti käynnistyvän äänen pysäytys Testauksessa ei havaittu ongelmia. 7. Kontrasti Runsaasti ongelmia. Kuvien päällä olevien tekstilaatikoiden taustan ja tekstin kontrastit ovat monin paikoin riittämättömät. Esimerkiksi harmaata taustaa vasten oleva sininen teksti kuvan päällä ei täytä kontrastivaatimuksia eikä myöskään vaaleansinisellä pohjalla oleva valkoinen teksti. Kaikissa kuvien päällä olevissa teksteissä ei ole lainkaan tummennettua taustaa, jolloin teksti erottuu kuvan päältä monin paikoin hyvin huonosti. Esimerkki tästä on kohta palvelut, jossa oleva kuva vaihtelee, ja esimerkiksi poroja esittävän kuvan päällä oleva teksti erottuu hyvin huonosti. Kuvassa on valkoinen teksti, jonka taustana on luminen maa.

10 10 Palautelomakkeen ääriviivat ovat hyvin ohuita ja vaaleanharmaita, kontrastit ovat riittämättömät. Kohdassa ajankohtaista olevassa linkkiluettelossa Oikopolut tekstin ja taustan välinen kontrasti on riittämätön. Korjausehdotus: Lisätään tekstin ja taustavärin kontrastia, kunnes se täyttää WCAG-standardin vaatimukset. Sopivan väriyhdistelmän määrittämisessä auttaa esimerkiksi WebAIM:in työkalu, joka sijaitsee osoitteessa 8. Tekstin koko Tekstin kokoa ei voi muuttaa selaimen asetuksista. Korjausehdotus: Varmistetaan, että leipätekstin oletuskoko on riittävän suuri ja poistetaan tekstin koon kiinteä määritys, jotta käyttäjät voivat muuttaa tekstin kokoa vapaasti selaimen asetusten kautta. Samalla varmistetaan, ettei sivun asettelu ja ymmärrettävyys kärsi tekstin koon muuttamisen seurauksena. 9. Saavutettavuus näppäimistöllä Kriittinen ongelma. Sivun päävalikko ei ole saavutettavissa näppäimistöltä. Valikon saa auki vain hiiren avulla siirtämällä hiiren kohdistimen valikkoalueelle. Valikon toimimattomuus näppäimistöltä muodostaa kriittisen ongelman, koska se estää ruudunlukuohjelman käyttäjän pääsyn kaikkiin sivuston osioihin. Karttojen tarjoamaan informaatioon ei ole pääsyä näppäimistöltä. Kartat on toteutettu visuaalisesti Korjausehdotus: Jos toiminnallisuuksia on toteutettu räätälöidyillä komponenteilla, jotka eivät ole saavutettavissa näppäimistöllä, kyseiset komponentit tulee korvata HTMLoletuskomponenteilla tai muilla esteettömillä vaihtoehdoilla. Näitä voi etsiä esimerkiksi Kanadan valtion kokoamasta saavutettavien käyttöliittymäkomponenttien kirjastosta osoitteessa Ohjeita räätälöityjen komponenttien saavutettavuuden varmistamiseen saa myös tästä blogikirjoituksesta: Yleisesti suunnittelussa tulee suosia HTML-oletuskomponentteja, jotka toimivat esteettömästi hyvin laajalla määrällä erilaisia laite- ja ohjelmistoympäristöjä. Visuaalisiksi suunnitelluille toiminnoille tulee tarjota myös tekstipohjainen vaihtoehto.

11 Näppäimistön ansa Testauksessa ei havaittu ongelmia. 11. Automaattisesti käynnistyvän median hallinta Testauksessa ei havaittu ongelmia. 12. Välkkyvä sisältö Testauksessa ei havaittu ongelmia. 13. Hyppylinkki pääsisältöön Hyppylinkki pääsisältöön puuttuu. Merkittävä ongelma etenkin, koska sivuston otsikointi on puutteellista, minkä vuoksi ruudunlukuohjelman käyttäjä ei voi päästä sivun pääsisältöön luotettavasti siirtymällä suoraan ensimmäiseen otsikkoon. Kaikkia visuaalisesti otsikoiksi muotoiltuja tekstejä ei ole määritelty HTML-koodiin otsikoiksi, ks. kohta 3. Korjausehdotus: Lisätään sivujen HTML-koodin ensimmäiseksi sisältöelementiksi esimerkiksi yhden kuvapisteen kokoinen läpinäkyvä kuvatiedosto, jonka ALT-attribuutiksi asetetaan Siirry sisältöön. Näin kyseinen linkki ei ole näkyvissä visuaalisesti, mutta ruudunlukuohjelman käyttäjä voi sen avulla ohittaa sivun toistuvat navigaatioelementit. 14. Sivun nimi <title> Jonkin verran ongelmia. Joissakin tapauksissa sivun nimi ei vastaa täysin pääotsikkoa. Esim. sivun Lastenvalvoja pääotsikko on lastenvalvojan palvelut. Kohdassa Rovaniemen ja Ranuan velkaneuvonta sivun nimi on vain Talous- ja velkaneuvonta. Korjausehdotus: Tarkistetaan, että kullakin sivulla on yksilöllinen <title>-elementti HTMLkoodissa ja että tämä vastaa sivun sisältöä. 15. Selkeät linkit Melko paljon ongelmia. Sivustolla on etenkin etusivulla paljon kuvalinkkejä, joille ei ole tekstivastinetta. Ruudunlukuohjelma lukee nämä linkit koodeina, eikä niiden merkitys selviä sokealle tai vaikeasti heikkonäköiselle henkilölle. Sivustolla on epäinformatiivisesti nimettyjä linkkejä, joiden merkitys ei selviä. Tällaisesta esimerkki on linkki "suurempi", jonka merkitys jää epäselväksi. Sivustolla on linkkejä, jotka avaavat selaimessa uuden välilehden ilman, että sitä kerrotaan käyttäjälle. Esimerkkejä tällaisista ovat etusivun linkki Lapin ammattikorkeakoulu sekä karttapalveluista löytyvät linkit, jotka niin ikään avaavat uudessa välilehdessä toisen internet-sivun ilman, että asiasta kerrotaan käyttäjälle. Korjausehdotus: Varmistetaan, että linkkien tarkoitus on selkeä. Erityistä huomiota tulee kiinnittää Lue lisää tyyppisiin geneerisiin linkkiteksteihin.

12 Näkyvä kohdistus Näkyvä kohdistus puuttuu. Korjausehdotus: Tarkistetaan, että näppäimistökohdistus on havaittavissa visuaalisesti sivulla. Ohjeita voi lukea esimerkiksi osoitteesta: /G Kielimääritys Testauksessa ei havaittu ongelmia. 18. Informaation määrä sivua kohti on riittävän pieni Runsaasti ongelmia. Informaation määrä sivua kohti on varsinkin etusivulla liian suuri. Tämä tekee sivustosta vaikeasti hahmotettavan sekä ruudunlukuohjelmaa käyttävien kannalta että ruudunsuurennusohjelmaa käyttävän henkilön kannalta. Myös kognitiivisista hahmotusvaikeuksista tai keskittymisvaikeuksista kärsiville informaation suuri määrä sivua kohden aiheuttaa ongelmia. Korjausehdotus: Jaetaan sivun sisältö mahdollisuuksien mukaan useampaan osaan joko omille alasivuilleen tai jäsennellään sisältö selkeämmin samalle sivulle. Huomioidaan myös, ettei yhdellä sivulla ole liian monimuotoista sisältöä rinnakkain, jolloin sisältöjen suhdetta toisiinsa on vaikea hahmottaa. 19. Sivupohjan rakenteet ja toiminnot on toteutettu niin, että ne noudattavat yleistä toimintatapaa Testauksessa ei havaittu ongelmia. 20. Sivupohjan perusosat (sisältö, navigaatio, muut sisäiset linkit) ovat erotettavissa ja eroavat visuaalisesti riittävästi toisistaan. Testauksessa ei havaittu ongelmia 21. Sivun oleellisin sisältö tai muut toiminnot ovat sivun yläosassa, jotta pystysuuntaista vierittämistä voidaan mahdollisuuksien mukaan välttää. Melko paljon ongelmia. Koska sivustolla olevan informaation määrä on suuri, joutuu sivua vierittämään pystysuunnassa. Sivukartta on toteutettu dynaamisesti niin, että se avautuu sivun alaosaan, mikä entisestään lisää sivun pystysuuntaisen vierittämisen tarvetta. 22. Navigaatiolinkkitekstit vastaavat kohdesivujen sisällön pääotsikoita. Jonkin verran ongelmia. Sivujen pääotsikot eivät aina vastaa täysin navigaatiolinkkitekstejä. Esimerkiksi navigaatiolinkistä Terveyspalvelut avautuvan sivun pääotsikko on Sähköiset palvelukanavat. Navigaatiolinkistä Asiointi avautuvan sivun pääotsikko on Verkkoasiointi. Korjausehdotus: Tarkistetaan, että otsikoiden ja linkkien vastaavuus toteutuu.

13 Lomakkeiden otsikot ja painikkeet ovat riittävän suuria. Testauksessa ei havaittu ongelmia. 24. Lomake-elementti ja sen otsake ovat hahmotettavissa yhdeksi kokonaisuudeksi. Testauksessa ei havaittu ongelmia. 25. Suurikontrastinen tila Jonkin verran ongelmia. Lomakkeiden painikkeet eivät näy suurikontrastisessa tilassa. Korjausehdotus: Muutetaan ongelmia aiheuttavat käyttöliittymä elementit sellaisiin, että ne ovat hahmotettavissa myös suurikontrastisessa tilassa. Tarkistetaan myös navigoinnin ja otsikoiden määritykset suurikontrastisen tilan kannalta. Apuna voi käyttää Opera-selainta, jossa voi tarkastella helposti sivua suurikontrastisessa tilassa. 4.2 Käyttötapaukset Testauksessa sivuston käytettävyyttä arvioitiin myös kahden ns. käyttötapauksen näkökulmasta. Ensimmäiseksi käyttötapaukseksi valittiin kuljetuspalveluiden hakeminen. Tarkoituksena oli selvittää, miten helppoa tai vaikeaa kuljetuspalveluiden hakeminen kotikunnalta on kunnan verkkosivujen kautta. Tällöin huomiota kiinnitettiin siihen, miten helposti vammaispalveluiden yhteystiedot löytyvät, löytyvätkö tarvittavat hakulomakkeet verkosta, ja jos löytyvät, ovatko ne helposti vai vaikeasti löydettävissä. Toinen käyttötapaus liittyy terveyspalveluihin. Siinä selvitettiin, miten helposti internet-sivun käyttäjä löytää tiedon siitä, mikä on hänen asuinpaikkaansa lähimpänä oleva terveysasema sekä siihen, miten helposti internet-sivuilta löytyy terveyspalveluiden yhteystietoja ylipäänsä Kuljetuspalveluiden hakeminen Kuljetuspalveluiden hakulomake sivustolta löytyy varsin helposti samoin kuin puhelinnumero, josta kyydin voi tilata. Myös vammaispalveluohjaajien yhteystiedot löytyvät sivulta helposti. Kuljetuspalveluhakemusta ei voi lähettää sähköisesti, vaan se pitää tulostaa, täyttää ja toimittaa paperiversiona kunnalle.

14 Perusterveydenhuollon toimipaikat Ruudunlukuohjelman käyttäjän on mahdotonta omatoimisesti selvittää, mihin terveystiimiin hän kuuluu. Asian voi tarkistaa karttapalvelusta, joka on kuitenkin toteutettu sokeiden ja vaikeasti heikkonäköisten tarvitseman ruudunlukuohjelman käyttäjälle esteellisesti ja sen tarjoama informaatio on saavutettavissa ainoastaan visuaalisessa muodossa. Terveystiimien puhelinnumerot sivulta löytyvät, joten oman tiimin selvittäminen onnistunee puhelimitse. 5. Tietoja testausympäristöstä Esteettömyyskatsauksessa huomioidaan sivuston teknisen toteutuksen esteettömyys, sivujen rakenne sekä sisällön saavutettavuus ja ymmärrettävyys erikseen määriteltyjen 25 keskeisen tekijän osalta. Testaus perustuu WCAG 2.0 saavutettavuusstandardiin,, jota täydentää testaajien monivuotinen ja laaja henkilökohtainen kokemus verkkopalvelujen esteettömyydestä ja saavutettavuudesta. Testauksen tukena käytetään myös Wave Web Accessibility Tool Firefoxlaajennusta ( sekä Achecker-verkkopalvelua ( joka tarkistaa koneellisesti HTML-koodin esteettömyyden. Näiden menetelmien yhdistelmän avulla testauksessa voidaan tarkistaa sekä sivuston tekninen esteettömyys että sen todellinen saavutettavuus eri erityisryhmien kannalta. 6. Testauskriteerit 1. Tekstivastineet Kaikilla sivuston kuvilla ja muilla visuaalisilla elementeillä tulee olla tekstimuotoinen vastine, joka välittää sokeiden ja vaikeasti heikkonäköisten käyttämälle ruudunlukuohjelmalle näytöllä visuaalisesti esitetyn sisällön. WCAG: Ei-tekstuaalinen sisältö: Kaikki käyttäjälle esitettävä ei-tekstuaalinen sisältö on varustettu saman tarpeen täyttävällä tekstivastineella. 2. Lomakkeet Kaikilla sivuston lomakkeiden elementeillä tulee olla tekstimuotoinen kuvaus, joka kertoo ruudunlukuohjelman käyttäjälle, millainen kenttä, painike tai muu elementti on kyseessä. WCAG: Otsikot ja nimilaput: Otsikot ja nimilaput kuvailevat aiheen tai merkityksen.

15 15 3. Otsikot Looginen ja hierarkkisesti johdonmukainen otsikointi auttaa sivujen rakenteen hahmottamisessa ja jäsentämisessä. Otsikoiden avulla ruudunlukuohjelmaa käyttävät näkövammaiset voivat myös siirtyä helposti sivun osioista toiseen. Selkeä otsikointi auttaa myös sisällön hahmottamisessa ja jäsentämisessä erityisesti käyttäjiä, joilla on kognitiivisia ongelmia. WCAG: Informaatio ja suhteet: Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä. 4. Selailujärjestys näppäimistöllä Kytkinohjaimia ja muita motorisia apuvälineitä tai ruudunlukuohjelmaa käyttävien kannalta on tärkeää, että sivulla esitettävän sisällön ja käyttöliittymäelementtien selailujärjestys näppäimistöllä on looginen ja intuitiivinen. Sivun rakenteen ja toimintojen pitäisi olla hahmotettavissa myös ilman visuaalista käyttöliittymää. Selailujärjestyksen tulee noudattaa eri osioiden visuaalista asettelua ruudulla erityisesti kytkinohjausta käyttävien kannalta. WCAG: Fokusjärjestys: Jos verkkosivu voidaan navigoida järjestyksessä ja navigointijärjestykset vaikuttavat merkitykseen tai toimintoon, fokusoitavissa olevat komponentit vastaanottavat fokuksen merkityksen ja toimivuuden säilyttävässä järjestyksessä. (Taso A) 5. Informaatiota vain visuaalisesti Sokeat ja vaikeasti heikkonäköiset eivät tarkastele verkkopalveluja visuaalisesti, joten merkityksiä ei saa välittää esimerkiksi vain värin avulla. Samoin esimerkiksi käyttäjälle annettavissa toimintaohjeissa ei saa olla aistinvaraiseen hahmottamiseen liittyviä piirteitä, kuten valitse haluamasi vaihtoehto oikealta tms. WCAG: Aistinvaraiset ominaispiirteet: Ohjeet sisällön ymmärtämiseksi ja hallitsemiseksi eivät riipu yksinomaan komponenttien aistinvaraisista ominaispiirteistä kuten muoto, koko, visuaalinen sijainti, suunta tai ääni. 6. Automaattisesti käynnistyvän äänen pysäytys Sivulla automaattisesti käynnistyvä ääni on erityisen häiritsevää käyttäjille, joilla on keskittymisvaikeuksia samoin kuin ruudunlukuohjelman käyttäjille, jotka tarkastelevat sivua puhesyntetisaattorin avustuksella. WCAG: Audion kontrollointi: Jos jokin ääni verkkosivulla soi automaattisesti kauemmin kuin kolme sekuntia, käytettävissä on joko mekanismi äänen keskeyttämiseen tai pysäyttämiseen tai mekanismi äänen voimakkuuden säätämiseen koko järjestelmän äänenvoimakkuuden säädöstä riippumatta.

16 16 7. Kontrastit Riittävän suuri tekstin ja sen taustavärin välinen kontrasti takaa helpon luettavuuden erityisesti heikkonäköisille käyttäjille. WCAG: Kontrasti (minimi): Tekstin visuaalisella esityksellä ja tekstiä esittävissä kuvissa kontrastisuhde on vähintään 4,5:1. 8. Tekstin koko Useat heikkonäköiset sekä ns. ikänäön aiheuttamista haitoista kärsivät käyttäjät valitsevat mielellään Internet-selaimen valikoista käyttöönsä suuremman tekstin koon. Tämä ei ole mahdollista, jos tekstin koko on määritetty kiinteäksi sivustolla. WCAG: Tekstin koon muuttaminen: Lukuun ottamatta tekstitystä ja tekstiä esittäviä kuvia tekstin kokoa voidaan muuttaa ilman avustavaa teknologiaa aina 200 prosenttiin asti ilman sisällön tai toiminnallisuuden menettämistä. 9. Saavutettavuus näppäimistöllä Sivuston koko käyttöliittymän ja sisällön tulee olla saavutettavissa näppäimistöllä. Tämä mahdollistaa sivujen käytön muun muassa ruudunlukuohjelmilla ja askellusohjaukseen perustuvilla motorisilla apuvälineillä kuten erilaisilla kytkinohjaimilla. WCAG: Näppäimistö: Kaikki sisällön toiminnallisuus on hallittavissa näppäimistörajapinnan välityksellä ilman vaatimusta yksittäisten näppäinpainallusten erityisestä ajoittamisesta, paitsi kun alla oleva toiminnallisuus vaatii syötettä, joka riippuu käyttäjän liikkeiden polusta eikä vain päätepisteistä. 10. Näppäimistön ansa Sivustolla ei saa olla elementtejä, joissa selaimen kohdistus jää jumiin eikä pelkästään perusnäppäimiä käyttämällä voi siirtyä elementistä pois. Ongelma koskee askellusohjaukseen perustuvien motoristen apuvälineiden sekä ruudunlukuohjelman käyttäjiä. WCAG: Ei näppäimistöä -ansa: Jos näppäimistön fokus voidaan siirtää sivun komponentille näppäimistörajapintaa käyttämällä, niin fokus voidaan siirtää myös pois kyseiseltä komponentilta pelkästään näppäimistörajapintaa käyttämällä. Mikäli tämä vaatii enemmän kuin muuttumattomia nuoli- tai tab-näppäimiä tai muita standardinmukaisia poistumismenetelmiä, käyttäjälle neuvotaan menetelmä fokuksen poissiirtämiseksi. 11. Automaattisesti käynnistyvän median hallinta Käyttäjällä tulee olla mahdollisuus pysäyttää esimerkiksi erilaiset kuvakarusellit tai sivulla automaattisesti toistettavat animaatiot tai videoleikkeet. Teknisesti itsestään päivittyvä sisältö voi

17 17 aiheuttaa ongelmia ruudunlukuohjelmien ja motoristen apuvälineiden käyttäjille, mutta automaattisesti päivittyvä sisältö on hankala myös käyttäjille, joilla on kognitiivisia ongelmia kuten keskittymisvaikeuksia. WCAG: Keskeytä, pysäytä, piilota: Kaikki seuraavat pitävät paikkansa liikkuvalle, vilkkuvalle, vierivälle tai automaattisesti päivittyvälle informaatiolle: 12. Välkkyvä sisältö Verkkosivuilla ei saa olla välkkyvää sisältöä, joka tunnetusti voi aiheuttaa sairaskohtauksia. WCAG: Kolme välähdystä tai alle -raja-arvo: Verkkosivut eivät sisällä mitään, joka milloinkaan välähtäisi useammin kuin kolme kertaa sekunnissa, tai välähdys on alle yleisen välähdyksen ja punaisen välähdyksen raja-arvojen. 13. Hyppylinkki pääsisältöön Jos ruudunlukuohjelman ja puhesyntetisaattorin käyttäjälle ei tarjota mahdollisuutta siirtyä suoraan pääsisältöön, jokaisen uuden sivun avaamisen jälkeen joutuu selaamaan sivujen yläosassa olevien toistuvien navigointielementtien läpi, mikä on varsin työlästä ja heikentää sivuston käytettävyyttä merkittävästi. Jokaisen sivun alussa tulee olla ns. hyppylinkki, joka osoittaa suoraan saman sivun pääasialliseen sisältöön. WCAG: Ohita lohkot: Tarjolla on mekanismi sellaisten sisällön lohkojen ohittamiseen, jotka toistuvat useilla verkkosivuilla. 14. Sivun nimi <title> Sivun yksilöllinen ja kuvaava nimi on erityisen tärkeä ruudunlukuohjelman käyttäjille, sillä tämä informaatio on ensimmäinen, jonka puhesyntetisaattori lukee sivua avatessa. Näin käyttäjä saa heti tiedon siitä, että on avannut oikean sivun, mikä muutoin sisältöä visuaalisesti tarkastelematta voi olla vaikea selvittää. WCAG: Sivuotsikot: Verkkosivuilla on otsikot, jotka kuvailevat aiheen tai merkityksen. 15. Selkeät linkit Selkeät ja yksilölliset linkkitekstit ovat erityisen tärkeitä ruudunlukuohjelman käyttäjille, jotka usein navigoivat sivulla liikkumalla linkistä toiseen. <WCAG: Linkin tarkoitus (kontekstissa): Jokaisen linkin tarkoitus voidaan selvittää yksin linkkitekstistä tai linkkitekstistä yhdessä ohjelmallisesti selvitettävissä olevan linkkikontekstin avulla, paitsi tilanteissa, joissa linkki olisi yleisesti ottaen epäselvä käyttäjille.

18 Näkyvä kohdistus Sivulla kulloinkin kohdistettuna oleva elementti tulee olla visuaalisesti merkitty esimerkiksi tummemmalla reunuksella. Tämä auttaa sekä heikkonäköisiä että kognitiivisista ongelmista kärsiviä havaitsemaan, mikä käyttöliittymän osa tai linkki on kohdistettuna. WCAG: Näkyvä fokus: Kaikilla näppäimistöltä käytettävillä käyttöliittymillä on käyttömoodi, jossa näppäimistön fokusindikaattori on näkyvissä. 17. Kielimääritys Jos sivulle ei ole tehty lainkaan kielimääritystä tai se on virheellisesti määritetty, ruudunlukijan käyttämä puhesyntetisaattori lukee sivun oletuskielellään, joka on usein englanti. Tämä tekee sivun sisällön ja käyttöliittymän ymmärtämisen käytännössä mahdottomaksi ruudunlukijan käyttäjälle. Perustason käyttäjät eivät myöskään usein osaa vaihtaa syntetisaattorin käyttämää kieltä. WCAG: Sivun kieli: Jokaisen verkkosivun oletusarvoinen luonnollinen kieli voidaan selvittää ohjelmallisesti. 18. Informaation määrä sivua kohti on riittävän pieni. Jos yksittäisellä sivulla on runsaasti informaatiota tai sisältö on hyvin monimuotoista, erityisryhmiin kuuluville käyttäjille aiheutuu erilaisia hahmotusongelmia. Kognitiivisesti tällainen sivu on vaikeasti hallittava ja erilaisten sisältöjen suhteiden ymmärtäminen voi olla liian vaativaa. Myös suurennusohjelmaa käyttävien heikkonäköisten on vaikea toimia runsaasti sisältöä ja toiminnallisuuksia sisältävällä sivulla. Samoin ruudunlukuohjelman kautta sivun rakenteen ymmärtäminen on haastavaa, jos sisältöä on runsaasti. 19. Sivupohjan rakenteet ja toiminnot on toteutettu niin, että ne noudattavat yleistä toimintatapaa. Erityisesti oppimisvaikeuksista ja muistihäiriöistä kärsivien on vaikea opetella uudenlaisia käyttöliittymiä ja toimintatapoja. Siksi verkkopalveluissa kannattaa käyttää mahdollisimman perinteisiä ratkaisuja esimerkiksi navigoinnissa sekä erilaisissa vuorovaikutteisissa toiminnoissa. 20. Sivupohjan perusosat (sisältö, navigaatio, muut sisäiset linkit) ovat erotettavissa ja eroavat visuaalisesti riittävästi toisistaan. Sivujen eri osioiden visuaalinen ero auttaa monia käyttäjiä hahmottamaan esimerkiksi pääsisällön helpommin. Esimerkiksi navigointiosion erilaisesta taustaväristä on apua heikkonäköisten ohella myös kognitiivisista ongelmista kärsiville.

19 Sivun oleellisin sisältö tai muut toiminnot ovat sivun yläosassa, jotta pystysuuntaista vierittämistä voidaan mahdollisuuksien mukaan välttää. Jatkuva pystysuuntainen sivun vierittäminen voi tuntua työläältä sekä suurennusohjelmaa käyttävien että motorisista ongelmista kärsivien osalta. 22. Navigaatiolinkkitekstit vastaavat kohdesivujen sisällön pääotsikoita. Ruudunlukuohjelmien käyttäjien ja kognitiivisista ongelmista kärsivien kannalta on tärkeää, että avautuvan sivun otsikko vastaa linkkiä, josta sivu avattiin. Myös sivun nimi (title) tulee olla yhdenmukainen pääotsikon kanssa. 23. Lomakkeiden otsikot ja painikkeet ovat riittävän suuria. Riittävän suurista painikkeista on hyötyä erityisesti motorisista ongelmista kärsiville. 24. Lomake-elementti ja sen otsake ovat hahmotettavissa yhdeksi kokonaisuudeksi. Tämä edesauttaa sekä heikkonäköisiä että lukemisesteisiä ja muista kognitiivisista ongelmista kärsiviä hahmottamaan lomakkeen rakennetta ja helpottaa sen täyttämistä. 25. Suurikontrastinen tila Useat heikkonäköiset asettavat joko koko käyttöjärjestelmään tai vain Internet-selaimeen ns. suurikontrastisen näyttötilan helpottamaan tietokoneen tai verkkopalvelujen käyttöä. Tässä näyttötilassa kaikki sisältö esitetään valkoisena tekstinä mustalla pohjalla maksimaalisen kontrastin saamiseksi ja valkean taustan häikäisyn vähentämiseksi. Verkkosivun ulkoasun ymmärrettävyys tulee varmistaa myös suurikontrastisessa tilassa, jotta esimerkiksi kaikki käyttöliittymäelementit ja lomakkeiden painikkeet jne. ovat näkyvissä.

20 20 7. Yhteystiedot Esteettömyyskatsauksen suorittivat Annanpura Oy:n esteettömyysasiantuntija Kimmo Sääskilahti sekä esteettömyystestaajat Jani Tuomola ja Elias Ståhlberg. Lisätietoja esteettömyyteen liittyvissä kysymyksissä: Kimmo Sääskilahti Esteettömyysasiantuntija Annanpura Oy Puh Annanpura Oy, Näkövammaisten liitto ry:n omistama yritys PL 41, IIRIS, Marjaniementie 74, HELSINKI puh. (09) , fax. (09) , GSM