Kuvien alt-tekstit: näin ne kirjoitetaan oikein

Mikä alt-teksti on?

Alt-teksti on kuvan vaihtoehtoinen teksti: lyhyt kuvaus, joka on kirjoitettu kuvan HTML-koodiin ja jonka ruudunlukija lukee ääneen, selain näyttää kuvan tilalla jos kuva ei lataudu, ja hakukone lukee ymmärtääkseen mitä kuvassa on. Se ei näy sivulla tavalliselle kävijälle, ja siksi se jää niin usein kirjoittamatta.

Nimi tulee HTML:n alt-attribuutista. Kuvan koodissa lukee esimerkiksi img src="kuva.jpg" alt="Musta nahkasohva olohuoneessa". Se lainausmerkkien välissä oleva lause on alt-teksti. Julkaisujärjestelmissä sitä ei tarvitse kirjoittaa koodiin, vaan kuvan tiedoissa on sille oma kenttä, jonka nimi on yleensä "vaihtoehtoinen teksti" tai "alt-teksti".

Sen tehtävä on korvata kuva silloin, kun kuvaa ei voi nähdä. Hyvä testi on tämä: jos kuva poistettaisiin ja sen tilalle jätettäisiin vain alt-teksti, menettäisikö lukija jotain olennaista? Jos ei, alt-teksti on hyvä. Jos menettäisi, se on liian lyhyt tai väärä.

Alt-teksti ei ole sama kuin kuvateksti. Kuvateksti näkyy kaikille kuvan alla ja täydentää kuvaa. Alt-teksti näkyy vain niille, jotka eivät näe kuvaa, ja korvaa sen. Samaa tekstiä ei kannata laittaa molempiin, koska ruudunlukija lukee silloin saman lauseen kahdesti peräkkäin.

Kuka alt-tekstin oikeasti lukee

Alt-tekstillä on neljä lukijaa, ja niiden tarpeet ovat hieman erilaiset. Ensimmäinen on ruudunlukijan käyttäjä, joka on sokea tai heikkonäköinen ja kuulee sivun puheena. Hänelle alt-teksti on ainoa tapa tietää, mitä kuvassa on ja miksi se on siinä.

Toinen on hakukone. Google ei katso kuvaa samalla tavalla kuin ihminen. Se lukee tiedostonimen, alt-tekstin, kuvan ympärillä olevan tekstin ja sivun otsikot, ja päättelee niistä, mitä kuva esittää. Alt-teksti on näistä painavin, koska se on kirjoitettu juuri tätä varten.

Kolmas on kuka tahansa, jonka selain ei ladannut kuvaa. Hidas yhteys junassa, estetty kuvien lataus sähköpostissa, rikkinäinen linkki. Silloin selain näyttää alt-tekstin kuvan paikalla, ja kävijä tietää ainakin mitä siinä olisi pitänyt olla.

Neljäs, joka on tullut viime vuosina: tekoälyhaut ja avustajat, jotka lukevat sivuja tekstinä. Niille kuva ilman alt-tekstiä on tyhjä kohta, ja kuva hyvällä alt-tekstillä on osa sivun sisältöä.

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

Alt jätetään tyhjäksi silloin, kun kuva on pelkkä koriste eikä sisällä tietoa, jota lukija tarvitsisi: taustakuvio, koristeviiva, kuvituskuva joka toistaa sen mitä vieressä olevassa tekstissä jo lukee. Tyhjä alt tarkoittaa alt="" eli attribuutti on olemassa mutta sisältö on tyhjä, ja se kertoo ruudunlukijalle, että kuvan voi ohittaa.

Tyhjä alt ja puuttuva alt ovat eri asioita. Jos attribuuttia ei ole ollenkaan, ruudunlukija ei tiedä, onko kuva tärkeä, ja lukee usein tiedostonimen: "IMG underscore 4521 piste jpg". Se on pahin mahdollinen lopputulos. Tyhjä alt on tietoinen päätös, puuttuva alt on unohdus.

Päätös koristekuvasta tehdään kysymällä, mitä kuva tekee sivulla. Jos etusivun yläreunassa on tunnelmakuva rakennustyömaasta ja vieressä otsikko "Rakennusliike Tampereelta", kuva ei kerro mitään, mitä otsikko ei jo kertoisi. Se voi olla tyhjä. Jos sama kuva on palvelusivulla ja näyttää, millaista työtä teette, se on sisältöä ja tarvitsee kuvauksen.

