Toiminnallisten kuvien alt-tekstit

Kirjoittanut Kirsi Ylänne

Artikkelia on päivitetty 30.9.2024.

Kuva on tuotettu Adobe Firefly -tekoälysovelluksella.

Verkossa kuvia tai symboleita voidaan käyttää toimintojen käynnistämiseen. Kuva voi olla linkki toiselle verkkosivulle, kuva voi olla painike, tai symboli voi antaa lisätietoa linkin perässä. Millainen vaihtoehtoinen teksti eli alt-teksti olisi sopiva tällaisessa tilanteessa? Alt-tekstit on tarkoitettu ruudunlukuohjelmien käyttäjille, joten on hyvä ottaa huomioon myös se, mitä muuta mitä muuta tietoa ruudunlukuohjelman käyttäjä saa.

Kuva on linkki, mitä pitäisi tehdä?

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. Olennaista on kertoa, mihin linkki johtaa.

Jos kuva on yksinään linkki ilman mitään selittävää tekstiä, olisi tärkeää käyttää kuvaa, joka on helposti ymmärrettävissä. Verkkosivuilla on esimerkiksi usein mökin kuva esittämässä linkkiä etusivulle. Tällaisessa kuvan alt-tekstinä ei kerrota mitään mökistä, vaan se, mihin kuva johtaa eli etusivulle.

Valokuvia ei yleensä kannata käyttää linkkinä ilman selittävää näkyvää tekstiä. Käyttäjien voi olla vaikea huomata, että kuva on linkki, ja valokuvasta on hankala tietää, mihin se johtaa. Alla oleva valokuva toimii linkkinä Helen Kelleriä käsittelevään Wikipedia-artikkeliin. Jos kuva olisi sisällössä, jossa tekstissä ei mainita Wikipediaa, käyttäjät eivät voisi tietää, mihin linkki johtaa. Niinpä sopiva alt-teksti kuvalle olisi vain ”Helen Keller”, alt-tekstissäkään ei siis mainittaisi Wikipediaa.  

Esimerkki 2: Helen Kellerin kuva linkkinä ilman tekstiä
Kuvalähde: Los Angeles Times, restored by User: Rhododendrites – Los Angeles Times photographic archive, UCLA Library, CC BY 4.0

Jotta kaikkien käyttäjien olisi helppo tietää, mihin kuvalinkki johtaa, on suositeltavaa laittaa kuvalinkin yhteyteen hyvä linkkiteksti ja sijoittaa kuva ja teksti saman linkin sisälle. Tällöin ei kuvalle anneta lainkaan alt-tekstiä, vaan se jätetään tyhjäksi (alt=””). Helen Kellerin kuvan alle siis sijoitetaan teksti ”Wikipedia: Helen Keller”. Tällöin ruudunlukuohjelma ilmoittaa kuvalinkin ja tekstin kohdalla, että kyseessä on linkki ja välittää linkkitekstin. Ruudunlukuohjelma ei kerro, että sisällössä on kuva, koska alt-tekstin on tyhjä.

Wikipedia: Helen Keller

Esimerkki 3: Kuva Helen Kelleristä ja linkkiteksti ovat saman linkin sisällä

Kuvakkeet linkeissä

Linkkitekstien lopussa voidaan käyttää kuvakkeita ilmoittamaan lyhyesti siitä, että linkkiä painamalla avautuu uusi ikkuna tai että linkin kohde sijaitsee toisella sivustolla. Tällaisten kuvakkeiden antama tieto on kerrottava myös ruudunlukuohjelmien käyttäjille.

Alla olevassa esimerkissä on kuvakaappaus Celia.fi-sivustolta, jossa on linkkiteksti Laki Saavutettavuuskirjasto Celiasta. Linkkitekstin lopussa on kuvake, jossa on pienen suorakulmion sisältä osoittaa nuoli ylös oikealle. Kuvakkeen avulla vihjataan, että linkistä avautuu uusi ikkuna. Kuvakkeen vaihtoehtoinen teksti on ”avautuu uuteen ikkunaan”.  

Kuvat painikkeissa

Jos verkkosivulla olevassa painikkeessa (button-elementti) on vain kuva, pitää ruudunlukuohjelman käyttäjille kertoa, mitä kuva tarkoittaa. Esimerkiksi hakupainikkeessa olevan suurennuslasin kuvan alt-teksti voi olla ”Hae”. Ruudunlukuohjelmat kertovat painikkeiden kohdalla käyttäjälle, että kyseessä on painike ja sen perusteella käyttäjä tietää, että painiketta on painettava toiminnon tekemiseksi. 

Lisää ohjeita

Toiminnallisista kuvista ja niiden vaihtoehtoisista teksteistä on lisää tietoa, ohjeita ja esimerkkejä englanninkielisillä sivuilla:

• Functional Images – Web Accessibility Initiative (WAI), W3C
• Alternative Text, Functional images – WebAIM