Kuvien vaihtoehtoiset tekstit

Sivu on päivitetty 18.2.2021.

Kuvien vaihtoehtoiset tekstit ovat oleellisia saavutettavuudelle

Kuvien vaihtoehtoiset tekstit parantavat merkittävästi verkkosisältöjen saavutettavuutta. Verkkosisällön saavutettavuusohjeissa (WCAG) edellytetään, että kaikelle ei-tekstuaaliselle verkkosisällölle tarjotaan tekstivastineet. Toisin sanoen kuvien, videoiden ja äänen sisältämä tieto pitää verkossa esittää myös tekstinä. Videoista ja äänitteistä on omia ohjeita, tässä keskitymme kuviin.

Vaihtoehtoinen teksti, tekstivastine ja alt-teksti tarkoittavat samaa

Rakkaalla lapsella on monta nimeä. Kun käytetään termejä vaihtoehtoinen teksti, tekstivastine ja alt-teksti (joskus myös vaihtoehtokuvaus tai vaihtoehtoinen kuvaus), tarkoitetaan yleensä samaa asiaa eli sitä, että kuvaan on liitetty teksti ohjelmallisesti. (Englanniksi käytetään yleensä termejä alternative text tai alt text.) Eri työkalujen ja ohjelmien termit voivat erota toisistaan.

Tekniseltä kannalta tarkasteltuna tarkoituksena on kuitenkin tuottaa www-sivuille img-elementtiin alt-attribuutin sisältö. Alt-attribuutin sisältö on teksti, jonka ruudunlukuohjelmat välittävät käyttäjälle. Alt-attribuutti ei näy sivulla tekstinä, vaan on siis piilossa html-sivun koodissa. Kuville voidaan tuottaa tekstivastine myös muihin dokumentteihin, kuten word- ja pdf-tiedostoihin.

Vaihtoehtoinen teksti auttaa niitä henkilöitä, jotka eivät näe kuvaa

Vaihtoehtoisen tekstin avulla kerrotaan kuvan sisältämä tieto niille henkilöille, jotka eivät jostain syystä näe itse kuvaa. Syynä voi olla näkövamma tai se, että kuvat eivät ole latautuneet tai käyttäjä ei ole halunnut ladata niitä. Ruudunlukuohjelmia käyttävät etenkin näkövammaiset henkilöt.

Vaihtoehtoinen teksti on myös hakukonenäkyvyyden kannalta tärkeä. Hakukoneet löytävät verkkosivujen kuvien vaihtoehtoiset tekstit. Hyvä vaihtoehtoinen teksti nostaa verkkosivun sijoitusta hakutuloksissa ja vaikuttaa kuvahaun tuloksiin.

Kannattaa kuitenkin muistaa, että tekstit pitää kirjoittaa ihmistä, ei hakukoneita, varten. Älä käytä vaihtoehtoista tekstiä hakusanojen luettelemiseen.

Vaihtoehtoinen teksti ei ole kuvateksti tai kuvan otsikko

Vaihtoehtoinen teksti eli alt-teksti ei ole sama asia kuin kuvateksti (engl. caption) tai kuvan otsikko (engl. title).

Kuvateksti on teksti, joka näkyy kaikille käyttäjille ja on usein kuvan alla tai vieressä. Kuvateksti annetaan yleensä verkkosivujen hallintaohjelmassa kuvatyökalun kautta. Ruudunlukuohjelma lukee kuvatekstin ja sen lisäksi alt-tekstin, jos sellainen on annettu. Vaihtoehtoisessa tekstissä ei kannata toistaa kuvatekstiä sellaisenaan, koska ruudunlukuohjelma lukee molemmat sisällöt.

Verkkosivun kuvan otsikko näkyy yleensä silloin, kun kuvan päälle vie kohdistimen. Kuvan otsikkoja voi lisätä erilaisissa kirjoitustyökaluissa (WordPress, muut verkkosivujen julkaisujärjestelmät, MS Word). Ruudunlukuohjelmat eivät lue kuvan otsikkoja. Otsikko on vapaavalintainen tieto, joka voi antaa jotakin lisätietoa kuvasta. Jotta saavutettavuusvaatimukset täyttyvät, kuvalle pitää tarjota nimenomaan vaihtoehtoinen teksti eli alt-teksti.

Onko vaihtoehtoinen teksti aina pakko kirjoittaa?

