Guide til img alt-tekster

Vores hjerne modtager enorme mængder af information hvert eneste sekund, og det er kun en brøkdel, der bliver behandlet og gemt i vores bevidsthed. Derfor er hjernen konstant på overarbejde og prioriterer ofte de "lette" informationer først. Visuelle elementer – eksempelvis billeder – er hurtige for hjernen at afkode, og derfor har de stor indflydelse på vores forståelse af det, der præsenteres på fx et website.

Billeder er vigtige for konverte­ringen

De ”rigtige” billeder taler til vores følelser, som vi helt naturligt gerne vil reagere på. Brugerne kan se og spejle sig i det, de ser på billederne – og det øger konverteringen. 

Billeder brugt i den rigtige kontekst medvirker også til at øge troværdigheden, opdele tekster og understrege en form for grafisk linje på et website. Det er svært at forestille sig et website helt uden brug af billeder!

Men prøv for eksemplets skyld at forestille dig, at du lever uden mulighed for at opleve og forstå verden gennem synssansen. Prøv så at navigere rundt på et website udelukkende ved brug af tabulator-tasten. Det er en næsten umulig opgave, hvis ikke websitet er udviklet med fokus på webtilgængelighed.

Hvad er en img alt-tekst?

En img alt-tekst (alternativ tekst) er en kort tekst, der bliver brugt i HTML-koden til at beskrive et billede. Måske er du stødt på de mere tekniske betegnelser for alt-teksten, som er ”alt description” eller ”alt attribute”.

Denne artikel handler om img alt-tekster, og hvordan du anvender dem for at gøre dine billeder tilgængelige for brugere med synsnedsættelse. 

Sådan identificerer du, om et billede har en alt-attribut

En let måde at identificere en alt-attribut på er at benytte Googles udviklerværktøj. Sådan gør du:

1. Åben dit website i en Google-browser.
2. Højreklik på et billede, og vælg "Undersøg".
3. Nu åbner udviklerfanen med HTML-kode og CSS styling.
4. Det stykke kode, som gengiver billedet, er markeret med blå overstregning.
5. I koden står filnavnet på billedet <img src="filnavn">.
6. Hvis alt-attributten er defineret, finder du den i umiddelbar forbindelse med filnavnet <img src="filnavn" alt="tekst">.

Hvorfor bør du bruge img alt-tekster?

Der er er flere gode grunde til, at vi anvender img alt-tekster:

1. De øger webtilgængeligheden for brugere med nedsat syn ved at præsentere en alternativ, beskrivende tekst.
2. Hvis et billede af en eller anden grund ikke loades, vises img alt-teksten i stedet for.
3. Søgerobotter får en bedre forståelse af sammenhængen mellem billede og tekst, som er vigtig for indekseringen af billeder.

Den vigtigste funktion, en img alt-tekst har, er at øge webtilgængeligheden for brugere, der anvender skærmlæsere. Skærmlæsere læser indholdet på et website højt for brugerne. Skærmlæsere orienterer sig i kildekoden, og når de støder på et billede, som brugere med nedsat syn af gode grunde ikke kan se, læses alt-teksten højt i stedet for.

Er brug af img alt-tekster vigtig for SEO?

Det er ikke kun skærmlæsere, der bruger img alt-tekster til at orientere sig om indholdet på websitet. Søgerobotter, der crawler et website, benytter sig også af alt-teksterne til at forstå, hvad en specifik side har at tilbyde brugerne. Derfor er korrekte og sigende alt-tekster også et vigtigt element i dit SEO-arbejde. Du kan med fordel indrage et søgeord i en img alt-tekst, når bare det ikke bliver forstyrrende for meningen.

For at opnå fordele af alt-teksterne, er det vigtigt, de giver mening og værdi for de synshandicappede, der besøger websitet.

Sådan skriver du de bedste img alt-tekster

