Iubenda logo
Generér

Dokumentation

Indhold

Brug af disse 6 bedste praksisser for alt-tekst hjælper med at understøtte reel tilgængelighed

Alt-tekst er et af de mest oversete, men mest virkningsfulde elementer i digital tilgængelighed.

Uanset om du designer et website, skriver en blog eller planlægger et socialt opslag, gør det en reel forskel for folk, der er afhængige af skærmlæsere eller anden hjælpemiddelteknologi, hvis du tilføjer en gennemtænkt, beskrivende alt-tekst. 

Men det er ikke altid lige nemt at skrive en effektiv alt-tekst. Hvad siger man om et diagram? Har produktbilleder brug for detaljer? Hvornår er det bedre at lade alt-teksten være tom?

I denne guide gennemgår vi alt, hvad du har brug for at vide om bedste praksis for alt-tekst – med rigtige eksempler på alt-tekst. I løbet af få øjeblikke vil du være bedre rustet til at skrive billedbeskrivelser, der forbedrer tilgængeligheden, øger SEO og opfylder vigtige compliance-standarder.

Hvad er alt-tekst, og hvorfor er det vigtigt?

Alt-tekst, som er en forkortelse for “alternativ tekst”, er en skriftlig beskrivelse af et billede. Den vises normalt i HTML-koden som en synlig tekstlinje ved siden af billedet eller som en længere beskrivelse på en separat side, som man får adgang til via et link. 

Alt-tekst er utrolig vigtig for mennesker, der lever med synshandicap – den giver en væsentlig kontekst, som ellers ville gå tabt for dem. Det gør billeder til ord, hvilket gør indholdet mere inkluderende og lettere at navigere i.

Hvordan alt-tekst forbedrer tilgængelighed og SEO

Alt-tekst blev oprindeligt skabt for at forbedre den digitale tilgængelighed, og det er stadig dens vigtigste rolle i dag. For blinde og svagtseende brugere bruger skærmlæsere alt-tekst til at beskrive billeder højt, hvilket hjælper dem med at navigere og forstå visuelt indhold.

Men alt-tekst er ikke kun til gavn for hjælpemidler. Når det er skrevet godt, bidrager det også til bedre SEO.

Det skyldes, at søgemaskiner ikke kan “se” billeder. De er afhængige af alt-tekst sammen med filnavne for at kunne fortolke, hvad et billede viser. Det betyder, at relevant alt-tekst, som bruger søgeord på en naturlig måde, kan forbedre dine siders placering i billedsøgeresultaterne.

6 bedste metoder til at skrive effektiv alt-tekst

Den bedste alt-tekst er specifik, kortfattet og relevant for billedets formål. Her er et par praktiske tips til at guide din skrivning:

  1. Hold det kort, men meningsfuldt – Sigt efter maksimalt en eller to klare sætninger. Du behøver ikke at medtage alle visuelle detaljer, bare de elementer, der betyder mest.
  2. Beskriv billedet i kontekst – Hvorfor er dette billede her? Hvilke oplysninger tilføjer den? Din alt-tekst skal afspejle den rolle, billedet spiller på siden.
  3. Undgå sætninger som “billede af” eller “billede af ” – Skærmlæsere meddeler allerede, at det er et billede, så disse introer skaber kun rod.
  4. Brug søgeord naturligt – Fyld aldrig din alt-tekst med søgeord. Hvis billedet understøtter dine SEO-mål, skal du inkludere relevante termer.
  5. Tilføj ikke alt-tekst til dekorative billeder – Hvis et billede på din side kun er der af dekorative årsager, bør det have en null alt-attribut (alt=””), så skærmlæsere springer det helt over.
  6. Tilføj et punktum – At tilføje et punktum i slutningen af alt-teksten er med til at adskille den fra resten af sidens tekst. Det forbedrer også læseoplevelsen for dem, der bruger skærmlæsere, og tilføjer en naturlig pause.  

Ved at følge disse best practices kan du skabe alt-tekst, der virkelig er nyttig for brugerne. Se eksemplerne på alt-tekst nedenfor for at se disse principper i praksis. 

Eksempler på alt-tekst til forskellige typer billeder

Det, der måske vil overraske dig, er, at ikke al alt-tekst skal skrives på samme måde.

Hvorfor? Fordi forskellige typer billeder kræver forskellige tilgange. 

