Lisää tekstivastineet kaikelle ei-tekstuaaliselle sisällölle

Jos verkkosivuilla tai dokumenteissa käytetään kuvia tai graafisia elementtejä, niille on annettava vaihtoehtoinen tekstivastine.

Tekstivastine kertoo näkövammaisille ruudunlukuohjelman käyttäjille, mitä kuvassa on. Tekstivastineiden lisääminen parantaa myös hakukoneoptimointia.

Tavallisesti tekstivastineen tulisi kertoa lyhyesti, mitä kuvassa näkyy tai mitä kuva esittää. Tekstivastineen pituuden tulisi olla alle 125 merkkiä.

Tekstivastine ja kuvateksti ovat kaksi eri asiaa eikä niitä tule sekoittaa keskenään.

Merkitse tekstivastine HTML-sivuille kuviin käyttäen alt-attribuuttia ja antamalla sille arvoksi kuvan tekstivastine.

Koodiesimerkki:

alt="Tekstivastine tulee tähän"

Tekstivastineen sisältö riippuu pitkälti siitä, minkä tyyppinen kuva on kyseessä. Mieti siis tarkkaan, mitä kuvassa näkyy ja mikä kuvan tarkoitus sivuilla on.

Onko kyseessä informatiivinen kuva? Onko kyseessä kuvaaja? Onko kuvan tarkoitus välittää tunnelmaa tai tunteita? Onko kuva puhtaasti dekoratiivinen? Onko kuva myös linkki johonkin toiseen sivuun? Onko kuvassa kirjoitettua tekstiä?

Informatiiviset kuvat

Informatiivisten kuvien tekstivastineessa on tärkeää kertoa käyttäjälle lyhyesti, mitä kuvassa näkyy. Toisinaan voidaan antaa muutakin tietoa kuvasta, kuten kertoa, onko kyseessä valokuva, maalaus tai jokin muu.

Kuvaajat

Suuremmat tietomäärät hahmottuvat käyttäjälle usein helpommin, jos ne on esitetty kuvaajina.

Kuvaajan tekstivastineeseen ei kannata yrittää kirjata kaikkea kuvaajassa näkyvää informaatiota. Tärkeintä on kertoa käyttäjälle, että kyseessä on kuvaaja ja kertoa samalla, mitä kuvaajassa esitetään.

Esimerkki kuvaajan tekstivastineesta: "Viivadiagrammi, jossa on esitetty Suomen väkiluku vuodesta 1950 vuoteen 2015."

Kuvaajassa esitetty tietoaines kannattaa kirjoittaa leipätekstiin.

Dekoratiiviset kuvat

Verkkosivuilla käytetään usein myös puhtaasti dekoratiivisia kuvia, joilla ei ole tiedonvälityksellistä tarkoitusta. Ne saattavat olla esimerkiksi vain yksittäisiä viivoja, joiden tarkoitus on tehdä sivun ulkoasusta ja rakenteesta selkeämpi tai näyttävämpi.

Dekoratiivisiin kuviin ei sisällytetä tekstivastinetta, koska ne eivät ole sivuston saavutettavuuden kannalta merkityksellisiä näkövammaisille ruudunlukuohjelmien käyttäjille.

Koodiesimerkki:

alt="" //

Dekoratiivisissa kuvissa tulee käyttää alt-attribuuttia ja jättää sen arvo tyhjäksi.

Kuvat, jotka ovat myös linkkejä

Jos kuva on myös linkki johonkin toiseen sivuun, tekstivastineen tarjoaminen on erittäin tärkeää.

Kun kuva toimii linkkinä, älä kerro käyttäjälle, mitä kuvassa näkyy, vaan kirjoita tekstivastineeseen, mille sivulle linkki vie.

Tekstuaalinen informaatio

Kuvia ei kannata käyttää välittämään tekstuaalista informaatiota.

Jos tekstuaalista informaatiota sisältäviä kuvia kuitenkin käytetään, on muistettava kirjata myös tekstivastineeseen, mitä kuvassa lukee.

Jos verkkosivujen tekstistä halutaan näyttävän näköistä, muotoilu kannattaa tehdä hyödyntämällä muita keinoja kuin kuvia – tavallisesti CSS-tyylitiedostoja.

Silloin tekstiä on helppo suurentaa tarvittaessa, se on koneellisesti luettavissa (esimerkiksi ruudunlukuohjelmalla tai käännösohjelmalla) ja se latautuu nopeasti.