Verkkosivujen kuvilla on saavutettavuusvaatimusten mukaan oltava jokin vaihtoehtoinen teksti. Automaattiset saavutettavuustarkistimet ilmoittavat virheen silloin, kun ne löytävät kuvan, jolta puuttuu alt-attribuutti.

Vaihtoehtoisen tekstin sisällön voi kuitenkin määritellä tyhjäksi eli aina ei tarvitse alt-tekstiä kirjoittaa. Tyhjä alt-teksti on teknisesti ottaen html-koodissa img-elementin sisällä oleva alt=”” tai alt=” ”. Älä kuitenkaan kirjoita verkkosivujen editointiohjelmassa vaihtoehtoiseksi tekstiksi ””. Voi nimittäin olla niin, että ruudunlukuohjelman käyttäjä kuulee silloin kuvan kohdalla seuraavan ilmoituksen: grafiikka lainausmerkki lainausmerkki. Ota selvää, miten käytössäsi olevassa editointiohjelmassa tuotetaan tyhjä alt-teksti.

Milloin alt-teksti voi olla tyhjä?

Jos alt-teksti on tyhjä, ruudunlukuohjelma käyttäytyy kuin koko kuvaa ei olisi olemassa eikä siis välitä käyttäjälle tietoa siitä, että sivulla on kuva. Tämä ei ole ongelma, jos kuva tai sen sisältämä tieto ei ole käyttäjälle merkityksellinen tai jos kuvan sisältö ja merkitys kerrotaan muussa verkkosivun tekstissä.

Vaihtoehtoisen tekstin voi jättää tyhjäksi seuraavissa tapauksissa:

  • Kun kyseessä on koristekuva tai
  • kuvan sisältö on merkityksetön muun sisällön suhteen eli kuva vain kuvittaa tekstisisältöä tai
  • kuvan sisältö on kuvailtu muuten tyhjentävästi ympäröivässä tekstissä tai
  • näkyvä kuvateksti on sama kuin alt-teksti olisi.

Koristekuvilla tarkoitetaan sellaisia kuvia, jotka eivät välitä mitään informaatiota ja jotka on lisätty koristamaan sisältöä. Selkeä esimerkki koristekuvasta ovat koristeelliset kuviot tai viivat, joiden avulla luodaan välejä tekstiin. Näihin kuviin sopivin alt-teksti on tyhjä.

Verkkosivuilla käytetään usein myös erilaisia kuvituskuvia elävöittämään sisältöä ja kiinnittämään lukijan huomio. Tällaisessa tapauksessa kannattaa miettiä, mitä kuvituskuvalla halutaan viestittää. Jos halutaan esimerkiksi näyttää jokin kaunis maisema kotikunnassa, kannattaa alt-tekstiksi antaa lyhyt tieto paikasta, esim. ”Kaunis järvimaisema Päijänteen rannalta.” Alt-tekstin avulla voi siis koettaa välittää sen tunnelman, jota kuvalla halutaan antaa.

Jos kuva on kuitenkin vain visuaalisuutta lisäävä elementti vailla selvää kytköstä muuhun sisältöön, kannattaa käyttää tyhjää alt-tekstiä. Kuvituskuvalle väkisin keksitty alt-teksti keskellä tekstiä saattaa vain turhaan häiritä ruudunlukuohjelman käyttäjää.

Jos kuvan sisältö on kuvailtu verkkosivun tekstissä muuten, voi alt-tekstin jättää tyhjäksi. Tällöin olisi kuitenkin tärkeää ottaa huomioon kuvan paikka suhteessa siihen tekstiin, jossa kuvan sisältö kerrotaan. Jos teksti on juuri ennen kuvaa tai sen jälkeen, alt-teksti voi olla tyhjä. Jos kuva on sijoitettu esimerkki pdf-raportissa eri sivulle kuin siitä kertova teksti, kannattaa antaa lyhyt alt-teksti, jossa kertoo, missä kuvan sisältö annettu. Esimerkiksi alt-teksti voisi olla seuraava: ”Prosessikaavion sisältö on kerrottu edellisellä sivulla.”
Kannattaa kuitenkin muistaa, että muut käyttäjät saattavat viitata kuvan sisältöön, joten on hyvä, jos ruudunlukuohjelman käyttäjäkin tietää kuvan olemassaolosta.

Miten vaihtoehtoinen teksti laaditaan?

