Sådan skriver du gode alt-tekster til billeder
Alt-tekst beskriver et billede for folk, der ikke kan se det. En god alt-tekst er kort, siger, hvad billedet gør på siden, og forbliver tom, når billedet kun er pynt.
Hvad alt-tekst er til
Alt-tekst er billedets tekstalternativ og står i alt-attributten. Skærmlæsere læser den højt, punktskriftsskærme viser den, og browseren viser den, når billedet ikke indlæses. Søgemaskiner kan også bruge den. Webstandarden for tilgængelighed, WCAG, kræver et tekstalternativ, der udfylder samme funktion som billedet (succeskriterium 1.1.1, niveau A).
Kernen: Alt-tekst er ikke en billedtekst og ikke en beskrivelse af billedet for dets egen skyld. Den siger, hvad billedet tilføjer siden. Det samme foto kan have brug for forskellig alt-tekst på to sider, eller slet ingen.
Fire slags billeder
- Informative billeder tilføjer mening: et foto, et ikon ved siden af et telefonnummer, et diagram. Skriv en kort alt-tekst, der formidler den mening.
- Funktionelle billeder sidder i links og knapper. Alt-teksten nævner handlingen eller målet, ikke billedet: 'Søg' for et forstørrelsesglas, 'Udskriv denne side' for et printerikon.
- Dekorative billeder tilføjer ingenting: en kant, et afstandsstykke, en snirkel eller et billede, der kun gentager teksten ved siden af. Giv dem en tom alt-attribut (alt=""), så skærmlæsere springer dem over, eller læg dem i stylesheetet som baggrund.
- Billeder af tekst er en sidste udvej. Hvis du har brug for et, gentager alt-teksten ordene i billedet. Et logo, der ikke er et link, får organisationens navn.
Sådan skriver du en god alt-tekst
- 1Spørg, hvorfor billedet er på siden. Hvad ville en besøgende gå glip af, hvis det var væk?
- 2Skriv det, der betyder noget for det formål, i en vending eller én sætning.
- 3Start med indholdet. En skærmlæser siger som regel, at noget er et billede, så 'billede af' eller 'foto af' hjælper sjældent.
- 4Gentag ikke det, teksten ved siden af billedet allerede siger. Siger den det hele, er billedet dekorativt og får en tom alt.
- 5Læs alt-teksten højt uden at se på siden. Giver den mening alene?
Typiske fejl
- Slet ingen alt-attribut. Nogle skærmlæsere læser så filnavnet op.
- Et filnavn eller en kode som alt-tekst, for eksempel 'IMG_2041.jpg'.
- Den samme række søgeord på mange billeder. Alt-tekst er først og fremmest til mennesker.
- En lang beskrivelse af et rent dekorativt billede.
- At beskrive, hvordan et knapbillede ser ud, i stedet for dets handling. En søgeknap er ikke 'forstørrelsesglas', den er 'Søg'.
Hvor lang skal den være?
WCAG 1.1.1 nævner ikke et antal tegn. W3C's råd er at holde den kort, helst en vending eller en sætning. Ved diagrammer og andre komplekse billeder giver du den fulde information som tekst på siden og holder alt-teksten kort. Har du brug for mere end en sætning, bærer billedet sandsynligvis indhold, der hører hjemme i sidens tekst.
Tjek dit website
Kør det gratis Alt-tekst-tjek på en side for at finde billeder uden en brugbar alt-tekst. Brug værktøjet Alt-tekster for at få forslag til mange billeder. Et automatisk forslag kan overse det, der betyder noget på din side, så læs hver tekst, og ret den, når den ikke passer til billedets formål.
Do4U's værktøjer hjælper med at skrive, ikke med beslutningen: Om et billede er informativt, funktionelt eller dekorativt, ved du bedst. Tjek igen efter store ændringer på dit website.
Kilder
- W3C: Understanding 1.1.1 Non-text Content (på engelsk) (www.w3.org)
- W3C WAI: Images tutorial, beslutningstræ (på engelsk) (www.w3.org)
- W3C WAI: Informative images (på engelsk) (www.w3.org)
- W3C WAI: Decorative images (på engelsk) (www.w3.org)
- W3C WAI: Functional images (på engelsk) (www.w3.org)
- W3C WAI: Images of text (på engelsk) (www.w3.org)