Julkaisujärjestelmissä tyhjän altin saa jättämällä kentän tyhjäksi, kunhan järjestelmä tulostaa attribuutin silti. Useimmat tekevät niin. Jos et ole varma, pyydä sivuston tekijää tarkistamaan yhden koristekuvan koodi.

Miten kirjoitat alt-tekstin tuotekuvalle?

Tuotekuvan alt-teksti kertoo, mikä tuote on, ja sen näkyvät ominaisuudet, jotka ostaja haluaisi tietää kuvasta: väri, materiaali, malli, kuvakulma, jos niitä on useita. Esimerkiksi "Merinovillainen neulepaita, tummanvihreä, edestä" eikä "neulepaita" eikä "tuote-2231".

Tuotekuvissa toistuu sama sudenkuoppa: kaikilla saman tuotteen kuvilla on sama alt-teksti. Verkkokaupassa tuotteella on tyypillisesti neljä kuvaa, edestä, takaa, lähikuva ja käytössä. Jos kaikissa lukee sama, ruudunlukijan käyttäjä kuulee saman lauseen neljästi eikä tiedä, mikä kuva näyttää mitä. Jokaiselle kuvalle oma kuvaus: "takaa", "lähikuva punoksesta", "mallin päällä".

Toinen sudenkuoppa on tuotenimen toistaminen sellaisenaan. Jos tuotenimi on "Aalto 200 x 90", alt-teksti "Aalto 200 x 90" ei kerro sokealle ostajalle, että kyseessä on vaalea tammipöytä. Alt-teksti kirjoitetaan sille, joka ei ole vielä nähnyt tuotetta.

Kolmas: älä laita hintaa, varastotilannetta tai kampanjatekstiä alt-tekstiin. Ne muuttuvat, alt-teksti ei muutu mukana, ja ruudunlukijan käyttäjä kuulee vanhentuneen tiedon. Hinta kuuluu tuotesivun tekstiin, josta on kerrottu artikkelissa verkkokaupan tuotesivu joka myy.

Verkkokaupassa, jossa on satoja tuotteita, alt-tekstit voi tuottaa säännöllä tuotetiedoista: tuotenimi plus väri plus kuvakulma. Se ei ole yhtä hyvä kuin käsin kirjoitettu, mutta se on paljon parempi kuin tyhjä, ja se päivittyy kun tuotetiedot päivittyvät.

Mitä alt-tekstiin ei laiteta?

Alt-tekstiin ei laiteta sanoja "kuva" tai "valokuva", ei avainsanalistoja, ei tiedostonimeä, ei tekstiä joka on jo kuvan vieressä, eikä mitään, mikä ei ole kuvassa. Jokainen näistä tekee alt-tekstistä huonomman kuin tyhjä.

"Kuva" on turha, koska ruudunlukija ilmoittaa jo, että kyseessä on kuva. Käyttäjä kuulee "kuva: kuva punaisesta autosta". Aloita suoraan sisällöstä: "Punainen farmariauto pihalla".

Avainsanalistat ovat vanha hakukonetemppu, joka ei toimi enää ja tekee sivusta huonon kuuntelijalle. "Kampaamo Tampere hiustenleikkaus värjäys parturi Tampere" ei ole kuvaus mistään. Google tunnistaa sen ja jättää sen huomiotta parhaassa tapauksessa, ja pahimmassa tapauksessa se laskee sivun arvoa.

Tekstin toistaminen on yleinen ja huomaamaton virhe. Jos kuvan alla on kuvateksti "Toimitusjohtaja Maija Virtanen" ja alt-teksti on sama, ruudunlukija lukee nimen kahdesti. Silloin alt voi olla lyhyempi ja kertoa sen, mitä kuvateksti ei kerro: "Maija Virtanen seisoo verstaan ovella".

Ja mitään keksittyä. Jos kuvassa on yleinen toimistokuva kuvapankista, alt ei sano "tiimimme työssä". Se on väärä väite, ja se paljastuu heti, kun joku kysyy.

Kuinka pitkä alt-tekstin pitää olla

Niin pitkä kuin kuvan olennaisen sisällön kertominen vaatii, ja useimmiten se on yksi lause, alle viisitoista sanaa. Kuva ei ole novelli. Ruudunlukijan käyttäjä haluaa tietää, mitä kuvassa on, ja jatkaa eteenpäin.

Jos kuva sisältää paljon tietoa, esimerkiksi kaavio tai infograafi, sitä ei kuvata alt-tekstissä kokonaan. Alt kertoo, mistä kaavio kertoo, ja tieto itse kirjoitetaan sivun tekstiin tai taulukkoon, jonka kaikki voivat lukea. "Kaavio: liikevaihdon kehitys 2020 alkaen, luvut alla taulukossa" on hyvä alt sellaiselle kuvalle.

