6 vinkkiä saavutettavampaan verkkosivustoon
Saavutettavuudella tarkoitetaan, että verkkosivut ja mobiilisovellukset sekä niiden sisällöt ovat sellaisessa muodossa, että kuka tahansa voi käyttää niitä laitteesta riippumatta. Lue vinkit saavutettavampaan verkkosivustoon!
Miksi saavutettavuudesta nyt puhutaan (direktiivimuutokset)
Laki digitaalisten palvelujen tarjoamisesta tuli Suomessa voimaan 1.4.2019 ja sen taustalla on Euroopan unionin saavutettavuusdirektiivi, joka velvoittaa julkista sektoria ja osaa yksityisen ja kolmannen sektorin organisaatioista noudattamaan saavutettavuusvaatimuksia.
Laki velvoittaa noudattamaan kansainvälisen WCAG-ohjeistuksen A- ja AA-tason kriteerejä. Digipalvelulaki ei kuitenkaan ole ainoa laki, joka velvoittaa organisaatioilta saavutettavia digipalveluja. Lisäksi julkisen sektorin elinten on julkaistava verkkosivuillaan saavutettavuusseloste, jossa palveluntarjoaja kertoo käyttäjille, miten hyvin sivusto tai palvelu täyttää saavutettavuusvaatimukset.
Tarkempaa tietoa saavutettavuudesta voit lukea esimerkiksi Aluehallintoviraston verkkosivustolta.
6 vinkkiä verkkosivuston saavutettavuuden parantamiseen
Selkeät sivupohjat
Yleisen käytettävyyden kannalta sekä käyttäjän, että näytönlukuohjelmien tulisi pystyä tunnistamaan verkkosivun rakenne. Sivupohjissa kannattaa hyödyntää sivun jakamista osiin semanttisilla merkinnöillä, kuten <header>, <nav>, <main> ja <footer>, joiden avulla pystytään ohjelmallisesti erottamaan eri osiot toisistaan. Lisäksi sivujen osiot tulee erottaa toisistaan visuaalisesti.
Rakenna sisältösi oikein otsikkotasojen avulla
Otsikkotyylien käyttäminen parantaa tekstin luettavuutta ja auttaa ruudunlukuohjelma käyttäjiä selaamaan sivua otsikkojen perusteella. Ei riitä, että lihavoit ja suurennat väliotsikon, vaan otsikolle tulee antaa merkitys otsikkotyylin avulla. Lisäksi otsikoiden käyttö tekee sivustosi rakenteesta selkeän ja parantaa hakukoneoptimointia.
Otsikkorakennetta voi ajatella sisällysluettelona, joka saattaa helpottaa otsikkorakenteen tekemistä.
Sivun pääsisällön tulisi alkaa H1-tason otsikolla. Lähtökohtaisesti H1-tason otsikoita tulisi olla 1/sivu. Poikkeuksena voi olla esim. pääsisällön (main) ja alaviitteen (footer) otsikointi. Otsikkotasoja ei saisi jättää välistä, vaan H1-tason otsikkoa seuraa alaotsikko H2, H2-tason otsikkoa H3 jne.
Varmista, että sivustosi on näppäimistöystävällinen
Koska suurin osa avustavista tekniikoista käyttää hyväksi vain näppäimistöön pohjautuvaa navigointia tulisi verkkosivuston kaikkiin elementteihin päästä kiinni myös ilman hiirtä. Yleisin tapa käyttää sivustoa on tab-näppäimen avulla. Näppäimistöystävällisyyden testaaminen on suhteellisen helppoa. Kokeile pystytkö käyttämään sivustoasi ilman hiirtä!
Varmista, että sivustosi sisältö on helposti saavutettavaa
Suurin osa vaikeasti saavutettavasta sisällöstä johtuu sivustolla käytettävästä dynaamisesta sisällöstä. Dynaaminen sisältö tarkoittaa sisältöä, joka muuttuu ilman, että sivua ladataan uusiksi. Dynaaminen sisältö voidaan merkitä ”live-alueiksi” ARIA-tageilla, jolloin ruudunlukijoille kerrotaan, että kyseessä on alue, jossa on vaihtuvaa sisältöä.
ARIA-tagien avulla voidaan myös ohjata ruudunlukijoita ohittamaan tiettyjä osioita sivustosta, jotta kävijän ei tarvitse esimerkiksi lukea pitkiä linkkilistoja läpi.
Varmista, että sivustolla käytettävissä kuvissa on ALT-tekstit
ALT-teksteillä tarkoitetaan yksinkertaisesti vaihtoehtoista kuvausta, jonka avulla ilmoitetaan mitä informaatioita kuvassa on tai mitä kuva esittää . Esimerkiksi, jos sivustolla on kuva kultaisestanoutajasta puremassa luuta, olisi sopiva ALT-teksti ”Kultainennoutaja syö luuta.”
Lisäksi ALT-tekstien käyttö parantaa hakukonenäkyvyyttä siinä mielessä, että hakukonerobotit lukevat ALT-tekstit ja ymmärtävät paremmin sivun sisällön.
ALT-tekstiä ei kuitenkaan ole aina välttämätöntä käyttää. Jos kuva on esimerkiksi puhtaasti koriste- tai kuvituskuva, jolla on tarkoitus luoda sivustolle “fiilistä”, voidaan ALT-teksti jättää pois.
Varmista, että sivuston värit erottuvat kaikille käyttäjille
Saavutettavuuden onnistumiskriteereistä helpoimmin määritettäviä ja mitattavia onnistumiskriteereitä ovat värit ja värien kontrasti. Värien selkeä kontrasti tekee tekstin lukemisesta miellyttävää ja helppoa. Mitä pienempää tekstiä käytetään, sitä suurempi tekstin ja taustan kontrastin tulee olla.
Muista, että myös lomakkeiden, painikkeiden tekstin ja taustan täytyy noudattaa standardia. Varmista, että kontrastit ovat riittävät kaikissa tilanteissa, esimerkiksi silloinkin, kun jokin linkki on valittu .
Yritysten graafisissa ohjeistoissa on usein määritetty brändivärit, joita tulee noudattaa yrityksen viestinnässä. Hyvä AD tai graafinen suunnittelija osaa huomioida värien kontrastierot jo suunnitteluvaiheessa, ja värimaailmaa luodessa kannattaakin pitää saavutettavuus mielessä, jolloin vältytään monelta murheelta käytännön toteutuksissa.
Voit testata ja tarkistaa värien tummuuskontrastin esimerkiksi WebAimin kontrastityökalulla.
Miten testata oman sivuston saavutettavuus?
Oman sivustosi saavutettavuutta voi testata hakukoneiden avulla löytyvillä sivustoilla, esim. wave.webaim.org. Lisäksi esim. Google Chrome -selaimeen on asennettavissa sovelluksia, joiden avulla saavutettavuuden testaaminen onnistuu vaivattomasti.
Tarvitsetko apua verkkosivustosi saavutettavuuden kanssa? Ota yhteyttä.