Der er altså indlysende gode grunde til at fokusere på img alt-teksterne på dit website. Vi giver dig her vores bedste tips til arbejdet med teksterne.

Beslut dig for, hvad formålet med billedet er

Hvorfor har du valgt det specifikke billede? Viser det et produkt eller en service, en kundesituation, en graf eller noget helt andet? Det kan også være, billedet udelukkende har et dekorativt formål, som fx baggrundsbillede, element til at opdele to tekstblokke eller illustrerer en knap.

Formålet med billederne har stor betydning for din tilgang til arbejdet med alt-teksterne. Når vi taler om webtilgængelighed, kan billeders formål generelt opdeles i disse kategorier:

Informative billeder

Informative billeder er billeder, som tillægger værdi til indholdet. Sagt på en anden måde: Hvis billedet fjernes, vil forståelsen af indholdet forringes. Alt-tekster på informative billeder skal give mening i sammenhæng med den øvrige tekst.

Billeder med tekst

Billeder med tekst er som regel altid, ud fra et responsivt synspunkt, en dårlig idé, da beskæring forekommer og budskabet kan miste sin betydning. Men hvis du alligevel anvender billeder med tekst, kan du med fordel inkludere budskabet i alt-teksten. Hvis det er svært at gøre kort og præcist, bør du forklare billedet mere dybdegående i selve teksten på siden.

Dekorative billeder

Dekorative billeder er billeder, som ikke giver dediceret brugbar information. Hvis et billede udelukkende er af dekorativ karakter, bør du undlade at angive en alt værdi (alt=""). Skærmlæsere ignorerer nemlig billedet, hvis alt værdien er nul.

Funktionelle billeder

Hvis et billede indeholder links, bør du i alt-teksten angive, hvad der sker, når man følger linket. Et brand-logo i forbindelse med navigationen på et website har fx ofte et link til forsiden. Alt-teksten kan eksempelvis være: alt="gå-til-brand-forside".

Det skal du undgå i img alt-teksten

Det er helt unødvendigt at bruge formuleringer som ”billede af” eller ”på billedet ses”, da de tekniske hjælpemidler, synshandicappede benytter, har helt styr på, hvad en img alt-attribut skal hjælpe brugeren med og annoncerer billedformatet, før teksten læses op.

Mangler selve alt-attributten, vil en skærmlæser oplæse filnavnet på billedet, hvilket i mange tilfælde forvirrer mere, end det forklarer.

Identificer de vigtige detaljer i billedet

Det er vigtigt at finde den rigtige balance i forhold til mængden af information i img alt-teksten. Viser billedet en person i et særligt godt humør, og er det vigtigt i konteksten, så skriv eksempelvis i alt-teksten, at personen smiler eller griner.

Sammenligner billedet to produkter, så beskriv forskellen i fx farve, størrelse osv.

Beskriv billedet med de første ord, der falder dig ind

Din intuitive forståelse af billedet vil ofte være et godt sted at starte i forhold til at formulere en alt-tekst. Beskriv det vigtige i billedet i et par sætninger. Tænk fx over, hvordan du vil beskrive billedet for en person, som ikke kan se det?

Beskriv kun det, der giver mening i forhold til at understøtte det øvrige indhold på siden. Kan du ikke finde denne mening, er dit billede sandsynligvis kun af dekorativ karakter, og alt-teksten bør derfor udelades.

Skær ind til benet

I denne fase fjerner du overflødige ord og erstatter lange ord med kortere. Du må gerne bruge hverdagssprog. Hvor den endelige alt-tekst lander, afhænger i høj grad af, hvilken kategori billedet tilhører, og hvad du er kommet frem til i punkt 1 og 2.

Webtilgænge­lighed handler om mere end blot alt-tekster

Beskrivende billedtekster er blot en lille del af et omfangsrigt arbejde med webtilgængelighed på et website. Nogle opgaver kan løses på redaktørniveau, mens andre kræver adgang til kodebasen.