Sama pätee kuviin, joissa on tekstiä. Tarjouskuva, jossa lukee "Syyskuun ajan kaikki kengät edullisemmin", tarvitsee sen tekstin alt-tekstiin, koska muuten sokea asiakas ei tiedä tarjouksesta. Vielä parempi on olla laittamatta tekstiä kuvaan ollenkaan, koska kuvan tekstiä ei voi hakea, suurentaa eikä kääntää.

Logo, ikonit ja linkkikuvat

Logon alt-teksti on yrityksen nimi, ei sana "logo". Kun logo toimii linkkinä etusivulle, kuten se lähes aina toimii, alt-teksti on se, mitä ruudunlukija lukee linkin nimenä. "Linkki: logo" ei kerro mihin linkki vie. "Linkki: Yritys Oy, etusivu" kertoo.

Tämä on yleinen sääntö kaikille kuville, jotka ovat linkkejä: alt kertoo, mihin linkki vie, ei mitä kuvassa on. Somekuvake, joka vie yrityksen Instagram-sivulle, saa alt-tekstin "Instagram" tai "Yritys Instagramissa", ei "kameran kuva".

Ikonit, jotka ovat tekstin vieressä koristeena, jätetään tyhjiksi. Puhelimen kuva numeron vieressä ei tarvitse alt-tekstiä, koska numero on jo tekstinä. Mutta jos ikoni on ainoa asia, joka kertoo toiminnon, esimerkiksi suurennuslasi ilman sanaa "Haku", sen alt-teksti on "Haku".

Painikkeet, jotka on tehty kuvasta, ovat erikoistapaus. Ne tarvitsevat alt-tekstin, joka kertoo mitä painike tekee: "Lähetä", "Lisää koriin", "Seuraava kuva". Ilman sitä ruudunlukijan käyttäjä kuulee "painike" ja joutuu arvaamaan.

Miten alt vaikuttaa Google-kuvahakuun?

Alt-teksti on yksi tärkeimmistä signaaleista, joilla Google päättää, mitä kuva esittää ja millä hauilla se näytetään kuvahaussa, ja se vaikuttaa jonkin verran myös tavalliseen hakuun, koska se on osa sivun tekstisisältöä. Kuva ilman alt-tekstiä voi silti näkyä, mutta Google joutuu arvaamaan sen sisällön ympäröivästä tekstistä ja tiedostonimestä.

Kuvahaku on toimialasta riippuen joko merkityksetön tai ratkaiseva. Kirjanpitäjälle se ei tuo asiakkaita. Sisustusliikkeelle, kampaamolle, tatuoijalle, puutarhurille tai remonttifirmalle se tuo, koska asiakas etsii ideoita kuvista ja päätyy sivustolle kuvan kautta. Silloin jokainen työnäyte ilman alt-tekstiä on menetetty hakutulos.

Alt-teksti toimii yhdessä kolmen muun asian kanssa. Tiedostonimi, joka on "valkoinen-keittio-saareke.jpg" eikä "DSC0042.jpg". Kuvan ympärillä oleva teksti, joka kertoo samasta aiheesta. Ja sivun otsikko. Kun kaikki neljä sanovat samaa, Google luottaa siihen. Kun alt sanoo yhtä ja tiedostonimi toista, se ei luota kumpaankaan.

Tästä seuraa myös, että alt-tekstiin kannattaa kirjoittaa ne sanat, joilla asiakas hakee, kun ne kuvaavat kuvaa rehellisesti. "Valkoinen keittiö saarekkeella, Helsinki" on sekä hyvä kuvaus että hakusana. "Kaunis keittiö" ei ole kumpaakaan.

Alt-teksti ja hakukonenäkyvyys: mitä ei kannata odottaa

Alt-tekstit eivät nosta sivustoa Googlen kärkeen yksinään, ja kuka tahansa, joka lupaa niin, myy jotain muuta. Ne ovat yksi osa sivuston tekstisisältöä, ja niiden merkitys tavallisessa haussa on pieni verrattuna sivun otsikkoon, tekstiin ja siihen, kuinka moni muu sivusto linkittää sinuun.

Se, mitä ne tekevät, on kolme asiaa. Ne tuovat kuvahausta kävijöitä niillä aloilla, joilla kuvahakua käytetään. Ne tekevät sivusta yhtenäisemmän hakukoneen silmissä, kun kuvatkin puhuvat samasta aiheesta kuin teksti. Ja ne täyttävät saavutettavuusvaatimuksen, jonka puuttuminen on yksi helpoimmin havaittavista puutteista.

