Saavutettavaa verkkopalvelua voivat käyttää kaikki erilaisista ominaisuuksista tai rajoitteista huolimatta. Käyttöliittymäsuunnittelussa tämä tarkoittaa sitä, että huomioidaan erilaiset käyttötavat ja varmistetaan, että palvelun toiminnot ja sisältö ovat käyttäjän havaittavissa, hallittavissa sekä ymmärrettävissä. Koska käyttäjien ja käyttötapojen kirjo on kuitenkin hyvin laaja, voi olla hankala hahmottaa, mitä tämä tarkoittaa käytännössä.
Mitä saavutettavuusohjeistukset tarkoittavat käytännössä?
Lähtökohtaisesti saavutettavan verkkopalvelun suunnitteluperiaatteet vastaavat paljolti käytettävyyden perusperiaatteita. Selkeä navigaatiorakenne ja yhdenmukaiset toiminnot ovat asioita, jotka hyödyttävät kaikkia käyttäjiä. Kun palvelu toteutetaan WCAG verkkosisällön saavutettavuusohjeistusten mukaisesti, saadaan rakennettua teknisesti saavutettava verkkopalvelu. Seuraavassa on listattu WCAG-ohjeistukseen pohjautuvia käytännön neuvoja saavutettavan verkkopalvelun suunnittelun tueksi. Luovuudellekin on tilaa, kunhan huolehditaan siitä, että saavutettavuus toteutuu sekä käyttöliittymän rakenteen että sisältöelementtien osalta. Ohjeet on laadittu erityisesti käyttöliittymäsuunnittelijan ja visuaalisen suunnittelijan näkökulmasta.
Käyttöliittymän rakenne
- Suunnittele selkeät, loogiset ja yhdenmukaiset sivupohjat.
- Varmista, että sivuston eri osat ovat tunnistettavia ja erottuvat selkeästi toisistaan. Päänavigaation, alanavigaation, sisältöosion sekä ylimääräisten sisältöjen, kuten sivupalkkien, tulee selkeästi erottua toisistaan.
- Keskisuurilla ja suurilla sivustoilla on syytä käyttää hakutoimintoa. Ohjeena voidaan pitää, että mikäli sivustolla on yli 20 alasivua, on hakutoiminto syytä lisätä. Hakutoiminto on syytä sijoittaa paikkaan, josta se on helposti ja nopeasti löydettävissä ja jossa se ei kuitenkaan häiritse sivuston muuta toimintaa.
- Osoita käyttäjälle selkeästi missä hän on sivustolla, mihin hän voi tästä edetä ja mistä pääsee takaisin.
Linkit, painikkeet ja muut interaktiiviset elementit
- Toimintojen tulee olla riittävän suuria ja tunnistettavia, jotta esimerkiksi heikkonäköiset käyttäjät erottavat ne sivuston muista elementeistä. Ikääntyneiden ja motoristisia häiriöitä omaavien henkilöiden on myös helpompi käyttää kosketusnäyttöjä, kun toiminnot ovat riittävän suuria.
- Korosta linkkejä muillakin tavoilla kuin pelkällä värillä, sillä kaikki eivät erota värejä kunnolla. Linkkejä voi korostaa esimerkiksi alleviivauksella. Älä tällöin käytä alleviivausta muussa tekstisisällössä.
- Huomioi, että linkit, painikkeet, valikot ja muut toiminnot pysyvät yhdenmukaisina koko sivustolla.
- Tarkista, että jokaisella sivulla on linkki etusivulle.
- Tarjoa käyttäjälle riittävästi tekstimuotoista palautetta toimintojen suorittamisesta.
Värit
- Tekstin ja taustavärin kontrastisuhteen tulee olla riittävä. Tämä tarkoittaa yleensä kompromisseja värien suhteen. Pienempi teksti vaatii korkeamman kontrastisuhteen kuin suuri teksti. Suureksi tekstiksi määritellään teksti, joka on kooltaan vähintään 18 pt tai 14 pt ja lihavoitu. Värien kontrastisuhteet voi tarkistaa esimerkiksi Web Aimin Color Contrast Checker -verkkotyökalulla.
- Älä käytä oleellisen informaation esittämiseen pelkästään tiettyjä väriyhdistelmiä, kuten punaista ja vihreää.
Tekstit
- Käytä selkeitä ja luettavia fontteja. Päätteettömät (sans-serif-tyyliset) fontit ovat monelle helpompia lukea. Ornamentteja tai koristeita sisältäviä sekä käsialaa muistuttavia fontteja on syytä välttää.
- Käytä riittävän suurta tekstiä. Suositeltava kirjainkoko on vähintään 12 pt. Huomioi, että fonttityyppi vaikuttaa kirjainkokoon.
- Käytä otsikkotasoja ja varmista, että otsikkotasot erottuvat selvästi sekä toisistaan että leipätekstistä. Huolehdi, että tekstityylit pysyvät yhtenäisinä koko sivustolla.
- Huomioi sopiva rivin pituus. Ihanteellisin rivin pituus on 55-60 merkkiä. Tätä pidemmät rivit heikentävät luettavuutta. Vastaavasti lyhyemmät rivit aiheuttavat turhia rivinvaihtoja ja katkoja lukemiseen. Miniminä voidaan pitää 35-40 merkkiä.
- Käytä riittävän suurta riviväliä. Hiukan väljennettyä riviväliä on helpompi lukea ja lukijan huomio kiinnittyy tekstiin paremmin. Rivivälin tulisi olla 1-4 pistettä kirjainkokoa suurempi.
- Mikäli mahdollista, tasaa teksti vasempaan reunaan. Vältä molempien reunojen tasaamista, sillä se heikentää luettavuutta.
- Vältä esittämästä tekstiä kuvamuodossa.
Kuvat, videot ja äänitiedostot
- Huomioi, että kuvat, infograafit ja videot ovat selkeitä sekä tukevat tekstiä.
- Vältä käyttämästä tekstiä kuvissa. Mikäli tekstiä kuitenkin lisätään kuvaan, on tekstivastineeseen kirjattava, mitä kuvassa lukee.
- On suositeltavaa, että sivuston mediasisältö ei käynnisty automaattisesti, vaan ainoastaan käyttäjän toimesta. Mikäli automaattisesti käynnistyvää mediasisältöä kuitenkin sivustolle lisätään, tulee tästä ilmoittaa käyttäjälle etukäteen. Käyttäjän tulee myös voida keskeyttää tai piilottaa median toisto sekä jatkaa sitä tarvittaessa.
- Mikäli sivusto sisältää automaattisesti käynnistyvää ääntä, joka soi kauemmin kuin 3 sekuntia, on käyttäjän pystyttävä kytkemään ääni pois tai säätämään sen voimakkuutta.
- Pidä huoli siitä, että mikään sisältö ei välky tiheämmin kuin 3 kertaa sekunnissa.
Lomakkeet
- Huolehdi, että lomakkeet ovat sekä selkeitä että ymmärrettäviä. Lomakekenttien tulee sijaita loogisessa järjestyksessä.
- Ilmoita pakolliset lomakekentät.
- Huomioi, että lomakkeen kaikki elementit, kuten painikkeet, ovat riittävän suuria.
- Varmista, että käyttäjä saa riittävästi ohjeistusta lomakkeen täyttämistä varten.
- Varmista myös, että käyttäjä saa palautetta lomakkeen täytöstä. Mikäli lomakenttään syötetään virheellistä tietoa, ilmoitetaan tästä käyttäjälle tekstimuodossa ja osoitetaan missä kohtaa virhe sijaitsee.
Taulukot
- Käytä taulukoita vain suurten datamassojen esittämiseen, sillä taulukot skaalautuvat huonosti ja niiden lukeminen ruudunlukuohjelmalla on yleensä hankalaa.
- Älä käytä taulukoita muotoilutarkoitukseen.
On kuitenkin syytä muistaa, että…
WCAG -ohjeistusten mukaisesti toteutettu palvelu on siis teknisesti saavutettava. Tämä ei takaa sitä, että palvelun toimintoja olisi myös automaattisesti helppo käyttää tai, että käyttäjän etsimä sisältö olisi ymmärrettävää ja helposti löydettävissä. Kokonaisuutena saavutettavuus on yhdistelmä teknistä saavutettavuutta, sisällön saavutettavuutta sekä käytettävyyttä. Palvelu tuleekin aina ensisijaisesti rakentaa käyttäjän tavoitteet ja tarpeet huomioiden. Palvelumuotoilu, käyttäjäkeskeinen suunnittelu sekä design for all -periaatteet auttavat käyttäjän tarpeiden ja tavoitteiden ymmärtämisessä. Kun käyttäjät otetaan osaksi koko suunnitteluprosessia, saadaan arvokasta käyttäjätietoa ja tuotettua palvelu, joka aidosti huomioi käyttäjän. Tällaista palvelua palataan mielellään käyttämään uudelleen.
Tarvitsetko lisätietoa saavutettavuudesta? Lataa ilmainen oppaamme.