Toiminnallisten kuvien alt-tekstit

Tietokoneen näytöllä on tekstiä ja keskellä iso kuva, jossa on kysymysmerkki.

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.

Kuvake, jossa on mustalla taustalla valkoinen mökki.
Esimerkki 1: Celianet.fi-sivustolla käytetty kuva, jonka vaihtoehtoisena tekstinä sivustolla on ”Celianetin 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 kuva on samalla linkki Helen Kelleriä käsittelevään Wikipedia-artikkeliin. Jos kuvan ympärillä ei ole tekstissä nostettu esille Wikipediaa, käyttäjät eivät voi nähdä, mihin linkki johtaa. Niinpä sopiva alt-teksti kuvalla olisi vain ”Helen Keller”, alt-tekstissäkään ei siis ole syytä mainita Wikipediaa.  

Helen Keller.

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=””). 


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”.  

Kuvakaappaus on selostettu edellä.
Esimerkki 4: Kuva linkkitekstin lopussa olevasta kuvakkeesta

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:

Viimeisimmät kirjoitukset

Tietokoneen näytöllä on tekstiä ja keskellä iso kuva, jossa on kysymysmerkki.

Yleinen | 09.01.2024

Toiminnallisten kuvien alt-tekstit

Kaksi hymyilevää aikuista istuu vierekkäin skeittipuistossa. Toisella on kädessään kännykkä, jota he katsovat ja kuuntelevat jakamalla vihreät nappikuulokkeet.

Yleinen | 14.02.2023

Keski-ikäinen valkoihoinen ylipainoinen nainen nauramassa salaatille – miksi ihmisten kuvaileminen vaihtoehtoisissa teksteissä on niin vaikeaa? 

Pieni tonttufiguuri hiihtämässä pipo silmillään.

Yleinen | 01.12.2022

Joulukalenteri: 24 luukkua saavutettavista julkaisuista