Kuvatekstin (alt text) lisääminen

Mikä on alt-teksti?

Alt-teksti (alt-attribuutti) on <img> -tagiin lisätty attribuutti, joka kuvaa kuvan sisältöä sanoin: <img src="..." alt="...">. Kun kuvaa ei voida ladata (hidas yhteys, virheellinen tiedostopolku), se näkyy selaimessa kuvan sijasta, näytönlukijat lukevat sen ääneen näkövammaisille käyttäjille, ja se auttaa hakukoneita ymmärtämään, mitä kuvassa on, koska Google ei ”näe” kuvaa pikselitasolla, vaan luottaa pääasiassa sen ympärillä olevaan tekstiin ja alt-attribuuttiin.

Alt-teksti palvelee täysin eri tarkoitusta kuin kuvan tiedostonimi (esim. IMG_2031.jpg): tiedostonimi on tarkoitettu palvelimelle tai tiedostojärjestelmälle, kun taas alt-teksti on tarkoitettu merkityksen välittämiseen. Näitä kahta ei pidä sekoittaa toisiinsa.

Alt-teksti ja kuvan alla näkyvä kuvateksti (caption) ovat myös eri asioita: kuvateksti on sivulla kaikille näkyvää tekstiä, kun taas alt-teksti ei normaalisti näy, vaan tulee esiin vain, jos kuvaa ei voida ladata tai kun se luetaan näytönlukijalla. Tätä eroa sekoitetaan usein toisiinsa.

Vaikka joissakin kehitysympäristöissä alt-attribuutin jättäminen tyhjäksi läpäisee HTML-validoinnin, tämä tekninen kelpoisuus ei tarkoita, että alt-teksti olisi todellisuudessa merkityksellinen; validointityökalu tarkistaa vain, onko attribuutti olemassa, ei sen sisällön laatua.

Miksi tämä on tärkeää?

Alt-teksti on kriittisen tärkeää sekä esteettömyyden että visuaalisen hakukoneoptimoinnin kannalta. Näkövammaiset käyttäjät saavat kuvan sisällön selville alt-tekstistä, kun he selaavat sivua näytönlukijaohjelmiston avulla; jos tämä teksti puuttuu, näytönlukija lukee yleensä vain sanan ”kuva” tai tiedostonimen, mikä johtaa tiedon menetykseen. Joissakin maissa esteettömyys voi olla myös lakisääteinen vaatimus.

Hakukoneet puolestaan eivät ”näe” kuvien sisältöä suoraan, joten ne järjestävät sivun kuvahakutuloksissa (Google Kuvat) alt-tekstin perusteella. Verkkokauppasivustoilla tuotekuvien oikean kuvatekstin lisääminen voi lisätä Google Kuvien kautta tulevaa lisäliikennettä. Puuttuva kuvateksti vaikuttaa kielteisesti sekä käyttökokemukseen että kuvahakuliikenteeseen.

Kun kuva latautuu hitaasti tai ei lataudu lainkaan, alt-teksti on ainoa tietolähde, jonka avulla käyttäjä voi ymmärtää, mitä kyseisellä alueella on odotettavissa; tämä tekee alt-tekstistä tärkeän paitsi hakukoneoptimoinnin (SEO) myös yleisen käytettävyyden kannalta.

Miten tämä korjataan?

Kirjoita jokaiselle merkitykselliselle kuvalle lyhyt, kuvaava alt-teksti.
Käytä vain koristeellisissa kuvissa (esim. taustakuvioissa) alt="" jotta näytönlukija ohittaa kuvan; tämä eroaa alt-attribuutin jättämisestä kokonaan pois.
Käytä avainsanaa vain, jos se todella kuvaa kuvaa, ja käytä sitä luonnollisella tavalla.
Pidä alt-teksti lyhyenä ja selkeänä; vältä tarpeettoman pitkiä lauseita, yleensä muutama sana riittää.
Ilmoita tuotekuvissa tuotteen nimi ja tärkeät ominaisuudet (kuten väri, malli, kuvakulma).
Jos teet joukkotallennusta sisällönhallintajärjestelmässäsi, älä täytä alt-tekstiä automaattisesti, vaan luo se mahdollisuuksien mukaan käsin tai ainakin tuotteen nimeen perustuvan mielekkään mallin avulla.
Monimutkaisten kuvien, kuten infografiikoiden tai taulukoiden, kohdalla harkitse yksityiskohtien esittämistä myös kuvan välittömässä alapuolella pelkkänä tekstinä, jos ne eivät mahdu kuvatekstiin.

Esimerkki

<img src="punaiset-tennarit.jpg" alt="Punaiset miesten tennarit, sivukuva">

Huono esimerkki: <img src="IMG_2031.jpg" alt="kuva"> — sekä tiedostonimi että alt-teksti jättävät kuvan sisällön täysin hämäräksi. Toinen huono esimerkki: alt="kengät kengät urheilukengät halvat kengät alekengät osta kengät" — tämän tarkoituksena on avainsanojen täyttäminen sen sijaan, että se kuvaisi yksittäistä kuvaa, ja se luo näytönlukijan käyttäjälle merkityksetöntä ja tylsää kokemusta.

Yleisiä virheitä

Alt-attribuutin jättäminen kokonaan tyhjäksi (muissa kuin koristeellisissa kuvissa).
Käyttää merkityksetöntä tiedostonimeä, kuten "kuva1.jpg" tai "IMG_2023", alt-tekstinä.
Alt-tekstin täyttäminen peräkkäisillä avainsanoilla (esim. ”kengät, urheilukengät, halvat kengät, alennuskengät”).
Saman yleisen alt-tekstin toistaminen kaikissa kuvissa.
Seoraporu.co-raportti luettelee jokaisen puuttuvan alt-tekstin erikseen; suurilla sivustoilla tämä on yleensä ongelma, joka vaatii joukkokorjausta tuote-/kuvahallintamallissa.