Euroopan Unionin saavutettavuusdirektiivi (2016/2102) koskee julkisen sektorin verkkosivustojen ja mobiilisovellusten saavutettavuutta. Direktiivi edellyttää verkkosivujen, mobiilisovellusten ja niiden sisältöjen olevan sellaisia, että kuka tahansa voi niitä käyttää ja ymmärtää. Näin tarjotaan kaikille tasavertaiset mahdollisuudet käyttää digitaalisia palveluita – kuulosta, näkökyvystä, motorisista haasteista tai muista toimintarajoitteista riippumatta.
Saavutettavuusdirektiivi edellyttää, että kaikelle ei-tekstimuotoiselle verkkosisällölle tarjotaan tekstivastineet. Toisin sanoen kuvien, videoiden ja äänen sisältämä tieto on esitettävä myös tekstinä. Tekstivastineiden käyttäminen parantaa huomattavasti verkkosisältöjen saavutettavuutta. Tässä viikon vinkissä keskitytään erityisesti kuvien tekstivastineisiin. Ohjeet ovat tiivistelmä pääasiassa Celian ohjeista.
Tekstivastine, vaihtoehtoinen teksti ja alt-teksti ovat sama asia
Tekstivastine, vaihtoehtoinen teksti ja alt-teksti tarkoittavat samaa. Toisinaan käytetään myös ilmaisua vaihtoehtokuvaus tai vaihtoehtoinen kuvaus. Alt-teksti tulee englanninkielisestä termistä alternative text, josta käytetään myös muotoja alt text tai alt tag.
Tekstivastineen avulla kuvan sisältämä tieto kerrotaan käyttäjälle silloin, kun selain ei lataa tai lue kuvatiedostoja. Esimerkiksi näkövammaisten käyttämät ruudunlukuohjelmat lukevat kuvan kohdalla tekstivastineen ääneen. Tekstivastine määritellään kuvan tietoihin tai verkkosisältöön alt-tekstinä (esim. alt=”Luminen kuusimetsä.”). Kuvien tekstivastineet kannattaa lisätä verkkosivujen lisäksi myös muihin dokumentteihin, kuten tekstitiedostoihin (Word, pdf) ja esitysgrafiikkaan.
Esimerkki kuvan tekstivastineesta: Nuoret istuvat muurin reunalla kädet toistensa hartioilla.
Tekstivastine parantaa saavutettavuutta ja näkyvyyttä
Kuvien tekstivastineita käyttämällä varmistetaan, että mahdollisimman moni saa tarvitsemansa tiedon helposti. Saavutettava sisältö on käytettävissä erilaisilla päätelaitteilla, yhteyksillä ja apuvälineillä, kuten ruudunlukuohjelmilla.
Tekstivastine on myös yksi tärkeimmistä tekijöistä kuvien hakukoneoptimoinnissa. Tekstivastine tehostaa kuvan ja sivun hakukonenäkyvyyttä eli sisältö nousee verkon hakutuloksissa korkeammalle.
Esimerkki kaavion tekstivastineesta: Hakijamäärät: 2015 189, 2016 193, 2017 171, 2018 183.
Tekstivastine ei ole kuvateksti tai otsikko
Tekstivastine on eri asia kuin kuvateksti (englanniksi caption) tai kuvan otsikko (title). Kuvateksti on verkkosivulla kaikille käyttäjille näkyvää tekstiä, jonka ruudunlukuohjelmat lukevat ääneen. Yleensä kuvateksti on kuvan alla tai vieressä.
Kuvan otsikkoa ruudunlukuohjelmat sen sijaan eivät lue. Käyttäjä näkee halutessaan kuvan otsikon viemällä kohdistimen kuvan päälle.
Hyvä tekstivastine on napakka ja neutraali
Tekstivastinetta laadittaessa olennaista on kuvan konteksti ja se, mitä kuvasta jää kertomatta muualla tekstissä. Mitä kuvasta pitäisi ymmärtää?
Lyhyt ja selkeä kuvaus
- Kirjoita lyhyesti ja selkeästi. Tekstivastineen pituus kannattaa olla korkeintaan 125 merkkiä.
- Kirjoita neutraali kuvaus, älä omaa tulkintaasi kuvasta.
- Kiinnitä huomiota kuvan käyttötarkoitukseen, ympäröivän tekstin sisältöön ja tyyliin.
- Älä toista tekstissä tai kuvatekstissä mainittuja asioita. Mieti, mitä tietoa jää saamatta, jos kuvaa ei näe.
- Merkitse tekstivastineen loppuun piste. Pisteen kohdalla ruudunlukuohjelman ääni pitää tauon, jolloin tekstivastine erottuu paremmin muusta tekstistä.
- Älä aloita tekstivastinetta sanalla ”kuva” tai ”kuvassa”. Ruudunlukuohjelmat tunnistavat kuvan ja ilmoittavat siitä käyttäjälle. Tarvittaessa voit lisätä tekstin loppuun tarkennuksen kuvan laadusta (esim. alt=”Luminen kuusimetsä, valokuva.”)
Kuva linkkinä
Jos kuva toimii linkkinä, ei tekstivastineessa tarvitse mainita sanaa ”linkki”. Ruudunlukuohjelmat tunnistavat linkin ja kertovat siitä käyttäjälle. Olennaista on, saako kuvan tekstivastineesta ja muusta tekstisisällöstä riittävästi tietoa linkin kohteesta.
Infografiikka
Jos kuva on paljon tekstiä ja tietoa sisältävää infografiikkaa, tarkista, onko keskeiset asiat mainittu tekstisisällössä. Mikäli on, mainitse tekstivastineessa infograafin aihe ja että kuvan sisältö löytyy tekstinä sivulta. Jos infografiikan sisältö ei löydy sivulta, kirjoita tekstivastineeseen sen sisältö mahdollisimman tiiviisti.
Esimerkki infografiikan tekstivastineesta, jos sisältö ei ole kerrottu tekstinä sivulla:
Kohderyhmän ja käyttäjien tarpeiden huomioon ottaminen suunnittelussa ja tuotannon vaiheessa sekä toteutuksen aikana: 1. Opiskelijoilta vaadittava lähtötaso on määritelty ja ilmaistu opintojaksokuvauksessa. 2. Verkkoalustalla on tarjolla työkaluja lähtötason selvittämistä varten. Opintojakson osallistujilla on riittävät pohjatiedot ja –taidot opintojakson suorittamiseksi. 3. Osallistujamäärä on mitoitettu toteutukseen sopivaksi. Toteutus ja pedagogiset ratkaisut onnistuvat valitulla osallistujamäärällä.
Lista tai taulukko
Jos kuvassa on lista tai taulukko, korvaa se oikealla listalla tai html-taulukolla, jonka ruudunlukuohjelma pystyy lukemaan.
Tyhjä alt-teksti vain poikkeustapauksessa
Erityistapauksissa alt-tekstin voi merkitä tyhjäksi (alt=”” tai alt=” ”). Tällöin ruudunlukuohjelma ei reagoi kuvaan lainkaan. Tyhjää alt-tekstiä voi käyttää kun kuva on koristekuva, sisällöltään täysin merkityksetön, kuvailtu ympäröivässä tekstissä tai kuvatekstissä.
Älä poista alt-attribuuttia. Jos koko alt-attribuutti puuttuu, lukee ruudunlukuohjelma yleensä kuvatiedoston nimen. Tämä yleensä vain häiritsee käyttäjää, joka ei saa tietoa kuvan sisältämästä tiedosta.
Tekstivastine Word- ja PowerPoint-ohjelmissa
Lisää tekstivastineet Word- ja PowerPoint-tiedostoihin alla olevien ohjeiden mukaan. Mikäli käytät sovelluksen Tarkista helppokäyttöisyys (Check Accessibility) -tarkistusta, kannattaa tiedosto tekstivastineiden lisäämisen jälkeen tallentaa ja testata uudelleen.
Word 2016
Paina kuvan päällä hiiren oikeaa painiketta ja valitse Muotoile kuvaa > Asettelu ja ominaisuudet > Vaihtoehtoinen teksti > Kuvaus (Format Picture > Layout & Properties > Alt Text > Description).
Ohje tekstivastineiden lisäämiseen vanhemmissa Word-ohjelman versioissa.
PowerPoint 2016
Paina kuvan päällä hiiren oikeaa painiketta ja valitse Muotoile kuvaa > Koko ja ominaisuudet > Vaihtoehtoinen teksti > Kuvaus (Format Picture > Size & Properties > Alt Text > Description).
Ohje tekstivastineiden lisäämiseen vanhemmissa PowerPoint-ohjelman versioissa.