Men uanset om du arbejder med grafer, indhold på sociale medier eller produktbilleder, er målet altid det samme: at beskrive det, der betyder noget, på en måde, der hænger sammen med billedets kontekst og understøtter brugeroplevelsen.

Lad os se på, hvordan man griber alt copy an for hver type billede: 

Alt-tekst til informative billeder

Som navnet antyder, formidler informative billeder vigtig information, som ikke er skrevet andre steder på siden.

Eksempel:

[Billede:] En laptop-skærm, der viser en brugers dashboard med privatlivsindstillinger.

Alternativ tekst: Dashboard med privatlivsindstillinger, der viser skifteregler for placeringssporing, markedsføringspræferencer og datadeling.

Denne beskrivelse fokuserer på det, der er synligt og relevant for billedets kontekst, uden at overfortolke.

Alt-tekst til dekorative billeder

Dekorative billeder tilføjer ikke meningsfuldt indhold. De er der udelukkende for æstetikkens skyld og bør springes over af skærmlæsere og andre hjælpemidler. 

Eksempel:

[Billede:] Et baggrundsmønster af blå bølger.

Alternativ tekst: alt=”” (tom)

Brug en null alt-attribut, som i eksemplet ovenfor, så hjælpemidler kan ignorere billedet og gå videre.

Alt-tekst til diagrammer og grafer

Diagrammer og grafer formidler komplekse data, som kan være svære at sammenfatte i alt-tekst. 

Hvad er svaret? Din alt-tekst skal blot opsummere det vigtigste, du kan tage med dig fra diagrammet eller grafen.

Eksempel:

[Billede:] Et søjlediagram, der viser cookiebannernes engagement efter design.

Alternativ tekst: Søjlediagram, der viser, at bannere med færre valgmuligheder har højere samtykkeprocenter end bannere med detaljerede valgmuligheder.

Hvis der er flere detaljer, kan du overveje at give en længere beskrivelse i teksten i nærheden eller linke til et tekstalternativ.

Alt-tekst til produktbilleder

Produktbilleder skal beskrives med vigtige visuelle detaljer, der hjælper brugerne med at forstå, hvad der sælges.

Eksempel:

[Billede:] Et par trådløse hovedtelefoner på en hvid baggrund.

Alternativ tekst: Sorte trådløse over-ear-hovedtelefoner med polstrede ørepuder og justerbar hovedbøjle.

Det er især vigtigt for tilgængeligheden og anvendeligheden af e-handel.

Alt-tekst til billeder på sociale medier

Sociale medier er ingen undtagelse, når det gælder om at skrive alt-tekst. Når du deler visuelt indhold på sociale kanaler, skal du inkludere en kortfattet, men beskrivende alt-tekst, der beskriver billedet på en måde, der er relateret til indlæggets kontekst. 

Eksempel:

[Billede:] Et team samlet omkring et whiteboard under et møde.

Alternativ tekst: Marketingteamet brainstormer kampagneidéer omkring et whiteboard dækket af klistermærker.

De fleste platforme som X, LinkedIn og Instagram understøtter nu alt-tekst, så der er ingen undskyldning for at springe den over – og sikre, at alle i fællesskabet kan få adgang til dit indhold. 

Almindelige fejl, du skal undgå, når du skriver alt-tekst

Selv med de bedste intentioner er det let at komme til at skrive forkert alt-tekst. Her er nogle af de mest almindelige faldgruber – og hvordan du undgår dem:

1. Skriver alt for vage beskrivelser

Alt-tekst som “Billede af en graf” eller “Foto af et produkt” giver ingen nyttig kontekst. Vær specifik. Hvad viser grafen? Hvilken slags produkt er det?

2. Gør beskrivelserne for lange

Alt-tekst er ikke det rigtige sted at skrive hele essays. Alt for detaljerede beskrivelser kan overvælde skærmlæserbrugere og afbryde flowet. Hold det kort og godt – nogle få ord er nok, eller højst to klare, fokuserede sætninger.

3. Stopning af nøgleord

Alt-tekst, der er proppet med nøgleord og ikke har nogen egentlig beskrivelse, hjælper hverken brugere eller søgemaskiner. Husk at fokusere på klarhed først – når alt-teksten virkelig er nyttig, kan du være sikker på, at SEO-fordelene følger hurtigt nok. 

4. Gentagelse af omgivende indhold

Hvis billedteksten eller den nærliggende tekst allerede siger det samme, er der ingen grund til at gentage det i alt-teksten. Bare fokuser på, hvad selve billedet tilfører.

