Käytännönläheinen opas kuvien alt-teksteihin vuonna 2026

Miksi alt-tekstillä on yhä merkitystä

Alt-teksti on ollut osa HTML-määritystä vuodesta 1995. Kolmekymmentä vuotta myöhemmin useimmista verkon kuvista puuttuu edelleen joko alt-attribuutti kokonaan, tai niiden alt-teksti kuulostaa siltä kuin sen olisi kirjoittanut joku, joka ei ole koskaan käyttänyt ruudunlukijaa.

Ongelma ei enää ole tietoisuuden puute. Useimmat sisällönhallintajärjestelmät tekevät alt-kentästä nykyään pakollisen. Ongelma on se, että alt-tekstistä on tullut vaatimustenmukaisuuden rastiruutu viestintävälineen sijaan. Ihmiset kirjoittavat "kuva hymyilevästä henkilöstä", vaikka todellinen konteksti on "toimitusjohtaja julkistaa Q4-tuloksen."

Alt-teksti on olemassa yhdestä syystä: välittämään kuvan tarkoitus henkilölle, joka ei näe sitä. Tämä tarkoitus muuttuu kontekstin mukaan. Valokuva kahvikupista kahvilan etusivulla palvelee eri tehtävää kuin sama kuva blogikirjoituksessa keramiikan lasitustekniikoista.

Vuonna 2026 käytössä on myös AI-työkaluja, jotka voivat luoda alt-tekstiä automaattisesti. Nämä työkalut kehittyvät, mutta ne eivät edelleenkään ymmärrä kontekstia. Ne kuvaavat, mitä ne näkevät, eivät sitä, miksi kuva on sivulla.

Päätöspuu: tarvitseeko tämä kuva alt-tekstin?

Kaikki kuvat eivät tarvitse kuvailevaa alt-tekstiä. Osa kuvista on koristeellisia. Osa on toisteisia. Osa toimii paremmin kuvatekstin tai ympäröivän tekstin kautta.

Päätöksenteko etenee näin:

Välittääkö kuva tietoa, jota ympäröivässä tekstissä ei ole? Jos kyllä, se tarvitsee alt-tekstin. Jos ei, se on todennäköisesti koristeellinen.

Menettäisikö sokea käyttäjä jotain olennaista, jos tämä kuva katoaisi? Jos kyllä, kirjoita alt-teksti. Jos ei, käytä tyhjää alt-attribuuttia (alt="") kertoaksesi ruudunlukijoille, että kuva ohitetaan.

Onko kuva linkki tai painike? Alt-tekstistä tulee linkkiteksti. Kuvaa kohde, älä kuvaa. "Näytä hinnastot" on parempi kuin "nuolikuvake."

Onko kuva monimutkainen — kaavio, diagrammi tai infografiikka? Alt-tekstillä on käytännöllisiä pituusrajoja (noin 125 merkkiä on useimmille ruudunlukijoille mukava). Monimutkaiset kuvat tarvitsevat pidempiä kuvauksia joko kuvatekstissä, leipätekstissä tai aria-describedby-attribuutin kautta.

Miltä hyvä alt-teksti oikeasti kuulostaa

Hyvä alt-teksti on täsmällinen, tiivis ja kontekstitietoinen. Se vastaa kysymykseen: Miksi tämä kuva on tässä?

Huono: "Kuva kaaviosta"

Parempi: "Viivakaavio näyttää mobiililiikenteen 23 % kasvun tammikuusta maaliskuuhun 2026"

Huono: "Henkilö käyttää kannettavaa tietokonetta"

Parempi: "Suunnittelija tarkastelee verkkosivuston luonnoksia Figma-sovelluksessa"

Huono: "Klikkaa tästä"

Parempi: "Lataa täydellinen saavutettavuusauditoinnin tarkistuslista (PDF)"

Huomaa, että hyvä alt-teksti sisältää usein numeroita, toimintoja tai lopputuloksia. Se ei kuvaile jokaista visuaalista yksityiskohtaa. Se kuvaa sitä, millä on merkitystä.

