Vieraskynä: Kuvien ALT-tekstit

Tässä tekstissä käydään läpi, mikä on ALT-teksti ja mihin sitä tarvitaan. Toisaalta pohditaan myös sitä voiko niistä olla jopa jossain tilanteessa haittaa saavutettavuuden kannalta. Lopuksi annetaan vielä vinkkejä ALT-tekstien laatimiseen.

Mihin ALT-tekstejä tarvitaan?

ALT-tekstit eli alternative text tarkoittaa nimensä mukaisesti vaihtoehtoista tekstiä. Se ei ole oletuksena kuvan yhteydessä näkyvä kuvateksti tai kuvan otsikko, eikä se ole tarkoitettukaan näkymään kaikille käyttäjille.

Yleisesti ajatellaan, että saavutettavuuden kannalta olisi tärkeää, että jokaisella kuvalla olisi oma ALT-teksti. Myös saavutettavuusdirektiivi edellyttää, että kaikelle ei-tekstimuotoiselle verkkosisällölle tarjotaan tekstivastineet. Esimerkiksi ruudunlukuohjelmat lukevat tavallisesti tekstivastineen henkilölle, joka käyttää sivustoa sellaisen avulla.

ALT-teksteistä voi olla hyötyä saavutettavuuden lisäksi myös hakukoneoptimoinnin kannalta. Hakukoneet, kuten Google, löytää kuvien vaihtoehtoiset teksti. Usein noihin teksteihin saadaan sisällytettyä esimerkiksi keskeisimpiä hakusanoja, mikä voi nostaa verkkosivun sijoitusta hakutuloksissa tai saada näkyvyyttä myös kuvahaun tuloksiin. Vaihtoehtoisista teksteistä voi olla hyötyä myös tilanteissa, joissa käyttäjän selain ei syystä tai toisesta lataa kuvaa, silloin käyttäjä näkee vaihtoehtoisen tekstin.

Hyödyttääkö ALT-tekstit aina saavutettavuutta?

ALT-tekstejä täytyy aina harkita tapauskohtaisesti, koska joissain tilanteissa niistä voi olla jopa haittaa saavutettavuuden kannalta. Esimerkiksi tilanteessa, jossa kaikilla sivuston kuvilla on ALT-teksti ja kuvia on todella paljon, voi sen lukeminen ruudunlukuohjelmalla mennä todella raskaaksi.

On myös hyödytöntä tehdä tarpeetonta toistoa erilaisten kuvakkeiden, kuten sosiaalisen median ikoneiden osalta. Tuo tuskin mitään lisäarvoa, että ruudunlukija toistaa jokaisen sosiaalisen median kanavan nimeä useampaan kertaan.

Tarvitseeko ALT-teksti määrittää jokaiselle kuvalle?

Aina ei ole tarpeen määrittää kuville ALT-tekstiä. Sitä ei tarvita esimerkiksi silloin, jos kyseessä on puhtaasti koristekuva tai muuten täysin merkityksetön kuva muun sisällön kannalta. Jos tekstivastike olisi täysin sama kuin esimerkiksi kuvateksti, silloin on yleensä perusteltua jättää se kirjoittamatta.

Jos ALT-tekstin haluaa jättää tyhjäksi, se on tärkeää tehdä oikein. Muussa tapauksessa osa ruudunlukuohjelmista lukee kuvan tiedostonimen vaihtoehtoisen tekstin puuttuessa. ALT-tekstin voi jättää tyhjäksi merkinnällä: alt=””

Koriste- tai kuvituskuvat

Kuvituskuvia saatetaan käyttää elävöittämään sisältöä ja toisaalta kiinnittämään lukijan huomion. Jos kyseessä on tekstin kannalta täysin merkityksetön kuva tai puhtaasti koristekuva, voi tekstivastikkeen pois jättäminen olla perusteltua.

Erilaisia koristekuvia suositellaan lisäämään mahdollisuuksien mukaan suoraan taustaan. Tällaisia voisivat olla erityisesti esimerkiksi erilaiset tekstiä jaksottavat kuvaelementit tai erilaiset ikonit.

W3C Web Accessibility initiative on koonnut sivustolleen hyviä käytäntöjä koskien koristekuvien ALT-tekstejä.

Taulukot ja listat

Erilaiset taulukon tai listan sisältävät kuvat voivat olla myös haastavia tekstivastikkeiden kannalta, ja siksi ne kannattaakin ensisijaisesti toteuttaa suoraan HTML-taulukkona tai -listana. Ruudunlukuohjelmat osaavat lukea suoraan HTML-taulukoita.

Infografiikat

Paljon tekstiä sisältävät infografiikat ovat myös haastavia ALT-tekstien kannalta, sillä niiden teksteistä tulee helposti todella pitkiä. Kannattaakin aina ensimmäisenä tarkistaa löytyvätkö keskeiset sisällöt jo muusta tekstistä. Mikäli löytyvät, voi ALT-tekstissä mainita vain infografiikan aiheen ja sen, että sisältö löytyy tekstinä sivulta. Jos sisältö ei löydy muusta tekstistä, täytyy se kirjoittaa mahdollisimman napakasti tekstivastikkeeseen.

