Guide til img alt tekster
Med denne guide til img alt tekster forbedrer du webtilgængeligheden for dine brugere
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 konverteringen
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, og prøv 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 har du stødt på de mere tekniske betegnelse for alt teksten, som er ”alt description” eller ”alt attribute”.
Denne artikel har vi dedikeret specifikt til at omhandle img alt tekster, og hvordan du anvender dem for at gøre dine billeder tilgængelige for brugere med synsnedsættelse. Læs også vores andre artikler om webtilgængelighed.
Intro til webtilgængelighed
Vores 18 bedste redaktørtips
Sådan identificerer du, om et billede har en alt attribut
En let måde at identificere en alt attribut er at benytte Googles udviklerværktøj. Sådan gør du:
- Åben dit website i en Google-browser.
- Højreklik på et billede og vælg "Undersøg".
- Nu åbner udviklerfanen med HTML kode og CSS styling.
- Det stykke kode, som gengiver billedet, er markeret med blå overstregning.
- I koden står filnavnet på billedet <img src="filnavn">.
- Hvis alt attributten er defineret, finder du den i umiddelbar forbindelse med filnavnet <img src="filnavn" alt="tekst">.
Alt tekster på ovenstående billede kunne se sådan ud:
Okey alt tekst
<img src="monkey.jpg" alt="abe">
God alt tekst
<img src="monkey.jpg" alt="Brun-abe-bag-hegn">
Bedre alt tekst
<img src="monkey.jpg" alt="Abeunge-med-sørgmodigt-ansigt-bag-et-trådhegn.">
Undgå keyword stuffing
<img src="monkey.jpg" alt="Dyrenes-Beskyttelse-støt-Dyrenes-Beskyttelse-dyrebeskyttelsesorganisation-dyrevelfærd">
Undgå manglende alt attribut
<img src="monkey.jpg">
Hvorfor bør du bruger img alt tekster?
Der er er flere gode grunde til, at vi anvender img alt tekster.
- De øger webtilgængeligheden for brugere med nedsat syn ved at præsentere en alternativ, beskrivende tekst.
- Hvis et billede af en eller anden grund ikke loades, vises img alt teksten i stedet for.
- 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.