Siirry sisältöön
Takaisin sanastoon

Alt teksti

Alt-teksti on kuvalle kirjoitettu lyhyt tekstivastine, jonka ruudunlukija lukee ääneen ja jonka selain näyttää, jos kuva ei lataudu. Se kirjoitetaan HTML:n img-elementin alt-attribuuttiin. Hyvä alt-teksti kertoo, mitä kuva tarkoittaa juuri siinä kohdassa sivua.

Nimi tulee englannin sanoista alternative text, vaihtoehtoinen teksti. Alt-teksti on se, mitä kuvasta jää jäljelle, kun kuvaa ei näe. Ruudunlukijan käyttäjälle se on ainoa tapa tietää, mitä kuvassa on. Hakukoneet käyttävät sitä kuvan sisällön tulkitsemiseen.

Alt-teksti liittyy WCAG-ohjeiden ensimmäiseen onnistumiskriteeriin, 1.1.1 Ei-tekstuaalinen sisältö. Kriteeri edellyttää tekstivastinetta kaikelle kuvalle, joka välittää tietoa, joten digipalvelulain piirissä olevalta sivustolta alt-tekstit eivät voi puuttua.

Miten kirjoitan hyvän alt-tekstin?

Mieti ensin, miksi kuva on sivulla. Sama kuva voi tarvita eri alt-tekstin eri paikoissa. Tehtaan kuva tuotesivulla voi kertoa, mitä koneessa valmistetaan. Rekrytointisivulla samasta kuvasta kannattaa kertoa, millaisessa paikassa työ tehdään.

  • Kirjoita, mitä kuva kertoo lukijalle juuri siinä kohdassa.
  • Älä aloita sanoilla ”kuva, jossa”. Ruudunlukijahan kertoo jo, että kyse on kuvasta.
  • Jos kuvassa on tekstiä, kuten mainosbannerissa, kirjoita sama teksti alt-tekstiin.
  • Linkkinä toimivan kuvan alt-teksti kertoo, minne linkki vie. Etusivulle vievän logon alt-teksti voi olla vaikkapa ”Yrityksen nimi, etusivu”.
  • Pidä teksti lyhyenä. Yleensä yksi virke riittää. Kaavion tai infografiikan sisältö kuuluu leipätekstiin, koska sitä ei saa mahtumaan järkevästi yhteen attribuuttiin.

Huono alt-teksti on ”kuva1” tai ”tiimi”. Parempi on ”Myyntitiimin neljä henkilöä neuvotteluhuoneessa”, jos kuvan tehtävä on näyttää, keitä yhteyttä ottava asiakas tapaa.

Mitä eroa on alt-tekstillä ja kuvatekstillä?

Kuvateksti näkyy kaikille kuvan alla ja täydentää kuvaa. Alt-teksti korvaa kuvan silloin, kun sitä ei näe. Jos kuvateksti jo kertoo olennaisen, alt-tekstin ei tarvitse toistaa sitä sanasta sanaan, koska ruudunlukija lukisi saman asian kahdesti. Title-attribuutti on taas kolmas asia. Se näkyy hiiren alla pienenä vihjeenä, eikä se käy alt-tekstin korvikkeeksi.

Milloin alt-teksti jätetään tyhjäksi?

Pelkästään koristeelliset kuvat, kuten taustakuviot ja ikonit, joiden vieressä sama asia lukee jo tekstinä, saavat tyhjän alt-attribuutin (alt=""). Silloin ruudunlukija ohittaa kuvan kokonaan.

Tyhjä attribuutti ja puuttuva attribuutti ovat eri asioita. Jos alt-attribuutti puuttuu kokonaan, moni ruudunlukija lukee sen sijaan tiedostonimen. Kukaan ei halua kuulla kesken lauseen ”IMG piste neljä kahdeksan kaksi yksi piste jpg”.

Auttaako alt-teksti hakukoneoptimoinnissa?

Auttaa jonkin verran. Google kertoo käyttävänsä alt-tekstiä kuvan aiheen ymmärtämiseen, ja kuvahaussa sillä on merkitystä. Avainsanojen latominen alt-tekstiin on kuitenkin huono idea, koska ruudunlukijan käyttäjä joutuu kuuntelemaan ne kaikki. Kun kuvaus on kirjoitettu ihmiselle, hakukone saa siitä yleensä tarvitsemansa.

Kuka alt-tekstit kirjoittaa?

Yleensä se, joka lataa kuvan sivustolle, ja siksi ne niin usein puuttuvat. Sisällönhallinnan kannattaa ohjata kirjoittajaa. Webflow'ssa kuvan voi merkitä koristeelliseksi tai kirjoittaa sille alt-tekstin. Sanityyn rakennetulla sivustolla alt-teksti on kuvan kenttä, ja validointisääntö voi estää julkaisun, jos kenttä on tyhjä eikä kuvaa ole merkitty koristeelliseksi.