Kuvien vaihtoehtoiset tekstit

• Kuvien vaihtoehtoiset tekstit ovat oleellisia saavutettavuudelle
• Vaihtoehtoinen teksti, tekstivastine ja alt-teksti – mitä ne ovat?
• Vaihtoehtoinen teksti auttaa niitä henkilöitä, jotka eivät näe kuvaa
• Vaihtoehtoinen teksti ei ole kuvateksti tai kuvan otsikko
• Onko vaihtoehtoinen teksti aina pakko kirjoittaa?
• Miten vaihtoehtoinen teksti laaditaan?
• Kuva on myös linkki. Mitä silloin pitää tehdä?
• Esimerkkejä kuvien vaihtoehtoisista teksteistä

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ä. Tässä osiossa keskitymme kuviin, videot ja äänitteet käsitellään erikseen. 

Vaihtoehtoinen teksti, tekstivastine ja alt-teksti – mitä ne ovat?

Termejä vaihtoehtoinen teksti, tekstivastine ja alt-teksti käytetään usein tarkoittamaan sitä, että kuvaan on liitetty teksti ohjelmallisesti. Epäselvyyttä voi aiheuttaa se, että eri työkaluohjelmissa ja sovelluksissa käytetään suomeksi eri termejä ja voi olla hankala tietää, mihin vaihtoehtoinen teksti kirjoitetaan.

Tekstivastine on termi, jota käytetään WCAG-ohjeissa. Tekstivastine on ”Teksti, joka on ohjelmallisesti liitetty ei-tekstimuotoiseen sisältöön tai johon on viitattu tekstistä, joka on ohjelmallisesti liitetty ei-tekstimuotoiseen sisältöön. Ohjelmallisesti liitetty teksti on tekstiä, jonka sijainti voidaan ohjelmallisesti selvittää ei-tekstuaalisesta sisällöstä.” Käytännössä tämä tarkoittaa sitä, että

1. verkkosivulla tai asiakirjan tiedostossa on kuvan koodissa selostettu kuvan sisältö tekstinä, joka ei näy, mutta välittyy ruudunlukuohjelmalle TAI
2. kuvan sisältö kerrotaan verkkosivun tai asiakirjan näkyvässä tekstissä ja kuvan koodissa annetaan ruudunlukuohjelmalle teksti, joka kertoo, missä kuva on selostettu.

Termejä vaihtoehtoinen teksti ja alt-teksti käytetään sovellusohjelmissa kuten tekstinkäsittelyohjelmissa tai html-editoreissa. Verkkosivujen sisällönhallintajärjestelmissä on usein kuvan yhteydessä kenttä Vaihtoehtoinen teksti (tai Alt-teksti), johon voi kirjoittaa kuvan selostuksen, kun kuva lisätään. Www-sivun html-koodissa vaihtoehtoinen teksti on img-elementissä alt-attribuutissa. Ruudunlukuohjelma välittää alt-attribuutin sisällön eli vaihtoehtoisen tekstin ohjelman käyttäjälle. Alt-attribuutti ei näy verkkosivulla tekstinä, vaan on piilossa html-sivun koodissa.

Asiakirjatiedostoissa vaihtoehtoinen teksti voidaan vastaavasti lisätä kuvan koodiin.

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 kuvaa. Vaihtoehtoiseen tekstiin pääsee käsiksi ruudunlukuohjelman avulla. Ruudunlukijoita käyttävät etenkin näkövammaiset henkilöt.

Vaihtoehtoisen tekstin voi saada näkyviin selaimessa, jos asetuksissa estää kuvien lataamisen. Tällöin kuvien tilalle ladataan alt-teksti. Myös silloin, jos kuvat eivät jostain syystä lataudu, alt-teksti voi näkyä kuvien tilalla.

Vaihtoehtoinen teksti ei ole kuvateksti tai kuvan otsikko

Vaihtoehtoinen teksti eli alt-teksti ei ole sama asia kuin kuvateksti tai kuvaotsikko, joista englanniksi käytetään ohjelmissa termiä caption.

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

