Nettisivujen saavutettavuus – 5 käytännön vinkkiä yrityksille

Nettisivujen saavutettavuus tarkoittaa sitä, että verkkosivut ovat kaikkien käytettävissä – riippumatta siitä, onko käyttäjällä esimerkiksi näkö-, kuulo-, liikunta- tai kognitiivisia haasteita. Hyvin saavutettavat sivut eivät kuitenkaan hyödytä pelkästään niitä, joilla on erityistarpeita, vaan ne tekevät käyttökokemuksesta sujuvamman ihan kaikille ja parantavat samalla myös sivujen hakukonenäkyvyyttä (SEO).

Aiemmassa blogissamme käsittelimme nettisivujen saavutettavuuden perusteita. Tässä artikkelissa puolestaan annamme viisi konkreettista ja helposti toteutettavaa keinoa, joilla voit parantaa nettisivujesi saavutettavuutta jo tänään!

1. Tarjoa tekstivastineet kuville ja visuaaliselle sisällölle (ALT-tekstit)

Näkövammaiset käyttäjät hyödyntävät ruudunlukijoita, jotka lukevat verkkosivujen sisältöä heille ääneen. Jos kuvilla ei ole tekstivastinetta, ruudunlukija ohittaa ne. Silloin käyttäjä ei myöskään saa tietoa siitä, mitä kuva sisältää. Tämä on erityisen tärkeää, jos kuvassa on oleellista tietoa, kuten tekstiä, ohjeita tai vaikkapa tarjouskampanjoita.

Näin parannat kuvien saavutettavuutta

• Lisää alt-tekstit (alternative text, suomeksi vaihtoehtoinen teksti) kuviin. Tämä on koodissa käytettävä tapa antaa kuvien sisältämä tieto tekstimuodossa. Alt-tekstit on mahdollista lisätä WordPressissä ja muissa verkkosivujen rakennusohjelmilla suoraan Media-osiossa kuvien kohdalle. Mikäli käytät ohjelmistoa suomen kielellä alt-teksti voi olla nimetty nimellä ’Vaihtoehtoinen teksti’.
• Jos kuvassa on tärkeää tekstiä, kirjoita se aina mukaan alt-tekstiin. Esimerkiksi, jos kuvassa lukee ”Osta 2, saat 1 ilmaiseksi!”, alt-tekstin tulee myös sisältää tämä tieto.
• Jos kuva on vain koristeellinen, käytä tyhjää alt-attribuuttia ’(alt=””)’, jotta ruudunlukija pystyy ohittamaan sen turhaan pysähtymättä.

✅ Hyvä esimerkki kuvan alt-tekstistä:

Alt-teksti: Starbucksin kahvikuppi, jossa on yrityksen vihreä logo.

❌ Huono esimerkki:

Alt-teksti: kuppi (Tämä on huono alt-teksti, koska se ei kerro mitään olennaista kuvasta.)

2. Varmista hyvä värikontrasti ja luettava fontti

Heikkonäköiset käyttäjät ja värisokeat saattavat nähdä värit eri tavalla tai eivät ollenkaan. Jos esimerkiksi vaaleanharmaa teksti on valkoisella taustalla, se voi olla täysin lukukelvoton monille käyttäjille.

Näin parannat kontrastia

• Käytä vähintään 4.5:1 kontrastia tekstin ja taustan välillä (voit testata väriyhdistelmät esim. WebAIM Contrast Checker).
• Vältä vaaleita värejä vaalealla taustalla, esim. keltainen teksti valkoisella taustalla.
• Käytä selkeitä, helposti luettavia fontteja, kuten Arial, Roboto tai Open Sans, ja vältä käsinkirjoitus- tai koristefontteja.
• Älä käytä vain väriä korostuksena. Esimerkiksi lomakevirheiden kohdalla pelkästään punainen väri ei riitä – lisää myös tekstimuotoinen virheilmoitus mukaan.

✅ Hyvä esimerkki:
”*Täytä sähköpostiosoite (kenttä on pakollinen).”

