ESTEETTÖMYYSKATSAUS / KANSALLISMUSEO.FI Annanpura Oy /

Samankaltaiset tiedostot
Verkkosivustojen saavutettavuuden tarkistuslista

ESTEETTÖMYYSKATSAUS / LIPPU.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / HEL.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / JYVÄSKYLÄ.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / MIKKELI.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / JOENSUU.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / SEINÄJOKI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / TAMPERE.FI Annanpura Oy /

ESTEETTÖMYYSTESTAUSRAPORTTI / VIRTU.FI/ LOMAKKEET. Annanpura Oy /

ESTEETTÖMYYSKATSAUS / LAHTI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / OUKA.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / ROVANIEMI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / TURKU.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / KAJAANI.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / KUOPIO.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / PORI.FI Annanpura Oy /

ESTEETTÖMYYSKATSAUS / KOUVOLA.FI Annanpura Oy /

SAAVUTETTAVUUSRAPORTTI / finna.fi. Annanpura Oy /

ESTEETTÖMYYSTESTAUSRAPORTTI / THL. Annanpura Oy /

ESTEETTÖMYYSTESTAUSRAPORTTI ETUSIVU JA FINRISKI-LASKURI / THL.FI

ESTEETTÖMYYSTESTAUSRAPORTTI TAPAHTUMAKALENTERI JA BLOGI / THL.FI

Oulun kaupungin verkkosivuston saavutettavuuden arviointi (WCAG 2.0)

Espoo.fi-sivuston Saavutettavuus huomioitu -leima, auditointiraportti 2017

1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne

Mitä direktiivi käytännössä velvoittaa?

Käyttäjätestausraportti/ finna.fi. Annanpura Oy /

Saavutettavuuswebinaari

Saavutettavuustestausraportti

Muutama sana saavutettavuudesta Virpi Jylhä, Näkövammaisten liitto ry

ARVO - verkkomateriaalien arviointiin

Hyvinkään kaupungin verkkosivuston saavutettavuuden arviointi (WCAG 2.0)

Design with business impact

WCAG 2.1 Uudet kriteerit

Saavutettavuus > Tapio Haanperä Saavutettavuusasiantuntija tel

Selkokielisen sivuston saavutettavuuden arvioinnin heuristiikat

Selkokielisen sivuston saavutettavuuden arvioinnin heuristiikat

Ouka.fi aikamatka saavutettavuuteen

Ohjeita informaation saavutettavuuteen

vero.fi: Hankinnasta ylläpitoon Miten varmistaa saavutettavuus?

Hallintaliittymän käyttöohje

Yleistä. Suositukset. Rakenne

Oulun seudun ammattikorkeakoulu Aineistojen polku kirjastoon > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

#saavuta2017 Puheenvuoroja, kognitiivinen saavutettavuus Torstai , klo

Saavutettavat verkkosivut Miten ne tehdään?

Opintopolun esteettömyyshaasteet

Maanmittauslaitos.fi ja saavutettavuus

Digi arkeen -neuvottelukunnan kokous: saavutettavuusdirektiivi ja siihen liittyvä kansallinen lainsäädäntö Kommenttipuheenvuoro, Sami Älli

MAANMITTAUSLAITOS.FI JA SAAVUTETTAVUUS EMILIA HANNULA & KIRSI MÄKINEN

KÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016

Suomen Virtuaaliammattikorkeakoulu Kasvinsuojelu ruiskutustekniikka v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Arcada yrkeshögskola Hållbar utveckling v 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka templateaihio > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu VPN peli > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

ARVO - verkkomateriaalien arviointiin

Miten näkövammainen eroaa 'tavallisesta' käyttäjästä?

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE

Otakantaa.fi esteettömyysarviointi Veikko Savijoki, Heli Hintikka

Suomen virtuaaliammattikorkeakoulu Kestävää kehitystä etsimässä v. 0.9 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Savonia ammattikorkeakoulu Miten tilintarkastajan tulee toimia? v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Lahden, Pohjois Karjalan ja Kemi Tornion AMK Effective Reading > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Digitaalisen median tekniikat. Esteettömyys ja käytettävyys Harri Laine 1

Design with business impact

Suomen virtuaaliammattikorkeakoulu XML_mark_up_language > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu The XML Dokuments > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Verkkosisällön saavutettavuusohjeet 2.0: hyviä ohjeita monimuotoisen sisällön suunnitteluun ja arviointiin

Oulun ja Pohjois Karjalan ammattikorkeakoulu Virtuaalivasikan kasvatuspeli v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Villan keritseminen, karstaus ja kehrääminen v.0.5 > 80 % % % < 50 %

Suomen virtuaaliammattikorkeakoulu Boolen operaattorit v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

FlowIT virtaa IT-hankintoihin

Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka monivalinta aihio > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Digitaalisen median tekniikat. Esteettömyys ja käytettävyys

Virtuaaliammattikorkeakoulu Seksuaaliterveyden edistäminen v. 0.9 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Business in The EU v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Vetokoe v.0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