Kun laadit vaihtoehtoista tekstiä, mieti vastausta seuraaviin kysymyksiin:

  • Mitä tietoa jää saamatta, jos kuvaa ei näe?
  • Mikä on kuvan tarkoitus siinä paikassa, jossa se on?
  • Onko kuvan sisältö kerrottu ympäröivässä tekstissä?

Sivun tekstisisältö pitää ottaa huomioon, sillä vaihtoehtoisessa tekstissä on turha toistaa samoja tietoja, jotka lukija saa muutenkin. Jos kuvalla on esimerkiksi kuvateksti, vaihtoehtoinen teksti voi tarkentaa tai selventää kuvan sisältöä. Vaihtoehtoinen teksti ei saa olla sama kuin kuvateksti.

Jos tekstissä viitataan suoraan kuvaan, esimerkiksi ”kuten kuvasta näkee”, on ehdottoman tärkeää, että kuvasta nähtävä tieto kerrotaan. Muista, että vaihtoehtoisen tekstin lukija voi olla näkövammainen henkilö, joten älä keskity kuvailemaan sitä, mitä kuvassa näkyy, vaan pohdi mikä kuvan tarkoitus on osana verkkosivua tai dokumenttia.

Kuvan konteksti on oleellinen

Millaisessa kontekstissa kuvaa käytetään? Mikä kuvassa on merkittävää siinä kontekstissa, jossa sitä käytetään? Onko oleellinen tieto annettu muuten verkkosivun tekstissä? Mitä kuvasta jää kertomatta muualla tekstissä? Kirjoita vaihtoehtoiseen tekstiin kuvasta oleelliset asiat. Älä toista turhaan tekstissä tai kuvatekstissä olevia asioita.

Kirjoita mahdollisimman napakasti ja selkeästi

Käytä lyhyitä virkkeitä ja selkeää kieltä. Muista vastaanottajan näkökulma. Kerro kuvasta siinä käyttökontekstissa oleellinen tieto – kaikkea ei tarvitse selostaa juurta jaksain.

Toisinaan näkyy ohjeita, joiden mukaan alt-teksti ei saisi olla yli 125 merkkiä. Ohje perustuu yhden yleisesti käytössä olleen ruudunlukuohjelman toimintaan. Mitään merkkimäärää ei kuitenkaan WCAG:ssa ole määritelty ja alt-teksti saa olla pidempi kuin 125 merkkiä.

Käytä sellaista sanastoa ja tyyliä, jotka sopivat ympäröivään tekstiin

Muista, että vaihtoehtoisessa tekstissä ei voi käyttää sellaisia sanoja tai termejä, jotka eivät ole lukijalle tuttuja. Ota huomioon lukijoiden ikä. Älä siis käytä alt-teksteissäkään asiantuntijatermejä, jos sisältö on tarkoitettu suurelle yleisölle.

Päätä vaihtoehtoinen teksti aina pisteeseen

Vaikka vaihtoehtoinen teksti olisi hyvinkin lyhyt eikä se olisi kokonainen lause, käytä tekstin lopussa pistettä. Piste helpottaa ruudunlukuohjelmien käyttäjiä, sillä pisteen kohdalla ruudunlukuohjelman ääni pitää tauon ja näin vaihtoehtoinen teksti erottuu paremmin muusta tekstistä. Voit siis kirjoittaa alt=”Söpö kissa.”

Älä aloita vaihtoehtoista tekstiä sanalla ”Kuva” tai ”Kuvassa”

Ruudunlukuohjelmat tunnistavat kuvat ja ilmoittavat käyttäjälle, että kyseessä on kuva. Jos haluat korostaa kuvan laatua, voit tekstin loppuun lisätä tarkennuksen, esim. maalaus, valokuva tms.

Kirjoita neutraali kuvaus, vältä tulkintaa

Älä tee kuvasta omaa tulkintaasi vaan kirjoita kuvan sisällöstä neutraalisti. Tämä on tärkeää etenkin silloin, jos laadit vaihtoehtoista tekstiä jonkun muun valitsemaan kuvaan. On eri asia kertoa ”Lapsi hymyilee” kuin ”Lapsi on iloinen.” Jälkimmäisessä on tulkittu lapsen tunnetila siitä, että lapsi hymyilee.

Kuvan sisältämä teksti kannattaa kirjoittaa alt-tekstiin

