BLOGI

Verkkopalvelun saavutettavuus – 8 yleisintä virhettä nettisivuilla

On meidän kaikkien etumme – sekä käyttäjien että yritysten – että verkkosivut ja digitaaliset palvelut ovat kaikkien ihmisten käytettävissä ja saavutettavissa, erilaisista rajoitteista huolimatta. Samalla kun digipalveluita uudistetaan kohti saavutettavuutta, on mahdollista parantaa myös yleistä käyttökokemusta. Tämä taas palvelee yhtälailla kaikkia ihmisiä.

Tässä listaamme kahdeksan yleisintä puutetta, mitä verkkosivuilla on saavutettavuuteen liittyen:

1 – Liian vähäinen värikontrasti 

Toistensa yhteydessä tai päällekäin olevien kuvien ja tekstien välillä täytyy olla riittävästi kontrastia, jotta teksti on luettavissa ja sisältö helposti hahmotettavissa. Esimerkiksi jos tumman kuvan päällä on tekstiä tummalla värillä, sen erottuvuus kärsii. Vaikka värillinen teksti olisikin periaatteessa erotettavissa kuvasta, heikkonäköisille sen erottaminen kuvasta saattaa olla mahdotonta.

Tässä esimerkki kuvasta, jonka päällä on tekstiä niin että kontrasti ei ole riittävä. Teksti tuntuu uppoavan kuvaan vaaleissa kohdissa:

Tämän elementin kontrastia voi parantaa esimerkiksi tummentamalla kuvaa:

Toinen tapa parantaa kontrastia tässä tilanteessa on sijoittaa teksti tumman laatikon sisään. Optimaalinen kontrasti on mustan ja valkoisen välillä:

Erityisesti tarkkaavaisuutta vaatii kuvien ja tekstien yhdistelmä. Jos kuva on liian vaihtelevan sävyinen, sen päälle ei kannata lisätä tekstiä ollenkaan ilman selkeää taustaväriä tai laatikkoa.

Kontrastivaatimukset eivät koske kuva- ja tekstielementtejä, jotka eivät ole aktiivisia käyttöliittymäelementtejä, vaan täysin kuvituksellista sisältöä. Myöskään brändin logoa ja tuotenimen visuaalista ulkoasua nämä vaatimukset eivät koske.

2 – Liikkuminen sivuilla näppäimistön avulla on puutteellista

Yksi tärkeimmistä saavutettavuuden ominaisuuksista on mahdollisuus liikkua sivulla näppäimistön avulla hiirtä käyttämättä. Monet liikunta- tai näkörajoitteiset sekä näytön suurennusta käyttävät navigoivat verkkosivuilla näppäimistön avulla. Saavutettava verkkosivusto antaa mahdollisuuden käyttää kaikkea sisältöä ja toimintoja näppäimistön kautta. Kulloinkin aktiivinen elementti, kuten linkki, lomake, video tai muu mediaelementti näkyy käyttäjälle myös visuaalisesti esim. kehysten avulla.

Nämä visuaaliset indikaattorit on usein poistettu käytöstä esteettisin perustein, mutta ne ovat kuitenkin saavutettavuuden kannalta todella keskeisiä. Käyttäjän pitäisi aina pystyä liikkumaan loogisesti elementistä toiseen sivuilla pelkän näppäimistön avulla.

3 – Otsikointien epäloogisuus

Näkövammaiset nettisivujen käyttäjät lukevat harvoin kokonaisen verkkosivun. Sen sijaan he skannaavat sivun etsimällä heitä kiinnostavia osia sisällöstä. Näytönlukijaa käyttämällä he myös pystyvät hahmottamaan paremmin sivuston sisältöä ja tässä olennaista on looginen otsikointi. Jos otsikoita ei käytetä oikein (tai ollenkaan), käyttäjä ei löydä sivulta etsimäänsä.

Otsikointeja (h1, h2, h3 jne) tulisi käyttää sisältöön nähden relevantisti, eikä pelkästään visuaalisin perustein. Toki on tärkeää, että loogisuus pätee myös visuaalisesti ja käyttäjän on helppo hahmottaa eri sisältökokonaisuudet myös ulkoasun perusteella.

H1-otsikko on sivun pääotsikko, ja niitä tulisi olla vain yksi kullakin sivulla. H2 taas on seuraavaksi tärkein väliotsikko, ja h3-otsikoita käytetään vain h2-otsikon alla olevan sisällön väliotsikoinnissa. Tämä otsikointitapa tukee myös hakukoneoptimoinnin perusteita ja on myös SEO-näkökulmasta erityisen suositeltavaa.

Yksi yleisimpiä otsikointeihin liittyviä virheitä on käyttää h1-tagia useaan kertaan sivulla. Jos tarkoituksena on vain saada suurempi otsikkotyyli käyttöön, voi sen tehdä varsinaisia otsikkotyylejä muokkaamalla.

4 – Kuvien puuttuvat tai epäloogiset vaihtoehtoiset tekstit

Näkövammaiset käyttävät lukulaitetta, joka muuntaa sivun sisällön puheeksi. Jos kuvista puuttuu vaihtoehtoinen “alt” -teksti, puheeksi muuntaminen ei onnistu ja kuvan informaatio jää näin tavoittamatta käyttäjän.

Alt-tekstin tulisi kuvata kuvan sisältöä sellaiselle, joka ei kuvaa näe. Konteksti on tärkeä. Toimiiko kuva linkkinä, tai onko siinä jokin muu toiminto? Tämä tulisi ottaa huomioon tekstiä muotoillessa.

Sekä kuvien alt- että description- ja title-kentät olisi hyödyllistä täyttää kuvaavalla tekstillä myös hakukonenäkyvyyden parantamiseksi.

Jaa tämä artikkeli:

Lataa ilmainen opas: Saavutettavuus verkkosivuilla

– mitä julkisen tahon toimijoiden ja julkista rahoitusta saavien tulisi tietää verkkosivujen saavutettavuudesta?

 

Saavutettavia sivuja tarjoaa:

Kinghill Advertising Oy
Pohjolantie 2 B • 01260 Vantaa • 050 5333 431
kinghill.fi