Teksten skal erstatte det relevante ved billedet

Alt-tekst er et tekstalternativ til et billede. På et almindeligt HTML-billede angives den i alt-attributten. Den kan blandt andet bruges af skærmlæsere, så billedets information eller funktion kan forstås uden at se det.

Spørgsmålet er ikke alene “Hvad forestiller billedet?”, men “Hvad bidrager billedet med her?” Det samme foto kan kræve forskellige beskrivelser afhængigt af sammenhængen. Et billede, der kun pynter, skal som regel ikke have en lang oplæst beskrivelse.

Alt-tekst er én del af tilgængeligheden. Den gør ikke alene hele siden tilgængelig, og den erstatter hverken gode overskrifter, tydelige links eller en fungerende formular.

Vælg efter billedets rolle

W3C's beslutningstræ skelner blandt andet mellem billeder, der giver information, udfører en funktion og er dekorative. Brug det som udgangspunkt, når du vurderer et billede i den konkrete side.

Billedets rolle Et passende tekstalternativ
Produktfoto med en relevant detalje Beskriv detaljen, eksempelvis grebets matte overflade
Logo som eneste indhold i et link til forsiden Angiv afsender og destination, eksempelvis “Firma – forside”
Dekorativ illustration ved en fuld forklaring Brug tom alt-attribut: alt=""
Diagram med flere værdier Giv et kort overblik og placér de væsentlige data i almindelig tekst
Billede med nødvendig tekst Gengiv informationen, hvis den ikke allerede findes som tekst på siden

Tom alt-tekst og manglende alt-attribut er forskellige ting. En tom attribut signalerer, at billedet ikke skal bidrage med en oplæst beskrivelse i den sammenhæng. Uden attributten kan brugeren i stedet møde eksempelvis et filnavn.

Skriv konkret og i sidens sammenhæng

Forestil dig et produktfoto af en lænestol. Hvis formålet er at vise betrækket, kan “Lænestol med mørkegrønt stofbetræk og synlige syninger” være relevant. Hvis fotoet blot gentager en tilstrækkelig beskrivelse i samme sammenhæng, skal du vurdere, om gentagelsen hjælper brugeren.

Tilføj ikke detaljer, som billedet eller produktdataene ikke dokumenterer. Et foto viser ikke nødvendigvis, at et materiale er genanvendt eller produceret i Danmark. Alt-teksten må ikke blive et sted, hvor usikre produktpåstande skjules.

Hold teksten så kort, som den meningsfulde beskrivelse tillader. Brug ikke en fast grænse på 125 tegn som erstatning for en vurdering. Lange forklaringer hører ofte bedre til i sidens brødtekst, hvor alle kan læse dem. Se W3C's eksempler på informative billeder.

Beskriv handlingen i funktionelle billeder

Et ikon i en knap skal hjælpe med at forstå handlingen. “Søg” er mere nyttigt end “Lup”, hvis ikonet er knappens eneste navn. Et logo, der linker til forsiden, skal hjælpe med at forstå destinationen.

Hvis knappen eller linket allerede har en tydelig tekst, skal billedets alternativ ikke unødigt gentage den. Vurdér det samlede tilgængelige navn, herunder eventuelle andre navngivninger. W3C's vejledning om funktionelle billeder.

En praktisk kontrol er at gå gennem links og knapper med tastaturet og lytte til deres navne med en skærmlæser. Kan du forstå, hvad der sker, før du aktiverer dem?

Giv komplekse billeder en forklaring uden for alt-feltet

En graf med mange værdier skal ikke presses ind i én lang alt-tekst. Giv et kort resumé og stil de oplysninger, læseren skal bruge, til rådighed i tekst eller en tilgængelig tabel. Placér forklaringen tæt på grafen eller med en tydelig forbindelse.

Ved en opmålingsvejledning kan billedet eksempelvis vise, hvor der måles, mens teksten beskriver trinnene og forudsætningerne. Brugeren skal kunne løse opgaven uden kun at være afhængig af billedets farver eller pile. W3C's vejledning om komplekse billeder.

Brug alt-tekst til forståelse frem for gentagelse

Google bruger alt-tekst sammen med blandt andet sidens indhold til at forstå billeder. Beskriv det relevante naturligt, og undgå søgeord, som ikke hjælper med at forklare billedet. Googles vejledning til image SEO.

En billedtekst og et filnavn har andre funktioner og erstatter ikke automatisk alt-attributten. Den bredere behandling af filstørrelser, formater og placering findes i guiden til billedoptimering.

Kontrollér den publicerede side

Gennemgå billederne i deres faktiske placering. Et mediebiblioteks standardtekst passer ikke nødvendigvis til alle anvendelser af samme billede. Kontrollér også, at et dekorativt billede ikke bliver den eneste navngivning af et vigtigt link.

En automatisk test kan finde nogle manglende alternativer, men kan ikke alene bedømme, om teksten er rigtig. Kombinér den med en faglig gennemlæsning, tastaturkontrol og relevant skærmlæsertest. Brug vejledningen til responsive sider, hvis præsentationen også skal vurderes på forskellige skærme.

FAQ

Skal alle billeder have en beskrivende alt-tekst?

Nej. Informative og funktionelle billeder kræver et relevant tekstalternativ. Rent dekorative billeder bør normalt have en tom alt-attribut, så de ikke skaber unødvendig oplæsning.

Skal alt-teksten altid være under 125 tegn?

Brug en kort, men tilstrækkelig beskrivelse efter billedets funktion. En fast tegngrænse erstatter ikke den vurdering. Længere forklaringer og data bør ofte stå som almindeligt indhold på siden.

Kan samme billede have forskellige alt-tekster?

Ja. Teksten afhænger af billedets rolle og den omgivende forklaring. Det samme billede kan være informativt i én placering og dekorativt i en anden.

Er en automatisk tilgængelighedstest nok?

Nej. Den kan finde visse tekniske problemer, men ikke alene afgøre, om billedets betydning er forklaret korrekt. Læs teksten i sammenhæng og afprøv de relevante funktioner.

Få billederne til at fungere for flere

Kontakt mig, hvis du vil have hjælp til at gennemgå billedtekster, links og den praktiske brugeroplevelse på din hjemmeside.