VirtuaaliAMK Työsopimuksella sovitaan pelisäännöt? V.1.0 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

VirtuaaliAMK Tilastollinen päättely > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT

Suomen virtuaaliammattikorkeakoulu Tapauskertomus tietojärjestelmähanke > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Verkkopalveluiden saavutettavuus

Suomen virtuaaliammattikorkeakoulu Teknillinen mekanikka fem tutorials > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Tampereen ammattikorkeakoulu Verkkokeskustelu > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Tietojohtaminen rakennus prosesseissa > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikoulu Kaasutustekniikka v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Diakonia ammattikorkeakoulu Päihdetyön historia > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

ARVO - verkkomateriaalien arviointiin

Evaluointidokumentti

WCAG 2.0 -kriteerien arviointiheuristiikat

Suomen virtuaaliammattikorkeakoulu Vedenpuhdistus > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

VirtuaaliAMK Tietolaari > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Saavutettavuus ei ole vain kriteerien noudattamista

Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka: Voima ja sen komponentit > 80 % % % < 50 %

Suomen virtuaaliammattikorkeakoulu Turvallisuus turpeen tuotannossa v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Helsingin ammattikorkeakoulu Stadia Verkkosivujen silmäiltävyys ja selailtavuus v. 0.9 > 80 % % % < 50 %

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013

Suomen virtuaalikylä Virtuaalikylä v. 0.9 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

VirtuaaliAMK Työhyvinvointi > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

Tapaaminen ESOK-verkoston ja opiskelijajärjestöjen kanssa. Markus Rahkola ja Sanna Juutinen, VM,

Transkriptio:

ESTEETTÖMYYSKATSAUS / KANSALLISMUSEO.FI Annanpura Oy / 2.5.2016

2 SISÄLTÖ 1. JOHDANTO... 3 2. TOIMEKSIANTO... 3 3. HAVAINNOT... 4 SIVUSTON ESTEETTÖMYYDEN YLEINEN TASO ON HYVÄ... 4 SUURIMMAT ONGELMAT:... 4 3.1 TAULUKKO 25 TESTAUSKRITEERISTÄ... 4 4. TIETOJA TESTAUSYMPÄRISTÖSTÄ... 8 5. TESTAUSKRITEERIT... 8 6. YHTEYSTIEDOT...14

3 1. Johdanto Tässä asiakirjassa raportoidaan havainnot, jotka tehtiin WWW.KANSALLISMUSEO.FI-sivuston 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: http://www.w3.org/tr/wcag20/ 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. 2. Toimeksianto Testattu sivusto: WWW.KANSALLISMUSEO.FI

4 3. Havainnot Sivuston esteettömyyden yleinen taso on hyvä Tutkitulla sivustolla ei havaittu kriittisiä ongelmia, jotka estäisivät sen käytön tietyltä käyttäjäryhmältä. Sivujen teknisessä toteutuksessa on jonkin verran puutteita, mutta ne eivät tee sivuston käytöstä kohtuuttoman hankalaa erityisesti koska sivua kohti olevan informaation määrä ei ole kovin suuri. Suurimmat ongelmat: - Sokeiden ja vaikeasti heikkonäköisten ruudunlukuohjelman käyttäjien on työlästä siirtyä sivun pääsisältöön sivun alusta puuttuvan hyppylinkin vuoksi - Sivuilla on muutamia linkkejä, joiden tekstin ja taustavärin välinen kontrasti ei ole riittävä, mistä johtuen linkkien tekstiä on vaikea lukea - Sivujen sisällön rakennetta on vaikea hahmottaa, koska otsikointi ei noudata vaatimusten mukaista loogista ja hierarkkista järjestystä Koneellisessa testauksessa käytettäessä Achecker-tarkistusohjelmaa (www.achecker.ca) etusivulta löytyi yhteensä 11 esteettömyyteen liittyvää virhettä tai ongelmaa. 3.1 Taulukko 25 testauskriteeristä Sivuston esteettömyyteen liittyvät ongelmat ja puutteet on listattu alla olevassa taulukossa aihealueittain testauskriteerien numeroinnin mukaisesti. 1. Tekstivastineet

5 2. Lomakkeet Jonkin verran ongelmia Sivuston hakukenttää ei ole nimetty. Palautelomakkeen kenttiä ei ole nimetty. Jos lomakkeen lähettää puutteellisin tiedoin, siitä tulee ilmoitus, jonka ruudunlukuohjelma lukee. Ruudunlukuohjelman kohdistus siirtyy virheilmoitukseen. Myös lomakekentän pakollisuutta ilmaiseva tähtimerkki on saavutettavissa ruudunlukuohjelmalla. Lomakkeessa on myös mainittu, että tähti tarkoittaa kentän pakollisuutta. Korjausehdotus: Tarkistetaan, että kaikilla lomakkeiden elementeillä on HTML-koodissa asianmukaiset label-, title- ja id-attribuutit, jotka kuvaavat kyseisten kenttien tarkoitusta. 3. Otsikot Jonkin verran ongelmia. Etusivulta puuttuu pääotsikko eli tason 1 otsikko. Otsikointi ei noudata hierarkkista järjestystä. Esimerkiksi etusivulla on vain tason 4 otsikoita ja alasivulla Olavinlinna vain tason 1 ja tason 5 otsikoita. 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. Selailujärjestys ei noudata täysin sivun visuaalista asettelua. Näppäimistökohdistus etenee sivun alusta ensin alaspäin vasemman reunaan navigaatioaluetta pitkin ja siirtyy vasta tämän jälkeen sivun yläreunaan oikealle sivun alusta. 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

