Tekstivastine ei ole turhake

Turhan moni tuntuu ajattelevan, etteivät kuvat kiinnosta sokeita. Tämä ei pidä paikkaansa. Parhaimmillaan (tai sokean kannalta pahimmillaan) kuva voi tiivistää todella paljon tietoa ja korostaa sieltä valitun näkökulman kannalta olennaisimmat tiedot. Kuva itsessään voi myös vaikuttaa uskottavuuteen, luottamukseen ja asenteeseen, jolla tekstiä toivotaan luettavaksi. Kuva onkin hyvin harvoin vain tarpeeton koriste, joten vastaava tieto ja viesti pitäisi saada välitettyä myös ruudunlukijaa käyttävälle.

Mikä on tekstivastine?

Tälläkin lapsella on monta nimeä: tekstivastine, vaihtoehtoinen teksti, vaihtoehtokuvaus, alt-teksti ja varmasti vielä muitakin nimityksiä. Kaikilla tarkoitetaan samaa eli tekstimuotoista kuvausta ei-tekstuaaliselle sisällölle, kuten valokuvalle. Tämän kuvauksen avulla esimerkiksi ruudunlukija pystyy välittämään kuvan kertoman tiedon puheena tai vaikkapa pistekirjoituksena.

Miten tekstivastine tehdään?

Entäpäs tekstivastineen tekninen toteutus? Se vaihtelee kovasti käytetyn tekstinkäsittelyohjelman ja julkaisujärjestelmän mukaan. Verkkosivuilla kuvan muiden tietojen sekaan liitetään alt-attribuutti, jolle arvoksi annetaan sopiva kuvaus lainausmerkkien sisälle (esim. <img src="esimerkki.jpg" alt="kuvaan sopiva tekstivastine">). HTML-koodissa tällaiselle tekstivastineelle ei ole maksimipituutta, mutta usein suositellaan alle 200, 150 tai vain 100 merkin pituista tekstivastinetta. Tälle on parikin syytä:

• Pitkä tekstivastine katkaisee muun sisällön lukemisen.
• Ruudunlukija lukee tekstivastineen yhteen putkeen eikä vastineeseen pysty luomaan erillisiä otsikoita tai kappalejakoa.
• Jotkin selaimet laittavat tekstivastineen kuvan paikalle, jos kuvaa ei saada ladattua käyttäjän asetuksien tai heikon verkon vuoksi.

Dokumenteissa tekstivastineen saa liitettyä kuvaan erillisellä dialogilla. Esimerkiksi Googlen dokumentissa kuvasta aukeavassa valikossa on vaihtoehto Alt Text ja Microsoftin Word ja PowerPoint -ohjelmissa tuo vaihtoehto on nimetty “Muokkaa vaihtoehtokuvausta” (suomenkielinen 365-versio). Microsoftin ohjelmissa on tarjolla myös vaihtoehto “Merkitse koristeelliseksi”.  Kun valitsee tämän, ruudunlukija tulkitsee kuvan pelkästään koristeeksi ja sivuuttaa kuvan ilman mitään mainintaa.

Onko kuva vain koriste?

Usein neuvotaan, että koristeelliset kuvat pitäisi merkitä tyhjillä tekstivastineilla (esim. alt=””), jotta ruudunlukija osaa hypätä kuvan ohi. Mutta mikä kuva on “koristeellinen”? 

Yleensä kuvalla on jokin merkitys sivulla. Toki on olemassa puhtaasti koristeena käytettyjä kuvia, kuten tilanjakajina tai reunakoristeina käytettyjä ornamentteja tai taustakuvia. Yleensä kuvat ovat kuitenkin tarkoin harkittuja viestimään samaa tunnelmaa kuin sivun sanallinen sisältö, luomaan asiayhteyttä, tuomaan helposti ymmärrettäviä esimerkkejä siitä, mistä kirjoitetaan, tai lisäämään uskottavuutta kerrottuun. Useimmilla kuvilla on siis tarkoitus ja viesti, miksi juuri se kuva on valittu. Tekstivastineen pitäisi pystyä kertomaan tuo sama asia, miksi tämä kuva valittiin ja mitä sillä haluttiin viestiä. Jos kuva on vain täyttämässä tilaa, ehkä se tosiaankin on vain koriste, joka voidaan huoletta hypätä yli. Jos sillä kuitenkin on sanoma, kerro se myös tekstivastineessa.

Onko kuvan sisältö kerrottu jo sivun muussa sisällössä?

