Saavutettavuustestausraportti www.sujuva.info/koho-opasteet/ Annanpura Oy 10.5.2019
1. TOIMEKSIANTO... 3 2. TESTAUSHAVAINNOT... 3 2.1 otsikointi... 4 2.2 Linkit... 4 2.3 Kohdistuksen näkyvyys... 6 2.4 Sarkainjärjestys... 6 4.5 Lomakkeet ja painikkeet... 7 2.6 Tekstin koon mukauttaminen... 8 2.7 Murupolku... 8 3. TIETOJA SAAVUTETTAVUUSTESTAUKSESTA... 9 4. JATKOTOIMENPITEET... 9 5. YHTEYSTIEDOT... 9 2
1. TOIMEKSIANTO sujuva.info.fi/koho-opasteet, pois lukien Aineistopankki-osuus, kiireellinen 2. TESTAUSHAVAINNOT Tässä asiakirjassa raportoidaan havainnot, jotka Annanpura Oy teki sujuva.info/kohoopasteet.fi -sivuston saavutettavuuskartoituksessa. Sivustosta tutkittiin pääsivun lisäksi useita alasivuja. Tutkitulla sivustolla on saavutettavuusongelmia, joista osa estää joidenkin käyttäjäryhmien sivuston selaamisen ja käytön. Ongelmat ovat kuitenkin kohtuullisen helppoja korjata. Osa tutkituista sivuista sisältää valtavasti tietoa. Esimerkiksi Koho-opasteet -sivu ja Lähteet -sivu. Tällaisten sivujen käyttö sekä apuvälineellä että heikolla näöllä on työlästä. Mobiililaitteella pitkien sivujen käytettävyys on kaikille kehno, sillä näyttöä joutuu vierittämään pyyhkäisyeleillä lukemattomia kertoja ennen kuin saavuttaa sivun loppuosassa olevan informaation. Värikontrasteissa ei ollut moitittavaa, mutta suurikontrastinen musta -väriasetuksella käyttäjältä jää paljon sisältöjä näkemättä kokonaan sekä Firefox- että Internet Explorer - selaimilla. Kolme yleisimmin käytössä olevaa ruudunlukuohjelmaa ovat Jaws, NVDA ja iosjärjestelmän VoiceOver. NVDA ja VoiceOver selviävät sivustosta huomattavasti paremmin kuin Jaws-ruudunlukuohjelma, jonka käyttäjä saa aika huonosti tietoa selaimen elementeistä. Esim. tekstin kokoa muuttava painikkeen tila (valittu/ei valittu) ei välity Jawsille. 3 Sivuun kohdistettava haku, joka aktivoidaan linkistä sivun yläosassa, on saavuttamaton Jaws-käyttäjälle. Jaws/IE -yhdistelmällä saadaan melko usein tämän kaltaisia tuloksia ja testaustyön tilaajan on hyvä tiedostaa, että kyseisen apuvälineohjelman käyttäjiltä tulee todennäköisesti kriittistä palautetta mikäli halutaan pidättäytyä tehdyissä tekniikkavalinnoissa.
Liitetiedostossa näyttökuvia ongelmakohdista. 2.1 otsikointi - Otsikointi on puutteellista - Otsikko ei vastaa sitä seuraavaa tekstiosuutta tai elementtiä Sivuston otsikoita ei ole kaikilta osin merkitty otsikoiksi html-merkinnöillä, vaikka näönvaraisesti ne sellaisia ovat. Esim. Koho-opasteet sivulla on jopa numeroitu otsikoita, mutta ne html-merkinnöissä ovat vain leipätekstiä. Apuvälineen käyttäjä ei pysty navigoimaan sivulla pikanäppäimillä lainkaan, ellei otsikoita merkitä oikein. Otsikoinnilla on suuri merkitys sivun käytettävyydelle ja mitä pidemmästä sisällöstä on kyse, sitä tärkeämpi on oikeanlainen ja loogisessa järjestyksessä etenevä otsikointi. Jokaisella sivulla tulisi olla <h1>-tason otsikko, joka kertoo sivun pääsisällön. Esimerkiksi ruudunlukuohjelman varassa toimiva henkilö tutkii sivun sisältöä usein otsikoita etsivillä pikanäppäimillä. Jos pääotsikkoa ei löydy, käyttäjälle tulee tunne siitä, että jokin osa sivusta jää avustavan tekniikan saavuttamattomiin. Pääotsikko helpottaa myös heikkonäköisiä näön varassa toimivia henkilöitä sekä henkilöitä, joilla on muusta kuin näkemisestä johtuvia hahmottamisen ongelmia. Pääotsikon tulisi olla yhtäpitävä sivun <title> -elementin kanssa. Sivustolla on sivun alaosassa lomakeosio ilmeisesti yhteydenottoa varten. Osion otsikko on hämäävästi Vastaa. WCAG: 1.3.1 Informaatio ja suhteet: Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä. (Taso A) WCAG 2.4.6 Otsikot ja nimilaput: Otsikot ja nimilaput kuvailevat aiheen tai merkityksen. (Taso AA) 4 2.2 Linkit - Epäselviä linkkitekstejä - hyppylinkki puuttuu Avustava tekniikka kuten ruudunlukuohjelmat kertovat käyttäjälle linkkitekstin. Käyttäjä päättelee tästä mitä linkin aktivoimisesta seuraa. Kuvalinkkien ollessa kyseessä on
huomioitava, että alt-määritteen pitää kertoa poikkeuksellisesti mitä linkki tekee eikä mitä kuvassa näkyy. Sivustolla on linkkejä, joiden kuvaus on epäselvä tai sitä ei ole lainkaan. Esimerkiksi etusivulta löytyy linkki "/" ja kuvalinkit, joiden aktivointi avaa näytölle kyseisen kuvan suurennoksen, ovat ilman alt-määritettä ja ruudunlukuohjelman käyttäjä kuulee vain kuvan tiedostonimen linkkitekstinä. Linkkitekstin ja linkistä avautuvan sivuston pääotsikon välillä tulee olla selkeä yhteys niin, ettei käyttäjä hämmenny ja epäile joutuneensa väärään sijaintiin sivustolla. Esimerkiksi esteettömyysohjeet-linkin avaamalla saa sivun, jonka ensimmäinen otsikko on Esteetön reitti. Sivuilla on hakuelementin avaava linkki, joka on nimetty aina sivun tittleä mukaillen ja perässä on #. Esimerkiksi Koho-opasteet sivulta löytyy kyseinen linkki nimellä kohoopasteet/# ja Lähteet sivulla se on nimellä lahteet/#. Sivuilta puuttuu pääsisältöön vievä ns. hyppylinkki, jolla ruudunlukuohjelman käyttäjä voi ohittaa sivun alussa toistuvan sisällön, kuten navigointilinkit. Tällaista oletuksena vain apuvälineohjelmille näkyvää linkkiä kutsutaan "Jump to Content"-linkiksi. Haku-toiminnon jälkeen tulevalla tulossivulla on jokaisen osuman kohdassa englanninkielinen, linkin kohdetta kuvaamaton linkkiteksti "continue reading". Tekstin pitäisi vastata sivun kieltä ja kuvata sitä, mihin käyttäjä linkin valittuaan päätyy, esim. Lue lisää Bussipysäkkiluiskista. 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, pois lukien alla luetellut tapaukset. (Taso A) 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. (Taso A) 5 WCAG 3.1.2 Osien kieli: Sisällön jokaisen tekstikatkelman tai ilmaisun luonnollinen kieli voidaan selvittää ohjelmallisesti, paitsi seuraavien osalta: erisnimet, tekniset termit, määrittämättömän kielen sanat sekä sanat tai ilmaisut, jotka ovat muuttuneet läheisen tekstiympäristön kielen murteelliseksi osaksi. (Taso AA)
WCAG: 2.4.1 Ohita lohkot: Tarjolla on mekanismi sellaisten sisällön lohkojen ohittamiseen, jotka toistuvat useilla verkkosivuilla. (Taso A) 2.3 Kohdistuksen näkyvyys - näppäimistökäyttäjä ei havaitse kohdistuksen sijaintia ns. normaali näkymällä eikä suurikontrastinen musta -värimallilla. - Koho-opasteet -sivulla oleva suurennuslasi-toiminnon sisältö ei näy suurikontrastinen värimallilla Osa käyttäjistä ei kykene hallitsemaan sivun toimintoja hiirellä vaan käyttää näppäimistöä. Suurin osa ruudunlukuohjelmien käyttäjistä on näppäinkäytön varassa. Kun sivua selataan näppäimistöllä, käyttäjä liikuttaa selainkohdistusta sarkainnäppäimellä linkkien, painikkeiden ja muiden elementtien havaitsemiseksi. Kun kohde on standardinmukainen HTML-komponentti, selain piirtää sen ympärille kehyksen tai vastaavan indikaattorin, jolla kohdistimen sijaintia sivulla voi seurata. Jos komponentin koodi on räätälöity tai sitä on muuten tyylitetty, joutuu kehittäjä usein erikseen varmistamaan aktiivisen kohdan näkymisen. Vaatimus koskee myös negatiiviväreiksi näkymää muuttavaa Suurikontrastinen musta -väriasetusta. Koho-opasteet -sivulla on toiminto, jossa käyttäjä voi hiirtä kuvalinkkien päällä liikuttamalla tarkastella ikään kuin suurennuslasilla kuvan osia. Suurennuksen olisi tarkoitus tulla näkyviin kuvien oikealle puolelle. Suurikontrastinen musta -värimallin käyttäjät eivät näe tuossa ikkunassa mitään. Suurennuslasin näkymä on musta. Tämä tapahtuu sekä Internet Explorerilla että Firefoxilla. Toimintoa ei näytä olevan mobiililaitteella tarkastellessa. 2.4 Sarkainjärjestys 6 - Näppäimistökäytössä sivun elementtien järjestys ei noudata visuaalista asettelua - mobiililaitteissa avustavan tekniikan ollessa käytössä navigointi ei noudata visuaalista näkymää Ruudunlukija esittää verkkosivun sisällön sen HTML-lähdekoodia tulkitsemalla. Sivustolla käytetty asemointi ei ole visuaalisesti toimivalle ja esim. ruudunlukuohjelman tai näppäimistön käyttäjälle sama. Jotkin elementit ovat näkyvissä sivun yläosassa, mutta avustava tekniikka tai näppäimistöllä navigoiva saavuttavat elementin vasta aivan sisällön lopussa. Koska kyseessä on hyvin pitkiä sisältösivuja, viimeisenä oleva elementti jää todennäköisesti kokonaan havaitsematta, sillä käyttäjä ei jaksa selata koko sivua läpi.
Esimerkiksi ios-järjestelmän VoiceOver -ruudunlukuohjelman ollessa käytössä iphonella sivun yläosasta löytyy Menu-painike, joka avaa näytölle valikon. Ruudunlukuohjelma jatkaa kuitenkin sivun sisällön lukemista käyttäjän selatessa sisältöä. Valikon sisältö löytyy vasta aivan sivun muiden tekstien loputtua. Tämä tilanne on muutenkin hämmentävä, sillä näytöllä näkyy valikon tekstit, mutta ruudunlukuohjelma lukee muita sivun tekstejä. Mm. yhteydenotto-lomakkeessa ios-järjestelmän VoiceOverin ollessa käytössä käyttäjän navigointieleet, pyyhkäisyt vasemmalta oikealle, siirtävät aktiivista kohtaa myös sellaisiin kohtiin näytöllä, missä visuaalisesti ei ole mitään kohdistettavaa. 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) 4.5 Lomakkeet ja painikkeet - Sivustolla on nimeämättömiä lomake-elementtejä ja painikkeita - Painikkeiden ja linkkien roolit eivät ole täysin selkeät - Lomakkeiden täyttövihjeet eivät ole aina käytettävissä - Palaute käyttäjälle tulee englanninkielisenä. Ruudunlukuohjelman käyttäjälle on tärkeää, että lomakekentillä on ns. nimilappumääritteet. Näiden tekstien on lisäksi vastattava kielellisesti sivua, jolla ne ovat. Tutkitulla sivulla on puutteita lomake-elementtien nimeämisissä ja lisäksi ne ovat englanninkielisiä. Esimerkiksi Yhteydenottolomakkeella on kentät First ja Last. Näytöllä näkyvä vihje on suomenkielinen, mutta se on sijoitettu lomakekenttään. Kun käyttäjä aloittaa kentän täyttämisen, vihje katoaa. Vihje/ohje tulisi sijoittaa lomakekentän ulkopuolelle niin, että se on aina käytettävissä, esim. kentän vasemmalle puolelle. Puuttuvasta kentästä tuleva ilmoitus on ruudunlukuohjelmallakin saavutettava, mutta se ja myös onnistuneesta lähettämisestä tuleva ilmoitus on englanninkielinen. 7 Käyttäjälle on tärkeää, että elementtien toiminnot ovat ennakoitavissa. Linkistä käyttäjä aktivoi siirtymisen uuteen sijaintiin ja painikkeesta jonkin toiminnon. sivustolla mobiilikäyttäjälle tulee tarjolle Menu-linkki, joka avaa näytölle valikon. Valikon ylin linkki on Close menu. Olisi suositeltavaa käyttää tämän tapaisen toiminnon aktivoimiseen painiketta, samoin sulkemiseen. Painikkeen nimi tulisi olla sivuston kielen mukainen ja sijaita aina samassa kohdassa, jotta käyttäjä on helppo löytää ja ymmärtää painikkeen toiminto.
Painikkeilta puuttuu kuvaavat nimet. Esim. Koho-opasteet -sivulla olevat kuvat ovat linkkejä isompiin kuviin. Käyttäjälle avautuvassa ikkunassa on visuaalisesti kuvattu raksilla sulkemispainiketta. Ruudunlukuohjelman käyttäjä kuulee tästä kohdasta "kertaapainike". Yhteydenotto-lomakkeen lopussa on nimeämätön painike, josta ruudunlukuohjelma kertoo vain "button". WCAG 4.1.2 Nimi, rooli, arvo: Kaikkien käyttöliittymäkomponenttien (mukaan lukien lomake-elementit, linkit ja skriptien tuottamat komponentit) nimi ja rooli voidaan selvittää ohjelmallisesti; tilat, ominaisuudet ja arvot, jotka käyttäjä voi asettaa, voidaan myös asettaa ohjelmallisesti; ja tieto näiden muutoksista on asiakasohjelmien saatavissa, mukaan lukien avustavat teknologiat. (Taso A) 2.6 Tekstin koon mukauttaminen - Tekstin kokoa ei pysty täysin mukauttamaan. Näön varassa heikosti näkevät käyttäjät toimivat usein ilman apuvälineitä ja suurentavat tekstin kokoa käyttämällä selaimen asetuksia. Tämä ei ole sama asia kuin sivun zoomaustoiminto. Internet Explorer -käyttäjät eivät pysty mukauttamaan tutkitun sivuston tekstejä käyttämällä selaimen Näytä / Tekstin koko -asetusta. WCAG2: 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ä. (Taso AA) 2.7 Murupolku - Käyttäjän sijaintia ilmaisevaa murupolkua ei tarjota sivustolla Käyttäjälle tulisi tarjota ns. murupolku, josta hän pystyy selvittämään sijaintinsa sivustolla. 8 Ruudunlukuohjelman käyttäjälle sijainti sivustolla voidaan ilmaista murupolussa käyttämällä ARIA-current-määritystä. Ohjeita on sivustolla: https://tink.uk/using-thearia-current-attribute/. WCAG 1.3.1 Informaatio ja suhteet: Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä. (Taso A)
3. TIETOJA SAAVUTETTAVUUSTESTAUKSESTA Sivustoa arvioitiin teknisen ja kognitiivisen saavutettavuuden kannalta huomioiden useiden vammaisryhmien erityispiirteitä. Huomiota kiinnitettiin myös sivujen rakenteeseen ja käytettävyyteen. Testaus suoritettiin käyttäen Windows- ja ios -käyttöjärjestelmiä ja niiden tarjolla olevia värien ja tekstien mukautusmahdollisuuksia. Apuvälinetestaukset suoritettiin yhdistelmillä Jaws / Internet Explorer, NVDA / Internet Explorer, NVDA / Firefox sekä VoiceOver / Safari. Värikontrastien riittävyyteen käytettiin näköhavaintojen lisäksi ohjelmallista testausta (Color Contrast Analyzer). 4. JATKOTOIMENPITEET Kaikki yllä eritellyt WCAG-standardiin viittaavat puutteet tulee korjata, jotta saavutettavuuslain vaatimukset täyttyvät. Lisäksi suosittelemme muidenkin raportissa huomioitujen puutteiden korjaamista, jotta voidaan varmistaa sivuston helppokäyttöisyys ja saavutettavuus kaikkien käyttäjäryhmien osalta. 5. YHTEYSTIEDOT Testauksen suorittivat Annanpura Oy:n saavutettavuusasiantuntija Virpi Jylhä ja saavutettavuustestaaja Hannu Jylhä. Johtava saavutettavuusasiantuntija Kimmo Sääskilahti Sähköposti: kimmo.saaskilahti@annanpura.fi Puhelin: 050-4485232 Annanpura Oy PL 41, 00030 IIRIS, Marjaniementie 74, 00930 HELSINKI puh. toimisto: (09) 3960 41 puh. mobiili: 050 4618 766 fax. (09) 3960 4433 verkossa: www.annanpura.fi 9 Näkövammaisten liitto ry:n omistama yritys
10