1 / 12 ESTEETTÖMYYSTESTAUSRAPORTTI / VIRTU.FI/ LOMAKKEET Annanpura Oy / 31.8.2015
2 / 12 1 Johdanto... 3 2 Toimeksianto... 3 3 Havainnot... 4 3.1 Yhteenveto... 4 3.2 Kriittiset ongelmat... 4 3.3 Merkittävät ongelmat... 6 3.4 Muita puutteita... 8 3.5 Muita huomioita... 9 4 Jatkotoimenpiteet... 9 5 Tietoja esteettömyystestauksesta... 10 6 Käytetyt ohjelmistot ja laitteet... 11 7 Yhteystiedot... 12
3 / 12 1 Johdanto Tässä asiakirjassa raportoidaan havainnot, jotka tehtiin Annanpura Oy:n suorittaman virtu.fi verkkosivun Tukiperheen hoitopalkkio- ja kulukorvaus osion 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. Testauksen yhteydessä tehdyt havainnot on jaettu niiden merkityksen mukaisiin ryhmiin. Kriittisillä ongelmilla tarkoitetaan puutteita, jotka estävät sivuston käytön kokonaan tietyiltä osin. Merkittävät ongelmat ovat sellaisia, jotka tekevät tutkitun kohteen käytöstä tarpeettoman työlästä tai hankalaa. Muut havaitut puutteet ovat ongelmia, joiden korjaaminen edistää sivuston esteettömyyttä ja käytettävyyttä erityisryhmien kannalta. Lisäksi raporttiin on kirjattu muita palvelun käytettävyyteen liittyviä huomioita. 2 Toimeksianto Testattavat ominaisuudet ja toiminnallisuudet: -virtu.fi verkkosivun Tukiperheen hoitopalkkio- ja kulukorvauslaskelma lukeminen, http://www.sosiaalikollega.fi/virtu.fi/rovaniemi/tukiperhe -S7 etusivu lukeminen ja navigointi Omiin tietoihin -S7 Omien tietojen muokkaaminen -S7 Tukiperheen hoitopalkkio- ja kulukorvauslaskelman täyttäminen
4 / 12 3 Havainnot 3.1 Yhteenveto Tutkitun sivuston esteettömyyden yleinen taso on kohtalainen. Visuaalisen suunnittelun osalta palvelu on selkeä, mutta sivuston teknisessä toteutuksessa on muutamia merkittäviä puutteita, joiden johdosta osa toiminnoista ei ole kaikkien käyttäjäryhmien saavutettavissa. Tutkittujen sivujen ja lomakkeiden visuaalinen suunnittelu on pääosin selkeää ja siten helppokäyttöistä sekä heikkonäköisten että kognitiivisista ongelmista kärsivien kannalta. Suurimmat havaitut ongelmat liittyivät palvelun lomakkeeseen, jossa tarvittavien päivämäärien syöttäminen ei ollut mahdollista näppäimistön kautta. Tämän johdosta palvelun käyttö ei ole mahdollista niille erityisryhmiin kuuluville, jotka eivät eri syistä pysty käyttämään lainkaan hiirtä. Sen sijaan esimerkiksi omien tietojen syöttö ja omien tietojen muokkaaminen oli selkeästi ja teknisesti saavutettavasti toteutettu, joskin pieniä puutteita löytyi myös lomakkeiden teknisessä toteutuksessa. 3.2 Kriittiset ongelmat Päivämääriä ei voi syöttää näppäimistöllä Suurin tutkituilla sivuilla havaittu esteettömyyteen liittyvä ongelma on lomakkeen päivämäärien syöttämiseen valitussa menetelmässä. Avautuva kalenterinäkymä ei toimi lainkaan näppäimistöllä, minkä johdosta ruudunlukuohjelmaa käyttävät näkövammaiset tai askellusohjaukseen perustuvia motorisia apuvälineitä käyttävät eivät voi täyttää lomaketta tarkoitetulla tavalla lainkaan. Web-palvelujen kaiken sisällön ja toiminnallisuuksien tulee olla saavutettavissa myös näppäimistön kautta, mikä mahdollistaa yllä mainittujen apuvälineiden käytön sivujen selailussa ja vuorovaikutteisten toimintojen hallinnassa.
5 / 12 Avautuvan kalenteri-ikkunan käyttö on myös melko hankalaa heikkonäköisille sekä lievemmistä motorisista ongelmista kärsiville hiirtä käyttäville henkilöille. Korjausehdotus: Lisätään lomakkeeseen mahdollisuus syöttää päivämäärä myös näppäimistön kautta. 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ä. Puutteellinen kontrasti tukiperhelomakkeen kentän kuvauksen ja kentän taustavärin välinen kontrasti on riittämätön, vaaleanharmaa teksti valkoisella pohjalla ei erotu riittävästi, mistä johtuen tekstien lukeminen on vaikeaa heikkonäköisille käyttäjille. Korjausehdotus: Muutetaan tekstin väriä tummemmaksi. WCAG: 1.4.3 Kontrasti (minimi): Tekstin visuaalisella esityksellä ja tekstiä esittävissä kuvissa kontrastisuhde on vähintään 4,5:1. Sosiaalisen median linkit Laskelman esittelysivulla (http://www.sosiaalikollega.fi/virtu.fi/rovaniemi/tukiperhe) olevat sosiaalisen median linkit aiheuttavat suuria ongelmia käyttäjille, jotka navigoivat sivustolla näppäimistön avulla. Selaimen kohdistus jää kiertämään kehää kyseisissä linkeissä eikä käyttäjä pääse siirtymään varsinaiseen sisältöosaan navigoimalla esimerkiksi tavalliseen tapaan nuolinäppäimien avulla elementistä toiseen. Erityisen hankala tilanne on askellusohjaukseen perustuvan kytkinohjaimen käyttäjillä, sillä tätä apuvälinettä käytettäessä kohdistus siirtyy itsestään elementistä toiseen ja käyttäjä
6 / 12 valitsee kytkimen painiketta painamalla linkin, painikkeen tai muun elementin kohdistuksen ollessa oikeassa kohtaa. Sivun tämänhetkinen toteutustapa tarkoittaa, ettei tällaisen apuvälineen käyttäjä pääse siirtymään varsinaiseen sisältöosaan lainkaan. Muutenkin sosiaalisen median linkkien tapaiset elementit olisi hyvä sijoittaa mieluummin sivun alaosaan esimerkiksi sisältöosan loppuun, sillä sivun helppokäyttöisyyden kannalta suositellaan tärkeimpien osioiden sijoittamista sivun yläosaan. Tästä on hyötyä erityisesti kognitiivisista ongelmista kärsiville ja heikkonäköisille käyttäjille, joiden voi olla vaivalloista vierittää sivua alaspäin. Korjausehdotus: Siirretään sosiaalisen median linkit sivun alaosaan ja varmistetaan, ettei selaimen näppäimistökohdistus jää jumiin kyseiseen elementtiin. 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ä. 3.3 Merkittävät ongelmat Puuttuva hyppylinkki Sivuilta puuttuu WCAG-esteettömyysstandardin edellyttämä ns. hyppylinkki, joka auttaa ruudunlukuohjelmien käyttäjiä ohittamaan kaikilla sivuilla toistuvat navigaatioelementit ja siirtymään suoraan sivun pääsisältöön. Jos tätä mahdollisuutta siirtyä suoraan pääsisältöön ei tarjota, 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. WCAG: 2.4.1 Ohita lohkot: Tarjolla on mekanismi sellaisten sisällön lohkojen ohittamiseen, jotka toistuvat useilla verkkosivuilla.
7 / 12 Korjausehdotus: Kaikkien sivujen alkuun lisätään suoraan pääsisältöön ohjaava linkki ruudunlukuohjelman käyttäjiä varten. Linkki voidaan sijoittaa sivun sisältöosan HTMLkoodin ensimmäiseksi elementiksi esimerkiksi yhden pikselin kokoiseen läpinäkyvään kuvatiedostoon, jonka ALT-attribuutiksi asetetaan Siirry sisältöön. Tällä tavoin kyseinen linkki ei ole visuaalisesti näkyvissä, mutta ruudunlukuohjelman kautta sen käyttö onnistuu. Puuttuvia lomakekenttien nimiä Kaikille tutkittujen lomakkeiden kentille ei ole asetettu HTML-koodissa WCAG-standardin edellyttämiä nimiä label- ja title-attribuuttien avulla. Puuttuvat kenttien nimet tekevät lomakkeiden täytöstä tarpeettoman työlästä ruudunlukuohjelman käyttäjille. Kun kentät on nimetty asianmukaisesti, ruudunlukuohjelman käyttäjä voi navigoida suoraan kentästä toiseen tarvitsematta selvittää kentän viereisen tekstin avulla tietoa kentän tarkoituksesta. Pakolliset kentät voi merkitä ruudunlukuohjelman käyttäjiä varten myös REQUIREDattribuutilla, jolloin käyttäjä saa puhesyntetisaattorin kautta tiedon kentän pakollisuudesta. Korjausehdotus: Tarkistetaan, että kaikilla lomakkeiden kentillä on asianmukaiset label- ja title/id attribuutit HTML-koodissa. WCAG: 2.4.6 Otsikot ja nimilaput: Otsikot ja nimilaput kuvailevat aiheen tai merkityksen. Kuvilta puuttuu tekstivastineita Tutkituilla sivuilla oli jonkin verran kuvatiedostoja, joiden kohdalta puuttuu HTML-koodissa tekstimuotoinen vastine eli ns. ALT-teksti. Tämän tekstivastineen avulla myös ruudunlukuohjelman käyttäjälle voidaan välittää tieto sivulla olevien kuvien sisällöstä ja tarkoituksesta, vaikka käyttäjä ei itse pysty näyttöä visuaalisesti tarkastelemaan.
8 / 12 Kaikilla kuvilla tulee olla koodissa ALT_attribuutti, mutta mikäli kuva on luonteeltaan puhtaasti dekoratiivinen, tekstivastineen voi jättää tyhjäksi, jolloin ruudunlukuohjelma ohittaa sen. Korjausehdotus: Tarkistetaan, että kaikilla sivuston kuvatiedostoilla on HTML-koodissa asianmukainen tekstivastine. 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. 3.4 Muita puutteita Epätarkkaa otsikointia Sivuilla käytetty otsikointi ei vastaa täysin WCAG-standardin edellyttämää hierarkkista rakennetta. Kaikkien sivujen pääsisällön tulee alkaa tasolta <h1>, jollaista otsikkoa voi seurata vain toinen saman tason otsikko tai alemman <h2>-tason otsikko. Otsikoinnin hierarkkinen rakenne ja looginen järjestys on tärkeää erityisesti silloin kun tarjolla ei ole muita keinoja ohittaa sivun toistuvat navigaatiorakenteet ja siirtyä pääsisältöön. WCAG: 1.3.1 Informaatio ja suhteet: Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä. Korjausehdotus: Tarkistetaan, että kaikkien sivujen otsikointi on loogisesti jäsenneltyä siten että pääsisällön ensimmäinen otsikko on tasolla <h1>, jota seuraa joko toinen samantasoinen otsikko tai tätä alemman <h2> tason otsikko. Puuttuva kielimääritys
9 / 12 Varsinaisen lomakkeen sisältävältä sivulta puuttuu HTML-koodista sivun 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ä. Korjausehdotus: Lisätään sivujen HTML-koodin header-osioon määritys lang=fi, jos sivusto on suomenkielinen. WCAG: 3.1.1 Sivun kieli: Jokaisen verkkosivun oletusarvoinen luonnollinen kieli voidaan selvittää ohjelmallisesti. 3.5 Muita huomioita Runsaasti rivejä lomakkeessa Voisi olla hyvä harkita, onko kulukorvauslaskelman lomakkeessa tarpeen olla oletuksena nykyinen määrä tyhjiä rivejä. Näppäimistöllä lomaketta selaavan on melko työlästä siirtyä kaikkien lomakkeen kenttien läpi päästäkseen lomakkeen loppuun. Lomakkeeseen voisi kehittää toiminnon, jolla rivejä voisi lisätä dynaamisesti, jos oletuksena esitettävä pienempi määrä ei riitä käyttäjälle. 4 Jatkotoimenpiteet Suosittelemme kaikkien yllä eriteltyjen kriittisten ja merkittävien ongelmien korjaamista palvelun esteettömän käytön varmistamiseksi. Kyseiset havaitut puutteet eivät myöskään täytä kansainvälisen WCAG 2.0 esteettömyysstandardin vaatimuksia, joten ongelmat on korjattava, jos palvelun halutaan vastaavan standardia.
10 / 12 Myös muut raportissa mainitut havaitut puutteet on hyvä huomioida mahdollisuuksien mukaan palvelun saavutettavuuden parantamiseksi useiden erityisryhmien kannalta. 5 Tietoja esteettömyystestauksesta Testaus kattaa toimeksiannossa määriteltyjen osioiden esteettömyyden auditoinnin erityisryhmien osalta. Testauksessa huomioidaan aistivammaisten lisäksi erilaiset motoriset ongelmat ja kognitiiviset häiriöt. Testauksessa arvioidaan sivuston teknisen toteutuksen esteettömyys, sivujen rakenne sekä sisällön saavutettavuus ja ymmärrettävyys. Sivustoa arvioidaan 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 muiden menetelmien avulla. Viimeksi mainittuihin lukeutuvat muun muassa selaimen tekstin koon tai väriasetusten valitseminen käyttäjälle parhaiten sopiviksi. Sivuston helppokäyttöisyyttä ja selkeyttä arvioidaan eri vammaisjärjestöjen laatimien ohjeistuksien ja testausheuristiikkojen avulla. Sivut testattiin laajasti yleisimmillä näkövammaisten käyttämillä ruudunlukuohjelmilla, joita ovat Windows-ympäristössä Jaws ja NVDA. Lisäksi sivujen helppokäyttöisyyttä arvioitiin heikkonäköisten käyttäjien kannalta ZoomText-suurennusohjelman avulla. 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. Suurennusohjelma on apuvälinesovellus, jonka avulla heikkonäköiset tarkastelevat ruudun sisältöä visuaalisesti. Ruudun sisällöstä on suurennettuna pieni osa kerrallaan koko näytön kokoiseksi ja zoomattua aluetta vieritetään tavallisesti hiiren avulla. Motorisiin apuvälineisiin lukeutuvat erilaiset askellusohjaukseen perustuvat kytkinohjaimet, joiden toiminnassa hyödynnetään näppäimistörajapintaa samalla tavoin kuin yllä kuvattujen ruudunlukuohjelmien käytössä. Testaus perustuu WCAG 2.0 saavutettavuusstandardiin,, jota täydentää testaajien monivuotinen ja laaja henkilökohtainen kokemus verkkopalvelujen esteettömyydestä ja
11 / 12 näkövammaisten apuvälineohjelmistoista. Sivustojen helppokäyttöisyyttä arvioidaan myös eri vammaisjärjestöjen laatimien ohjeistuksien ja testausheuristiikkojen avulla. Testauksen tukena käytetään Wave Web Accessibility Tool Firefox-laajennusta (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 erityisryhmiin kuuluvien käyttäjien kannalta. 6 Käytetyt ohjelmistot ja laitteet Windows 7 Professional käyttöjärjestelmä Jaws 15 -ruudunlukuohjelma NVDA 2015.3 ruudunlukuohjelma Uusimmat versiot selaimista: ZoomText-suurennusohjelma Internet Explorer Firefox Google Chrome
12 / 12 7 Yhteystiedot Testauksen suorittivat Annanpura Oy:n esteettömyysasiantuntijat Kimmo Sääskilahti ja Jani Tuomola. 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