Yleisenä ohjeena annetaan myös se, että tekstivastineen voi jättää tyhjäksi, jos vastaava asia on jo kerrottu esimerkiksi saman sivun leipätekstissä. Tämä täyttäisi lain vaatimukset saavutettavuudelle. Useat sokeat lukijat ovat kuitenkin sanoneet, että he haluavat tietää, jos asiasta on tekstin lisäksi myös kuva. Syitä on monenlaisia:

• Kuvaan voi olla viittauksia leipätekstissä ja ruudunlukijaa käyttävälle viittaukset ovat hämmentäviä, jos kuvasta ei muutoin ole mainittu.
• Kuvalle saattaa olla jopa kuvateksti, mutta se ei usein kerro riittävästi kuvan sisällöstä ja merkityksestä.
• Kuvasta saattaa syntyä muilla kanavilla keskustelua, josta ruudunlukijaa käyttävän on jälleen vaikea hahmottaa, mistä on kyse.
• Etenkin lapsuudessa ympäristöään visuaalisesti hahmottaneet saattavat vielä sokeuduttuaankin hahmottaa ympäristöään visuaalisesti, vaikka eivät sitä enää itse näe.
• Kuvan läsnäolo saattaa tuoda lisää luotettavuutta joihinkin tilanteisiin, kun kirjoittaja tai yhteyshenkilö on tunnistettavissa myös kasvoiltaan.

Syitä lisätä tekstivastine on siis monia. Sen sijaan, että käytettäisiin kovasti aikaa sen pohtimiseen, onko tekstivastine pakollinen vai ei, resurssit kannattaakin suunnata siihen, millainen tekstivastine olisi kyseiseen tilanteeseen sopiva.

Millainen on hyvä tekstivastine?

Saman kuvan merkitys eri asiayhteyksissä voi olla hyvin erilainen. Siksipä sopiva tekstivastinekin on eri tilanteissa erilainen. 

Otetaanpa esimerkiksi tämän blogikirjoituksen alussa oleva kuva. Sen voisi tulkita koristeeksi ilman erityistä sanomaa, mutta rehellisesti sanoen se on huolella valittu. Samaa kuvaa voisi käyttää esimerkiksi  kertomaan tiimityöstä, jonkinlaisesta arvioinnista tai ideoinnista. Niissä yhteyksissä kuvalla olisi näitä asioita painottava tekstivastine.

Tähän yhteyteen valitsin kyseisen kuvan siksi, että siinä on joukko ihmisiä katselemassa erilaisia esitystapoja numeeriselle datalle. Toivon, että nämä kuvitteelliset ihmiset puntaroivat, mikä on paras tapa välittää kyseistä tietoa visuaalisesti – ja samalla myös sitä, miten sama asia kerrotaan ruudunlukijaa käyttäville.

Siksi päädyin tekstivastineeseen: “Kolme piirrettyä hahmoa pohtii, miten kuvailla tietokoneen näytöllä näkyvät graafit. Yksi tarkastelee suurennuslasin kanssa alkuperäistä dataa ja kaksi tarkastelee tiedosta tehtyä pylväskuviota, viivakuviota ja piirasta.” Vastine on suositusten mukaisesti 1-2 virkettä pitkä, ja se kertoo näillä kahdella virkkeellä,  miksi juuri se kuva on valittu tähän blogiin. Lisäksi se kertoo, että henkilöt eivät ole aitoja, vaan piirrettyjä. Tärkeää on myös se, että vastine ei ala sanalla “Kuva”, sillä ruudunlukija kertoo tämän tiedon automaattisesti kuvista.

Tekstivastineessa ei myöskään kannata toistaa samoja asioita kuin kuvatekstissä, jos kuvalla on kuvateksti. Ruudunlukija lukee sekä tekstivastineen että kuvatekstin, joten tekstivastine kannattaa ajatella kuvatekstin täydennyksenä.

Joskus näkee, että tekstivastinetta on käytetty kertomaan kuvaajan nimi. Se tieto ei kuulu tekstivastineeseen vaan esimerkiksi kuvatekstiin kaikkien näkyville – tekstivastinehan välittyy vain ruudunlukijalle.

Esimerkki?

Otetaan esimerkiksi yksi kuva ja katsotaan, millainen tekstivastine sille sopisi eri asiayhteyksissä.

Tähän blogiin päädyin laittamaan kuvalle tekstivastineeksi: “Etualalla pieni mustavalkoinen koira ja sen takana kukkivan kirsikkapuun oksa.” Se on neutraali ja melko lyhyt kuvaus valokuvan olennaisista asioista.

