Postaus päivitetty 10/2024
Tämä postaus on kirjoitettu hyvien nettisivujen tekokäytänteiden pohjalta ja tarjoaa helppoja vinkkejä siihen, kuinka voit tehdä sivuista mahdollisimman selkeät kaikille käyttäjille.
Saavutettavuus verkkosivuilla tarkoittaa sitä, että kaikki kävijät, riippumatta esimerkiksi mahdollisista sairauksista, vammoista tai teknisistä rajoitteista, voivat käyttää sivustoa esteettä.
Laki digitaalisten palvelujen tarjoamisesta velvoittaa julkista sektoria ja osaa yksityisen ja kolmannen sektorin organisaatioista noudattamaan saavutettavuusvaatimuksia. Vaikkei kotisivujen saavutettavuuden huomioinen olisikaan pakollista juuri sinun yrityksellesi, se todennäköisesti parantaa hakukonenäkyvyyttäsi ja huomioi kaikki asiakkaasi.
Mitä saavutettavuus kotisivuilla konkreettisesti tarkoittaa?
Kannattaa pitää mielessä, että jokainen kävijä sivustollamme voi olla potentiaalinen asiakas.
Jokaisen, riippumatta teknisistä tai terveydellisistä lähtökohdista, pitäisi pystyä navigoimaan ja löytämään tarvitsemansa tiedot kotisivuiltasi. Huomioi siis ainakin nämä asiat kotisivuillasi:
Sinua voisi kiinnostaa: Näin luot WordPress-verkkosivut yrityksellesi ilman kokemusta
Värit ja niiden kontrastit
Huomioi riittävä kontrasti taustavärin ja tekstien välillä.
Navigaatio, eli valikko
Valikot ovat haastavia saavutettavuuden kannalta. Kaikki netin käyttäjät eivät käytä hiirtä, joten valikkojen tulisi toimia myös näppäimillä. Valikkoa pitäisi pystyä selaamaan Tab ja Shift + Tab -näppäinyhdistelmällä ja niin, että Enter-näppäin avaa valikon ja Esc sulkee valikon, myös mobiililaitteilla.
Fontit
- Valitsemasi fontin tulisi olla helposti luettava ja kotisivuilla käytettävien fonttien riittävän suuria.
- Suositeltu pituus tekstiriville on n. 75 – 80 merkkiä.
- Tasaa teksti mieluiten vasemmalle. Käytä keskitystä vain pienillä alueilla.
- Luettavuuden kannalta suositellaan, että riviväli olisi n. 0,5 kertaa suurempi kuin fonttikoko.
- Huomioi otsikkohierarkia. Käytä otsikkoelementtejä (H1-H6) sivulla laskevassa järjestyksessä, jotta sivuston navigointi on sujuvaa myös esimerkiksi ruudunlukijaa käytettäessä. Laskeva järjestys tarkoittaa, että H1 jälkeen tulee H2 (niitä voi olla useampi samalla sivulla) ja sen jälkeen mahdollisesti H3 jne. Älä käytä lihavoitua tekstiä otsikkona, vaan käytä otsikkoelementtiä ja tyylittele se haluamasi mukaan.
- Huolehdi riittävä kontrasti tekstin ja tausta välillä. Verkkosisällön saavutettavuusohjeissa (WCAG) tekstin värin ja taustan värin välisen kontrastisuhteen pitää olla vähintään 4,5:1. Mikäli teksti on suurikokoista (vähintään 18 pistettä tai lihavoitu teksti vähintään 14 pistettä), kontrastin pitää olla vähintään 3:1. Voit tarkastaa kontrastin esimerkiksi erillisellä laskurilla WebAIM.org sivuilta.
Linkit
- Huolehdi, että linkit näyttävät linkeiltä. Pahinta on, jos linkki on täysin saman näköinen tekstin kanssa. Lisää linkkiin vähintään alleviivaus, mutta käytä mieluiten johdonmukaisesti samaa linkkiväriä (joka on siis erivärinen kuin leipätekstin väri) koko kotisivuilla.
- Linkkiin olisi hyvä lisätä maininta mikäli se aukeaa uuteen välilehteen. Uuteen välilehteen aukeavat linkit eivät ole saavutettavia.
- Joskus nettisivujen linkeistä tehdään nappien näköisiä – tämä hämmentää ruudunlukulaitetta käyttävää käyttäjää. Linkin oletetaan vievän jonnekin (ohjataan esimerkiksi ulkopuoliselle sivustolle), nappien tekevän asioita verkkosivuilla (esim. avaa yhteydenottolomake).
Hover-efektit
Käytä hover-efektejä harkiten sivuillasi – ne eivät ole saavutettavia. Hover-efekti tarkoittaa sitä, että lisätietoa paljastuu jostain kohdasta, kun käyttäjä vie hiiren tiettyyn kohtaan. Joskus kotisivuilla näkyy esimerkiksi kuva ja otsikkoboksin, josta paljastuu lisätietona tekstikenttä kun käyttäjä vie hiiren sen päälle. Hover-efektit eivät myöskään toimi mobiililaitteissa.
Alt-tekstit kuviin ja videoihin
Alt-teksti on tekstivastine kuvassa, videossa tai ikonissa. Se tarkoittaa siis tekstiä, joka kertoo kuvan sisällön ruudunlukulaitetta käyttävälle ihmiselle. Kirjoita alt-tekstiin informatiivisesti kuvan sisältö.
Värit asioiden indikaattoreina
Jos sivuillasi on yhteydenottolomake, jossa on pakollisia kenttiä, käytä aina error-viestiä punaisen värin lisäksi ”Tämä on pakollinen kenttä, täytä sähköpostiosoitteesi”.
Mikäli filtteröit esim. verkkokaupassasi tuotteita värin perusteella, älä käytä pelkkää väripallukkaa vaan kirjoita myös värin nimi.
Tekstitä videot
Mikäli teet videoita sosiaaliseen mediaan tai verkkosivuillesi, tekstitä ne helppolukuisella fontilla. Tämä mahdollistaa videoiden seuraamisen myös kuulo- ja näkövammaisille. Moni katsoo videoita ilman ääntä, joten tekstitys auttaa heitäkin.
Lisätietoa saavutettavuudesta
Saavutettavasti.fi
Saavutettavuusvaatimukset.fi
Näkövammaisten keskusliitto
0 kommenttia