Alt-teksti – näin kirjoitat kuvan vaihtoehtoisen tekstin oikein

Alt-teksti on kuvan vaihtoehtoinen teksti, joka kertoo sanoin, mitä kuvassa on tai mitä se tekee. Ruudunlukijaa käyttävä kuulee alt-tekstin kuvan kohdalla, ja hakukoneet käyttävät sitä kuvan aiheen ymmärtämiseen. Hyvä alt-teksti on lyhyt, täsmällinen ja kirjoitettu kuvan tarkoituksen mukaan. Tässä artikkelissa näytän esimerkkien avulla, miten kuvan alt-teksti kirjoitetaan oikein, milloin se jätetään tyhjäksi ja miten alt-teksti lisätään WordPressissä.

Mikä alt-teksti on?

Alt-teksti on HTML-koodin img-elementin alt-attribuutti, johon kirjoitetaan kuvan tekstivastine. Se näkyy tai kuuluu silloin, kun kuvaa ei nähdä: ruudunlukijalla, hitaalla yhteydellä tai kun kuva ei lataudu.

Koodissa alt-teksti näyttää tältä: <img src="leipomo.jpg" alt="Tuoreita ruisleipiä leipomon hyllyllä">. Kävijä ei yleensä näe tekstiä lainkaan, mutta ruudunlukija lukee sen ääneen ja hakukone lukee sen koodista. WordPressissä kentän nimi on vaihtoehtoinen teksti, mutta kyse on samasta asiasta.

Alt-teksti ei ole sama kuin kuvateksti. Kuvateksti näkyy kaikille kuvan alla ja täydentää sisältöä, alt-teksti korvaa kuvan niille, jotka eivät sitä näe. Myöskään title-attribuutti, joka näkyy hiiren osoittimen alla, ei korvaa alt-tekstiä.

Miksi alt-teksti on tärkeä saavutettavuudelle?

Ilman alt-tekstiä näkövammainen kävijä ei tiedä, mitä kuvassa on, ja pahimmillaan ruudunlukija lukee ääneen kuvan tiedostonimen. Alt-teksti on verkkosivujen saavutettavuuden perusasioita, ja se on myös yksi helpoimmista korjata.

W3C:n saavutettavuusohjeiden kuvatutoriaali jakaa kuvat tyyppeihin, joista jokainen tarvitsee erilaisen tekstivastineen. Tiedottava kuva tarvitsee lyhyen kuvauksen sen olennaisesta sisällöstä, toiminnallinen kuva (esimerkiksi linkkinä toimiva kuvake) kuvauksen toiminnosta, tekstiä sisältävä kuva samat sanat kuin kuvassa ja monimutkainen kuva, kuten kaavio, kokonaisen tekstivastineen. Koristekuva taas jätetään tyhjälle altille.

Saavutettavuus ei ole enää pelkkä hyvä tapa. Digipalvelulain saavutettavuusvaatimukset koskevat kuluttajille suunnattuja verkkokauppoja 28.6.2025 alkaen. Velvoitteiden laajuus kannattaa tarkistaa oman yrityksen kohdalta, ja kokonaiskuvan saat artikkelista verkkosivujen saavutettavuus.

Miten alt-teksti vaikuttaa hakukoneoptimointiin ja tekoälyhakuun?

Google kertoo käyttävänsä alt-tekstiä yhdessä konenäön ja sivun muun sisällön kanssa ymmärtääkseen, mitä kuvassa on. Hyvä alt-teksti auttaa kuvaa löytymään Google Kuvista ja vahvistaa sitä, mistä koko sivu kertoo.

Alt-teksti on siis pieni mutta aito osa sisällön hakukoneoptimointia. Se ei yksin nosta sivua hakutulosten kärkeen, mutta puuttuvat alt-tekstit ovat asia, jonka auditointityökalut nostavat esiin ensimmäisten joukossa. Kokonaisuuden, johon ne kuuluvat, löydät teknisen hakukoneoptimoinnin oppaasta.

