Alt-teksti parantaa saavutettavuutta ja hakukonenäkyvyyttä

Mikä on alt-teksti?

Alt-teksti (alt-attribuutti) on HTML-koodissa kuvan yhteyteen liitettävä lyhyt tekstikuvaus, joka kertoo, mitä kuvassa on tai mitä se esittää. Alt lyhenne tulee sanasta alternative, joka tarkoittaa vaihtoehtoista.

Kuvan vaihtoehtoinen kuvaus ei näy kaikille käyttäjille suoraan, mutta sen merkitys on valtava, erityisesti saavutettavuuden ja hakukonenäkyvyyden kannalta.

Jos kuva ei lataudu, teksti näkyy kuvan tilalla. Lisäksi ruudunlukijat lukevat alt-tekstin ääneen, jolloin näkövammaiset tai muut toimintarajoitteiset käyttäjät saavat kuvan sisällön tiedoksi.

Miksi kuvan alt-teksti on tärkeä?

Alt-teksti saavutettavuuden näkökulmasta on ensiarvoisen tärkeä. Ilman kuvailevaa tekstiä näkörajoitteinen käyttäjä jää täysin vaille tietoa siitä, mitä kuva viestii.

3 tärkeintä syytä käyttää vaihtoehtoista kuvausta

• Saavutettavuus: Vaihtoehtoinen kuvaus saavutettavuusvaatimusten täyttämiseksi on pakollinen erityisesti julkisten verkkopalveluiden osalta. Se tekee digitaalisesta sisällöstä saavutettavampaa.
  
• Hakukonenäkyvyys: Hakukoneet, kuten Google, eivät näe kuvia – ne lukevat kuviin liitetyt vaihtoehtoiset kuvaukset. Hyvin kirjoitettu kuvan teksti voi parantaa sivun näkyvyyttä kuvahaussa ja yleisesti hakutuloksissa. Lue lisää kuvien hakukoneoptimoinnista
  
• Käytettävyys: Jos kuvan lataus epäonnistuu, vaihtoehtoinen kuvaus tarjoaa silti käyttäjälle kontekstin, jolloin viesti ei mene täysin ohi.

Millainen on hyvä vaihtoehtoinen teksti kuvaan?

Tekstin tarkoitus ei ole olla koriste tai hakusanarivistö, vaan se palvelee käyttäjää.

Hyvä kuvan alt-teksti vastaa kysymykseen: Mitä käyttäjän tulisi tietää tästä kuvasta, jos hän ei näe sitä?

Hyvän vaihtoehtoisen kuvaustekstin periaatteet:

1. Ole ytimekäs mutta informatiivinen
   Esimerkki: ”Punainen polkupyörä puiston penkin vieressä.” Liian pitkä tekstikään ei ole hyvä, tekstin tulee olla napakka mutta kertoa tärkeimmät asiat.
   
2. Vältä sanoja kuten ”kuva” tai ”valokuva”
   Ruudunlukija kertoo jo, että kyseessä on kuva. Älä toista sitä turhaan. Tekstiä ei tarvitse aloittaa sanalla ”kuvassa on..”.
   
3. Älä toista sivun tekstiä sanasta sanaan
   Jos kuvassa on teksti, joka on jo kirjoitettu leipätekstiin, alt-tekstissä sitä ei tarvitse toistaa. Kerro vain asia, joka tuo lisäarvoa kuulijalle.
   
4. Sovita vaihtoehtoinen kuvaus kontekstiin
   Sama kuva voi saada eri kuvaavan tekstin riippuen siitä, missä sitä käytetään. Esimerkiksi tuotekuvassa painotetaan ominaisuuksia, uutiskuvassa tapahtumaa.

Kaikkiin kuviin ei tarvitse lisätä kuvausta. Esimerkiksi kuvituskuvat, jotka eivät tuo sisältöön lisäarvoa tai informaatiota eivät tarvitse vaihtoehtoista kuvausta.

Seuraavaksi muutama käytännön esimerkki, millainen vaihtoehtoinen kuvaus voi olla:

”Koira juoksee hiekkarannalla keppi suussaan auringonlaskun aikaan.”

”Naisten sininen farkkutakki, napit edessä ja rintataskut.”

”Lautasellinen pastaa tuoreella basilikalla ja parmesaanilla koristeltuna.”

Alt-teksti ja verkkokaupat

Erityisen tärkeä kuvan vaihtoehtoinen kuvaus on verkkokaupoissa.

Tuotekuvat ovat keskeisiä ostopäätöksen kannalta. Ilman kuvaan liitettyä alt-tekstiä näkörajoitteinen asiakas ei saa tietoa tuotteen ulkonäöstä, ja kaupankäynti voi estyä kokonaan.

Hyvä esimerkki verkkokaupan kuvan vaihtoehtoisesta tekstistä:
”Naisten musta polvipituinen villakangastakki, vyöllinen, koko S–XL.”

Tällainen kuvaus auttaa sekä asiakasta että hakukonetta ymmärtämään, mistä tuotteessa on kyse.

Verkkokaupan saavutettavuus ja löydettävyys paranevat, kun jokainen tuotekuva on varustettu kuvaavalla ja informatiivisella vaihtoehtoisella kuvauksella.

Saavutettavuus – osa laajempaa vastuuta

Vaihtoehtoisten tekstien lisääminen ei ole vain tekninen toimenpide. Se on osa organisaation sitoutumista saavutettavuuteen, inklusiivisuuteen ja asiakaskokemuksen parantamiseen.

Laki digipalvelujen saavutettavuudesta velvoittaa jo monia, mutta vielä tärkeämpää on ymmärtää alt-tekstien merkitys jokaisen käyttäjän arjessa. Vaihtoehtoinen kuvaus on pieni mutta merkittävä osa verkkosisältöä.

Laadukas kuvan alt-teksti kertoo olennaisen ilman turhaa selittelyä – ja tekee verkosta paremman paikan kaikille.

Saattaisit olla kiinnostunut myös seuraavista artikkeleista:

• Verkkokaupan käytettävyys – avain parempaan asiakaskokemukseen
• Saavutettavuusseloste – Mikä se on ja miksi se tarvitaan?
• Kuvien hakukoneoptimointi – Näin onnistut vaihe vaiheelta
• Saavutettavuus ja fontti: Miksi typografialla on merkitystä kaikille

Verkkosivustot

Artikkelin kirjoitti

Selina Kuure

Selina Kuure on inspiroitunut brändien merkityksellisyydestä. Hänen intohimonsa on auttaa organisaatioita löytämään ja sanoittamaan oma ytimensä – sen, mikä tekee niistä merkityksellisiä.

---

←Verkkopalvelun saavutettavuus – Avain tasa-arvoon verkossa

Saavutettavuus ja linkit – Näin teet linkit saavutettaviksi→