1 / 8 ESTEETTÖMYYSTESTAUSRAPORTTI ETUSIVU JA FINRISKI-LASKURI / THL.FI 17.3.2014
2 / 8 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> Etusivu: qa-thl.thl.fi Finriski-laskuri: http://qa-thl.thl.fi/finriski 3 Havainnot 3.1 Etusivu 3.1.1 Yhteenveto Tutkittu sivu on esteettömyydeltään varsin onnistunut ja myös käytettävyydeltään näkövammaisten kannalta kohtuullisen hyvä. Haasteena on sisällön suuri määrä ja sen jakaminen loogisiin kokonaisuuksiin, jotka olisivat myös ruudunlukuohjelman kautta hahmotettavissa. Sivun päänavigointipalkista avautuvat pudotusvalikot ovat saavutettavissa tutkituilla ruudunlukuohjelmilla, joten liikkuminen sivustolla on mahdollista. Heikkonäköisen suurennusohjelmaa ja hiirtä käyttävän näkövammaisen kannalta tällainen valikko on tosin
3 / 8 jossain määrin hankala, sillä osa avautuvista valintaluetteloista voi olla niin suuria etteivät ne mahdu avautuessaan kerralla suurennettuun näkymään ruudun osasta. Myös hiiren osoittimen vieminen oikeaan kohtaan navigointipalkkia valikon avaamiseksi voi olla vaivalloista. Osa alla mainituista puutteista saattaa johtua sivun keskeneräisyydestä, mutta ne on silti sisällytetty tähän raporttiin vastaisen varalle. 3.1.2 Kriittiset käyttöä estävät ongelmat Sivulla ei havaittu ongelmia, jotka estäisivät palvelun käytön täysin. 3.1.3 Merkittävät käyttöä haittaavat ongelmat Tutkitulla sivulla ei havaittu esteettömyyteen liittyviä merkittäviä ongelmia, jotka tekisivät sen käytöstä kohtuuttoman vaivalloista. 3.1.4 Muita havaittuja puutteita Navigointipalkin kontrasti vähäinen Päänavigointipalkin tekstin ja taustavärin välinen kontrastisuhde on melko matala, mikä aiheuttaa ongelmia heikkonäköisille käyttäjille samoin kuin ikänäöstä kärsiville vanhemmille tietokoneen käyttäjille. Palkki erottuisi taustasta selkeämmin, jos kontrasti olisi suurempi. Samoin palkin alapuolella olevan alueen kontrastia olisi hyvä lisätä, mikäli mahdollista. Tällä hetkellä siinä olevaa Terve SOS2014 tekstiä on hankala lukea. Puuttuvia vaihtoehtotekstejä
4 / 8 Sivunalaosan blogi-osion luettelossa on pari kuvaa, joilta puuttuu tekstimuotoinen kuvaus eli ns. Alt-teksti. Jos kyseessä ei ole sisällöltään olennainen kuva, alt-tekstin voi määrittää tyhjäksi, mutta jonkinlainen määritys tulee kuitenkin olla. Pääotsikko puuttuu Etusivulla ei ole käytetty lainkaan <h1>-tason pääotsikkoa. Otsikoiden rakenteen olisi hyvä olla looginen ja hierarkkinen alkaen päätasolta. Useat ruudunlukuohjelmaa käyttävät näkövammaiset navigoivat verkkosivuilla nimenomaan otsikoiden avulla siirtyen yleensä avatulla sivulla suoraan pääotsikkoon. Linkkien nimeäminen Linkkitekstien tulisi olla mahdollisimman selkeitä ja ymmärrettävissä kontekstista irrotettuinakin. Sivulla on esimerkiksi Kuukauden aihe osion lopussa linkkiteksti Tutustu aiheeseen, joka on epäselvä navigoitaessa sivulla linkkitasolla tai tarkasteltaessa sivun kaikkia linkkejä luettelona. Korjausehdotus: Muutetaan linkin teksti muotoon, joka kertoo selvemmin, millaiselle sivulle sitä kautta siirrytään. 3.1.5 Muita huomioita Tekstin koon muuttaminen Sivun yläosassa on painikkeet sivulla käytettävän tekstin koon muuttamiseen. Nykyisin näiden sijaan suositellaan tarjota käyttäjälle mahdollisuus määrittää itselleen sopiva fonttikoko selaimen asetuksien kautta. Tekstikoon muuttaminen painikkeilla on heikkonäköisen käyttäjän kannalta hankalaa, vaikka toiminto on suunniteltu heitä varten. Tutkitulla sivustolla tekstin kokoa voi muuttaa selaimen asetuksilla, joten tästä ei aiheudu ongelmia, mutta sivulla olevien painikkeiden tarpeellisuutta voi jatkossa harkita.
5 / 8 3.2 Finriski 3.2.1 Yhteenveto Tietojen syöttäminen laskuriin ja saatujen tulosten tarkasteleminen on periaatteessa teknisesti esteetöntä, mutta alla eritellyistä seikoista johtuen palvelun käyttö on ruudunlukuohjelman avulla varsin vaivalloista ja työlästä. Lisäksi tulokset on esitetty muodossa, jossa niiden hahmottaminen on hankalaa. Tärkein korjattava asia on tietojen syöttöön käytettävän lomakkeen kenttien nimeäminen. Lisäksi tulosten esitystapaa tulisi muokata siten, että ne ovat helpommin ymmärrettävissä. Samoin käyttäjälle tulisi kertoa, että tulokset ilmestyvät sisältöosaan sitä mukaa kun tietoja syötetään lomakkeeseen. 3.2.2 Kriittiset käyttöä estävät ongelmat Tutkitulta sivulta ei havaittu kriittisiä käytön täysin estäviä esteettömyyteen liittyviä ongelmia. 3.2.3 Merkittävät käyttöä haittaavat ongelmat Tuloksiin siirtyminen Tulokset avautuvat sivun sisältöosaan dynaamisesti laskuriin syötettyjen arvojen mukaisesti. Visuaalisesti sisältöä tarkasteleville tämä on varsin kätevää, mutta ruudunlukuohjelman kautta tarkasteltuna tilanne on hyvin erilainen. Käyttäjä ei saa tietoa siitä, että tulokset ovat ilmestyneet sivun sisältöosaan, vaan olettaa, että lomakkeen lopussa on tavanomainen painike, jolla tiedot lähetetään eteenpäin, minkä jälkeen tulokset avautuvat ruutuun. Lisäksi ongelmana on, että lomakkeessa navigoidaan tyypillisesti sarkain-painikkeella aktiivisesta elementistä kuten lomakekentästä tai painikkeesta toiseen, kunnes saavutaan lomakkeen loppuun. Yleensä viimeisenä on juuri esimerkiksi Lähetä-painike, josta
6 / 8 lomakealueen päättymisen tunnistaa. Tässä laskurissa liikkumalla sarkaimella eteenpäin käyttäjä hyppää helposti kokonaan tulosten ohi, sillä viimeisen lomakkeen elementin jälkeen seuraava aktiivinen elementti on Tulosta-linkki, joka sijaitsee sivun selailujärjestyksessä tulososion jälkeen. Tilannetta voisi parantaa jonkin verran lomaketta edeltävällä ohjetekstillä, joka kertoo, että tulokset ilmestyvät sivulle sitä mukaa kun tietoja syötetään lomakkeeseen. Toinen vaihtoehto on lisätä tulososioon WAI-ARIA-määrityksiä, jotka on tarkoitettu dynaamisen sisällön kuvaamiseen ruudunlukuohjelman käyttäjille. Näiden live region määritteiden ansiosta käyttäjä saisi samat tiedot puheena reaaliajassa kuin visuaalisesti ruutua tarkastelevat käyttäjät. WAI-ARIA live region määrityksistä voi lukea lisää esimerkiksi osoitteesta: http://juicystudio.com/article/wai-aria_live-regions_updated.php Lomakkeen kenttien nimeäminen Kaikkia tietojen syöttöön käytettävän lomakkeen kenttiä ei ole nimetty siten, että ruudunlukuohjelma kertoisi, mistä kentästä on kyse siirryttäessä sarkainpainikkeella suoraan kentästä toiseen, mikä on yleisin tapa täyttää lomakkeita. Kenttään täytettävän tiedon selvittämistä varten joutuu näkemään ylimääräistä vaivaa. Aiheesta voi lukea lisätietoja alla olevasta linkistä avautuvalta web-sivulta erityisesti osiosta Associate Form Labels with Controls : http://webaim.org/techniques/forms/ Lomakkeen kenttien välissä on myös linkki Finriski, jonka merkitys ei ole selvä käyttäjälle, joten se tulisi nimetä linkin käyttötarkoituksen mukaisesti. Tulosten esitys
7 / 8 Laskurin antamat tulokset ovat esteettömästi saavutettavissa, mutta ne on esitetty siten, että käyttäjän on hyvin vaikea hahmottaa, mihin esitetyt prosentit liittyvät, koska ruudunlukija ei kerro niille mitään kontekstia. Varsinainen tekstimuotoinen sisältö on helpommin ymmärrettävissä. Pelkät erilaiset prosenttilukemat eivät avaudu ilman visuaalista informaatiota. 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. 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.
8 / 8 5 Käytetyt ohjelmistot ja laitteet Windows 7 Professional käyttöjärjestelmä Jaws 15 -ruudunlukuohjelma NVDA 2014.1 ruudunlukuohjelma Internet Explorer 11 -selain Firefox 27.0 -selain 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