1 / 9 ESTEETTÖMYYSTESTAUSRAPORTTI TAPAHTUMAKALENTERI JA BLOGI / THL.FI 10.3.2014
2 / 9 1 Johdanto Tässä asiakirjassa raportoidaan havainnot, jotka tehtiin Annanpura Oy:n suorittaman thl.fisivuston toimeksiannossa määriteltyjen osioiden esteettömyystestauksen yhteydessä sekä pyritään mahdollisuuksien mukaan tarjoamaan ratkaisuehdotuksia havaittuihin ongelmiin ja puutteisiin. Testauksen lähtökohdista ja periaatteista kerrotaan tarkemmin jäljempänä tässä asiakirjassa. 2 Toimeksianto Testattavat sivut> Tapahtumakalenteri> http: http://tapahtumakalenteri.thl.fi Blogi: http://blogi.thl.fi 3 Havainnot 3.1 Tapahtumakalenteri 3.1.1 Yhteenveto Tapahtumakalenterin kaikki tapahtumat sisältävä luettelo on helposti selattavissa selkeiden otsikoiden ansiosta. Myös suoraan sisältöön siirtyminen sujuu hyvin otsikoinnin avulla. Tietojen saavutettavuutta olisi hyvä kuitenkin parantaa siten, että sivun HTML-koodissa sisältöosa esitettäisiin ennen vasemman reunan kalenteri- ja aiheosiota, jolloin ruudunlukijan selailujärjestys muuttuisi käyttäjän kannalta loogisemmaksi.
3 / 9 3.1.2 Kriittiset käyttöä estävät ongelmat Varsinaisia tapahtumakalenterin käytön täysin estäviä ongelmia ei havaittu. 3.1.3 Käyttöä haittaavat ongelmat Kalenterinäkymän sijoitus Vasemman reunan kalenteritoiminnot on sijoitettu HTML-koodiin siten,että ne ilmenevät käyttäjälle ennen tapahtumien luetteloa selailtaessa sivua ruudunlukuohjelman avulla. Tästä voi aiheutua kohtuutonta vaivaa, mikäli käyttäjä ei huomaa siirtyä tapahtumien luetteloon otsikkotasolla navigoinnin avulla. Korjausehdotus: Muutetaan HTML-koodia siten, että varsinainen sisältöosa esitetään ennen kalenterinäkymää sivun selailujärjestyksessä. Pääotsikon vähäinen kontrasti Testauksen tukena käytetyn Achecker-verkkotyökalun mukaan sivun pääotsikossa on liian matala kontrastisuhde tekstin ja taustan värien osalta. Korjausehdotus: Lisätään tekstin ja taustan välistä kontrastia. 3.1.4 Muita puutteita Kaikkien tapahtumien luettelon lopussa olevaa navigointielementtiä voisi yksinkertaistaa. Nykyisellään se on käytettävyydeltään hankala, koska valintoja on tarpeettoman paljon ainakin testin aikaisessa tilanteessa. Koska tapahtumia on kaiken kaikkiaan vain 17, osiosta voisi poistaa mahdollisuuden määrittää, kuinka monta tapahtumaa yhdellä sivulla näytetään. Haittana on myös, että ruudunlukuohjelma lukee osan toimintojen ohjeteksteistä englanninkielisinä.
4 / 9 Korjausehdotus: Poistetaan ylimääräiset valinnat ja jätetään luettelon loppuun vain mahdollisuus siirtyä edelliselle tai seuraavalle sivulle. Myös tieto sivujen määrästä voidaan jättää mukaan. 3.1.5 Muita huomioita Vasemman sarakkeen kalenterinäkymän ja aiheluetteloiden yläpuolelle olisi hyvä sijoittaa lyhyt ohjeteksti, joka auttaisi ruudunlukuohjelmaa käyttäviä hahmottamaan, millaisesta elementistä on kyse. Esimerkiksi tekstit Valitse päivä kalenterista ja Valitse tapahtumien aihe tms. Voisivat olla mahdollisia vaihtoehtoja. Aiheluettelon yläpuolelle olisi hyvä sijoittaa myös otsikko, jolloin luetteloon olisi helppo siirtyä ruudunlukuohjelman toiminnoilla. 3.2 Blogi 3.2.1 Yhteenveto Blogikirjoitusten lukeminen ja niiden selailu on varsin esteetöntä. Esimerkiksi blogiarkistosta voi siirtyä ruudunlukuohjelmilla helposti tietyn ajanjakson kirjoituksiin. Suurimmat ongelmat liittyvät kommenttien jättämiseen, mikä ei ole lainkaan mahdollista ruudunlukuohjelman kautta ja on myös hankalaa heikkonäköisille tai vanhemmille käyttäjille, joilla on ikänäöstä aiheutuvia ongelmia. 3.2.2 Kriittiset käyttöä estävät ongelmat Kommentin jättäminen ei ole mahdollista Blogikirjoitukseen pääsee tekemään oman kommentin, mutta sen lähettäminen ei ole saavutettavissa. Lähetettäessä kommenttia avautuu aiemman sisällön päälle kelluva
5 / 9 sisältöelementti, mutta ruudunlukijan kohdistus ei siirry siihen. Ruudunlukijaa käyttävälle ei välity tietoa näytölle avautuneesta uudesta sisällöstä. Korjausehdotus. Muutetaan uusi sisältö avautumaan uudelle sivulle, joka korvaa selaimessa edellisen sivun. Näin ruudunlukijan kohdistus siirtyy uuteen sisältöön. Toinen vaihtoehto on varmistaa muulla tavoin, että kohdistus siirtyy avautuvaan uuteen sisältöön. Kommentin lähetyksen vahvistus Kommentin lähetyksen vahvistuksessa käytettävä CAPTCHA-kuvavarmennus ei ole lainkaan saavutettava ruudunlukuohjelmaa käyttäville. KuvavarmennusmenEtelmät ovat hankalia myös heikkonäköisille ja ikänäöstä aiheutuvista ongelmista kärsiville vanhemmille tietokoneen käyttäjille. Korjausehdotus: Korvataan visuaaliseen informaatioon perustuva varmennus semanttisen merkityksen ymmärtämiseen perustuvalla menetelmällä. Käyttäjältä voidaan kysyä esimerkiksi kysymyksiä kuten Mikä kuukausi on helmikuun ja huhtikuun välissä? tai Mikä luku seuraa lukua viisi? Aiheesta lisätietoja saa esimerkiksi täältä: http://www.456bereastreet.com/archive/200709/provide_an_accessible_alternative_if_you _must_use_a_captcha/ Vahvistuslomakkeen kenttiä ei myöskään ole nimetty siten, että ruudunlukuohjelma kertoisi käyttäjälle, mikä kenttä on kyseessä siirryttäessä suoraan lomakkeen kentästä toiseen. Positiivista kuitenkin on, että pakolliset kentät on merkitty tarvittavilla requiredattribuuteilla myös ruudunlukuohjelmia varten.
6 / 9 3.2.3 Käyttöä haittaavat ongelmat Otsikko kuvan päällä Sivun pääotsikko on asetettu kuvan päälle, mikä tekee sen lukemisesta vaikeaa heikkonäköisille. Asia on huomioitu myös W3C:n WCAG-ohjeistuksissa. Korjausehdotus: Sivun pääotsikko siirretään kuvabannerin ylä- tai alapuolelle tai muokataan banneria siten, ettei teksti ole suoraan kuvan päällä. Otsikkokuvasta puuttuu vaihtoehtoteksti Korjausehdotus: Myös sivun yläosan kuvabannerilla tulee olla sitä kuvaava vaihtoehto- eli ns. Alt-teksti. Pääotsikkoa ei ole merkitty Sivun yläosan kuvabannerin päälle sijoitetulla pääotsikolla ei ole asianmukaista <h1>määritystä. Korjausehdotus: Siirretään teksti pois kuvan päältä ja asetetaan sille oikea HTMLmääritys. Kommentin jättämisen linkkiteksti Jos blogikirjoitukseen ei ole vielä jätetty yhtään kommenttia, sivulla on ruudunlukijan käyttäjän kannalta epäselvä linkkiteksti ole ensimmäinen. Linkki ei ole ymmärrettävä esimerkiksi tarkasteltaessa kaikkia sivulla olevia linkkejä luettelomuodossa tai navigoitaessa sivulla linkkitasolla.
7 / 9 Korjausehdotus: Muutetaan linkin nimi selkeämmäksi, kuten Jätä ensimmäinen kommentti. 3.2.4 Muita puutteita Sivustolta ulos johtavat linkit Sivustolta pois johtavat ja uuteen ikkunaan avautuvat linkit olisi hyvä mainita käyttäjälle. Luetteloa THL:n MUISTA BLOGEISTA VOISI EDELTÄÄ OHJETEKSTI, JOKA KERTOO, ETTÄ LINKIT AVAUTUVAT UUTEEN SELAINIKKUNAAN. 3.2.5 Muita havaintoja Sivun alaosan navigaatioelementissä on samoja puutteita kuin tapahtumakalenterin kohdalla. 4 Tietoja esteettömyystestauksesta Testaus kattaa toimeksiannossa määriteltyjen osioiden esteettömyyden testauksen näkövammaisten käyttäjien osalta. Testauksessa huomioidaan sivuston teknisen toteutuksen esteettömyys, sivujen rakenne sekä sisällön saavutettavuus ja ymmärrettävyys. Sivustoa arvioidaan ensisijaisesti sokeiden ja vaikeasti heikkonäköisten käyttämien apuvälineohjelmistojen kannalta, minkä lisäksi selvitetään sivujen toimivuus heikkonäköisten hyödyntämien menetelmien avulla. Viimeksi mainittuihin lukeutuvat muun muassa selaimen tekstin koon tai väriasetusten valitseminen käyttäjälle parhaiten sopiviksi. Sivut testataan yleisimmillä näkövammaisten käyttämillä ruudunlukuohjelmilla, joita ovat Windows-ympäristössä Jaws ja NVDA sekä ios-ympäristössä Voiceover, jota käytetään Applen iphone- ja ipad-mobiililaitteissa. Testaus suoritetaan ohjelmistojen uusimmilla versioilla. Tästä johtuen vanhemmissa käyttöjärjestelmä- ja ohjelmaversioissa saattaa esiintyä ongelmia, jotka eivät ilmene testauksessa.
8 / 9 Ruudunlukuohjelma on apuvälinesovellus, joka tulkitsee visuaalisesti näytöllä esitettävän sisällön puheena käyttäjälle. Ruudulla olevien sisältöelementtien välillä voi liikkua näppäimistöä käyttämällä kohteesta toiseen, jolloin puhesyntetisaattori lukee ääneen aktiivisena olevan kohteen. Testaus perustuu WCAG 2.0 saavutettavuusstandardiin,, jota täydentää testaajien monivuotinen ja laaja henkilökohtainen kokemus verkkopalvelujen esteettömyydestä ja näkövammaisten apuvälineohjelmistoista. Testauksen tukena käytetään myös Wave Web Accessibility Tool Firefox-laajennusta (http://wave.webaim.org) sekä Acheckerverkkopalvelua (http://achecker.ca/checker/index.php), joka tarkistaa koneellisesti HTMLkoodin esteettömyyden. Näiden menetelmien yhdistelmän avulla testauksessa voidaan tarkistaa sekä sivuston tekninen esteettömyys että sen todellinen saavutettavuus näkövammaisten käyttäjien kannalta. 5 Käytetyt ohjelmistot ja laitteet Windows 7 Professional käyttöjärjestelmä Jaws 15 -ruudunlukuohjelma NVDA 2013.3 ruudunlukuohjelma Internet Explorer 11 -selain Firefox 27.0 -selain ios 7.0.6 /käyttöjärjestelmä Safari-selain / ipad Mini
9 / 9 6 Yhteystiedot Testauksen suoritti Annanpura Oy:n esteettömyysasiantuntija Kimmo Sääskilahti. Yhteystiedot: Kimmo Sääskilahti Sähköposti: kimmo.saaskilahti@annanpura.fi Puhelin: 050-4485232 Annanpura Oy, Näkövammaisten Keskusliitto ry:n omistama yritys PL 41, 00030 IIRIS, Marjaniementie 74, 00930 HELSINKI puh. (09) 3960 41, fax. (09) 3960 4433, GSM 050 4618 766 www.annanpura.fi