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

Jos verk­ko­si­vuil­la tai do­ku­men­teis­sa käy­te­tään ku­via tai graa­fi­sia ele­ment­te­jä, niil­le on an­net­ta­va vaih­toeh­toi­nen teks­ti­vas­ti­ne.

Teks­ti­vas­ti­ne ker­too nä­kö­vam­mai­sil­le ruu­dun­lu­kuoh­jel­man käyt­tä­jil­le, mitä ku­vas­sa on. Teks­ti­vas­ti­nei­den li­sää­mi­nen pa­ran­taa myös ha­ku­ko­neop­ti­moin­tia.

Ta­val­li­ses­ti teks­ti­vas­ti­neen tu­li­si ker­toa ly­hyes­ti, mitä ku­vas­sa nä­kyy tai mitä kuva esit­tää. Teks­ti­vas­ti­neen pi­tuu­den tu­li­si olla alle 125 merk­kiä.

Teks­ti­vas­ti­ne ja ku­va­teks­ti ovat kak­si eri asi­aa eikä nii­tä tule se­koit­taa kes­ke­nään.

Mer­kit­se teks­ti­vas­ti­ne HTML-si­vuil­le ku­viin käyt­täen alt-att­ri­buut­tia ja an­ta­mal­la sil­le ar­vok­si ku­van teks­ti­vas­ti­ne.

Koo­die­si­merk­ki: alt=”Teks­ti­vas­ti­ne tu­lee tä­hän”

Teks­ti­vas­ti­neen si­säl­tö riip­puu pit­käl­ti sii­tä, min­kä tyyp­pi­nen kuva on ky­sees­sä. Mie­ti siis tark­kaan, mitä ku­vas­sa nä­kyy ja mikä ku­van tar­koi­tus si­vuil­la on.

Onko ky­sees­sä in­for­ma­tii­vi­nen kuva? Onko ky­sees­sä ku­vaa­ja? Onko ku­van tar­koi­tus vä­lit­tää tun­nel­maa tai tun­tei­ta? Onko kuva puh­taas­ti de­ko­ra­tii­vi­nen? Onko kuva myös link­ki jo­hon­kin toi­seen si­vuun? Onko ku­vas­sa kir­joi­tet­tua teks­tiä?

In­for­ma­tii­vi­set ku­vat

In­for­ma­tii­vis­ten ku­vien teks­ti­vas­ti­nees­sa on tär­ke­ää ker­toa käyt­tä­jäl­le ly­hyes­ti, mitä ku­vas­sa nä­kyy. Toi­si­naan voi­daan an­taa muu­ta­kin tie­toa ku­vas­ta, ku­ten ker­toa, onko ky­sees­sä va­lo­ku­va, maa­laus tai jo­kin muu.

Ku­vaa­jat

Suu­rem­mat tie­to­mää­rät hah­mot­tu­vat käyt­tä­jäl­le usein hel­pom­min, jos ne on esi­tet­ty ku­vaa­ji­na.

Ku­vaa­jan teks­ti­vas­ti­nee­seen ei kan­na­ta yrit­tää kir­ja­ta kaik­kea ku­vaa­jas­sa nä­ky­vää in­for­maa­tio­ta. Tär­kein­tä on ker­toa käyt­tä­jäl­le, että ky­sees­sä on ku­vaa­ja, ja ker­toa sa­mal­la, mitä ku­vaa­jas­sa esi­te­tään.

Esi­merk­ki ku­vaa­jan teks­ti­vas­ti­nees­ta: ”Vii­va­dia­gram­mi, jos­sa on esi­tet­ty Suo­men vä­ki­lu­ku vuo­des­ta 1950 vuo­teen 2015”.

Ku­vaa­jas­sa esi­tet­ty tie­toai­nes kan­nat­taa kir­joit­taa lei­pä­teks­tiin.

De­ko­ra­tii­vi­set ku­vat

Verk­ko­si­vuil­la käy­te­tään usein myös puh­taas­ti de­ko­ra­tii­vi­sia ku­via, joil­la ei ole tie­don­vä­li­tyk­sel­lis­tä tar­koi­tus­ta. Ne saat­ta­vat olla esi­mer­kik­si vain yk­sit­täi­siä vii­vo­ja, joi­den tar­koi­tus on teh­dä si­vun ul­koa­sus­ta ja ra­ken­tees­ta sel­keäm­pi tai näyt­tä­väm­pi.

De­ko­ra­tii­vi­siin ku­viin ei si­säl­ly­te­tä teks­ti­vas­ti­net­ta, kos­ka ne ei­vät ole si­vus­ton saa­vu­tet­ta­vuu­den kan­nal­ta mer­ki­tyk­sel­li­siä nä­kö­vam­mai­sil­le ruu­dun­lu­kuoh­jel­mien käyt­tä­jil­le.

Koo­die­si­merk­ki: alt=”” //

De­ko­ra­tii­vi­sis­sa ku­vis­sa tu­lee käyt­tää alt-att­ri­buut­tia ja jät­tää sen arvo tyh­jäk­si.

Ku­vat, jot­ka ovat myös link­ke­jä

Jos kuva on myös link­ki jo­hon­kin toi­seen si­vuun, teks­ti­vas­ti­neen tar­joa­mi­nen on erit­täin tär­ke­ää.

Kun kuva toi­mii link­ki­nä, älä ker­ro käyt­tä­jäl­le, mitä ku­vas­sa nä­kyy, vaan kir­joi­ta teks­ti­vas­ti­nee­seen, mil­le si­vul­le link­ki vie.

Teks­tu­aa­li­nen in­for­maa­tio

Ku­via ei kan­na­ta käyt­tää vä­lit­tä­mään teks­tu­aa­lis­ta in­for­maa­tio­ta.

Jos teks­tu­aa­lis­ta in­for­maa­tio­ta si­säl­tä­viä ku­via kui­ten­kin käy­te­tään, on muis­tet­ta­va kir­ja­ta myös teks­ti­vas­ti­nee­seen, mitä ku­vas­sa lu­kee.

Jos verk­ko­si­vu­jen teks­tis­tä ha­lu­taan näyt­tä­vän nä­köis­tä, muo­toi­lu kan­nat­taa teh­dä hyö­dyn­tä­mäl­lä mui­ta kei­no­ja kuin ku­via – ta­val­li­ses­ti CSS-tyy­li­tie­dos­to­ja.

Sil­loin teks­tiä on help­po suu­ren­taa tar­vit­taes­sa, se on ko­neel­li­ses­ti luet­ta­vis­sa (esi­mer­kik­si ruu­dun­lu­kuoh­jel­mal­la tai kään­nös­oh­jel­mal­la) ja se la­tau­tuu no­peas­ti.