Jos kuvassa on sellaista tekstiä, joka tuo lisätietoa eikä samaa tekstiä ole verkkosivun tekstissä, kirjoita alt-tekstiin kuvan sisältämä teksti. Runsaasti tietoa sisältävien infografiikoiden osalta kannattaa käyttää harkintaa. Toimiva ratkaisu voi olla kirjoittaa infografiikan keskeisimmät kohdat lyhyesti alt-tekstiin.

Taulukot ja listat kannattaa tehdä html-muotoon

Jos kyseessä on kuva, joka esittää taulukkoa tai listaa, älä laadi alt-tekstiä, vaan korvaa taulukon tai listan kuva oikealla html-taulukolla tai listalla.

Kuva on myös linkki. Mitä silloin pitää tehdä?

Monesti kuvia käytetään myös linkkeinä – kuvaa klikkaamalla päätyy jollekin toiselle verkkosivulle tai kuvalinkistä aukeaa esimerkiksi jokin lomake. Myös kuvapainikkeita (esim. ”Tilaa”, ”Etsi”, ”Lähetä”) käytetään useilla verkkosivuilla. Riippuu kuvalinkin funktiosta ja kontekstista, millainen alt-teksti sille kannattaa kirjoittaa.

Yleisesti kannattaa huomioida, että linkkien tulisi kertoa käyttäjälle linkin kohteesta. Siksi pelkkiä kuvalinkkejä, joiden yhteydessä ei ole tekstinä tietoa linkin kohteesta, kannattaa välttää ihan näkevienkin käyttäjien kannalta. Varminta on, jos linkkinä toimivan kuvan yhteydessä on myös tekstiä, josta käy ilmi linkin kohde. Näin kaikki käyttäjät saavat tiedon siitä, mihin kuvaa klikkaamalla päätyy.

Miten ruudunlukuohjelma lukee linkkeinä toimivien kuvien tiedot ja alt-tekstit?

Ruudunlukuohjelma tunnistaa, että kyseessä on linkki ja kertoo sen käyttäjälle. Linkkinä toimivan kuvan alt-tekstissä ei siis tarvitse erikseen mainita sanaa linkki.

Jos linkkinä toimii pelkkä kuva ja tämän kuvan alt-teksti on tyhjä, ruudunlukuohjelma lukee osoitteen, jonne linkistä päätyy. Ruudunlukuohjelma siis käyttäytyy kuten muutenkin kuvien suhteen, joiden alt-teksti on määritelty tyhjäksi: ikään kuin koko kuvaa ei olisi olemassa. Tämä voi joskus olla käyttäjän kannalta toimiva ratkaisu, jos kuvan funktio on lähinnä houkutella käyttäjää klikkaamaan kuvaa ja siirtymään linkin kohteena olevalle sivulle – ja jos linkin kohteena olevan sivun osoite on lyhyt ja yksinkertainen.

Varmin ratkaisu on kuitenkin kirjoittaa linkkinä toimivalle kuvalle alt-teksti. Jos linkkinä toimivan kuvan alt-tekstiin kirjoitetaan sisältöä, ruudunlukuohjelma lukee sen muttei erikseen linkin kohdeosoitetta (jollei sitä kirjoiteta alt-tekstiin). Kannattaa siis miettiä, ymmärtääkö ruudunlukuohjelman käyttäjä kuvalinkin alt-tekstin ja mahdollisen kuvatekstin perusteella, mihin hän on linkistä siirtymässä.

Jos kuvalla on kuvateksti, ruudunlukuohjelma lukee sen huolimatta siitä, onko kuvalla alt-tekstiä vai ei. Riippuu siis myös kuvatekstistä, millainen alt-teksti linkkinä toimivalle kuvalle kannattaa kirjoittaa.

Esimerkki kuvalinkistä

Alla on esimerkki kuvalinkistä. Kuva toimii linkkinä, joka vie Wikipedian artikkeliin Albert Einsteinista. Kuvalle on määritelty myös kuvateksti. Jos kuvalle ei anneta alt-tekstiä, ruudunlukuohjelman käyttäjä kuulee kuvatekstin ja itse kuvan kohdalla ruudunlukuohjelma lukisi linkin kohteena olevan www-osoitteen eli Wikipedian artikkelin osoitteen. Koska ruudunlukuohjelma lukee verkko-osoitteet kirjain kerrallaan, tämä ei välttämättä ole paras ratkaisu.

