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ä?
• Tiivistelmä tämän sivun ohjeista

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 – mitä ne ovat?

Rakkaalla lapsella on monta nimeä ja termejä vaihtoehtoinen teksti, tekstivastine ja alt-teksti käytetään usein tarkoittamaan sitä, että kuvaan on liitetty teksti jotenkin ohjelmallisesti. Epäselvyyttä voi aiheuttaa myös 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ä kuvaan voidaan verkkosivun koodissa tai esimerkiksi pdf-tiedoston koodissa kirjoittaa tekstinä selostus kuvasta tai selostus voidaan kirjoittaa näkyviin sivun tekstiin ja samaan aikaan kertoa koodissa olevassa tekstissä, missä selostus on.

Termit vaihtoehtoinen teksti ja alt-teksti tarkoittavat yleensä verkkosivuilla sitä, että www-sivun html-koodissa img-elementissä on alt-attribuutti. Alt-attribuutin sisältö on teksti, jonka ruudunlukuohjelmat välittävät käyttäjälle. Alt-attribuutti ei näy verkkosivulla tekstinä, vaan on siis piilossa html-sivun koodissa. Vaihtoehtoinen teksti voidaan tuottaa myös ladattavien tiedostojen koodiin, esimerkiksi Word- ja pdf-tiedostoihin. Verkkosivujen päivittäjän pitää tietää, miten hän voi lisätä editointiohjelmassa kuvalle vaihtoehtoisen tekstin.

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. Syynä voi olla näkövamma tai se, että kuvat eivät ole latautuneet tai käyttäjä ei ole halunnut ladata niitä. Vaihtoehtoisen 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.

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 siis pidä toistaa kuvatekstiä sellaisenaan, koska ruudunlukuohjelma lukee molemmat sisällöt.

Verkkosivulla 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). Ruudunlukuohjelmat eivät kuitenkaan lue kuvan otsikkoja. 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. 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. 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, 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 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. Ä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. Sopivan 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? Onko oleellinen tieto annettu muualla verkkosivun tekstissä? 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 kirjoittaa alt=”Pörröinen kissanpentu.”

Ä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 kertoa, että kyseessä on maalaus tai piirroskuva. Älä kuitenkaan aloita vaihtotekstiä 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 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 luettelot kannattaa tehdä html-muotoon

Jos kyseessä on kuva, joka esittää taulukkoa tai luetteloa, älä laadi alt-tekstiä, vaan korvaa taulukon tai luettelon kuva oikealla html-taulukolla tai luettelolla. Tämä antaa ruudunlukuohjelman käyttäjälle mahdollisuuden liikkua taulukossa tai luettelossa.

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.

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.