Alt-tekst til billeder: hvornår og hvordan
Skriv alt-tekst, der formidler betydningen af ikke-dekorative billeder
Alt-tekst til billeder: hvornår og hvordan er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad er alt-tekst?
alt-attributten giver alternativ tekst til billeder:
- Læs es af skærmlæsere i stedet for billedet
- Vises, når billedet ikke kan indlæses
- Indekseres af søgemaskiner
- Er påkrævet for at overholde WCAG
Den gyldne regel
Alt-teksten bør formidle de samme oplysninger eller den samme funktion, som billedet ville have for en seende bruger:
<!-- The test: if you removed this image,
would the alt text give you the same information? -->
<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">
<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">Informationsbærende billeder
Billeder, der formidler oplysninger: Beskriv indholdet:
<img
src="signup-flow.png"
alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>
<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->Dekorative billeder: Tom alt
Rent dekorative billeder bør have en tom alt-attribut, så de springes over:
<!-- Decorative separator -->
<img src="divider.png" alt="">
<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->
<!-- Never omit alt entirely — missing alt attribute is an error
Empty alt="" = intentionally decorative
Missing alt = unknown, screen readers may read the filename -->Funktionelle billeder
Billeder, der udfører en funktion — beskriv funktionen, ikke udseendet:
<!-- Logo that links to home -->
<a href="/">
<img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->
<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->Komplekse billeder: Figurer og lange beskrivelser
Komplekse diagrammer eller illustrationer kan have brug for mere end en kort alt-tekst:
<figure>
<img
src="complex-diagram.png"
alt="Network architecture diagram — see the description below"
aria-describedby="diagram-desc"
>
<figcaption id="diagram-desc">
<p>The diagram shows three tiers: a client layer with browsers and mobile apps,
a middle tier with load balancers and app servers,
and a data tier with primary and replica databases.</p>
</figcaption>
</figure>Billeder med tekst
Undgå billeder med tekst — hvis du er nødt til at bruge dem, skal alt-teksten svare nøjagtigt til teksten:
<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">
<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">
<!-- Better: use real HTML text styled with CSS
Images of text fail at zoom and high contrast modes -->Konteksten ændrer alt-teksten
Det samme billede kan have brug for forskellig alt-tekst i forskellige sammenhænge:
<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">
<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">
<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->Længde på alt-tekst
Retningslinjer for længden på alt-tekst:
- Hold den kort — der er ingen grund til at begynde med 'Billede af' eller 'Foto af'
- Stræb efter under 125 tegn (nogle skærmlæsere afkorter ved 125 tegn)
- Brug en kort alt-tekst + aria-describedby til en udvidet beskrivelse af komplekse billeder
- Fyld ikke teksten med søgeord — skriv til mennesker
Test af alt-tekst
Sådan tester du din alt-tekst:
- Deaktivér billeder i browseren (Firefox: Værktøjer → Sidestil → Ingen stil)
- Brug WAVE-værktøjet til at se al alt-tekst på én gang
- Lyt med VoiceOver/NVDA for at høre, hvad der annonceres
- Kør Lighthouse: Tilgængelighed → Billedelementer har [alt]-attributter
SVG og tilgængelige navne
For inline-SVG skal du angive tilgængelige navne på en anden måde:
<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
<title id="icon-title">Settings</title>
<!-- SVG paths -->
</svg>
<!-- Decorative SVG: -->
<svg aria-hidden="true">
<!-- paths -->
</svg>Hurtigt tjek
Hvilken alt-værdi skal et rent dekorativt billede have?
Opsummering: alt-tekst
Det vigtigste om alt-tekst:
- Medtag altid alt-attributten; brug alt="" til dekorative billeder
- Beskriv oplysningerne, ikke udseendet
- Funktionelle billeder: Beskriv handlingen eller destinationen
- Komplekse billeder: Kort alt-tekst + aria-describedby til den fulde beskrivelse
- Billeder med tekst: Alt-teksten skal svare nøjagtigt til teksten
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Alt-tekst til billeder: hvornår og hvordan” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Alt-tekst til billeder: hvornår og hvordan”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Alt-tekst til billeder: hvornår og hvordan”?
Skriv alt-tekst, der formidler betydningen af ikke-dekorative billeder Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Alt-tekst til billeder: hvornår og hvordan”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Hvorfor tilgængelighed er vigtig: WCAG-niveauer
- Overskriftshierarki til skærmlæsere
- Alt-tekst til billeder: hvornår og hvordan
- Tastaturnavigation og fokusrækkefølge