Jos kuva olisi osa esimerkiksi kirsikkapuiston someryhmän päivitystä, tekstivastineessa olisi hyvä korostaa enemmän itse kirsikankukkia. Toki tämäkin tekstivastine tulisi suunnitella niin, että se tukee päivityksen muuta tekstiä toistamatta turhaan samoja tietoja. Yksi sopiva voisi olla: “Nuoren kirsikanpuuntaimen oksa lähes notkuu vaaleanpunaisten kukkien painosta. Etualalla myös koiramme, joka oli retkellä mukana.” 

Jos kuva olisikin osa jonkin koiraryhmän viestiä, sopiva tekstivastine voisi olla vaikkapa: “Mustavalkoinen amerikankääpiöterrieri kukkivan kirsikkapuun edessä.” Tämän ryhmän lukijoita kiinnostanee enemmän, minkä rotuinen koira on kyseessä. Kun kyseistä rotua on kolmea väriä, myös väri voi olla kiinnostava.

Kuinka tärkeä tekstivastine on?

Kun mietitään, kuinka tärkeä jonkin kuvan tai kuvakkeen tekstivastine on, on syytä muistaa, että on olemassa hyvin erilaisia kuvia. Tämä blogikirjoitus keskittyy lähinnä tavallisiin kuviin, kuten piirroksiin, graafeihin ja valokuviin. Kuvia voidaan kuitenkin käyttää myös vuorovaikutteisina elementteinä, kuten painikkeina tai linkkeinä. Näille tekstivastine on erittäin tärkeä. Kun kuvaa painamalla tapahtuu jotain, esimerkiksi päätyy uudelle sivulle, myös ruudunlukijaa käyttävän on saatava tieto, mitä painike tekee tai mihin kuvalinkki johtaa. He saavat tämän tiedon vain tekstivastineen avulla, jos esimerkiksi linkissä ei kuvan lisäksi ole varsinaista linkkitekstiä.

Jos kuvaan ei ole yhdistetty toiminnallisuutta, tekstivastine ei ole kovin keskeisessä roolissa sivun sisällön hahmottamisessa – ainakaan ensivierailulla. Tässä tilanteessa on huomattavasti tärkeämpää, että visuaalisesti merkityt otsikot on merkitty myös ruudunlukijan ymmärtämällä tavalla. On myös tärkeää, että tietoa ei yritetä välittää esimerkiksi pelkällä kuvalla julisteesta tai esitteestä ilman mitään tekstivastinetta tai vastaavaa tekstimuotoista tietoa. Tieto tuleekin aina esittää ensisijaisesti tavallisena tekstinä. Jos päädytään esittämään tekstiä kuvana, sama teksti tulee löytyä myös kuvan tekstivastineesta.

Kun sivun sisällön on hahmottanut, myös kuvien – eli ruudunlukijaa käyttävien näkökulmasta tekstivastineiden – merkitys kasvaa. Mitä tietoa sivulla on myös kuvamuodossa ja millainen mielikuva niistä syntyy? Hauska, vakava, leikkisä, luotettava vai mitä kaikkea ne pystyvätkään kertomaan?

Käytä kuvia jatkossakin

Saavutettavuusarviointeja tehdessäni olen huomannut, että joiltain sivustoilta on tietoisesti karsittu niin kuvia kuin videoitakin, jotta sisältö olisi helpommin tehtävissä saavutettavaksi. Tämä ei kuitenkaan ole perusteltua tai saavutettavuusperiaatteiden mukaista. Saavutettavuudellahan pyritään tekemään tiedosta sellaista, että mahdollisimman moni pääsisi siihen käsiksi ja pystyisi sen ymmärtämään. 

Kuvat ja videot ovat monelle se paras keino omaksua tietoa, joten niitä kannattaa hyödyntää jatkossakin. Vastaava tieto pitää vain muistaa laittaa tarjolle myös tekstimuodossa, jotta ruudunlukijaa käyttävätkin saavat tuon tiedon. Videoissa on toki vielä omat lisävaatimuksensa, mutta ei niistä sen enempää tässä blogikirjoituksessa. Kuvien osalta vaiva on usein pieni, kun keinot kertaalleen oppii.

Jäikö jokin kysymys pohdituttamaan?

Yksityiskohtaisempia ohjeita tekstivastineista löytyy esimerkiksi 

• Saavutettavasti.fi-sivustolta: Kuvien vaihtoehtoiset tekstit
• Näkövammaisten liiton sivuilta: Saavutettavuus sosiaalisessa mediassa.

Lisää tietoa ja vinkkejä saavutettavuudesta laajemminkin löydät saavutettavuusoppaastamme (tilaa saavutettavuusopas sähköpostiisi). Meillä on työn alla myös erillinen opas infografiikan saavutettavuuteen. Kannattaa pysyä kuulolla!