Ilmainen työkalu: Saavutettavuus

Kuvien alt-tekstien tarkistus

Syötä sivun osoite, niin listaamme sen jokaisen kuvan ja alt-tekstin oikeassa selaimessa skriptien suorittamisen jälkeen luettuna. Näet, millä kuvilla alt-tekstiä ei ole, mitkä on merkitty koristeellisiksi ja millä kuvilla alt-teksti ei kuvaa mitään.

Ilmainen. Tarkistaa antamasi osoitteen noin 20 sekunnissa.

Mitä tämä työkalu tarkistaa

  • Kuvat ilman alt-tekstiä

    Jokainen img-elementti ja kuvapainike, jolla ei ole alt-attribuuttia eikä muuta saavutettavaa nimeä, kuten aria-labelia.

  • Linkitetyt kuvat, jotka jättävät linkin ilman nimeä

    Linkkien tai painikkeiden sisällä olevat logot ja kuvakkeet, joilla ei ole alt-tekstiä eikä muuta tekstiä, joten ruudunlukija voi ilmoittaa vain ”linkki”.

  • Tiedostonimeltä näyttävä alt-teksti

    Arvot kuten IMG_2041.jpg, DSC0042 tai pitkä numerosarja, jotka monet järjestelmät täyttävät automaattisesti latauksen yhteydessä.

  • Yleissanat

    Alt-teksti, joka on pelkkä ”kuva”, ”valokuva”, ”logo” tai ”banneri”, ei kerro kenellekään, mitä kuva esittää.

  • Tarpeeton ja toistuva teksti

    Kuvaukset, jotka alkavat sanoilla ”kuva, jossa”, toistavat vieressä olevan linkkitekstin tai joita käytetään kolmessa tai useammassa eri kuvassa.

  • Koristeelliset ja piilotetut kuvat

    Kuvat, joilla on alt="" tai role="presentation", sekä aria-hiddenillä tai CSS:llä piilotetut kuvat listataan erikseen, jotta voit varmistaa, että kukin niistä on todella koristeellinen.

  • Esikatselu jokaisesta kuvasta

    Pikkukuva alt-tekstin vieressä, jotta voit arvioida jokaisen kuvauksen sekunneissa. Suodattimet näyttävät vain ongelmat tai vain tarkistettavat.

Mitä se ei voi tarkistaa

  • Kertoa, onko alt-teksti paikkansapitävä. Sen voi arvioida vain ihminen, joka näkee kuvan ja tietää, miksi se on sivulla.
  • Tarkistaa CSS-taustoina asetettuja kuvia tai SVG- ja canvas-grafiikan tekstivastineita. Se listaa img-elementit ja kuvapainikkeet.
  • Tarkistaa kehysten sisällä olevia kuvia, kuten upotettuja videoita, karttoja ja mainoksia.
  • Listata yli 150 kuvaa. Hyvin pitkillä sivuilla se näyttää ensimmäiset 150 ja kertoo, kuinka monta kuvaa on yhteensä.
  • Testata muita sivuja. Täysi ilmainen skannaus tarkistaa alt-tekstit muun WCAG:n ohella enintään viidellä keskeisellä sivulla.

Miksi sillä on merkitystä

Alt-teksti on se, mitä ruudunlukija lukee kuvan sijaan ja mitä selain näyttää, kun kuva ei lataudu. WCAG 2.2:n A-tason onnistumiskriteeri 1.1.1 edellyttää tekstivastinetta jokaiselle tietoa välittävälle kuvalle ja tyhjää tekstivastinetta kuville, jotka eivät välitä tietoa.

Puuttuva alt-teksti on verkon toiseksi yleisin saavutettavuusvirhe: WebAIMin vuoden 2026 analyysi löysi sen 53,1 prosentilta miljoonan suosituimman sivuston etusivuista, ja 16,2 prosentilta kaikista sen tarkistamista kuvista alt-teksti puuttui.

Myös hakukoneet lukevat sitä. Googlen mukaan se käyttää alt-tekstiä yhdessä konenäön ja sivun sisällön kanssa kuvien ymmärtämiseen, ja linkitetyn kuvan alt-teksti toimii kuten linkin ankkuriteksti.

Miten tuloksia luetaan

Ei alt-tekstiä
Kuvalla ei ole alt-attribuuttia eikä muuta nimeä. Ohjelmistosta riippuen ruudunlukija saattaa lukea tiedostonimen tai ohittaa kuvan.
Koristeellinen
alt="" tai role="presentation": ruudunlukijat ohittavat kuvan. Oikein koristeille; väärin kuvalle, joka välittää tietoa tai on linkin ainoa sisältö.
Alt-teksti on
Kuvalla on kuvaus. Merkitsemme ne, jotka näyttävät virheellisiltä; muidenkin paikkansapitävyys on silti ihmisen tarkistettava.
Nimetty ARIA:lla tai title-attribuutilla
Ei alt-attribuuttia, mutta nimi aria-labelista, aria-labelledbystä tai titlestä. Tämä läpäisee automaattiset testit; alt on silti luotettavampi valinta.
Piilotettu
Ei näytetä, tai piilotettu avustavilta teknologioilta aria-hiddenillä. Ei korjattavaa, ellei kuvan kuulu näkyä.
Linkki ilman nimeä
Linkki tai painike, jonka ainoa sisältö on kuva ilman tekstivastinetta. Tämä on virhe, vaikka kuva itse olisi koristeellinen.
Tarkista
Alt-teksti, joka näyttää tiedostonimeltä tai yleissanalta, alkaa sanoilla ”kuva, jossa”, toistaa linkkitekstin, on hyvin pitkä tai on käytössä useissa kuvissa.