Hakukonenäkyvyyden kokonaisuus, jossa alt-tekstit ovat yksi rivi pitkässä listassa, on käyty läpi artikkelissa hakukoneoptimointi pienyritykselle. Alt-tekstit kannattaa tehdä, koska ne ovat halpoja ja hyödyttävät kaikkia lukijoita, ei koska ne olisivat oikotie.

Esimerkkejä: sama kuva, kolme alt-tekstiä

Ero hyvän ja huonon välillä näkyy parhaiten rinnakkain. Alla on tavallisia yrityssivujen kuvia ja kolme tapaa kirjoittaa niiden alt-teksti.

Huomaa viimeinen rivi. Koristekuvion paras alt-teksti on tyhjä, ei "koriste". Ja huomaa, että hyvissä esimerkeissä ei ole yhtään sanaa "kuva" tai "valokuva".

Näin käyt olemassa olevan sivuston läpi

Vanhalla sivustolla on tyypillisesti kymmeniä tai satoja kuvia, ja kaikkia ei kannata korjata kerralla. Järjestys on tämä: ensin kuvat, jotka ovat linkkejä tai painikkeita, koska ilman alt-tekstiä ne estävät käytön kokonaan. Sitten kuvat, joissa on tekstiä. Sitten tuotekuvat ja työnäytteet, joilla on hakuarvoa. Koristekuvat viimeisenä, ja niille tyhjä alt.

Puuttuvat alt-tekstit löytää useilla ilmaisilla selaintyökaluilla, jotka listaavat sivun kuvat ja niiden alt-tekstit. Myös useimmat julkaisujärjestelmät näyttävät mediakirjastossa, millä kuvilla kenttä on tyhjä. Käy lista läpi sivu kerrallaan, tärkeimmät sivut ensin.

Kun käyt läpi, ota samalla kiinni ne alt-tekstit, jotka ovat olemassa mutta väärin: tiedostonimet, avainsanalistat ja "kuva"-alkuiset. Ne ovat yleisempiä kuin tyhjät, koska joku on joskus täyttänyt kentän kiireessä.

Ja sovi jatkosta. Jokainen uusi kuva, joka ladataan sivustolle, saa alt-tekstin siinä samassa, kun se ladataan. Se vie kymmenen sekuntia silloin. Jälkikäteen se vie tunteja.

Tekoäly kirjoittamassa alt-tekstejä

Tekoäly osaa nykyään kuvailla kuvan sisällön kohtuullisen hyvin, ja moni julkaisujärjestelmä tarjoaa nappia, joka tekee sen automaattisesti. Se on parempi kuin tyhjä, ja huonompi kuin ihminen, joka tietää miksi kuva on sivulla.

Ongelma ei ole se, mitä tekoäly näkee, vaan se, mitä se ei tiedä. Se näkee "nainen leikkaa hiuksia salongissa". Se ei tiedä, että kyseessä on sinun salonkisi, että työ on balayage ja että kuva on sivulla näyttämässä juuri sitä. Se ei myöskään tiedä, että kuva on linkki ja alt-tekstin pitäisi kertoa minne.

Toimiva tapa on käyttää tekoälyä ensimmäiseen versioon ja lukea jokainen läpi ennen tallennusta. Lisää se, mitä kone ei tiennyt, poista se, mitä se arvasi väärin. Puolet ajasta, sama laatu. Se, mitä ei kannata tehdä, on generoida viisisataa alt-tekstiä ja tallentaa ne lukematta.

Yhteenveto

Alt-teksti on kuvan korvaava lause, jonka ruudunlukija lukee, selain näyttää kuvan puuttuessa ja Google käyttää ymmärtääkseen kuvan. Se kirjoitetaan sille, joka ei näe kuvaa: mitä kuvassa on ja miksi se on siinä, yhdellä lauseella, ilman sanaa "kuva" ja ilman avainsanalistoja.

Koristekuvalle tyhjä alt, linkkikuvalle linkin kohde, tuotekuvalle tuote ja sen näkyvät ominaisuudet, jokaiselle kuvakulmalle oma. Kuvan teksti kirjoitetaan alt-tekstiin, tai mieluummin kuvan ulkopuolelle.

Vanhalla sivustolla aloitetaan linkkikuvista ja tuotekuvista, ja uudet kuvat saavat alt-tekstin siinä hetkessä, kun ne ladataan. Kymmenen sekuntia per kuva nyt on halvempaa kuin läpikäynti myöhemmin.