Tilgængelighed og brugen af billeder og grafik
Tilknyt en ’’Alt’’-tekst (alternativ tekst) til billeder m.m.
Hvad er en alternativ tekst? (’alternative text equivalent’)
Alternativ tekster - eller ’’Alt’’-tekster, som de kaldes i daglig tale - er en mulighed for indsætte tekst ved de elementer, som en blind eller svagsynet bruger ikke kan se. Det kunne f.eks. være i forbindelse med billeder eller grafiske elementer, f.eks. navigationsknapper, knapper til download af filer/lydfiler/videoklip eller image maps (klikbare billedkort e.l.).
Hvad skal en alternativ tekst bruges til?
En ’’Alt’’-tekst gør det muligt for en skærmlæser at læse teksten op for brugeren. Det kan også være en fordel for de brugere, der har slået visningen af billeder og grafik fra, da de ved hjælp af ’’Alt’’-teksterne kan se, hvad hjemmesiden indeholder.
NB. Nogle brugere har slået visningen af billeder og grafik fra for ikke at bruge tid på at downloade billedfiler og grafiske elementer. De fleste brugere har dog efterhånden så stor en båndbredde, at det ikke længere er relevant at gøre.
Hvad skal en alternativ tekst indeholde?
’’Alt’’-teksten skal være klar og kortfattet. Dens indhold vil afhænge af elementets betydning. Hvis elementet har en illustrerende funktion, skal ’’Alt’’-teksten kort beskrive, hvad elementet forestiller. Hvis elementet fungerer som en navigationsmetode, skal ’’Alt’’-teksten forklare funktionaliteten. Og hvis grafikken linker til en anden side, skal der indsættes en title-attribut som beskriver linket.
’’Alt’’-teksten må ikke være for lang
Vær opmærksom på, at ’’Alt’’-teksten ikke bliver længere end højst nødvendig, da det vil være tidskrævende for brugere af skærmlæsere at sidde og vente på at få læst alenlange tekster op. Hvis du ønsker at indsætte en længere beskrivelse, kan longdesc-attributten anvendes.
Hvordan indsættes ’’Alt’’-teksten i praksis?
Hvis hjemmesiden er opbygget i et CMS (Content Management System) vil der sandsynligvis være et ’’Alt’’-tekst felt integreret i systemet, hvor du kan skrive teksten ind.
Hvis der er tale om en hjemmeside med adgang til HTML-koden, skrives ’’Alt’’-teksten ind i HTML’en i forbindelse med det element (f.eks. et billede), som ’’Alt’’-teksten skal tilknyttes:
a href:”….
img scr= ”Københavns_havn.jpg” width”=”200” height=”150” alt=”Billede af Københavns havn” /
NB. Det er desuden god skik at give billedfilen et sigende navn.
Det vil ofte ikke være nødvendigt at skrive ”Billede af …” i ’’Alt’’- teksten, fordi skærmlæseren automatisk fortæller brugeren, at der er tale om et billede. Det er dog forskelligt alt efter, hvilken skærmlæser man bruger, i hvilket omfang programmet automatisk læser op, om der er tale om et billede, en knap osv.
Indsæt en tom ''Alt''- tekst, hvis billedet ikke indeholder information
Billeder, der udelukkende er illustrerende eller skal udtrykke noget symbolsk, kan enten have tilknyttet tomme ’’Alt’’-tekster, dvs. alt=”” (der må ikke være mellemrum mellem de to citationstegn) eller man kan indsætte en kort beskrivelse af billedet. Du kan også vælge i første omgang at beskrive billedet kort med henvisning til en fil med en længere beskrivelse. Så kan brugeren selv vælge, hvorvidt han/hun ønsker at høre den lange beskrivelse.
Husk ’’Alt’’-tekst i forbindelse med client-side image map (billeder med links)
Hvad er client-side image map?
En client-side image map er et billede (img element), som har tilknyttet en form for funktionalitet. Et ’image map’ kan være et landkort eller en menu, der har klikbare felter, der linker videre til andre sider.
Der skal tilknyttes en ’’Alt’’-tekst til billedet, der beskriver selve kortet, såvel som alle klikbare elementer på kortet. Ofte vil det være mest hensigtsmæssigt, at ’’Alt’’-teksten svarer til teksten på kortet. Men den kan også være både kortere eller længere alt efter konteksten.
Desuden skal du være opmærksom på, at image mappen ikke kun skal være tilgængelig for skærmlæsere, men også for brugere, der anvender tastaturet til at tabbe sig igennem menuerne.
NB. ’’Client-side image map’’ kaldes sådan, fordi det er browseren, der er ’the client’ - og det er den, som skal håndtere resultatet af, at brugeren klikker på billedet.
Tilknyt en ’’Alt’’-tekst (alternativ tekst) til indlejret grafik m.m.
Billeder, der fungerer som knapper
Når du bruger billeder, der fungerer som en knap, skal ’’Alt’’-teksten beskrive funktionaliteten. Er der for eksempel tale om en søgeknap, skal Alt-teksten blot hedde ”Søg”.
Billeder der er indlejret i layoutet
På nogle websteder er der brugt tomme billedfiler til at få layoutet til at se ud på en ganske bestemt måde. Disse filer er ikke synlige for brugeren. For at give skærmlæseren besked på, at disse filer er tomme, indsættes følgende ’’Alt’’-tekst: alt=”” (der må ikke være mellemrum mellem de to citationstegn).
Billedfiler kan også bruges til at skabe forskellige former, som for eksempel buer, bogstaver osv., der indgår som en del af designet på webstedet. Disse skal også blot have indsat en tom ’’Alt’’-tekst.
Det vil dog være sjældent, at man ser denne måde at layoute websteder på, efterhånden som design og layoutmetoder overtages af CSS.
Grafer, diagrammer o.l.
Grafer, diagrammer o.l. kan indeholde flere informationer end der kan stå i en ’’Alt’’-tekst. I disse tilfælde kan du skrive et resumé af grafens resultater i XHTML’en. Beskrivelsen kan for eksempel via attributten longdesc i forbindelse med img-taggen: longdesc=”longdescriptions.html#graf1”. Derudover skal du tilføje en ’’Alt’’-tekst, der beskriver selve grafen som element.
Tekster, der ligger indlejret i grafikken
Hvis for eksempel en menutekst er indlejret i et grafisk element eller et billede, kan en skærmlæser ikke læse teksten. Derfor kræver denne form for navigation en ’’Alt’’-tekst. Det vil dog være mere hensigtsmæssigt at bruge CSS til at opnå denne effekt, fordi man ikke kan forstørre en tekst, der ligger indlejret i et grafisk element. Den grafiske tekst vil blot blive mere utydelig, når den forstørres.