Kuvien vaihtoehtoiset tekstit

Kuvien vaihtoehtoiset tekstit ovat oleellisia saavutettavuudelle

Kuvien vaihtoehtoiset tekstit parantavat merkittävästi verkkosisältöjen saavutettavuutta.  Saavutettavuusdirektiivin vaatimuksissa 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ä.

Jotta vaihtoehtoisista teksteistä olisi aidosti hyötyä käyttäjille, tekstien laatimisessa on huomioitava esimerkiksi kuvan funktio ja ympäröivä teksti.

Vaihtoehtoinen teksti auttaa vammaisia henkilöitä ja hakukoneita

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 henkilö ei ole halunnut ladata niitä.

Vaihtoehtoinen teksti on myös hakukonenäkyvyyden kannalta tärkeä. Hakukoneet löytävät verkkosivujen kuvien vaihtoehtoiset tekstit. Verkkosivun tekstisisältöä tukevalle kuvalle on yleensä helppo kirjoittaa myös keskeisiä avainsanoja sisältävä alt-teksti. 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, tekstivastine ja alt-teksti tarkoittavat samaa

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

Tekniseltä kannalta tarkasteltuna tarkoituksena on kuitenkin tuottaa html-sivuille img-elementtiin alt-attribuutin sisältö. Alt-attribuutin sisältö on teksti, jonka esimerkiksi näkövammaisten käyttämät ruudunlukuohjelmat lukevat ääneen. Kuville voidaan tuottaa tekstivastine myös muihin dokumentteihin, kuten word- ja pdf-tiedostoihin.

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 yleensä kuvan alla tai vieressä. Kuvateksti annetaan yleensä editorissa kuvatyökalun kautta. Ruudunlukuohjelma lukee kuvatekstin, vaikka alt-teksti olisi tyhjä. 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 pakko kirjoittaa?

Verkkosivujen kuvilla on saavutettavuusvaatimusten mukaan oltava jokin vaihtoehtoinen teksti.

Vaihtoehtoisen tekstin sisällön voi myös määritellä tyhjäksi. Tyhjä alt-teksti on teknisesti ottaen siis alt=”” tai alt=” ”. Vaihtoehtoisen tekstin voi jättää tyhjäksi vain muutamassa tapauksessa:

  • kyseessä on koristekuva tai
  • kuvan sisältö on muuten täysin merkityksetön muun sisällön suhteen 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.

Jos alt-teksti on tyhjä, ruudunlukuohjelma käyttäytyy kuin koko kuvaa ei olisi olemassa. Tämä ei ole välttämättä 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ä.

Milloin alt-teksti voi olla tyhjä?

Alt-teksti voi siis olla joissain tapauksissa tyhjä. Koristekuvilla tarkoitetaan sellaisia kuvia, jotka eivät välitä mitään informaatiota ja jotka on lisätty taiton vuoksi. 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ä. Muista, että ruudunlukuohjelmaa käyttävä henkilö kuulee koko alt-tekstin.

Jos kuvan sisältö on kuvailtu verkkosivun tekstissä muuten, voi alt-tekstin jättää tyhjäksi. Tässä kannattaa kuitenkin muistaa, että joskus myös näkövammaisen käyttäjän voi olla tarpeellista saada kuva vaikkapa tallennettua omalle koneelleen ja lähetettyä se sähköpostilla eteenpäin. Jos alt-teksti on tyhjä, ruudunlukuohjelman käyttäjä ei löydä kuvaa verkkosivulta lainkaan.

Jos tekstissä viitataan kuvaan (esim. ”kuten kuvassa näkyy”, ”yllä olevassa infograafissa on kuvattu talouden kehitys viimeisen vuosikymmenen aikana”, alt-tekstin kirjoittaminen on tärkeää.

Alt-attribuutin puuttuminen vai tyhjä alt-teksti?

Jos koko alt-attribuutti puuttuu, ruudunlukuohjelma lukee yleensä kuvan tiedoston nimen. Tämä on yleensä vain häiritsevää ruudunlukuohjelman käyttäjälle. Useimmissa julkaisujärjestelmän editoreissa on vaikea poistaa alt-attribuutti vahingossa. Yleensä attribuutin poisto täytyy tehdä näkymästä, josta pääsee muokkaamaan suoraan html-koodia.

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