Karl Ove Hufthammer

Alternativ tekst i XHTML

Når du har laga eit dokument som skal leggast ut på veven, vil du nok at dette skal vera tilgjengelig for flest mulig. Heldigvis er XHTML utvikla for å gjera nettopp dette mulig. Faktisk kan sidene dine vera tilgjengelige for alle, sjølv for blinde!

Du trur kanskje at sidene må vera kjedelige, grå og utan grafikk for at alle skal kunna bruka dei, men slik er det ikkje – tvert imot! Grafikk og fargar er med på å gjera sidene meir lettforståelige og lettleste.

Umulig for blinde?

Det er nok nærliggande å tru at grafikk vil gjera det umulig for brukarar av alternative nettlesarar – for eksempel nettlesarar basert på talesyntese (opplesing av tekst) – å få med seg innhaldet på nettsidene. Heldigvis finst det òg ei løysing på dette; XHTML-standarden har nemlig inkludert eit attributt som gjer det mulig å spesifisera alternativ tekst for bilde.

Den alternativ teksten skal (til img-elementet) spesifiserer me slik:

<img src="bilde.png" width="128" height="128" alt="Alternativ tekst" />

Me kan bruka alt-attributtet på følgjande element: img, area, applet og input. Me skal i denne artikkelen berre sjå på alternativ tekst på img-elementet, altso på bilde.

Obligatorisk i XHTML

Bruk av alt-attributtet er obligatorisk på img– og area-elementet i XHTML 1.1 og tidligare versjonar. Det skal brukast til å angje ein alternativ tekst på ulike element. Når dette blir brukt på eit bilde (img-elementet), tyder ikkje «alternativ tekst» nødvendigvis ei beskriving av bildet. Det skal brukast i staden for bildet, når dette – av ein eller annan grunn – ikkje kan visast.

Korfor bruka alternativ tekst?

Den viktigaste grunnen til å spesifisera alternativ tekst er for å gjera innhaldet meir tilgjengelig. Du vil vel at flest mulig skal kunna lesa sidene dine?

Her følgjer ei liste over folk som treng alternativ tekst:

Folk som har skrudd av vising av bilde
Nokre menneske skrur av vising av bilde i nettlesarane sine. Dei som gjer dette gjer det oftast dette for å spara tid (og dermed tellerskritt!), ved å ikkje lasta ned reklame og triviell «pynt».
Brukarar av tekstbaserte nettlesarar
Det er fleire grunnar til at folk bruker tekstbaserte nettlesarar (for eksempel Lynx). Ein grunn kan vera at dei berre har tilgang til desse, men mange bruker dei òg fordi dei er mykje raskare enn større grafiske nettlesarar, både til å visa dokument og lasta dei ned – sidan grafikken ikkje blir lasta ned. I den siste tida har det blitt meir vanlig med nettlesarar på mindre maskiner, for eksempel mobiltelefonar eller lomme-PC-ar.
Blinde
Blinde kan sjølvsagt ikkje sjå bilda. Det finnes likevel blinde som bruker både datamaskiner og Internett. Dei bruker då oftast talesynteseprogram eller leselist (blindeskriftmaskin) for å lese sidene, eventuelt med hjelp av sjåande. For blinde vil derfor alternativ tekst vera til uvurderlig hjelp.
Søkemotorar
For at folk skal finna sidene dine er det veldig viktig at dei er registrerte i søkemotorar. Desse er òg «blinde» og kan ikkje sjå bilde. Men bilde inneheld ofte viktig informasjon og nøkkelord. For eksempel inneheld logoen til eit firma firmanamnet. Viss du har alternativ tekst på bilda vil desse kunne indekserast, noko som kan hjelpa sidene dine høgare opp i søkeresultatlistene.

Korleis ikkje bruka alternativ tekst

Her følgjer nokre eksempel på feilaktig bruk av alternativ tekst:

Manglande alternativ tekst

Den største feilen er å ikkje bruka alt-attributtet i det heile tatt. I ein tekstbasert nettlesar vil det då vanligvis stå [Inline] eller [bilde.png]. Viss det ikkje finst nokon bra alternativ tekst for eit bilde, bør du bruka <img … alt="" />, eller i nokre tilfelle <img … alt="&#160;" />.

Tekst som grafikk

Tekst som grafikk er lett å laga alternativ tekst for. Likevel blir det ofte gjort feil. Eg har eit godt eksempel, henta frå Norsk språkråd sine nettsider.

