Tässä kolmiosaisessa blogisarjassa käymme läpi verkkosivujen saavutettavuuden perusasioita. Ensimmäisessä osassa keskitymme ulkoasuun, toisessa sisältöön ja kolmannessa käyttöliittymään.

Ulkoasu

Mitä verkkosivun ulkoasussa tulee ottaa huomioon, jotta sivusto on saavutettava?

Värit

Värien käyttö on erittäin tärkeässä osassa verkkosivuston ulkonäön ja myös käytettävyyden kannalta. Hyvin käytettynä värit korostavat sivustolla tärkeitä elementtejä ja saavat sivuston näyttämään modernilta. Huonosti käytettyinä värit voivat taas estää käyttäjää lukemasta tekstiä.

Tärkeintä värimaailman valitsemisessa on se, että valitsee hyvin yhteen sopivat värit. Värien välillä tulisi olla riittävästi kontrastia, jos sitä käytetään esimerkiksi tekstien taustalla. Ei siis kannata käyttää yhdistelmiä kuten harmaa-punainen, vihreä-punainen tai keltainen-harmaa. Vältä myös yleisti tunnettuja värisokeuden kannalta hankalasti havaittavia yhdistelmiä, kuten punainen-vihreä.

Kontrastisuhteen tulisi olla tekstissä 4,5:1 ja isokokoisessa tekstissä 3:1. Näitä kontrastiarvoja voit tarkastella helposti syöttämällä värikoodit WebAIM:in palveluun, jonka löydät täältä: https://webaim.org/resources/contrastchecker/ . Sivusto näyttää miltä värit näyttävät tekstissä ja läpäiseekö se WCAG kriteeristön normaalissa tekstissä, isossa tekstissä ja käyttöliittymän elementtinä.

Kuvat ja kuvitus

Kuvien ja kuvituksen avulla sisällöstä voi tehdä helpommin ymmärrettävää. Onnistuneiden kuvitusten avulla esimerkiksi lukihäiriöstä ja keskittymishäiriöstä kärsivät voivat saada helpotusta ymmärtää ja muistaa lukemansa sisältöä.

Kuvissa on tärkeää olla alt-tekstit. Nämä tekstit eivät näy ulkopuolelle millään lailla, mutta ruudunlukijan käyttäjät kuulevat ne. Alt-tekstin tulisi kertoa käyttäjälle mitä kuvassa näkyy, jos se on tärkeää sisällön kannalta. Täysin koristetarkoituksellisiin kuviin ei tarvitse laittaa alt-tekstiä. Hyvä alt-teksti ei oleta kuvassa olevien ihmisten tunnetiloja, maiseman kauneutta tai muuta, joka on mielipideasia. Alt-teksti kertoo neutraalisti kuvan henkilöiden nimet (jos kyseessä on henkilökuvia), maiseman näkymän tai kuvassa lukevan tekstin.

Käytettäessä liikkuvia kuvia (gif tai muu animoitu kuva) on tärkeää muistaa, ettei käytä vilkkuvaa sisältöä. Vilkkuvat tai nopeasti välähtelevät kuvat voivat aiheuttaa epileptisiä kohtauksia.

Fontit

Fonttia valitessa kannattaa ottaa huomioon kuinka helppoa sitä on lukea. Kovin koristeellista fonttia ei kannata valita leipätekstiin, koska pidemmässä tekstissä se hidastaa lukunopeutta. Fontti merkitsee paljon myös lukijalle, jolla on lukihäiriö. Heille helpompaa on lukea tekstiä, jossa kirjaimet näyttävät mahdollisimman erilaisilta, ovat painotettu oikein ja ovat mahdollisimman koristeettomia.

Kirjasinkoon paksuus kannattaa myös valita fontin tyylin mukaan. Ohuet kirjaimet voivat helposti kadota osittain näkyvistä heikkonäköisille ihmisille. Liian paksut kirjaimet taas voivat sekoittua itseensä ja toisiinsa.

Verkkosivuilla kannattaa yleensä käyttää päätteetöntä fonttia (sans-serif), koska se on pienemmälläkin näytöllä tarkka ja helppolukuinen. Jos päätät valita fontin, joka ei kuulu yleisimpiin käyttöjärjestelmiin vakiona, muista määritellä vaihtoehtoinen fontti.