Guide til img alt tekster

Hvorfor bør du bruger 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å 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 den øger 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 vigtigt 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øge ord i en img alt tekst, når blot det ikke bliver forstyrrende for meningen.

For at opnå fordele af alt teksterne, er det vigtigt, at 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, at 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å 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ødigt 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 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 endelig 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ængelighed 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 og dybdegående kendskab til WCAG 2.1 standarden.

Hjælp til webtilgængelighed

Hos Illumi arbejder vi med webtilgængelighed på både nye og ’gamle’ webplatforme med udgangspunkt i WCAG 2.1 standarden.

Vores services omfatter tests, der identificerer udfordringer, rådgivning og uddannelse og en serviceaftale, som sikrer, at dit website altid overholder de nyeste standarder.