Tekoälyhaut, kuten Googlen tekoälyvastaukset ja ChatGPT:n haku, hyödyntävät vastauksissaan verkkosivujen tekstisisältöä. Alt-teksti on osa sivun tekstiä, joten selkeä kuvaus tekee sivun sisällöstä yksiselitteisemmän myös niille. Tekoälyhakuun optimointia käsittelin tarkemmin artikkelissa GEO-optimointi.

Miten hyvä alt-teksti kirjoitetaan?

Hyvä alt-teksti kertoo lyhyesti sen, minkä näkevä kävijä kuvasta ymmärtää, ja juuri siinä yhteydessä, jossa kuva on. Kysy itseltäsi: jos kuvan tilalla olisi yksi lause, mikä sen pitäisi olla?

• Kuvaa kuvan sisältö ja tarkoitus, ei ulkonäön jokaista yksityiskohtaa.
• Pidä teksti lyhyenä, yleensä yksi lause riittää.
• Jätä pois sanat ”kuva” ja ”kuva jossa” – ruudunlukija kertoo jo, että kyseessä on kuva.
• Käytä hakusanaa vain, jos se kuvaa kuvaa luontevasti.
• Jos kuvassa on tekstiä, kirjoita sama teksti alt-tekstiin.
• Jos kuva on linkki tai painike, kerro minne se vie tai mitä se tekee.

Konteksti ratkaisee paljon. Sama kuva voi tarvita eri alt-tekstin eri sivuilla. Jos kattoremonttia tekevän yrityksen etusivulla on kuva työmaasta, alt voi kertoa palvelusta: ”Kattoasentajat asentavat konesaumattua peltikattoa”. Jos sama kuva on referenssisivulla tietyn kohteen yhteydessä, alt voi kertoa kohteesta: ”Valmis peltikatto rintamamiestalossa remontin jälkeen”. Kummassakaan ei ole tarpeen luetella katon väriä, tikkaita ja pilviä, ellei niillä ole merkitystä sivun asian kannalta.

Googlen omassa ohjeessa puuttuva alt ja avainsanoilla täytetty alt ovat huonoja esimerkkejä, yksittäinen sana on parempi ja paras on lyhyt, täsmällinen kuvaus. Sama periaate suomeksi:

Kuvien valinnasta, koosta ja tiedostonimistä kerroin lisää kotisivujen kuvia käsittelevässä oppaassa. Tiedostonimi kannattaa muuttaa kuvaavaksi jo ennen latausta, koska se tukee samaa asiaa kuin alt-teksti.

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

Alt-teksti jätetään tyhjäksi (alt=””) silloin, kun kuva on pelkkää koristetta eikä tuo sisältöön mitään tietoa. Silloin ruudunlukija ohittaa kuvan, eikä kävijän tarvitse kuunnella turhaa kuvausta.

Tyypillisiä koristekuvia ovat taustakuviot, erotinviivat, tunnelmakuvat, joiden sisältö on jo kerrottu tekstissä, ja kuvakkeet, joiden vieressä on sama tieto tekstinä. Tärkeä ero: tyhjä alt ei tarkoita puuttuvaa altia. Kun alt-attribuutti puuttuu kokonaan, osa ruudunlukijoista lukee tiedostonimen. Tyhjä alt kertoo tietoisesti, että kuvan voi ohittaa.

Jos et ole varma, onko kuva koriste, kokeile poistaa se mielessäsi. Jos sivun sisältö ei muutu, kuva on koriste. Jos jotain olennaista katoaa, kuva tarvitsee alt-tekstin.

Miten alt-teksti lisätään WordPressissä?

WordPressissä alt-teksti lisätään joko mediakirjastossa, jolloin se tulee oletukseksi aina kun kuva lisätään, tai suoraan kuvalohkon asetuksissa, jolloin se koskee vain kyseistä sivua. Alt-teksti WordPressissä kannattaa kirjoittaa heti kuvan latauksen yhteydessä, niin se ei unohdu.

