Tekstivastine Css:n avulla

Sivustolla www.omat.fi/ruusu/ruusu.php on käytetty tekstivastinetta, jolla kerrotaan mitä kuvassa näkyy. Tämä tekstivastine on piilotettu silmillä näyttöä katsottaessa, mutta ruudunlukuohjelma pystyy sen lukemaan.

Css tyylitiedosto tekee sen, että tätä tapaa voidaan käyttää erilaisissa sivustoilla ja palveluissa, koska se vaikuttaa vain tyylitiedostossa.

Ruusun taival kuvien tekstivastine

<div id="kuvantulkkaa">
<p class="kuvantulkkaa2">
Ruusun taival sisältää kolme pystysuuntaista taulua, jotka muodostavat vaakarivin. Jokaisen taulun koko on 37 x 60 cm. Tauluissa vaihtelevat mustan ja tummanpunaisen eri sävyt.

Kuvat ovat kokonaisuus, jonka jokainen katsoja näkee omalla tavallaan. Yhdessä ne kuitenkin muodostavat kokonaisuuden, jota on hyvä katsoa rauhassa. Jokaisella katsomiskerralla niistä voi löytyä uusia yksityiskohtia ja ajatuksia.

Uloimmat kuvat ovat toistensa vastakohtia, jossa ensimmäisen (vasemmanpuoleisimman) kuvan silmä katsoo vasemmalle ja kolmannen (oikeanpuoleisimman) kuvan silmä katsoo oikealle ...
</p>
</div>

Ja tyylitiedostossa on

#kuvantulkkaa {
text-indent: -2000em; /* siirtää alueen näyttöruudun ulkopuolelle */
height: 1px; /* alueen koko*/
width: 1px;
}

p.kuvantulkkaa2 {
text-indent: -2000em;
font-size: 1%; /* fontin koko, kun normaalikoko on 100%*/
color: #000; /* fontin vari on sama kuin taustan väri*/
}