Design with business impact
Palveluvaaka ESTEETTÖMYYDEN ASIANTUNTIJA-ARVIO Elina Melkko & Simo Säde 4.5.2015 2
RAPORTIN RAKENNE 1. Päähavainnot 2. Havainnot osa-alueittain Arviointilomake Otsikointi Sivuston käyttäminen näppäimistöllä Hakukenttä Kontrastit Linkit Sivuston mukauttaminen Navigaatio 3. Johtopäätökset Liitteet Arvioinnin toteutuksesta 3
PALVELUVAAKA Päähavainnot 4
PALVELUVAAKA Päähavainnot Yleisellä tasolla palveluvaaka on toteutukseltaan suurilta osin esteetön. Tästä huolimatta se ei täytä WCAG:n AA-tason vaatimuksia kaikilta osin: 1. Otsikoiden käyttö ei ollut täysin johdonmukaista eivätkä ne olleet aina täysin informatiivisia tai kuvaavia. 2. Hakukenttien kentillä ei ollut täysin kuvaavia nimiä eikä kaikella eitekstimuotoisella sisällöllä ole yksiselitteisiä selkeitä tekstivastineita. 3. Taustan ja tekstien väliset kontrastit eivät olleet kaikkialla riittäviä. 4. Sivustoa ei pysty aina käyttämään näppäimistöllä. Tämä ongelma korostui varsinkin Firefoxilla. Samoin yksittäiset sivuston osiot olivat käyttökelvottomia pelkällä näppäimistöllä. 5
PALVELUVAAKA Päähavainnot Edelleen: 5. Kaikkia elementtejä ei ole merkitty yhdenmukaisesti sivuston eri osissa. 6. Sivustoa ei pysty mukauttamaan riittävän hyvin. Sivusto reagoi toisinaan arvaamattomasti selainikkunan ja kirjasimen koon muutoksiin. 7. Navigaatio ruudunlukijan varassa ei ole helppoa. Tässä raportissa esitetään keskeisimmät löydökset arviossa. Yksityiskohtaiset löydökset löytyvät liitteenä olevasta Excel-dokumentista. 6
PALVELUVAAKA Havainnot osa-alueittain 7
PALVELUVAAKA Arviointilomake 8
ARVIOINTILOMAKE Arviointilomake ilmestyy ruudunlukijan syötteeseen kaikkien muiden sivun sisältöjen jälkeen. Täten ruudunlukijaa käyttävä ei välttämättä edes tajua arviointilomakkeen ponnahtaneen esiin. Lisäksi arviointilomakkeen käyttäminen on erittäin raskasta ruudunlukijalla, sillä käyttäjän on selattava merkittävä määrä sisältöä ennen arviointilomakkeen. 9
ARVIOINTILOMAKE Arviointilomake ei ole esteetön Palveluntarjoajan arviointilomakkeessa esiintyi merkittävä määrä erilaisia esteettömyysongelmia. Arviointilomakkeen ponnahdusikkuna ilmestyy palveluntarjoajan sivun päälle ja sen tekstivastine ilmestyy ruudunlukijassa kaiken muun sivun sisällön jälkeen. Sivun fokuksena olevan sisällön tulisi olla saatavilla ensimmäisenä. Näppäimistön fokus ei siirry arviointilomake-ponnahdusikkunaan. Arviointilomaketta ei pysty käyttämään pelkästään näppäimistöllä millään testatuista selaimista (Firefox, Safari ja Chrome). Lomakkeen taustalla oleva sivu on niin haaleana, että käyttäjä ei välttämättä huomaa kyseessä olevan ponnahdusikkuna. Täten käyttäjän voi olla erittäin vaikea ymmärtää missä osassa sivustoa hän on. 10
PALVELUVAAKA Otsikointi 11
OTSIKOINTI Semanttisesti eritasoisia elementtejä on merkitty samalle otsikkotasolle. Täten käyttäjän on vaikea hahmottaa käsitystä sivuston hierarkiasta ruudunlukijaa käytettäessä. Lisäksi sivuston selaaminen otsikoiden perusteella on hankalaa. 12
OTSIKOINTI Otsikointi ei ole johdonmukaista HTML-koodissa käytetty otsikoiden järjestys ei ole aina looginen ja semanttisesti eritasoisia asioita on merkitty samalle otsikkotasolle. Ruudunlukijan käyttäjän on vaikea hahmottaa sivuston hierarkia selatessaan sitä pelkkien headingien perusteella. Kaikki otsikot eivät olleet täysin informatiivisia, eikä otsikkoja ollut käytetty kaikilla sivuilla. Otsikointitasojen (h1, h2, ) on oltava loogisia ja yhdenmukaisia sivuston eri osissa. 13
PALVELUVAAKA Sivuston käyttö näppäimistöllä 14
SIVUSTON KÄYTTÖ NÄPPÄIMISTÖLLÄ Etsi-painikkeen kohdalla on vaikea erottaa näppäimistön fokuksen olevan siinä (vrt. Ylempi kuva, missä fokus erottuu selkeästi). 15
SIVUSTON KÄYTTÖ NÄPPÄIMISTÖLLÄ Sivustoa ei voi käyttää näppäimistöllä Sivustoa ei voi käyttää yksinomaan näppäimistöllä Firefoxilla tai Safarilla. Tämän johdosta esimerkiksi motorisista häiriöistä kärsivien käyttäjien osalta sivusto on saavuttamaton. Chrome-selaimella käyttö on pääosin mahdollista, mutta arviointilomakkeen yhteydessä näppäimistön fokus ei siirry lomakkeeseen eikä sitä pysty täten täyttämään näppäimistöllä. Tabulaattorilla selaaminen johtaa taustasivun selaamiseen. Fokusta indikoiva sininen reunus ei erotu kaikissa sivuston elementeissä Chrome-selaimella (kts. edellinen sivu). Sinisen ja vihreän värin välinen kontrasti ei ole riittävä fokuksen näkymiseen selvästi. 16
PALVELUVAAKA Hakukenttä 17
HAKULOMAKE Hakulomakkeella riittämätön ohjeistus Ruudunlukijaa käyttävän voi olla vaikea onnistua kirjoittaa olennaiset tiedot kenttiin riittämättömän ohjeistuksen johdosta. Tällä hetkellä käytetyt Mitä? ja Mistä? labelit eivät ole riittäviä ohjeistuksia, jotka yksiselitteisesti onnistuisivat ilmaisemaan mitä käyttäjän odotetaan kenttiin kirjoittavan. Ruudunlukija ei pysty lukemaan tällä hetkellä käytössä olevaa haalean harmaata sinänsä informatiivista tekstiä. Tämä tieto tulisi lisätä hakukenttien label-tietoihin. Käytetyn harmaan tekstin kontrasti valkeaan taustaan nähden on riittämätön (1.5:1 vs. vaadittu 3:1). 18
PALVELUVAAKA Kontrastit 19
KONTRASTIT Vaaleanharmaiden tekstien kontrasti on liian heikko taustaan nähden. Heikkonäköiset eivät välttämättä erota näitä tekstejä taustasta. 20
KONTRASTIT Käytetyt kontrastit ovat riittämättömiä Sivustolla käytetään runsaasti liian heikkoja kontrasteja tekstien ja taustan välillä. Tämä tapahtuu erityisesti palvelupisteiden arviotekstien yhteydessä. Kontrastien riittävyyteen on ehdottomasti kiinnitettävä huomiota, sillä heikkonäköiset eivät muutoin välttämättä pysty erottamaan tekstejä taustasta. AA-taso vaatii, että alle 18p tekstin ja taustan kontrastisuhteen on oltava vähintään 4.5:1 ja yli 18p tekstin tai 14p lihavoidun tekstin suhteen on oltava vähintään 3:1. 21
PALVELUVAAKA Linkit 22
LINKIT Sivustolla on merkittävä määrä erilaisia tapoja esittää muihin sisältöihin linkkaavia sisältöjä. Näitä on yhdenmukaistettava ja korostettava selkeämmin. 23
LINKIT Linkit eivät erotu taustasta Linkit eivät erotu taustasta tai muista tekstisisällöistä riittävän hyvin. Lisäksi linkkejä ei ole merkitty yhdenmukaisesti sivuston eri osissa. Värisokeudesta kärsivien voi olla erittäin vaikea erottaa linkkitekstejä muusta tekstisisällöstä, jos ainoana erottavana elementtinä käytetään tekstin väriä tai pientä ikonia. Linkkejä tulee korostaa voimakkaammin esimerkiksi alleviivauksin tai muin keinoin. Lisäksi värejä ei saa missään nimessä käyttää ainoana tapana erottaa elementtejä toisistaan muidenkaan elementtien osalta. Linkkien merkintää tulee myös yhdenmukaistaa sivuston eri osissa, sillä tämänhetkinen ei auta käyttäjiä muistamaan mikä elementti on linkki ja mikä ei. 24
PALVELUVAAKA Sivuston mukauttaminen 25
MUKAUTTAMINEN Otsaketekstit menevät päällekkäin selainikkunaa pienennettäessä ja sivua zoomattaessa. 26
MUKAUTTAMINEN Mukauttaminen johtaa arvaamattomiin tuloksiin Sivustoa pystyy pääosin mukauttamaan hyvin, mutta yksittäiset samanaikaiset mukauttamistoimenpiteet saattavat johtaa arvaamattomiin lopputuloksiin. Kun käyttäjä pienentää selainikkunaa, sivusto mukautuu tähän. Jos käyttäjä samanaikaisesti kuitenkin zoomaa sivustoa selaimen asetuksista, päätyy osa tekstisisällöistä päällekkäin. Kirjasinkoon muuttaminen aiheuttaa saman lopputuloksen. Sivustoa on pystyttävä mukauttamaan joustavasti, sillä heikkonäköiset monesti turvautuvat kirjasinkoon ja sivuston suurentamiseen selaimen astuksista pystyäkseen erottamaan kaikki olennaiset sisällöt. 27
PALVELUVAAKA Navigaatio 28
NAVIGAATIO Toistuvia rakenteita ei pysty ohittamaan Sivusto ei mahdollista kaikkien toistuvien sisältöjen ohittamista. Esimerkiksi sivuston yläosa (otsaketekstit yms) luetaan joka kerta ruudunlukijaa käytettäessä. Ylärakenteiden ohittaminen tulisi mahdollistaa piilolinkein tai vastaavin, jotta sivuston selaaminen ja käyttö mahdollisimman nopeaa ja tehokasta. 29
HYVIS / AJANVARAUS Johtopäätökset 30
PALVELUVAAKA Johtopäätökset Palveluvaaka on esteettömyydeltään jo tyydyttävällä tasolla. Tästä huolimatta WCAG:n AA-tason esteettömyys edellyttää vielä jonkin verran korjauksia. Seuraavat ongelmat ja epäselvyydet tulee korjata ensimmäisenä: Sivuston suunnittelussa on huomioitava ruudunlukijan käyttö ja tarkastettava, että kaikki sisällöt toistetaan järkevässä muodossa myös ruudunlukijalla. Tässä yhteydessä esimerkiksi hakulomakkeiden ohjeistukset on tarjottava myös ruudunlukijan käyttäjälle. Arviolomakkeen toteutus on arvioitava uudestaan, sillä nyt se on altis monille esteettömyys- ja käytettävyysongelmille. Ponnahdusikkunat ovat aina riskialttiita ratkaisuja esteettömyysmielessä. 31
PALVELUVAAKA Johtopäätökset Edelleen: Otsikointia on järkeistettävä ja yhdenmukaistettava. Sivustoa on pystyttävä käyttämään näppäimistöllä millä tahansa selaimella. Linkit on merkittävä selkeämmin ja yhdenmukaisesti sivustolla. Tekstien ja taustojen kontrastien on oltava selkeitä. Lisäksi fokusindikaattorin ja eri elementtien välisen kontrastin on oltava niin merkittävä, että käyttäjä tietää missä elementissä näppäimistön fokus milläkin hetkellä on. Sivuston on oltava mukautettavissa joustavasti. Muita korjauksia vaativia seikkoja on nostettu esiin liitteenä olevasta Excel-dokumentista. 32
Kiitos! Elina MELKKO UX Designer elina.melkko@cresense.com +358 40 745 1941 Simo SÄDE Insight Lead simo.sade@cresense.com +358 40 758 4433 33
HYVIS / AJANVARAUS Liitteet Arvioinnin toteutuksesta 34
ARVIOINNIN TOTEUTUKSESTA Palveluvaa an esteettömyysarviointi suoritettiin kahden Cresensen asiantuntijan toimesta 10.-17.4.2015 onlineprototyypin perusteella. Esteettömyysarvioinnin yksityiskohtaiset löydökset ovat saatavilla liitteenä olevasta Excel-tiedostosta: 20150507_Cresense_Palveluvaaka_Esteettömyysarvion yksityiskohtaiset tulokset.xls 35
Projektin yhteenveto! Asiakas Projektin aikataulu Yhteyshenkilöt Tutkittu palvelu Projektin sisältö Projektin tulokset THL Palveluvaaka 31.3. 6.5. 2015 THL Auli Aalto auli.aalto@thl.fi Cresense Simo Säde simo.sade@cresense.com Palveluvaaka-prototyyppi osoitteessa https://palveluvaaka.demo.solita.fi/ Palveluvaaka-palvelun käytettävyyden asiantuntijaarviointi, käytettävyyden testaus käyttäjien kanssa sekä esteettömyysarviointi. 20150507_Cresense_Palveluvaaka_Kaÿtetta vyystestiraportti.pdf 20150507_Cresense_Palveluvaaka_Kaÿtetta vyyden asiantuntija-arviointi.pdf 20150507_Cresense_Palveluvaaka_Esteetto myysarvio.pdf 20150507_Cresense_Palveluvaaka_Esteettömyysarvion yksityiskohtaiset tulokset.xls