Huomaa, että myöskään kuvan otsikko (englanniksi title) ei ole vaihtoehtoinen teksti. Joissakin sisällönhallintajärjestelmissä voi kuvalle antaa title-attribuutin, joka tulee näkyviin, kun verkkosivulla vie kuvan päälle kohdistimen. Saavutettavuusvaatimukset edellyttävät alt-attribuutin käyttöä, title-attribuuttia ei tarvita.

Onko vaihtoehtoinen teksti aina pakko kirjoittaa?

Verkkosisällöissä 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. Ns. tyhjä alt-teksti on teknisesti ottaen html-koodissa img-elementin sisällä oleva 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.

Verkkosisällön hallintajärjestelmissä on yleensä mahdollisuus merkitä kuva koristeelliseksi. Tällöin vaihtoehtoista tekstiä ei anneta lainkaan. Myös tekstinkäsittely- ja esitysohjelmissa (kuten Word tai PowerPoint) voi usein merkitä kuvan koristeelliseksi.

Milloin alt-teksti voi olla tyhjä tai kuvan voi merkitä koristeelliseksi?

Jos alt-teksti on tyhjä tai kuva on merkitty koristeelliseksi, ruudunlukuohjelma käyttäytyy kuin koko kuvaa ei olisi olemassa eikä siis välitä käyttäjälle tietoa siitä, että sivulla on kuva.

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 kertoo olennaiset asiat kuvasta.

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öä. Tällaisessa tapauksessa kannattaa miettiä, mitä kuvituskuvalla halutaan viestittää. Jos halutaan esimerkiksi näyttää jokin kaunis maisema kotikunnassa, voi alt-tekstiksi antaa lyhyen tiedon 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 ja kuvan voisi poistaa, kannattaa käyttää tyhjää alt-tekstiä tai merkitä kuva koristeelliseksi. Ruudunlukuohjelma välittää alt-tekstin siinä kohdassa, jossa kuva on. Kuvituskuvalle väkisin keksitty alt-teksti keskellä leipä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 tai merkitä kuvan koristeelliseksi. Tällöin on kuitenkin tärkeää ottaa huomioon se, mainitaanko kuva leipätekstissä. Jos tekstissä esimerkiksi selostetaan tilastotietoja ja kuva vain visualisoi tekstinä annettua tietoa, alt-tekstiä ei tarvita. Mutta jos tekstissä viitataan kuvaan, pitäisi alt-tekstissä kertoa, että kuvan sisältö on kerrottu tekstissä. Muut käyttäjät saattavat myös 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ä?

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 kuvan sisältöön, esimerkiksi ”kuten kuvasta näkee”, on ehdottoman tärkeää, että kuvasta nähtävä tieto kerrotaan. Älä kuitenkaan keskity visuaalisten asioiden selostamiseen (esimerkiksi väreihin), vaan siihen, mikä on kuvassa olennaisinta. Onko kuvassa esimerkiksi esitetty jonkin asian muutos kuvaajan avulla?

Kuvan konteksti on oleellinen

Olisi houkuttelevaa kirjoittaa kuville valmis vaihtoehtoinen teksti esimerkiksi kuvapankkiin. Sopiva vaihtoehtoinen teksti riippuu kuitenkin kontekstista, eikä sama vaihtoehtoinen teksti välttämättä toimi saman kuvan kanssa joka paikassa. On tärkeää miettiä, mikä kuvassa on merkittävää siinä kontekstissa, jossa sitä käytetään. Mikä on kuvan rooli? Tuoko kuva jotain lisätietoa suhteessa tekstiin? Laadi vaihtoehtoinen teksti siten, että se sopii juuri siihen tekstisisältöön, jossa kuva on.

Kirjoita mahdollisimman napakasti ja selkeästi

Käytä lyhyitä virkkeitä ja selkeää kieltä. 1-2 virkettä tai n. 250 merkkiä on hyvä pituus.

WCAG-kriteereissä ei ole määritelty mitään tiettyä merkkimäärää, mutta on hyvä tietää, että ruudunlukuohjelmassa käyttäjä ei voi liikkua alt-tekstissä samoin kuin muussa tekstissä, esimerkiksi palata edelliseen virkkeeseen, vaan alt-teksti on luettava kokonaan tai hypättävä sen ohi. Ruudunlukuohjelmat myös katkovat pitkiä alt-tekstejä, mikä tarkoittaa, että kesken alt-tekstin käyttäjä saa uudestaan ilmoituksen kuvasta.

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