Ehkä parempi ratkaisu olisi antaa kuvalinkille alt-teksti, joka kertoisi kuvan funktiosta linkkinä. Alt-teksti voisi olla esimerkiksi ”Lisää tietoa Albert Einsteinista.” ja ruudunlukuohjelma lukisi kuvan kohdalla ”linkki grafiikka lisää tietoa Albert Einsteinista”.

Toimiva ratkaisu voisi olla myös tehdä kuvasta ja kuvatekstistä yhdessä linkki. Tällä WordPress-julkaisueditorilla tämän voisi kuitenkin tehdä vain erillisen html-koodinäkymän kautta.

Lisää tietoa Albert Einsteinista.
Albert Einstein oli kuuluisa saksalainen keksijä.

Painikkeet kuvalinkkeinä

Jos kuva on esimerkiksi linkkinä toimiva navigaatioelementti tai painike, alt-tekstiksi sopii usein painikkeen näkyvä teksti. Esimerkiksi Tilaa tunnukset -painikkeen alt-tekstiksi kannattaa laittaa ”tilaa tunnukset.”, jolloin ruudunlukuohjelma lukee sisällön näin: ”linkki grafiikka tilaa tunnukset”. Ruudunlukuohjelman käyttäjä saa siis näin saman tiedon painikkeesta kuin näkevä käyttäjä.

Jos siis kuva toimii linkkinä, täytyy miettiä, miten käyttäjä saa riittävästi tietoa sekä kuvan sisällöstä että linkin kohteesta.

Tiivistelmä tämän sivun ohjeista

Näin onnistut kuvan vaihtoehtoisen tekstin kirjoittamisessa:

  • Tutki, mitä verkkosivun tekstissä ja kuvatekstissä kerrotaan kuvan sisällöstä. Mitä jää kertomatta? Kirjoita se kuvan vaihtoehtoiseen tekstiin. Älä toista tekstissä tai kuvatekstissä olevia asioita.
  • Älä aloita vaihtoehtoista tekstiä sanalla ”Kuva” tai ”Kuvassa”. Ruudunlukuohjelmat tunnistavat kuvat ja ilmoittavat käyttäjälle, että kyseessä on kuva. Jos haluat korostaa kuvan laatua, voit lisätä tekstin loppuun tarkennuksen, esim. maalaus, valokuva tms.
  • Kirjoita mahdollisimman napakasti ja selkeästi. Käytä lyhyitä virkkeitä.
  • Käytä sellaista sanastoa ja tyyliä, jotka sopivat ympäröivään tekstiin.
  • Päätä vaihtoehtoinen teksti pisteeseen, vaikka teksti olisi hyvinkin lyhyt eikä se olisi lause. Voit siis kirjoittaa vaihtoehtoiseksi tekstiksi esimerkiksi ”Söpö kissa.”
  • Vältä tulkintaa, jos et ole varma, miten kuva haluttaisiin tulkita. Kirjoita mieluummin neutraali kuvaus kuin oma tulkintasi kuvasta.
  • Jos kuva sisältää vähän tekstiä eikä samaa tekstiä ole muuten sivulla, kirjoita alt-tekstiin kuvan sisältämä teksti.
  • Jos kuva on runsaasti tekstiä ja tietoa sisältävä infografiikka, mieti, onko keskeiset asiat kerrottu myös sivun leipätekstissä. Vaihtoehtoiseen tekstiin kannattaa kirjoittaa infografiikan keskeinen sisältö mahdollisimman tiiviisti, jos sisältöä ei ole avattu muuten verkkosivun tekstissä. Jos sisältö on kerrottu verkkosivun tekstissä, alt-tekstissä voi mainita lyhyesti infograafin aiheen ja että kuvan sisältö löytyy tekstinä sivulta.
  • Toimiiko kuva myös linkkinä? Mieti, saako käyttäjä kuvan vaihtoehtoisesta tekstistä ja mahdollisesta muusta tekstikontekstista riittävästi tietoa linkin kohteesta tai funktiosta. Alt-tekstissä ei tarvitse mainita sanaa linkki, sillä ruudunlukuohjelma kertoo muutenkin, että kyseessä on linkki.
  • Jos kuvassa on taulukko tai lista, korvaa taulukon tai listan kuva oikealla html-taulukolla tai listalla.

Esimerkkejä kuvien vaihtoehtoisista teksteistä

Kuvituskuvat

Tekstiä sisältävä tilannekuva