5. Ignorerer funktionelle billeder

Knapper, ikoner og links med billeder skal have en beskrivende alt-tekst, der forklarer deres funktion, f.eks. “Indsend formular ” eller “Download PDF”, ikke bare “pil” eller “ikon”.

6. Glem alt om mobil og sociale medier

Hvis du administrerer indhold på tværs af forskellige platforme, skal du sørge for, at alt-teksten fungerer konsekvent over hele linjen, også på mobiler og sociale opslag. Tilgængelighed bør ikke stoppe ved din hjemmeside.

Ved at undgå disse almindelige fejl og bruge de rigtige værktøjer kommer du tættere på at skabe en mere tilgængelig og brugervenlig oplevelse.

Sådan tester og optimerer du alt-tekst til tilgængelighed

Når du har skrevet alt-tekst, hvordan ved du så, at den virker? 

Det er vigtigt at teste, hvor godt din alt-tekst fungerer i praksis, både for skærmlæsere og for den generelle brugeroplevelse. 

Sådan tester og forbedrer du dine billedbeskrivelser:

1. Brug en skærmlæser

Prøv at navigere på din hjemmeside med en skærmlæser som NVDA (Windows) eller VoiceOver (macOS). Det giver dig direkte indsigt i, hvordan din alt-tekst bliver læst højt, og om den giver mening i sammenhængen.

2. Slå billeder fra i din browser

Hvis du deaktiverer billeder i din browser, er det en hurtig måde at få vist den alt-tekst, der vises i stedet for hvert billede. Det kan være en god måde at opdage beskrivelser, der føles forvirrende eller overflødige og skal redigeres.

3. Tjek for tilgængelighedsfejl

Brug automatiserede værktøjer til at hjælpe med at afdække eventuelle fejl, der kan påvirke skærmlæsere, sammen med andre tilgængelighedsproblemer.  

4. Bed rigtige brugere om feedback

Hvis du har adgang til testere, der bruger hjælpemidler, er deres feedback det bedste, du kan få. Spørg, om din alt-tekst føles nyttig, kortfattet og konsekvent – og juster den ud fra deres forslag. 

5. Gennemgå din SEO-præstation

Når du har optimeret din alt-tekst, skal du overvåge billedrelateret søgetrafik i Google Search Console. Hvis dine billeder begynder at dukke op i relevante resultater, ved du, at dine beskrivelser også fungerer for søgemaskinerne.

Optimering af alt-tekst er en løbende proces, men ved at følge disse trin kan du holde dig på sporet og skabe en mere inkluderende digital oplevelse.

Alt-tekst og retningslinjer for overholdelse af WCAG

Hvis du ønsker at opfylde tilgængelighedsstandarder, er alt-tekst ikke valgfrit. Retningslinjerne for tilgængeligt webindhold (WCAG) opstiller klare forventninger til, hvordan billeder skal håndteres for at støtte brugere med synshandicap, herunder:

  • Alt ikke-tekstligt indhold skal have et tekstalternativ – dette er et niveau A-krav i henhold til WCAG 2.1 (succeskriterium 1.1.1). Hvis et billede formidler information, skal det indeholde et meningsfuldt tekstalternativ.
  • Dekorative billeder bør ignoreres af hjælpemidler Hvis et billede ikke formidler indhold (f.eks. kanter, mønstre eller visuel udsmykning), bør det indeholde en tom alt-attribut: alt=””, så skærmlæsere springer det helt over og reducerer støj.

Ved at opfylde disse standarder kan du skabe et mere inkluderende websted. Og det kan også hjælpe med at reducere den juridiske risiko, især for organisationer, der opererer i områder, hvor tilgængelighedslove som den europæiske tilgængelighedslov håndhæves. 

Små detaljer, stor effekt

Alt-tekst er måske en lille detalje – men den har stor betydning.

Det gør dit indhold mere inkluderende. Det hjælper dig med at opfylde tilgængelighedsstandarder. Det booster SEO. 

Men vigtigst af alt forbedrer det oplevelsen for rigtige mennesker, der er afhængige af hjælpemidler hver dag. 

Ved at følge bedste praksis og undgå de almindelige fejl, der er skitseret ovenfor, kan du begynde at gøre tilgængelighed til en naturlig del af din indholdsproces.

Vil du have hjælp til at rette huller i tilgængeligheden på din hjemmeside?

Få mere at vide om Tag et kig på vores WayWidget og hjælp flere mennesker med at få adgang til dit websted.