Øvst på denne sida er Språknytt sin logo, som viser teksten «Språknytt». Den alternative teksten er her sett til [bladhovud]. Dette blir heilt feil. Ein som brukar ein tekst- eller talebasert nettlesar vil då få dette som overskrift, noko som ser/høyrest rart ut. I tillegg skal strukturen merkast opp ved bruk av riktige element:

<h1><img src="logo.png" width="409" height="90" alt="Språknytt" /></h1>

Dette fører til at sida vil sjå skikkelig ut sjølv i nettlesarar som ikkje støttar bilde. XHTML er då òg laga for å gjera det mulig å markera strukturen til eit dokument på. Om du er interessert i å læra meir om dette, kan du lesa ein artikkel om struktur i XHTML. Denne tar blant anna føre seg alle dei fordelane korrekt markering av overskrifter førar med seg.

Viss eit bilde inneheld tekst, bør då alt-teksten vera den samme som teksten i bildet. Det er ikkje so vanskelig å forstå dette. Du kan jo tenke deg kor dumt det ville sett ut om VG kom ut med [logo] øvst på forsida!

Ei beskriving av bildet?

Mange som bruker alt-attributtet har fått høra at dei skal bruka dette til å gje ei beskriving av bildet. Dette blir ofte feil:

<p>Vel språk/<span xml:lang="en">choose language</span>:</p>
<ul>
  <li><a href="no.html" hreflang="nn"><img src="norway.png" width="94" height="58" alt="Bilde av eit norsk flagg" /></a></li>
  <li><a href="en.html" hreflang="en"><img src="england.png" width="94" height="58" xml:lang="en" alt="Picture of an English flag" /></a></li>
</ul>

Kan du sjå kva som er gale med det eksemplet ovanfor? Faktisk er dette veldig godt laga, med både spesifisering av språket til teksten (lang-attributtet) og språket til eksterne sider (hreflang-attributtet). Men den tabben forfattarne her gjer, er å koma med ei beskriving av bilda, der han heller skulle prøvd å videreformidla det bilda representerer. Her hadde det vore passande at alt-attributta hadde blitt sett til Norsk og English. Innhaldet ville då blitt presentert på ein naturlig måte for alle som ikkje kunne sjå bilda.

Ofte blir bilde brukt som navigasjonsknappar. Viss desse inneheld tekst, skal alt-teksten setjast til den tilsvarande teksten i bildet. Dersom bildet er eit symbol bør alt-teksten reflektera kva meining dette bildet/symbolet har, korfor det er der.

For eksempel kan eit bilde av eit hus bli brukt til å symbolisera ein persons heime- eller hovudside. Då kan Heim vera ein bra alt-tekst. Du kan òg bruka Hovudside eller kanskje Forside. Her er det viktig at du husker på at teksten skal visast i staden for bildet og erstatta dette.

Punktmerkte lister

Folk bruker gjerne ofte flotte, fargerike punktmerke for å laga ei liste. Den alternative teksten spesifisert for desse kan ofte vera ufrivillig morosam. Eit eksempel på slik dårlig bruk av alt-attributtet finn me på Hampshire Music Service si nettside.

Her har dei som har laga sida brukt teksten Bullet point (HCC Rose)alt-attributtet, då for å gje ei beskriving av bildet. Resultatet blir katastrofalt:

Bullet point (HCC Rose) Events Diary – listings of musical performances given by Hampshire Music Service ensembles.

Bullet point (HCC Rose) Hampshire Music Service provides quality music services to Hampshire schools and colleges.

Bullet point (HCC Rose) Hampshire Music 2000 was a major initiative to increase musical opportunities for young people.

I dette eksemplet hadde det vore betre å bruka * eller [] eller noko liknande. Men dette ville kanskje skapa problem for folk med talesynteseprogram, og er soleis ikkje ideelt. Den beste og korrekte måten å laga ei liste på, er å bruka ul– og li-elementa. Du kan so bruka stilsett til å formatera lista som du ønskjer (for eksempel bruka bruka bilde som punktmerke):

<style type="text/css">
  ul { list-style: URL("punkt.png") square; }
</style>
<body>
  <ol>
    <li>Punkt ein</li>
    <li>Punkt to</li>
  </ol>
</body>

Eksemplet over bruker stilsett til å seia at kvart punkt skal visast med bildet punkt.png som punktmerke. Viss dette ikkje er mulig, skal det brukast ein firkant.

Programfeil

Av og til finst det feil som ikkje direkte er forfattarens skyld, men som kjem dårlige redigeringsprogram. Fleire av desse set faktisk inn informasjon om bildet i alt-attributtet, for eksempel slik: image.jpg (23603 bytes). Ein heilt uakseptabel feil i programmet!