Koristeellisille kuville — hero-osion taustatekstuureille, koristeellisille reunuksille, puhtaasti esteettisille kuvituksille — käytä alt="". Tämä ei ole laiskuutta. Se on semanttista rehellisyyttä. Ruudunlukijat ohittavat kuvan kokonaan, mikä on juuri tarkoitus.

Yleiset virheet, jotka tuhlaavat kaikkien aikaa

Aloittaminen sanoilla "Kuva" tai "Valokuva": Ruudunlukijat ilmoittavat jo, että kyseessä on kuva. Siirry suoraan kuvaukseen.

Avainsanojen täyttäminen SEO:n vuoksi: Alt-teksti ei ole paikka tunkea mukaan "parhaat luomukahvipavut Brooklyn artesaanipaahto." Google on osannut tunnistaa tämän kuvahaussa jo vuosia. Kirjoita ihmisille.

Tiedostonimen kuvaileminen: "IMG_3847.jpg" ei auta ketään. Ei myöskään "hero-banner-final-v3."

Romaanin kirjoittaminen: Jos alt-tekstisi on pidempi kuin kaksi lausetta, tieto kuuluu todennäköisesti mieluummin kuvatekstiin tai leipätekstiin.

Viereisen tekstin toistaminen: Jos otsikko sanoo "Näin leivot hapanjuurileipää" ja kuvassa joku muotoilee taikinaa, alt-tekstin ei tarvitse toistaa otsikkoa. Kuvaa sitä, mikä on visuaalisesti erottuvaa: "Kädet taittelevat hapanjuuritaikinaa jauhotetulla pinnalla."

Työkalut ja työnkulut, joista on oikeasti apua

Useimmissa moderneissa CMS-järjestelmissä alt-tekstikentät ovat nykyään sisäänrakennettuja. WordPress, Webflow, Contentful ja Sanity näyttävät kaikki alt-attribuutin selkeästi latauksen yhteydessä. Se, että kenttä on näkyvissä, ei tarkoita, että se täytetään hyvin.

Jos auditoit sivustolta puuttuvia tai huonoja alt-tekstejä, selainlaajennukset kuten Accessibility Insights tai axe DevTools voivat merkitä kuvat, joilta puuttuu alt-attribuutti. Nopeaa manuaalista tarkistusta varten poista kuvat käytöstä selaimessasi (sekä Firefox että Chrome tukevat tätä) ja lue sivu. Jos alt-teksti toimii kontekstissaan, olet hyvällä tiellä.

AI:n luoma alt-teksti — saatavilla esimerkiksi työkaluissa kuten Azure Computer Vision ja Google Cloud Vision tai sisäänrakennettuna alustoihin kuten Cloudflare Images — voi olla järkevä lähtökohta, etenkin suurille kuvakirjastoille. Mutta käsittele AI-alt-tekstiä ensimmäisenä luonnoksena. Se kuvaa kuvan sisällön tarkasti, mutta se ei tiedä, miksi kuva on sivulla. Ihmiseditorin täytyy edelleen lisätä konteksti.

Jos työskentelet sivustolla, jossa käytetään paljon kuvia, ja haluat havaita suorituskykyongelmat ajoissa, työkalut kuten Wux Webtools' Image Compressor voivat auttaa optimoimaan tiedostokoot ennen latausta — koska alt-tekstistä on hyötyä vain, jos kuva oikeasti latautuu.

Alt-teksti ja SEO vuonna 2026

Google on sanonut vuosien ajan, että alt-teksti on kuvahaun sijoitustekijä. Se pitää edelleen paikkansa. Mutta kuvahaun optimointi ei ole sama asia kuin saavutettavuus.

