Jos www-sivulla olevaa kuvaa ei voida näyttää, sen tilalla näytetään tekijän määrittelemä vaihtoehtoinen teksti, alt-teksti (engl. sanasta alternative). Hyvän alt-tekstin määrittely ei ole iso työ, kunhan sivun tekijä tietää mitä tekee. Tähän tekstiin olen kerännyt mielestäni tärkeimmät ohjeet selvällä suomen kielellä.
Ne tilanteet, joissa käyttäjä hyötyy alt-tekstistä, voidaan jakaa karkeasti ottaen kahtia. Toinen tilannejoukko syntyy silloin, kun sisältöä tutkiskellaan pelkästään tekstimuotoisena (esim. puhesyntetisaattorit, tekstiselaimet, hakukoneet). Toinen joukko puolestaan on sellainen graafinen selailu, jossa kuvaa ei ladata ollenkaan jostain syystä (tiedostoa ei löydy, yhteys on katkennut, kuvien lataus on kytketty pois). Näissä tilanteissa alt-tekstin tulisi siis pystyä korvaamaan kuvan viestimä sisältö.
Onko alt-tekstien kyhääminen sitten vaivan arvoista? On, ja niihin kannattaa jopa hieman panostaakin. Vaiva on melko pieni, mutta hyödyt ovat yllättävän suuret. Jos näkövammaisten tai unix-tekstipäätesurffarien tapaisten marginaaliryhmien palveleminen ei kiinnosta, kiinnostaako hakukoneiden hyysääminen? Hyvin kirjoitetut alt-tekstit kasvattavat sitä sanojen joukkoa, jolla sivu löytyy hakukoneesta. Lisäksi on syytä katsoa myös tulevaisuuteen. Kun 400 pikseliä leveä kuva ei mahdu latautumaan pienen kämmenmikron ruudulle, mitä haluat tilalle ilmestyvän? Yleensä sivun tekijän kyhäämä vapaavalintainen teksti on oletusarvoisia virheilmoituksia mielenkiintoisempi.
Eräs näkökulma on tietysti myös sivujen validius eli määrittelynmukaisuus. HTML 4.01 nimittäin vaatii, että vaihtoehtoinen teksti määritellään img- ja area-elementeille. Input- ja applet-elementeille sen voi määritellä halutessaan.
Alt-tekstin tulee tarvittaessa korvata kuvan sisällöllinen merkitys sivulla. Tämä tarkoittaa sitä, että alt-tekstin on oltava itsenäinen - eli se täytyy voida ymmärtää oikein näkemättä kuvaa, johon se liittyy. Alt-tekstin tulisi siis sisältää se viesti, minkä kuva normaalisti välittäisi. On tärkeää huomata, että alt-teksti ei ole kuvan, vaan sen ilmentymän ominaisuus: yhdelle kuvalle ei ole yhtä oikeaa tekstiä, vaan alt-tekstin oikea sisältö riippuu siitä, mikä merkitys kyseisellä kuvalla on juuri siinä kohtaa sivua. Toisin sanoin: alt-tekstin ei tule vastata kysymykseen "mitä kuvassa on?" vaan "mitä kuvasta pitäisi ymmärtää?"
On selvää, että kuva on välineenä erilainen kuin teksti. Joissain asioissa kaiken kuvasta ilmenevän informaation esittäminen tekstinä voi olla varsin kömpelöä. Tällöin on järkevintä typistää alt-tekstiin vain olennainen osa kuvan välittämästä tiedosta ja käyttää tarpeen vaatiessa lisänä esimerkiksi longdesc-attribuuttia ja/tai sopivaa linkkiä tarkempaan kuvaukseen. Usein kuitenkin jo hyvä, ytimekäs alt-teksti välittää käytännössä riittävästi tietoa.
Alt-tekstin sisältöä pohdittaessa tulisi myös pyrkiä sujuvuuteen. Tekstin tulisi järkevästi sopia ympäristöönsä useammallakin tavalla esitettynä: sekä silloin, kun teksti näytetään lataamattoman kuvan kohdalle jääneessä laatikossa että silloin, kun tekstiselain vain tulostaa tekstin kuvan paikalle, vihjaamatta alkuunkaan että tilalla oli aiemmin kuva.
Erityisesti on syytä huomata, että alt ei ole tarkoitettu tooltip-tekstiksi. Useat selaimet joskus IE:n ja Netscapen nelosversioiden aikaan hairahtuivat näyttämään alt-tekstin myös pienessä vihjelaatikossa käyttäjän viedessä kursorin kuvan päälle. Tämä on kuitenkin täysin väärä tapa toimia, koska alt-teksti on nimensäkin mukaisesti vaihtoehto kuvalle. Koska kuvalla ja tekstillä tulisi olla sama merkitys lukijan kannalta, ei ole yleensä ollenkaan järkevää näyttää alt-tekstiä silloin, kun itse kuvakin näkyy!
Valitettavasti uudemmatkin selaimet toistavat samaa virhettä edelleen. Ongelmaan on kuitenkin ratkaisu: HTML 4:ssä määritellään myös title-attribuutti, jolla on mahdollista liittää lähes mihin tahansa elementtiin lisätietoa. Tyypillisesti title-teksti näytetään graafisessa selaimessa nimenomaan tooltip-muodossa; muissa selaimissa esitystapa voi vaihdella. Nykyselaimet tukevat titleä Netscape 4.x -sarjaa lukuunottamatta.
Jos haluat siis tarjota esim. lisätietoja kuvan sisällöstä, älä käytä siihen alt-attribuuttia, vaan titleä. Voit varsin mainiosti käyttää molempia: <img src="kuva.gif" alt="Tähän kuvan merkityksen kertova teksti" title="Tähän haluttua lisätietoa">. Modernit graafiset selaimet näyttävät tooltip-laatikossa ensisijaisesti title-attribuutin sisällön ja alt-tekstin vain, jos titleä ei ole määritelty. Jos mitään varsinaista sanottavaa title-kentässä ei ole, sen voi määritellä tyhjäksi: <img src="kuva.gif" alt="... selitys ..." title="">. Tällöin mitään tooltip-laatikkoa ei näytetä.
Olen kerännyt tähän kappaleeseen tukun konkreettisia esimerkkejä siitä, millaiset alt-tekstit ovat hyviä. Samalla jaan kuvat muutamaan ryhmään niiden merkityksen osalta.
Tähän ryhmään kuuluvat kaikki sellaiset kuvat, joissa ei ole varsinaista sisältöä, vaan jotka ovat sivuston graafisen ulkoasun osia. Tyyppiesimerkkejä ovat läpinäkyvät yhden pikselin gif-kuvat, navigaatiopalkkien linkittömät reunaosat ja muut vastaavat.
Oikea ratkaisu on jättää alt-teksti tyhjäksi. Jos kuva on ainoa erotin kahden muun elementin välillä, on alt-tekstiksi yleensä järkevää laittaa välilyönti tai -entiteetti. Esimerkiksi HTML-pätkä Teksti1<img src="tyhja.gif" width="3" height="1" alt="">Teksti2 voi tuottaa tekstiselaimella esimerkiksi tulostuksen "Teksti1Teksti2" - tässä kohtaa siis esimerkiksi pelkän välilyönnin sisältävä alt-teksti olisi parempi.
Jos kuva toimii linkkien välisenä erottimena, on hyvä käyttää jotain välilyöntiä huomattavampaa erotinta - muuten linkkejä voi olla vaikea erottaa toisistaan. Esimerkiksi alt=" | " tai alt="*" voisi olla perusteltu ratkaisu, hieman tapauksesta riippuen.
Huomaa, että alt="" on eri asia kuin ei alt-määrettä ollenkaan! Esimerkiksi Lynx-tekstiselain näyttää merkinnän "[INLINE]" sellaisten kuvien kohdalla, joihin ei ole merkitty alt-tekstiä. Tämän vuoksi varsin monien yritysten kotisivut alkavatkin mössöllä, johon ei mahdu mitään muuta kuin [INLINE][INLINE][INLINE]...
Sivujen otsikoiden toteuttaminen kuvina on kohtuullisen tavallista lähinnä siksi, että halutaan käyttää sellaisia kirjasimia ja tehosteita, joita ei WWW-ympäristössä voi vaivatta muuten toteuttaa. Tällaisen kuvaotsikon tekstivesrio on luontevastikin itse otsikko: siispä esimerkiksi Artikkelit-sanan sisältävä otsikko luonnistuu tähän tapaan: <img src="ots_artikkelit.gif" width="220" height="40" alt="Artikkelit">.
Otsikoiden kohdalla on tärkeää muistaa, että pelkästään oikeanlainen alt-teksti ei ole vielä kovin hyvä apu ei-graafisten selainten käyttäjille, jos itse otsikko on merkitty väärin. Jos mainittu "Artikkelit" on sivun pääotsikko, oikea merkintätapa olisi <h1><img src="ots_artikkelit.gif" width="220" height="40" alt="Artikkelit"></h1>. Tällöin selain osaa kohdella myös tekstiotsikkoa automaattisesti oikein ja esittää sen sopivalla korostuksella. Ilman otsikkoelementtien (Hx) käyttöä otsikon alt-teksti näyttäisi tai kuulostaisi aivan tavalliselta leipätekstiltä.
Webin tekijöitä on puhuttanut kysymys siitä, miten graafisen selaimen tulisi esittää edellämainittu rakenne silloin kun kuvaa ei saada ladattua. Tulisiko alt-teksti näyttää vain otsikkokuvan kokoisessa tilassa samalla tavalla kuin muidenkin kuvien alt-tekstit, vai pitäisikö tekstiotsikko näyttää sillä tavoin kuin miten vastaavantasoinen otsikko (esim. H1) yleensä näytetään?
Jälkimmäinen ratkaisu on käsitteellisesti lähempänä oikeaa, mutta siinä on ongelmansa: Mitä jos kuvan latautuminen vain kestää, ja hakuyritys epäonnistuu lopullisesti vasta parin minuutin päästä muun sisällön latautumisesta - pitäisikö selaimen taittaa koko sivu uusiksi, koska tekstiotsikko ei todennäköisesti vie täsmälleen samaa tilaa kuin mitä kuvamuotoinen otsikko olisi vienyt? Ratkaisut vaihtelevat. Opera näyttää alt-tekstin kuten otsikonkin (siis aivan kuin merkintä olisi <H1>Artikkelit</H1>), kun taas kuutosversioita vanhemmat Netscapet ja IE:t näyttävät alt-tekstin vain kuvakehyksen sisällä pienellä fontilla riippumatta siitä, mitä HTML-merkintää kuvan ympärillä on. Kehitys tuntuu etenevän kohti Operan viitoittamaa suuntaa.
Hankalammin määriteltävän rajatapauksen muodostavat logot, joiden merkitys sivulla riippuu asettelusta ja muista elementeistä. Selvä tapaus on yrityksen etusivu, jonka yläreunassa on esimerkiksi yrityksen virallinen liikemerkki, jonka alta alkaa suoraan yrityksestä kertova teksti. Tällaisessa tapauksessa yrityksen logo toimii selkeästi otsikkona, jolloin sopiva merkintä voi olla yksinkertaisesti aiemmin esitetyn mallin mukaan vain <h1><img src="firma_logo.gif" width="300" height="40" alt="Oy Firma Ab"></h1>.
Yllä kuvattu logojen käyttö vaatii kuitenkin logoltakin jotain: käytännössä logon käyttäminen otsikkona toimii vain silloin, kun logo on riittävän leveä korkeuteensa nähden. Muulloin joudutaan yleensä turvautumaan muunlaisiin otsikointeihin, joihin tavanomaisesti vieläpä liittyy useita kuvia, pahimmillaan jopa taulukkoasettelussa. Tällöin on perusteltua pohtia, onko logolla mitään roolia. Jos logo on vain koristeena tai luomassa yhtenäistä ilmettä, tyhjä alt-teksti on oikea ratkaisu. Tässä kohtaa usein helpointa on ennen muuta testata sitä, millaisella alt-tekstillä lopputulos vaikuttaa järkevältä.
Tavanomaisimpia navigaatioelementtejä ovat linkkirimat ja erilaiset pienet ikonit ("takaisin", "etusivulle" jne.). Linkkirimoissa käytetään kuvia usein vain sopivan fontin vuoksi. Tällaisille kuville paras alt-teksti on tavallisesti itse navigaatioelementissä oleva teksti, mutta olosuhteet saattavat vaatia muutakin; voi esimerkiksi olla perusteltua harkita ilmaisuja tyyliin alt=" Etusivulle *", jos linkkejä on runsaasti peräkkäin. Näin vältetään linkkitekstien liimautuminen toisiinsa. Huomaa, että pelkkä välilyönti ei yleensä ole riittävä erotin!
Ikonimaiset navigaatioelementit kuten nuolet tarvitsevat tekstiselityksen. Tämä ei yleensä ole ongelma, koska ikoneilla pitäisikin olla selkeä merkitys. Se on helppo muuntaa alt-tekstiksi: esimerkiksi etusivua kuvastava symboli voisi olla alt-tekstiltään pelkästään "Etusivu" tai "Etusivulle", miksei myös esim. "Oy Firma Ab:n etusivulle".
Jos sivuilla on erikseen tekstipohjainen navigaatio (kuviin pohjautuvan navigaation lisäksi), graafisten elementtien alt-teksti kannattaa jättää tyhjäksi. Tällöin sivulle ei turhaan synny kahta identtistä navigaatioelementtiä.
Kuvakarttojen käyttöä kannattaa välttää. Valtaosa kuvakartoilla toteutetuista navigaatioelementeistä on turhaan kuvakarttoja - tyypillisesti joukko irtokuvia ajaisi saman asian. Irtokuviin pohjautuva navigaatio on jossain määrin selkeämpi tyypillisissä tekstiselaimissa, joten sitä kannattaa tavoitella. Jos kuitenkin käyttää kuvakarttaa, on ehdottomasti syytä laittaa jokaiselle area-elementille alt-teksti, joka kuvastaa sitä, mihin linkki johtaa.
Koristekuvia ovat kaikki sellaiset kuvat, joille ei ole varsinaista käyttöä tekstissä tai jotka ovat vain kuvitusta tekstissä käsitellyille asioille. Esimerkiksi tekstiä keventävä hupaisa piirros on koriste, ellei se ole olennainen sisällön ymmärtämisen kannalta.
Koristeiden alt-tekstiksi käy yleensä parhaiten tyhjä (alt=""). Jos koristeella on jokin merkitys, se kannattaa pyrkiä kuitenkin ilmaisemaan jotenkin. Jos esimerkiksi varoituksen sisältävän kappaleen alussa on vaikkapa kuvana toteutettu huutomerkkisymboli, sopiva alt-teksti saattaisi olla esimerkiksi "Varoitus: " tai "Huom! " (huomaa välilyönnit erottimena seuraavaan kappaleeseen).
Erityislaatuinen koriste on vaakaviiva, jota ei toteuteta <hr>-elementillä vaan kuvana. Tällainen voi olla esimerkiksi jokin koristeltu tai monivärinen vaakaviiva, joka sivulle halutaan upottaa. Ehkä yksinkertaisin ja turvallisin tapa tehdä tämä on seuraavanlainen: <p align="center"><img src="viiva.gif" width="400" height="10" alt="-------------"></p>. Ratkaisu ei kuitenkaan ole ongelmaton, sillä vaikka viivojen sarja näyttää kohtuullisen järkevältä, puhesyntetisaattorin lukemana se voi kuulostaa varsin erikoiselta.
Parasta olisi, jos kuvattomana vaihtoehtona olisi <hr>-elementti, mutta se ei onnistu pelkkää alt-menetelmää käyttäen. CSS:llä päästään melko lähelle; viilaamisesta kiinnostuneiden kannattaa tutustua Alan J. Flavellin artikkeliin aiheesta.
Yksinkertaiset tapaukset, kuten esimerkiksi kuvana esitetyt vieraiden kielten merkistöistä otetut merkit, on kohtuullisen helppo hoitaa käyttämällä niiden suomeksi translitteroitua versiota (esim. Kulma <img src="beta.gif" alt="beeta"> on 20 astetta. Ensisijaisesti merkit kannattaa pyrkiä esittämään käyttäen yleisesti toimivia ja yhteensopivia tapoja koodata merkit suoraan dokumenttiin, siis ilman kuvien käyttöä.
Monimutkaisemmat tapaukset kuten ohjelman käyttöliittymästä poimitut pikkuikonit ovat hankalampia tapauksia. Esimerkiksi Wordin "Uusi asiakirja" -painikkeesta otettu kuvakaappaus voi toimia hyvin kuvasymbolina, mutta sen tekstiesitys ei välttämättä ole erityisen intuitiivinen: kuvahan on sivulla yleensä sitä varten, että se helpottaisi käyttäjää löytämään vastaavan graafisen olion itse käyttöliittymästä - tekstiversiosta ei tässä mielessä ole paljonkaan apua!
Alt-tekstissä ei ole syytä lähteä kuvailemaan käytettyä ikonia kuin poikkeustapauksissa. Selitys tyyliin "valkoinen paperiarkki, jonka oikea ylänurkka on taitettu" on kyllä kohtuullisen yksinkertainen, mutta tekee tekstistä helposti kömpelöä. Toisaalta joskus ikonin ulkoasun kuvaus voi jo itse leipätekstissä; tällöin itse kuva voi olla vain täydentävänä tietona ilman alt-tekstiä: Klikkaa uusi asiakirja -ikonia (kuva valkoisesta paperiarkista, jonka oikea ylänurkka on taitettu <img src="ua.gif" width="12" height="12" alt="">). Tällaiset ratkaisut johtavat usein luettavuuden heikkenemiseen, joten kannattaa pyrkiä muotoilemaan asia siten, että vaikeat tilanteet vältetään.
Jos symbolit ovat sivun sisällön ymmärtämisen kannalta erittäin merkityksellisiä, niitä kannattaa kohdella alt-tekstien osalta samalla tavoin kuin ehdottoman tarpeellisia kuvia ja sijoittaa ne taitollisesti leipätekstin ulkopuolelle. Tällainen tilanne voisi olla esimerkiksi silloin, kun autokoulun HTML-muotoisessa oppikirjassa esitellään liikennemerkkejä, joiden kuviin viitataan tekstissä.
Ehkä ongelmallisin ryhmä ovat ns. kuvituskuvat, jotka ovat jossain koristeen ja pakollisen kuvan välimaastossa. Ongelmat juontuvat yleensä kahdesta asiasta: toisaalta siitä, että kuvan tarpeellisuutta on vaikea absoluuttisesti määritellä (ihmisethän voivat etsiä samaltakin sivulta aivan erilaisia asioita!) ja toisaalta siitä, että kuvan sisältöä on usein vaikea tiivistää kovin tehokkaasti.
Kuvituskuva on sellainen kuva, joka viestii jotain tekstiin selkeästi liittyvää asiaa. Usein tämä ilmenee käytännössä siten, että kuva on sijoitettu sivulla siihen liittyvän tekstin läheisyyteen. Osa kuvista on puhtaasti jo tekstissä esitetyn toistoa tai saman asian ilmaisua visuaalisin keinoin.
Esimerkiksi yleisessä ompelumateriaaleja käsittelevässä tekstissä voitaisiin mainita, että "Keinonahkaa on saatavilla useissa väreissä", ja tämän tekstin läheisyyteen voitaisiin sijoittaa kuva, jossa on useita erivärisiä nahkatilkkuja. Koska kuva ei tässä yhteydessä pyri viestimään mitään uutta, tyhjä alt-teksti olisi kelvollinen ratkaisu.
Merkittävämpi rooli kuvalla on esimerkiksi silloin, jos vaikkapa moottoreista kertovassa tekstissä viitataan johonkin erityiseen tekniseen piirteeseen, jota kuva ilmentää selkeästi, mutta jota leipätekstissä ei varsinaisesti käsitellä. Tällöin kuvan alt-tekstiksi tulisi valita jotain sellaista, joka kuvastaa sivun sisällön kannalta olennaisinta kuvan piirrettä; esimerkiksi "Etuvetoisessa autossa moottori on yleensä poikittain auton kulkusuuntaan nähden.".
Jotkut kuvatyypit ovat luonnostaan hyvin hankalia. Ajatellaanpa vaikka käyntikorttisivua, jossa on sivun tekijän oma kuva. Sinänsä ulkonäkö on merkittävä tekijä, ja todennäköisesti joku jopa tulee sivulle varta vasten etsimään sitä - pelkkä tyhjä alt-teksti ei siis ehkä olisi hyvä ratkaisu. Mutta toisaalta tekstikuvaus ihmisen kasvoista on paitsi vaikea kirjoittaa, myös normaalisti melko mielenkiinnoton. Tällaisissa tilanteissa on yleensä viisainta kompromisoida: esimerkiksi "[ valokuva Jounista kesällä 1999 ]" voisi olla sopiva. Vaikka se ei täytäkään tämän tekstin alussa alt-tekstille asetettuja vaatimuksia kovin hyvin, se on kuitenkin usein lukijalle riittävä tieto siitä, kannattaako hänen pyrkiä katsomaan ko. kuvaa mahdollisesti käytössään olevin keinoin. Hakasulkeiden käyttämisestä puhutaan tarkemmin vielä ongelmista kertovassa luvussa.
Erityisesti kuvituskuvien kohdalla korostuu kuvan ilmentymän merkityksen pohtiminen. Esimerkiksi avaruudesta kuvattua maapalloa esittävä kuva voi olla hyvinkin erilaisissa rooleissa. Pelkkänä koristeena oikea ratkaisu olisi tyhjä alt-teksti. Ilmakehän rakennetta käsittelevässä tekstissä kuvan alt-teksti voisi kertoa esimerkiksi cumulus-pilvistä, kun taas satelliittikuvausta käsittelevällä sivulla sopiva alt-teksti voisi viitata esimerkiksi kuvan ottaneen satelliitin linssin epätarkkuuden aiheuttamiin vääristymiin.
Jossain kohtaa tulee vastaan se piste, jossa tietoa ei voida enää esittää järkevästi muutoin kuin kuvana. Esimerkiksi Lontoon metroverkostoa kuvaavan kartan tai laajan ja yksityiskohtaisen pohjapiirustuksen esittäminen tekstikuvauksena on tyypillisesti turhaa vaivannäköä, erityisesti kun pitkien alt-tekstien esittämiseen liittyy omat ongelmansa. Joskus myös tekniikka voi asettaa rajoituksensa: esimerkiksi hyvin monimutkaisten matemaattisten lausekkeiden esittäminen tällä hetkellä käytössä olevalla tekniikalla on niin vaikeaa, että käytännössä vaikeimmat tapaukset on pakko muotoilla kuviksi.
Jos olet varma siitä, että kuvasi ovat ehdottoman välttämättömiä asian ymmärtämisen kannalta, kerro se lukijalle selkeästi. Ei ole alkuunkaan huono idea kertoa tätä muuallakin kuin alt-tekstissä: vaikka jo sivun alussa. Jos päädyt tällaiseen tilanteeseen, pyri sijoittamaan kuvat leipätekstin ulkopuolelle ja käytä alt-tekstinä jotain sellaista, joka sopii tilanteeseen ja ilmaisee kuvan tarpeellisuuden - mielellään mahdollisimman lyhyesti. Alt-teksti voi olla informatiivinen, vaikka se ei varsinaisesti kertoisikaan kuvan viestiä; siinä voi olla mukana tietoa siitä, kannattaako kuvaa ladata. Esimerkiksi "[ Kaupungintalon pohjapiirustus ]" on esimerkki tällaisesta tapauksesta.
Alt-tekstien ilmaisuvoimaa rajoittaa se, että pitkät tekstit tuottavat helposti ongelmia graafisissa selaimissa. Osa selaimista näyttää alt-tekstit aina yhtenä rivinä, mikä voi johtaa mm. pitkien alt-tekstien loppuosien häviämiseen kokonaan. Toisaalta eräs IE:n bugi aiheuttaa sen, että HTML-lähdekoodiin kirjoitetun rivinvaihdon avulla tekstiä voidaan jakaa (IE:ssä) useille riveille, ja sekä Opera että Mozilla osaavat rivittää myös alt-tekstit oikein. Näin ongelmaksi jäävät oikeastaan vain vanhemmat Netscapet. Mikäli pitkät alt-tekstit tuottavat ongelmia, käytännön vinkkejä toimivasta toteutuksesta löydät Jukka Korpelan aihetta käsittelevästä artikkelista, jossa kuvaillaan myös yksityiskohtaisemmin selainten toimintatapoja.
Siinä missä graafiset selaimet takkuilevat hieman alt-tekstien näyttämisen kanssa, tekstiselaimet (yleisimmin Lynx) selviytyvät varsin mallikkaasti. Alt-tekstejä muotoillessa on kuitenkin syytä huomata, että Lynx sijoittaa alt-tekstit kuvan paikalle muun tekstin joukkoon, mistä seuraa se, että esimerkiksi kappaleen alkuun sijoitetun kuvan alt-teksti luetaan kuin se olisi kappaleen ensimmäinen virke. Tämän seurauksena on syytä muotoilla alt-tekstit siten, että ne kuulostavat järkeviltä virkkeiltä.
Jos alt-tekstin muotoilu virkkeeksi ei onnistu tai johtaa järjettömän pitkiin teksteihin (ks. aiempia esimerkkejä joistain kuvituskuvista ja pakollisista kuvista), kannattaa tyytyä mainitsemaan kuvan sisältö parilla sanalla ja laittamaan alt-teksti hakasulkeisiin: monimutkaisen matemaattisen kaavan korvike voisi siis olla vaikkapa alt="[ Heikniemen neljäs perusyhtälö ]" ja niin edelleen.
Graafisten selainten tapaan esittää alt-tekstit liittyy vielä eräs harmillinen ongelma. Jos kuvan leveys ja korkeus on määritelty width ja height-attribuuteilla, useat graafiset selaimet pakottavat kuvalaatikon tähän kokoon silloinkin, kun itse kuvaa ei ladata. Tästä seuraa se, että pitkä alt-teksti ei välttämättä mahdu kuvalle varattuun tilaan. Jos koon määrittelyn jättää pois, selaimet kyllä skaalaavat kuvalaatikon alt-tekstin tilantarpeen mukaan.
Kannattaa harkita, onko width- ja height-määreiden merkitys suurempi kuin alt-tekstien näkyvyyden. Valtaosa ihmisistä surffaa kuvat päällä, ja toisaalta koon määrittely html-lähdekoodissa kiistatta nopeuttaa sivun asettelua. Näin ollen on usein perusteltua sekin, että kuvan koko määriteltäisiin alt-ongelmista huolimatta. Toisaalta varsinkin hyvin pienissä kuvissa kokomäärittelyn vaikutus on pieni ja toisaalta alt-tekstin leikkautumisen haittavaikutus potentiaalisesti pahin (koska pienen kuvan tilaan mahtuu vain hyvin vähän alt-tekstiä). Näinpä kokomääreiden hyötyä tuleekin arvioida kuva kerrallaan.
Kun olet kirjoittanut mielestäsi hyvä alt-tekstit, on syytä testata lopputulosta. Aseta selaimestasi kuvien lataus pois päältä ja kokeile sivuja. Näyttääkö kokonaisuus järkevältä? Ovatko kaikki alt-tekstit luettavissa ja sopivatko ne ympäristöönsä? Osaisitko sinä navigoida sivustollasi ilman kuvia? Kiinnitä huomiota erityisesti sivulta toiselle siirtymisen loogisuuteen. Jos mahdollista, pyydä jotain muutakin testaamaan; kyllähän sinä itse tiedät, missä kohtaa sen etusivulinkin pitäisi olla, mutta tietäisikö joku muu - ja pelkän alt-tekstin perusteella? Testaa erityisesti pitkiä alt-tekstejä myös useammalla selaimella, jotta mahdolliset selainbugeihin liittyvät ongelmat selviävät.
Vielä rautaisempi testi on tekstiselaimen käyttö. Esim. pikainen Lynx-testi kertoo enemmän kuin tuhat sanaa, sillä sen lisäksi että kuvia ei ladata, Lynx myös muuntaa kaksiulotteisen taiton (mm. palstat) yksiulotteiseksi. Saako sivusta mitään tolkkua Lynxillä? Tutki navigaation toimivuutta ja loogisuutta: tulevatko navigaatioelementit esiin järkevästi, vai saavatko ne liikaa (tai liian vähän) huomiota? Muodostavatko kappaleisiin liittyvien kuvien alt-tekstit yhtenäisiä ja järkeviä kokonaisuuksia itse leipätekstin kanssa? Erinomainen käytännön testausmenetelmä on pyytää jotain kaveria kuuntelemaan, kun luet hänelle sivun ääneen. Jos hän ymmärtää sivun sisällön ja mieltää rakenteen kohtuullisen hyvin (löytää navigaation ym.), olet todennäköisesti onnistunut melko hyvin.
Jouni Heikniemi
31.1.2002
Tämä dokumentti kuuluu sivujeni osioon
Kirjalliset tuotokset / Tietotekniikka.