Kuvat, jotka sisältävät linkin

Linkkinä toimivat kuvat tarvitsevat yleensä tekstivastikkeen, sillä jos linkin sisältävälle kuvalle ei ole lisätty ALT-tekstiä, lukee ruudunlukuohjelma yleensä linkin osoitteen kirjain kerrallaan. Hyvä tekstivastike tällaiselle kuvalle voisi olla esimerkiksi lisätietoja aiheesta x. Sanaa linkki ei ole tarpeen kirjoittaa erikseen, koska ruudunlukuohjelmat tunnistavat myös linkit.

Millainen on hyvä ALT-teksti?

Hyvä ALT-teksti tarjoaa mahdollisimman tarkkaa tietoa kuvasta, mutta ei toista sivuston muuta sisältöä kuten kuvatekstiä. Vaihtoehtoisen tekstin tulisi myös liittyä muuhun sisältöön, eli se ei voi olla täysin irrallinen muusta sisällöstä.

Mieti, onko kuvan sisältöä kerrottu jo ympäröivässä tekstissä ja mitä jää kertomatta, jos kuvaa ei näe. Näiden pohjalta on hyvä lähteä kirjoittamaan tekstivastinetta kuvalle.

Huomioi kontekstin ja ympäröivän tekstin

ALT-tekstiä laatiessa tulisi huomioidaan, mikä kuvan tarkoitus kyseisessä kontekstissa on. Samalla kuvalla voi olla eri yhteyksissä hieman erilaisia tekstivastikkeita, joten kannattaakin pohtia, mikä kuvassa on merkittävää juuri kyseisessä kontekstissa. Onko se esimerkiksi kuvassa olevat henkilöt vai ennemmin se, mitä kuvan henkilöt tekevät?

Tekstivastikkeen tyyli tulisi olla myös mahdollisimman lähellä muun tekstin tyyliä. Kannattaakin käyttää sellaista sanastoa, joka sopii muuhun tekstiin.

Selkeä kieli ja lyhyet lauseet

Tekstivastike tulisi kirjoittaa mahdollisimman napakasti ja selkeästi. Siinä kannattaa käyttää lyhyitä lauseita ja mahdollisuuksien mukaan sanojen perusmuotoja. Kielen ei kuitenkaan kannata olla tökeröä, vaan se täytyy aina kirjoittaa ihmistä ajatellen. Tekstissä tulisi käyttää aina myös oikeaa kirjoitusasua välimerkkeineen.

Älä kirjoita ALT-tekstiin sanoja kuvassa tai linkkiä, vaikka kyseessä olisikin linkki. Erilaiset ruudunlukuohjelmat tunnistavat niin kuvat kuin linkitkin ja kertovat niistä ohjelman käyttäjälle. Jos tekstivastine alkaa vielä sanalla kuvassa, tulee siitä vain turhaa toistoa.

Neutraali kuvaus

Vältä tulkintaa ja pyri kirjoittamaan kuvasta mahdollisimman neutraali kuvaus, etenkin, jos kyseessä on jonkun muun valitsema kuva. Kuvan konteksti kannattaa tietenkin huomioida ja mahdollisuuksien mukaan myös sanoma, mitä kuvalla halutaan juuri kyseisessä kohdassa välittää.

Jackrussellinterrieri leikkii nurmikolla tennispallon kanssa.

Katsotaan, millainen ALT-teksti yllä olevalle kuvalle sopisi:

Välttävä: alt=”Koira”

Parempi: alt=”Koira leikkii nurmikolla.”

Paras: alt=”Jackrussellinterrieri leikkii nurmikolla tennispallon kanssa.”

 

Viisi pikavinkkiä ALT-tekstin laatimiseen

  1. Mieti, mitä tietoa jää saamatta ilman kuvaa ja kirjoita se ALT-tekstiin.
  2. Älä toista sisältöä, joka löytyy jo jossain muodossa sivustolta.
  3. Suosi lyhyitä virkkeitä ja selkeää kieltä.
  4. Käytä oikeaa kirjoitusasua.
  5. Kirjoita mahdollisimman neutraali kuvaus.

 

Juuso KatajaKirjoittaja Juuso Kataja on Zoner Oy:n markkinointipäällikkö. Zoner on kotimainen hostingpalveluita tarjoava yritys, jonka kautta saa verkkotunnuksia, WordPress-optimoituja palvelimia, webhotelleja ja sähköposteja.

Haluatko oman tekstisi julki saavutettava.fi:ssä? Laita meille sähköpostia osoitteeseen saavutettava@saavutettava.fi ja kerro mistä haluaisit kirjoittaa.