Dekorasjonar

Ein variant på problemet med punktlister, er dekorasjonar. Eg har opplevd sider med alt-attributtet sett til Dekorativ bord (vel, på engelsk). Personlig synest eg nesten det er synd at det ikkje eksisterar eit src-attributt på hr-elementet lenger. A.J. Flavell har for øvrig skrive ei side der han går inn på korleis du skal bruka grafiske, horisontale border i HTML.

Korleis bruka alternativ tekst riktig

For å finna ut kva den alternative teksten skal vera, bør du først sjå på korfor bildet er der. Alle bilda på sida di skal ha ein grunn til å vera der – om enn berre for å pynta opp.

Det nytter vanligvis ikkje å ha ei beskriving av bildet. Den alternative teksten skal visast når bildet av ein eller annan grunn ikkje er tilgjengelig. Det kan vera i tekstbaserte nettlesarar, talesynteseprogram, leselister eller rett og slett nokon som surfar med bildevising avslått. I slike tilfelle vil ikkje ei beskriving vera bra. Eg skal her prøva å illustrera kva alternativ du har.

Ein kan grovt sett dela bilde inn i desse kategoriane:

Pynt og visuelle effektar
Grafikken blir her brukt til å gjera sida litt meir interessant og fargerik. Eksempel på pynt kan vera små teikningar eller dekorasjonar. Her vil vanligvis <img … alt="" /> eller <img … alt=" " /> vera passande. Dette gjeld òg når grafikk er brukt som for eksempel avrunda tabellhjørner. Bruk av grafikk som erstatning for horisontale strekar (hr-elementet) er dessverre eit problem. Ein kan prøva å unngå problemet ved hjelp av stilsett, men ulike nettlesarar tolkar dette forskjelligt.
Tekst som grafikk
Det er vanligvis unødvendig å ha tekst som grafikk, men mange likar litt fancy effektar på teksten. Ein bør imidlertid ikkje overdriva dette, då mykje grafikk gjer at sida tar lang tid å lasta ned. Uansett, alt-attributtet bør her setjast til den teksten som står i bildet. Dette gjeld òg vanligvis (tekstbaserte) logoar. Du skal aldri setja den alternative teksten til [logo] eller noko liknande. Hensikta med alt-attributtet er kunna gje lesaren informasjon, ikkje metainformasjon («informasjon om informasjon»)! Men viss logoen berre er brukt som eit lite merke øvst i hjørnet på kvar side (og derfor ikkje er ein vesentlig del av innhaldet), bør alt-attributtet setjast til "", altso tomt. Ein viktig ting å huska på er å markera kva strukturelle meining bilda har. Viss for eksempel bildet er tittelen på sida, skal ho setjast inn i eit h1-elemenet. Då vil det fungera perfekt i alle typer nettlesarar.
Navigasjonsknappar
Ofte er dette det samme som førre kategori, at ein for eksempel brukar ord som «tilbake», men som grafikk. Her skal då den alternative teksten vera det samme som teksten i bilda. Men det kan òg brukast grafiske ikon for som navigasjonshjelp. Eksempel på dette kan vera eit bilde av ei høgrepil som fører til neste side/dokument, eller eit forstørrelsesglas som peikar til søkesida. Her bør alt-attributtet setjast til det innhaldet bildet prøver å videreformidla. I desse tilfella ville det nok passa best med neste og søk. Viss bilda blir brukt i tillegg til tekst, for eksempel eit bilde av eit engelsk flagg med teksten English version ved siden av, bør då alt-attributtet setjast til tomt.
Ekstra – men ikkje nødvendige – bilde
Dette er bilde som gjev tilleggsinformasjon, men som ikkje er nødvendige for sida. Her bør du spesielt sjå på kva bilda prøver å formidla, og ikkje automatisk ha ei beskriving av dei. Viss du har eit bilde av byen Hilo på Hawaii bør du ikkje ha den alternative teksten Bilde av byen Hilo på Hawaii.. Ein meir passande alternativ tekst ville kanskje vera noko slikt som Kyststrekninga langs byen Hilo på øya Hawaii har mange sukkerplantasjar og flott natur.. Du bør altso sjå på kva informasjon bildet prøver å gje lesaren. Dersom bildet berre blir brukt til pynt eller ikkje har noko serlig meining vil eit tomt alt-attributt vera passande.
Bilde som er nødvendige for full utnyttelse av sida
Viss du har ei side som viser bilde frå ein fotokonkurranse er bilda innhaldet. Det kan derfor vera vanskelig å laga ein passande alternativ tekst. Den einaste løysinga her, er å bruka noko slikt som [Vase med blomster. 98 KiB Jpeg]. Det er i fleire tekstbaserte nettlesarar, med få tastetrykk, mulig å kjøra eit hjelpeprogram som kan visa grafikken. Dei som kjører i visuelle nettlesarar med grafikk avslått vil òg kunna visa dei bilda dei ønskjer. Andre brukarar vil dessverre ikkje få serlig utbytte av sida di. For å bøta på dette, kan du bruka «longdesc-attributtet». Dette kan du med hell bruka på grafar, og andre plassar der bilda er heilt nødvendige for å forstå sida.