❌ Huono esimerkki:
”Täytä sähköpostiosoite.” (vain tekstin punainen väri ilmaisee virheen, mutta värisokeat eivät välttämättä näe sitä)

❌ Huono esimerkki:
Tätä tekstiä on vaikea lukea, koska se on väriltään vaalea ja tekstin tausta on valkoinen.

3. Tee sivustosta helposti navigoitava myös ilman hiirtä

Monet käyttäjät, kuten liikuntarajoitteiset ja näkövammaiset, käyttävät verkkosivuja pelkällä näppäimistöllä tai avustavilla teknologioilla. Siksi hyvä nettisivujen saavutettavuus edellyttää, että kaikki toiminnot ovat käytettävissä helposti myös ilman hiirtä.

Helpota navigointia näin

• Testaa sivustoa ilman hiirtä: Voit tehdä tämän painamalla Tab-näppäintä ja varmistamalla, että kaikki interaktiiviset elementit (napit, linkit, lomakkeet) voidaan käyttää pelkällä näppäimistöllä.
• Varmista, että interaktiiviset elementit on merkitty fokusjärjestyksessä, jotta navigointi etenee loogisesti.
• ✅ Hyvä fokusjärjestys: Ensimmäisenä logo, sitten navigointivalikko, sitten pääsisältö ja painikkeet.
• ❌ Huono fokusjärjestys: Satunnainen järjestys, jossa käyttäjä joutuu hyppimään ympäriinsä ilman selkeää etenemistä.
• Lisää ”Hyppää pääsisältöön” -linkki ’(skip to main content)’ , jotta käyttäjät voivat ohittaa pitkät valikot. Tämä linkki sijoitetaan yleensä heti <body>-elementin alkuun, jotta se on ensimmäinen asia, johon näppäimistökäyttäjä pääsee käsiksi.

4. Lisää selkeät ja ymmärrettävät linkkitekstit

Samoin kuin tavallisen leipätekstin, ruudunlukijat lukevat kaikki sivuston linkit ääneen. Jos linkkissä lukee tekstinä: ”Klikkaa tästä”, käyttäjä ei tiedä tarkalleen, minne kyseinen linkki johtaa. Sen sijaan linkin tekstiin on hyvä kirjoittaa minne linkki on viemässä, kuten esimerkiksi ’Yhteystiedot’.

Kirjoita linkkitekstit näin

• Kirjoita linkkitekstit niin, että ne kertovat, mitä linkin takaa löytyy.

✅ Hyvä linkkiteksti:
”Lue lisää nettisivujen saavutettavuudesta.”

❌ Huono linkkiteksti:
”Lue lisää” (ei kerro asiayhteyttä)

5. Tee lomakkeista saavutettavia ja käyttäjäystävällisiä

Lomakkeet voivat olla vaikeita ruudunlukijan käyttäjille, jos kenttien nimet tai virheilmoitukset eivät ole selkeitä.

Toimi lomakkeiden kanssa näin

• Määritä jokaiselle lomakekentälle selkeä nimi käyttämällä <label>-tageja. Lisäksi yhdistä mahdolliset virheilmoitukset kenttään aria-describedby-attribuutilla, jotta ruudunlukijat lukevat ne oikein.

✅ Hyvä virheilmoitus:

Nettisivujen saavutettavuus hyödyttää kaikkia

Nettisivujen saavutettavuus ei tosiaan ole vain byrokraattinen lakisääteinen vaatimus. Saavutettavuus on investointi parempaan käyttäjäkokemukseen ja laajempaan asiakaskuntaan. Kun sivustosi on helppokäyttöinen kaikille, se parantaa myös hakukonenäkyvyyttä, asiakastyytyväisyyttä ja liiketoiminnan saavutettavuutta.

Toimi jo tänään ja varmista, että nettisivusi palvelevat kaikkia käyttäjiä ja saavuttavat täyden potentiaalinsa!

Kaipaatko asiantuntijan apua?

Mikäli tunnet tarvetta saada apua verkkosivujen saavutettavuuteen liittyen tai muista palveluissa ole yhteydessä LevelUpin digitiiminammattilaisiin niin katsotaan yrityksellesi juuri sopiva ratkaisu!