6 6. Automaattisesti käynnistyvän äänen pysäytys 7. Kontrasti Joitakin ongelmia. Etusivulla kuvan päällä olevan tekstin kontrasti on riittämätön. Tosin kuvan tarkoitus on luultavasti dekoratiivinen. Sivulla Kansallismuseon museokaupat on otsikon Tutustu kansallismuseon museoiden tuotevalikoimaan linkkejä, joiden kontrasti on riittämätön. Teksti on vaaleanharmaata. 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:n työkalu, joka sijaitsee osoitteessa http://webaim.org/resources/contrastchecker/ 8. Tekstin koko Tekstin koko on muutettavissa selaimen asetuksista. 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 Hyppylinkki pääsisältöön puuttuu. 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. Aloitussivun nimi on nimeltään Etusivu. Nimi on epäinformatiivinen, koska se ei kerro, mistä

7 sivusta on kyse. Alasivujen nimet vastaavat pääotsikoita. Korjausehdotus: Tarkistetaan, että kullakin sivulla on yksilöllinen <title>-elementti HTMLkoodissa ja että tämä vastaa sivun sisältöä. 15. Selkeät linkit 16. Näkyvä kohdistus Näkyvä kohdistus on. 17. Kielimääritys Kielimääritys puuttuu. Korjausehdotus: Lisätään sivujen HTML-koodin header-osioon määritys lang=fi, jos sivusto on suomenkielinen. 18. Informaation määrä sivua kohti on riittävän pieni 19. Sivupohjan rakenteet ja toiminnot on toteutettu niin, että ne noudattavat yleistä toimintatapaa 20. Sivupohjan perusosat (sisältö, navigaatio, muut sisäiset linkit) ovat erotettavissa ja eroavat visuaalisesti riittävästi toisistaan. Jonkin verran ongelmia. Sivun vasemman laidan navigaatioaluetta ei ole erotettu muusta sisällöstä erilaisella taustavärillä. Korjausehdotus: Huolehditaan siitä, että esimerkiksi navigointi- ja sisältöosilla on erilainen taustaväri, jolloin ne on helppo erottaa toisistaan. Myös navigoinnin linkkien ulkoasun tulee olla erilainen kuin leipätekstin. 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. Jonkin verran ongelmia.

8 Navigaatiolinkkitekstit eivät aina vastaa täysin kohdesivun pääotsikkoa. Esimerkiksi sivulla Hämeen linna on linkki Kahvila- ja ravintolapalvelut, jonka kohdesivun päätosikko on Linnaravintola Brahe. Korjausehdotus: Tarkistetaan, että otsikoiden ja linkkien vastaavuus toteutuu. 23. Lomakkeiden otsikot ja painikkeet ovat riittävän suuria. 24. Lomake-elementti ja sen otsake ovat hahmotettavissa yhdeksi kokonaisuudeksi. 25. Suurikontrastinen tila 4. 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 (http://wave.webaim.org) sekä Achecker-verkkopalvelua (http://achecker.ca/checker/index.php), 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. 5. 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: 1.1.1 Ei-tekstuaalinen sisältö: Kaikki käyttäjälle esitettävä ei-tekstuaalinen sisältö on varustettu saman tarpeen täyttävällä tekstivastineella.

9 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: 2.4.6 Otsikot ja nimilaput: Otsikot ja nimilaput kuvailevat aiheen tai merkityksen. 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: 1.3.1 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: 2.4.3 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: 1.3.3 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.

10 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: 1.4.2 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. 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: 1.4.3 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: 1.4.4 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: 2.1.1 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ä.

11 WCAG: 2.1.2 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 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: 2.2.2 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: 2.3.1 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: 2.4.1 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: 2.4.2 Sivuotsikot: Verkkosivuilla on otsikot, jotka kuvailevat aiheen tai merkityksen.

12 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: 2.4.4 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. 16. 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: 2.4.7 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: 3.1.1 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.

13 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. 21. 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ä.

14 6. 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 E-mail: kimmo.saaskilahti@annanpura.fi Puh. 050 4485232 Annanpura Oy, Näkövammaisten liitto ry:n omistama yritys PL 41, 00030 IIRIS, Marjaniementie 74, 00930 HELSINKI puh. (09) 3960 41, fax. (09) 3960 4433, GSM 050 4618 766