Miten yleisimmät ongelmat korjataan

  • Tuote- ja sisältökuvat

    Kuvaile se, mistä joku jäisi paitsi ilman kuvaa, sivun asiayhteydessä. Tuotteesta: tuote, sen väri ja näkyvä kuvakulma. Artikkelikuvasta: se, mitä kuva näyttää mutta teksti ei kerro.

  • Etusivulle linkittävät logot

    Linkitetyn kuvan pitäisi kertoa, minne linkki vie. Käytä etusivulle linkittävässä logossa yrityksen nimeä, esimerkiksi alt="Acme etusivu", äläkä sanaa ”logo”.

  • Kuvakkeet linkeissä ja painikkeissa

    Anna kuvakkeelle toiminnon nimeävä alt-teksti, kuten ”Haku” tai ”Ostoskori”, tai anna linkille aria-label ja merkitse kuvake koristeelliseksi arvolla alt="".

  • Koristekuvat

    Käytä arvoa alt="" (tyhjä arvo, ei puuttuva attribuutti) erotinviivoille, taustakoristeille ja kuville, jotka toistavat aivan vieressä olevaa tekstiä.

  • Alustan täyttämät tiedostonimet

    Monet alustat kopioivat tiedostonimen alt-kenttään latauksen yhteydessä. Muokkaa sitä siellä, missä kuvaa hallinnoidaan: Shopifyssa tuotteen mediassa, WordPressissä mediakirjaston Vaihtoehtoinen teksti -kentässä.

  • Kaaviot ja infografiikat

    Anna lyhyt alt-teksti, joka kertoo, mitä kaavio näyttää, ja esitä data tai yhteenveto tekstissä tai taulukossa sen vieressä.

Kuvat ilman alt-tekstiä: näin korjaat ne Shopifyssa, WooCommercessa ja millä tahansa sivustolla

Kysymyksiä tästä työkalusta

Mikä on alt-teksti?

Kuvan alt-attribuutti sisältää sen tekstivastineen. Ruudunlukijat lukevat sen ääneen, ja selaimet näyttävät sen, kun kuvaa ei voida näyttää.

Pitäisikö jokaisella kuvalla olla alt-teksti?

Jokaisella img-elementillä pitäisi olla alt-attribuutti. Tietoa välittävässä kuvassa se kertoo kuvan sisällön; koristekuvassa sen pitäisi olla tyhjä (alt=""), jotta ruudunlukijat ohittavat kuvan.

Kuinka pitkä alt-tekstin pitäisi olla?

WCAG ei aseta rajaa. Hyvä alt-teksti on yleensä lyhyt ilmaus tai lause. Jos kuva vaatii enemmän, kuvaile se sivun tekstissä tai kuvatekstissä ja pidä alt-teksti lyhyenä. Merkitsemme yli 150 merkin alt-tekstit tarkistettaviksi.

Auttaako alt-teksti hakukoneoptimoinnissa?

Googlen mukaan se käyttää alt-tekstiä yhdessä konenäön ja sivun sisällön kanssa kuvien ymmärtämiseen, ja linkitetyn kuvan alt-teksti toimii kuten ankkuriteksti. Google myös varoittaa, että alt-attribuuttien täyttäminen avainsanoilla voidaan tulkita roskapostiksi.

Onko title-attribuutti sama kuin alt?

Ei. title näkyy työkaluvihjeenä, kun osoitin viedään sen päälle, eivätkä ruudunlukijat ilmoita sitä luotettavasti, eikä se ole käytettävissä kosketusnäytöillä. Automaattiset testit hyväksyvät sen nimeksi, kun alt puuttuu, mutta alt on luotettava valinta.

Voiko tekoäly kirjoittaa alt-tekstini?

Se voi luonnostella kuvauksia, mutta se ei tiedä, miksi kuva on sivullasi. Tarkista jokainen luonnos: oikea alt-teksti riippuu asiayhteydestä, jonka vain sinä tunnet.

Lähteet

Aiheeseen liittyvät työkalut

Saavutettavuusraportti ($174, kertamaksu) jatkaa täydestä ilmaisesta skannauksesta ja lisää sivuja, jokaisen havainnon vaatiman muutoksen, PDF-tiedoston ja uusintatestit korjaustesi varmistamiseen.

Lue lisää: Saavutettavuusraportti