Bruk fantasien!

Som du ser skal du prøva å videreformidla meininga med bilda. Det kan faktisk finnast ganske fantasifulle løysingar på dette problemet. Eit interessant eksempel finn du i ein artikkel frå CAST.

Vising av alternativ tekst i grafiske nettlesarar

Populære nettlesarar som Microsoft Internet Explorer og Netscape Navigator (før versjon 6) har aldri takla alt-attributtet serlig bra. Den alternative teksten blir vist viss du har bildevising avslått eller bilda ikkje enno er lasta ned. Teksten blir vist inne i ei bilderamme. Ein feil er at teksten ikkje blir vist med same skrift som teksten rundt, og at han kan bli avkutta viss den spesifiserte bildestorleiken er mindre enn storleiken på teksten.

Ein betre måte ville vera å visa den alternative teksten som rein tekst og ikkje inne i bilderamma. Ein kunne då dra nytta av at forfattaren av sida hadde markert bilda strukturelt korrekt. Nyare nettlesarar som Opera og Firefox gjer nettopp dette, slik at for eksempel bilde brukt som overskrift blir vist som overskrifter, med store, halvfeite bokstavar.

Den alternative teksten blir som sagt òg vist som erstatning for bilda mens desse blir lasta ned. Nokon har derfor brukt tekst som Vent mens bildet blir lasta ned!. Dette virkar sjølvsagt ganske rart og frustrerande for brukarar av ikkje-grafiske nettlesarar.

title-attributtet

Ein annan og alvorlig feil har vore at nettlesarane har begynt å visa alt-teksten som verktøytips (ein tekstboks som dukkar opp når du held peikaren over noko). Dette har ført til at nokon har sett teksten til det dei synest passar som verktøytips. Denne teksten passar oftast ikkje som alternativ tekst for dei som ikkje har/bruker nettlesarar med støtte for grafikk.

Vising av tekst som verktøytips er i seg sjølv ikkje ein dårlig idé, men bruk av alt-attributtet til dette er det. Derfor finst det no eit anna attributt, title-attributtet. Dette kan visast på forskjellige måtar. Den mest vanlige måten for visuelle nettlesarar er å visa den som verktøytips, eventuelt også som tekst i statuslinja.

Eit allsidig attributt

Du kan bruka title-attributtet på alle element, med unntak av base-, basefont-, head-, html-, meta-, param-, script-, og title-elementa. Merk at bruk på link-elementet har ei litt annan meining. Eit eksempel på bruk av title-attributtet på img-elementet:

<img src="bilde.png" width="128" height="128" alt="Alternativ tekst" title="Tilleggsinformasjon" />

Ekstra og utdjupande informasjon

Du skal bruka title-attributtet til å gje ekstra eller utdjupande informasjon om eit visst emne. Den beste bruken er utvilsamt for å utdjupa meininga til ei lenkje, men kan som sagt brukast på dei fleste element. (Som eit eksempel kan du prøva å halda peikaren over ordet lenkje i førre setning.)

Når du har ei lenkje til ei anna side eller ein annan stad på samme side kan det vera nyttig å spesifisera ein tittel til denne. Ofte blir slike lenkjer plasserte «indirekte» i teksten. Etter mi meining bør dei det. Mange folk (meg inkludert) irriterar seg over «klikk her»-lenkjer. Dette forstyrrar lesinga og er dessutan direkte diskriminerande mot folk som bruker for eksempel talegjenkjenning til å navigera!

Fordelar med naturlig flyt

Ein annan positiv ting men lenkjer som flyt naturlig saman med tekst er at desse kan brukast i ei lenkjeliste. Nokre nettlesarar kan automatisk laga ei liste over peikarar i eit dokument. Her blir då peikarteksten brukt.

