Alt-tekst er tekstalternativet i et HTML-billedes alt-attribut. Den hjælper blandt andet skærmlæserbrugere med at forstå billedets mening eller funktion og kan vises, hvis billedet ikke bliver indlæst.
En god alt-tekst beskriver ikke nødvendigvis alle detaljer. Den formidler den information, som billedet bidrager med i den konkrete sammenhæng.
Sådan ser alt-tekst ud i HTML
<img src="/billeder/blaa-loebesko.webp"
alt="Blå løbesko set fra siden">Hvis teksten ved siden af billedet allerede siger præcis det samme, kan en kortere formulering være bedre. Undgå mekaniske indledninger som “billede af”, fordi skærmlæseren normalt allerede fortæller, at elementet er et billede.
Fire almindelige situationer
Informative billeder
Beskriv den oplysning, brugeren ellers ville gå glip af. Et produktbillede kan eksempelvis have alt-teksten “Sort regnjakke med aftagelig hætte”, hvis farve og hætte er relevante for valget.
Dekorative billeder
Et billede, der kun er pynt og ikke tilføjer information, bør normalt have en tom alt-attribut:
<img src="/grafik/dekorativ-boelge.svg" alt="">At udelade alt helt er ikke det samme. En tom attribut signalerer bevidst, at hjælpemidler kan springe billedet over.
Links og knapper med billeder
Når billedet er det eneste indhold i et link eller en knap, skal teksten beskrive handlingen eller destinationen, ikke blot motivet:
<a href="/kurv/">
<img src="/ikoner/kurv.svg" alt="Gå til kurven">
</a>Diagrammer og komplekse billeder
Alt-teksten kan kort identificere diagrammets pointe, men alle væsentlige tal og konklusioner bør også stå som almindelig tekst eller i en tabel tæt på billedet. En meget lang analyse hører sjældent hjemme i attributten.
Alt-tekst, filnavn og billedtekst er forskellige
- Alt-tekst erstatter billedets mening eller funktion.
- Filnavnet identificerer filen og kan være beskrivende, men erstatter ikke alt-tekst.
- Billedteksten er synlig for alle og kan give kontekst, kilde eller forklaring.
- Title-attributten er ikke en pålidelig erstatning for alt-tekst.
Alt-tekst er derfor både et tilgængelighedsspørgsmål og en del af billed-SEO. Skriv naturligt og undgå at gentage søgeord, som ikke hjælper med at forstå billedet.
Tjekliste
- Beskriver teksten den relevante mening i denne sammenhæng?
- Er rent dekorative billeder markeret med
alt=""? - Fortæller funktionelle billeder, hvad handlingen gør?
- Findes vigtig information fra diagrammer også som rigtig tekst?
- Kan du forstå siden, hvis billederne ikke bliver vist?