Tarkoittaako hyvä esteettömyys näkövammaiselle myös hyvää käytettävyyttä? Ei oikeastaan. Käytettävyydeltään hyvää eli tuloksellista, tehokasta ja miellyttävää järjestelmää ei toteuteta seuraamalla pelkästään esteettömyysohjeistuksia kuten Web Content Accessibility Guidelines (WCAG) 2.0. Käytännössä visuaalista verkkosivua ei muunneta miellyttäväksi auditiiviseksi käyttäjäkokemukseksi vain esteitä poistamalla, vaan verkkosivun ”auditiivista käytettävyyttä” on mietittävä uusin korvin.
Usein ajatellaan, että ruudunlukuohjelmat lukevat käyttäjälle ääneen sen, mitä verkkosivulla näkyy. Tämä ei pidä täysin paikkansa, sillä oikeastaan ruudunlukuohjelmat lukevat verkkosivun HTML-koodin mukaan lukien logot, navigaatiorakenteet ja mainokset. Hyvä HTML-koodaus mahdollistaa sen, että ruudunlukuohjelman käyttäjille osa verkkosivun sisällöstä jätetään kokonaan esittämättä tai esitetään jollain muulla tavalla. Heille voidaan esittää myös jotain sellaista, mitä visuaalisessa esityksessä ei näy.
Käytettävän esteettömyyden suunnitteluohjeita
Tutkiessamme eri hakukoneiden käyttöliittymiä näkövammaisten kannalta huomasimme, että niissä oli selkeitä käytettävyysongelmia (Haanperä & Nieminen, 2013). Parhaassa tapauksessa sokea käyttäjä pystyi löytämään ensimmäisen hakutuloksen yhdellä näppäinpainalluksella, mutta huonoimmissa käyttöliittymissä siihen vaadittiin käyttäjältä jopa 42 näppäinpainallusta. Näiden havaintojen sekä Web Accessibility In Mind (WebAIM) ja WCAG 2.0 -ohjeistusten pohjalta kehitimme ohjeet, joilla saadaan parannettua ruudunlukuohjelman käyttäjien käyttökokemusta verkkosivuista. Keskeinen tavoitteemme oli laatia ohjeet, joiden avulla sokea käyttäjä löytää nopeasti ja vaivattomasti haluamansa sisällön verkkosivuilta. Ohjeet ottavat kantaa muun muassa otsikkorakenteeseen, sivun lukemisjärjestykseen, linkkien nimiin ja maamerkkeihin. Esittelemme lyhyesti keskeisimpiä ohjeita.
Suunnittele sivun otsikkorakenne varhain
Suurin osa ruudunlukuohjelman käyttäjistä selaa sivua otsikkotasojen avulla. Tämän vuoksi on tärkeää, että otsikot on merkitty oikeaoppisesti HTML-koodiin käyttäen <h1>, <h2>,… ja <h6> -elementtejä. Otsikoiden tarkoitus on luoda sivulle hyvä ja selkeä rakenne, jossa eri osien välillä on helppo navigoida ja jossa on helppo ymmärtää, mitä kunkin otsikon alta löytyy. Otsikkorakennetta kannattaakin miettiä sivun sisällysluettelona.
Hyvin suunniteltu otsikkorakenne auttaa käyttäjää:
- siirtymään nopeasti ja vaivattomasti sivun sisällä eri osioiden ja aiheiden välillä.
- jäsentämään ja havainnollistamaan sivua paremmin.
Suunnittele sivun lukemisjärjestys
Normaalisti näkevälle käyttäjälle voidaan sivun visuaalisella ulkoasulla ja elementtien asettelulla helposti esittää, mitkä asiat ja osat liittyvät toisiinsa. Ruudunlukuohjelman käyttäjälle sivun tieto esitetään auditiivisessa muodossa lineaarisesti, elementti kerrallaan. Tällöin asioiden ja osien väliset erottelut ja yhteydet helposti hämärtyvät. Siksi on tärkeää, että lukemisjärjestys on looginen, tärkeimmät ja olennaisimmat asiat löytyvät vaivattomasti, siirtymät osiosta toiseen on helppo huomata ja käyttäjä pystyy koko ajan hahmottamaan, missä kohdassa sivua hän on.
Hyvin suunniteltu ja ymmärrettävä lukemisjärjestys auttaa käyttäjää:
- ennakoimaan paremmin selaamaansa verkkosivua
- tietämään, missä kohdassa sivua hän milloinkin on
Suunnittele ”Hyppää sisältöön” -linkki
Verkkosivuilla on usein elementtejä, jotka toistuvat alasivusta toiseen kuten logot ja ylätunnisteet, navigaatiorakenteet, hakutoiminnot ja kielivalinnat. Normaalisti näkevän on helppo hypätä näiden yli, mutta ruudunlukija toistaa nämä siirryttäessä alasivulta toiselle. Yksittäisten alasivujen pääsisällön löytäminen on tällöin hidasta ja vaivalloista. Siksi on suositeltavaa asettaa sivun ensimmäiseksi elementiksi sivun sisäinen ”Hyppää sisältöön” -linkki ohjaamaan käyttäjä suoraan sivun pääsisältöön.
”Hyppää sisältöön” -linkki auttaa käyttäjää:
- löytämään nopeasti ja vaivattomasti sivun pääsisällön.
Käytä maamerkkejä
Maamerkkien avulla sivun eri alueita voidaan jakaa toiminnallisesti ja sisällöllisesti erilaisiin osiin kuten pääsisältöön ja navigaatio- ja lomake-elementteihin esimerkiksi kuvan 1 osoittamalla tavalla.
Maamerkit auttavat käyttäjää:
- hahmottamaan sivun kokonaisuuden
- löytämään haluamansa osion
- siirtymään helposti ja vaivattomasti eri osioiden välillä
Käytä kuvaavia linkkien nimiä
Moni ruudunlukuohjelman käyttäjä selaa verkkosivun linkkejä etsiessään mielenkiintoista alasivua. Verkkosivuilla yleiset linkkitekstit kuten ”Paina tästä”, ”Katso tästä” ja ”Lue lisää…” eivät auta käyttäjää hahmottamaan linkin tarkoitusta tai määränpäätä. Linkin tekstin tulisi irrallisenakin kertoa, mistä on kyse ja minne se johtaa.
Selkeästi nimetyt linkit auttavat käyttäjää:
- ymmärtämään linkin tarkoituksen ja määränpään myös ilman sitä ympäröivää kontekstia
- selaamaan sivua pelkkien linkkien avulla
Suunnittele saavutettavia lomakkeita
Lomaketta voi selata ruudunlukijan avulla joko sarkaimella tai nuolinäppäimillä. Sarkainta käytettäessä ohjelma etenee lomakekentästä toiseen, jolloin ohjetekstit jäävät lukematta. Itse lomakekenttiin tarvitaan siis kuvaavat nimilaput (engl. label) ja ohjeistukset. Vastaavasti kyselyssä sarkain ohittaa itse kysymykset, joten vastausvaihtoehdoissa olisi hyvä toistaa vastauksen selite pelkän ”kyllä”- tai ”ei”-vastauksen sijaan.
Samoin kuin visuaalisessa esitystavassa käyttäjälle tulisi selkeästi kertoa, missä muodossa tieto annetaan kuhunkin kenttään. Myös virheilmoitusten tulisi olla niin selkeitä, että käyttäjä osaa korjata vastauksensa. Saavutettavassa lomakkeessa myös onnistuneen lähetyksen kuittauksen tulisi olla ruudunlukijalla helposti havaittava eli heti seuraavan alasivun pääotsikoissa (sekä <title> että <h1>).
Saavutettavat lomakkeet auttavat käyttäjää:
- hahmottamaan lomakkeen eri kentät
- antamaan oikean tiedon oikeaan kohtaan oikeassa muodossa
Mitä uutta?
Usein käytetty verkkosisällön saavutettavuusohjeisto WCAG ei ota kantaa sivuston toteutustekniikkaan vaan edellyttää melko yleisellä tasolla, että toteutus on havaittava, hallittava, ymmärrettävä ja lujatekoinen. Tämä on ymmärrettävää, koska tekniikka kehittyy koko ajan ja uusia toteutusvaihtoehtoja syntyy jatkuvasti. WCAG-ohjeisto antaa hyvät puitteet tekniselle saavutettavuudelle ja esteiden poistamiselle, mutta hyvään käytettävyyteen se ei useinkaan riitä.
Ohjeissamme halusimme tuoda esiin ratkaisuja sivujen vaivattomaan ja miellyttävään lukemiseen myös ruudunlukijaohjelman käyttäjälle. Esimerkiksi halusimme linkkiteksteihin kuvaava sisältöä sekä tukea useille erilaisille tavoille löytää sivujen pääsisältö.
Hyvä saavutettavuus samoin kuin käytettävyys tulisi ottaa huomioon jo suunnittelun alkuvaiheessa, mutta saavutettavuutta voidaan parantaa myös jälkikäteen erilaisilla HTML-koodauksilla. Niillä ei välttämättä ole vaikutusta sivuston visuaaliseen ulkoasuun, mutta niiden työstäminen saattaa auttaa huomaamaan myös muita käytettävyysongelmia, jotka vaikuttavat kaikkien käyttäjien käyttökokemukseen.
Lähteet
- Haanperä, T. ja Nieminen, M. (2013) Usability of Web Search Interfaces for Blind Users – A Review of Digital Academic Library User Interfaces. Universal Access in Human-Computer Interaction. Applications and Services for Quality of Life. Springer Berlin Heidelberg. 321-330.
- WCAG 2.0; Verkkosisällön saavutettavuusohjeet (WCAG) 2.0. Suomenkielinen versio: Tampereen teknillinen yliopisto, Hypermedian laboratorio, W3C Finnish Office. Viitattu 26.10.2015. http://www.w3.org/Translations/WCAG20-fi/
- WebAIM; Web Accessibility for Designers. CPD – Center for Persons with Disabilities, Utah State University. Viitattu 26.10.2015. http://webaim.org/resources/designers/
Tapio Haanperä ja Sirpa Riihiaho työskentelevät strategisen käytettävyyden tutkimusryhmässä (STRATUS) Aalto-yliopiston Perustieteiden korkeakoulussa.