1. Avaa hallintapaneelista Media → Kirjasto ja klikkaa kuvaa.
2. Kirjoita kuvaus kenttään Vaihtoehtoinen teksti. Kenttä tallentuu automaattisesti.
3. Jos lisäät kuvan sivulle lohkoeditorilla, valitse kuvalohko ja tarkista alt-teksti oikean reunan lohkoasetuksista.
4. Koristekuvan kohdalla jätä kenttä tyhjäksi, jolloin WordPress tulostaa kuvalle tyhjän alt-attribuutin.

Yksi sudenkuoppa kannattaa tietää: WordPressin ohjeen mukaan mediakirjastossa asetettu alt-teksti on oletus uusille lisäyksille. Jos muutat altia mediakirjastossa myöhemmin, jo sivuille lisätyt kuvat eivät välttämättä päivity, vaan ne pitää tarkistaa sivu kerrallaan. Sivunrakentajissa käytäntö vaihtelee, joten tarkista altin lähde myös niistä. Itse rakennan sivut Breakdancella, ja suositukseni on tarkistaa julkaisun jälkeen sivun lähdekoodista, että alt-tekstit tulevat oikein läpi.

Mitkä ovat yleisimmät alt-tekstivirheet?

Yleisimmät virheet ovat puuttuva alt, hakusanoilla täytetty alt ja alt, joka kuvaa kuvan ulkonäköä mutta ei sen tarkoitusta. Kaikki ovat helppoja korjata, kun ne kerran löytää.

• Avainsanapakkaus. Googlen ohjeen mukaan alt-attribuuttien täyttäminen avainsanoilla heikentää käyttökokemusta ja voi saada sivuston näyttämään roskapostilta.
• ”Kuva jossa…” -aloitus. Turha toisto, koska ruudunlukija ilmoittaa kuvan jo itse.
• Logon alt pelkkä yrityksen nimi, kun logo on linkki. W3C:n ohjeen mukaan linkkinä toimivan kuvan alt kertoo, minne linkki vie. Etusivulle vievän logon alt on siis esimerkiksi ”Yrityksen nimi – etusivu”.
• Sama alt kaikissa kuvissa. Kymmenen tuotekuvaa samalla tekstillä ei auta kävijää erottamaan niitä.
• Tiedostonimi alt-tekstinä. ”DSC_0042” ei kerro kenellekään mitään.
• Tekstiä kuvassa ilman alt-tekstiä. Jos tarjous tai aukioloajat ovat vain kuvana, ne jäävät ruudunlukijalta ja hakukoneelta piiloon.

Miten sivuston puuttuvat alt-tekstit löytää?

Puuttuvat alt-tekstit löytyvät nopeimmin sivuston auditointityökalulla, joka listaa kaikki kuvat ilman alt-attribuuttia. Yksittäisen sivun voi tarkistaa myös selaimen kehittäjätyökaluilla.

Itse käytän SE Rankingin sivustoauditointia, joka nostaa puuttuvat alt-tekstit esiin sivu- ja kuvakohtaisesti. Muita vaihtoehtoja, myös ilmaisia, vertailin artikkelissa SEO-työkalut. Pienellä sivustolla korjaukset ehtii tehdä parissa tunnissa: käy lista läpi, kirjoita tiedottaville kuville kuvaus ja merkitse koristekuvat tyhjällä altilla. Uusien kuvien kohdalla paras käytäntö on tehdä alt-teksti osaksi julkaisurutiinia, jolloin korjattavaa ei enää kerry.

Jos sivustolla on satoja kuvia, esimerkiksi verkkokaupassa, aloita tärkeimmistä: etusivu, palvelu- ja tuotesivut sekä kuvat, joissa on tekstiä. Blogien tunnelmakuvat voi käydä läpi myöhemmin. Alt-tekstit ovat myös luonteva osa jatkuvaa WordPress-hakukoneoptimointia, jossa sivuston kunto tarkistetaan säännöllisesti.