Käytä vaihtoehtoisessa tekstissä lukijalle tuttuja sanoja ja termejä eli samaa sanastoa kuin muussakin tekstissä. Vaikka jokin uusi termi olisi lyhyt ja kuvaava, älä käytä sitä ensimmäistä kertaa alt-tekstissä.

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ä, jotka käyttävät tekstistä puheeksi -toimintoa. Pisteen kohdalla ruudunlukuohjelman ääni pitää tauon ja näin vaihtoehtoinen teksti erottuu paremmin muusta tekstistä. Voit siis esimerkiksi antaa kuvituskuvalle selostuksen alt=”Talvinen metsämaisema.”

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

Ruudunlukuohjelma ilmoittaa käyttäjälle, että kyseessä on kuva ennen kuin se välittää vaihtoehtoisen tekstin. Voit halutessasi kertoa, että kyseessä on piirroskuva, kartta tai muu kuvatyyppi. Älä kuitenkaan aloita tekstiä tyyliin: ”Kuvassa näkyy” tai ”Kuva esittää”.

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 verkkosisällön tekstissä, kirjoita alt-tekstiin kuvan sisältämä teksti. Jos kuvassa on tekstiä runsaasti esimerkiksi infografiikassa, infografiikan keskeisimmät kohdat voi antaa lyhyesti alt-tekstissä. Leipätekstissä olisi hyvä antaa pidempi kuvaus.

Älä muotoile alt-tekstiä

Huomaa, että alt-attribuutin sisältöä ei voi muotoilla kuten leipätekstiä. Älä siis kirjoita alt-tekstiä luetteloksi, vaan kirjoita kuvan selostus virkkeinä.

Taulukot ja luettelot kannattaa tehdä aitoina taulukkoina ja luetteloina

Jos kyseessä on kuva, joka esittää taulukkoa tai luetteloa, älä laadi alt-tekstiä, vaan korvaa taulukon tai luettelon kuva aidolla taulukolla tai luettelolla. Verkkosivuilla aito taulukko tai luettelo tuotetaan semanttisesti sopivilla html-elementeillä (table, th, tr, td, ol, ul, li, jne). Tekstinkäsittelyohjelmissa käytetään taulukko- tai luettelotyökaluja. Tämä antaa ruudunlukuohjelman käyttäjälle mahdollisuuden liikkua taulukossa tai luettelossa.

Alt-tekstistä tulisi hyvin pitkä, mitä voi tehdä?

Jos kuvan vaihtoehtoisesta tekstistä tulisi hyvin pitkä, eikä muutama virke riitä kuvan olennaisen tiedon selostamiseen, miten voi täyttää vaatimuksen tekstivastineen antamisesta? Kuvalle voi laatia pidemmän kuvaselostuksen. Verkkosivuilla on erilaisia keinoja näyttää pidempi selostus. Selostuksen voi kirjoittaa leipätekstin joukkoon ja alt-tekstissä kertoa, että kuva on selostettu tekstissä. Jos kuitenkin leipätekstiä ei haluta pidentää, voi kuvan yhteyteen lisätä linkin erilliselle sivulle, jossa pitkä selostus on. Verkkosivuille on myös mahdollista tuottaa avautuva ja suljettava osa, johon pitkän selostuksen voi sijoittaa. Katso esimerkki avattavasta osasta kohdassa Infografiikka.

Huomaa, että pitkässä selostuksessa tekstiä voi muotoilla toisin kuin alt-attribuutin tekstiä. Pitkässä selostuksessa kannattaa hyödyntää luetteloja, otsikointia tai taulukoita, jos se on tiedon esittämisessä tarpeen.

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.

Kuvalinkkien vaihtoehtoisia tekstejä on käsitelty laajemmin artikkelissa Toiminnallisten kuvien alt-tekstit.

Seuraavaksi on esimerkkejä erilaisista kuvista ja niiden vaihtoehtoisista teksteistä.