Kva tekst du skal bruka som tittel er vanskelig å seia bestemt, men du bør kort prøva å beskriva ressursen peikaren peikar til. Viss sjølve peikarteksten er dekkande treng du ikkje spesifisera noko title-attributt. Du kan sjå eg har brukt attributtet på peikarar fleire plassar i dette dokumentet. Bruk av stor bokstav i det første ordet og/eller punktum (ev. anna punksetjing) i slutten av teksten varierer. Dette blir opptil deg og kva du likar best. Sjølv har eg (etter lang tids grunning på dette!) funne ut at eg føretrekk stor førstebokstav og avsluttande punktum.

Forskjellige nettlesarar kan ha forskjellige måtar å visa title-teksten; ikkje berre som verktøytips eller statuslinjetekst. Det kan òg henda den ikkje blir vist i det heile tatt, so du bør ikkje vera avhengig av dette. Du bør heller sjå på det som ein ekstra bonus for nokre brukarar.

longdesc-attributtet

Du bruker longdesc-attributtet for å peika til ei lang beskriving av bildet (på ei anna side). Du bør berre bruka dette når alt-attributtet ikkje gjev nok informasjon. Du spesifiserer dette slik:

<img src="./bilde/folktal.png" width="256" height="384" alt="Folketalet veks eksponentiellt." longdesc="../beskriving/folketal.html" />

Her kan folketal.html for eksempel innehelda følgjande tekst (skikkelig markert opp som eit eiga XHTML-dokument):

Ein graf viser utviklinga av folketalet på jorda gjennom 4000 år, frå år 2000 f.Kr. til i dag (ca. år 2000). Kurva held seg nær null ei god stund før krumminga begynner å auka rundt år 1000 e.Kr. Ved 1850 har folketalet passart 1 milliard og kurva blir no nesten loddrett. I 1980 er talet 4 milliardar, mens det i 1990 er 5 milliardar. Kurva blir so stipla for å markera at det frå no av berre er berekningar og ikkje faktiske tal. Ved år 2000 er folketalet komen opp i 6 milliardar menneske. Grafen flatar so noko ut. Folketalet har altso vakse dramatisk dei siste hundre året, men folkeveksten ser no ut til å avta.

Du bør spesifisera både alt– og longdesc-attributtet. Slik kan lesaren få med seg det viktigaste og samtidig få meir utdjupande informasjon om han ønskjer. Det vil òg hjelpa brukarar av tekstbaserte nettlesarar som kan sjå bilde ved hjelp av tilleggsprogram.

Teksten i det eksterne dokumentet bør beskriva bildet. Det vil seia at han berre skal ta med det viktigaste. Han skal prøva å formidla kva bildet prøver å visa, ved for eksempel å nemna nøkkeltal (på ein graf). Det har ingen hensikt å ta med informasjon om fargane på grafen eller noko sånt.

Kjelder og ekstra informasjon

Her vil eg opplysa om kjeldene eg har brukt ved utarbeiding av denne artikkelen.

Tilgjengeligheit og bruk av (X)HTML

Her følgjer ei kort oversikt over nokre relevante nettsider.

Programvare og tenester

Her er ei lita oversikt over programvare og tenester som kan vera nyttig i samband med utvikling av tilgjengelige nettsider.

2 kommentarar

  1. Flott artikkel! (Ikke så mye nytt for min del, men så er jeg over middels interessert i temaet.)

    Jeg ville egentlig bare si at du ikke bør anbefale Proxomitron (som ikke lenger utvikles fordi forfatteren er død), men heller Privoxy. Jeg undres litt over hvordan du mener at Proxomitron er nyttig for utvikling av tilgjengelige nettsider – da tenker jeg mer på Webdeveloper-utvidelsen for Firefox og lignende.

    Fortsatt god helg.

  2. Takk for at du gjorde meg merksam på dette, Nordhaug. Dette er eigentlig ein (mange år) gammal artikkel, som eg først no har fått overført til bloggen. Derfor hadde eg med den gamle lenkja til Proxomitron. Tanken var nok berre å ha ein referanse til eit program som fjernar reklame, då dette var nemnt i teksten. Eg har no fjerna denne lenkja.
    For øvrig brukar eg sjølv Privoxy, og synest det er eit supert program. Det er sjeldan eg ser reklame på nettsider no for tida, og eg vert alltid veldig overraska når eg surfer frå andre maskiner (utan Privoxy installert) og ser kor fryktelig nedlessa Internett faktisk er med plagsom reklame. Utan Privoxy hadde Internett vore ganske ubrukelig for meg!

Legg att eit svar til Hans Fredrik Nordhaug Avbryt svar

E-postadressa vert ikkje synleg for andre. Obligatoriske felt er merkte med *.