Jos kirjoitat alt-tekstiä ensisijaisesti SEO:a varten, päädyt avainsanoilla täytettyyn hölynpölyyn, joka tekee sivulla navigoinnista ruudunlukijan käyttäjille vaikeampaa. Jos kirjoitat alt-tekstin ensin saavutettavuuden näkökulmasta, SEO-hyödyt seuraavat luonnostaan, koska kuvaileva ja kontekstuaalinen alt-teksti on juuri sitä, mitä Googlen kuvahaun algoritmi yrittää nostaa esiin.

Yksi vivahde: Google Images käyttää nykyään ympäröivää sivusisältöä paljon aiempaa enemmän. Jos alt-tekstisi on hyvä mutta yleinen ("suklaakakku kuorrutteella") ja sivusi käsittelee vegaanista leivontaa, Google ymmärtää kontekstin. Sinun ei tarvitse kirjoittaa "vegaaninen suklaakakku maidottomalla kuorrutteella", ellei ero ole kuvassa visuaalisesti ilmeinen.

Tärkeimmät opit

• Alt-tekstin tarkoitus on välittää kuvan tarkoitus, ei kuvailla jokaista visuaalista yksityiskohtaa
• Koristeellisissa kuvissa tulisi käyttää alt="", jotta ruudunlukijat ohittavat ne kokonaan
• Hyvä alt-teksti on täsmällinen, kontekstitietoinen ja vastaa kysymykseen "miksi tämä kuva on tässä?"
• AI:n luoma alt-teksti on hyödyllinen lähtökohta, mutta se tarvitsee edelleen ihmisen tekemää kontekstieditointia
• Kirjoita ensin saavutettavuutta varten; SEO-hyödyt seuraavat luonnostaan selkeästä ja kuvailevasta tekstistä

UKK

K: Voinko vain käyttää AI:ta luomaan kaikki alt-tekstini?

V: AI-työkalut osaavat hyvin kuvailla, mitä kuvassa on, mutta ne eivät ymmärrä kontekstia. Jos työskentelet satojen tuotekuvien kanssa ja tarvitset perustason, AI-alt-teksti käy hyvin. Toimituksellisessa sisällössä, markkinointisivuilla tai missä tahansa, missä kuvan olemassaolon syy merkitsee, ihmisen täytyy tarkistaa ja muokata teksti.

K: Kuinka pitkä alt-tekstin pitäisi olla?

V: Useimmille ruudunlukijoille 125 merkkiä tai vähemmän on luonteva pituus. Jos tarvitset enemmän, tieto kuuluu todennäköisesti kuvatekstiin, leipätekstiin tai pidempään kuvaukseen, joka on linkitetty aria-describedby-attribuutilla. Kovaa teknistä rajaa ei ole, mutta pidempi alt-teksti tekee navigoinnista kömpelöä.

K: Tarvitsenko alt-tekstin logoille?

V: Kyllä, mutta pidä se yksinkertaisena. Jos logo on sivun ylätunnisteessa ja linkittää etusivulle, alt-tekstin tulisi olla yrityksesi nimi: alt="Acme Corp". Älä kirjoita alt="Acme Corp logo", ellei se, että kyseessä on logo, ole jotenkin olennaista kontekstissa.

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

V: Alt-teksti on kuvan suora korvike. Ruudunlukijat lukevat sen, kun kuva kohdataan. Kuvateksti on kaikille näkyvää lisätietoa, joka lisää kontekstia tai kertoo lähteen. Jos käytät molempia, niiden ei pitäisi toistaa toisiaan.

K: Pitäisikö minun lisätä alt-teksti CSS:n taustakuviin?

V: Ei. CSS-taustakuvat ovat määritelmän mukaan koristeellisia, eikä niitä välitetä ruudunlukijoille. Jos taustakuva välittää tärkeää tietoa, sen tulisi olla HTML:ssä <img>-elementtinä, jolla on asianmukainen alt-teksti.

Lähteet

• W3C Web Accessibility Initiative: Images Tutorial
• WebAIM: Alternative Text
• Nielsen Norman Group: Alt Text for Images
• Google Search Central: Image SEO Best Practices