Så skriver du bra alternativtexter till bilder

Vad alternativtext är till för

Alternativtext är bildens textalternativ, skrivet i alt-attributet. Skärmläsare läser upp den, punktskriftsskärmar visar den, och webbläsaren visar den när bilden inte laddas. Sökmotorer kan också använda den. Webbstandarden för tillgänglighet, WCAG, kräver ett textalternativ som fyller samma funktion som bilden (framgångskriterium 1.1.1, nivå A).

Grundtanken: alternativtext är ingen bildtext, och ingen beskrivning av bilden för dess egen skull. Den säger vad bilden tillför sidan. Samma foto kan behöva olika alternativtext på två sidor, eller ingen alls.

Fyra sorters bilder

• Informativa bilder tillför betydelse: ett foto, en ikon bredvid ett telefonnummer, ett diagram. Skriv en kort alternativtext som förmedlar den betydelsen.
• Funktionella bilder sitter i länkar och knappar. Alternativtexten anger handlingen eller målet, inte bilden: ”Sök” för ett förstoringsglas, ”Skriv ut den här sidan” för en skrivarikon.
• Dekorativa bilder tillför ingenting: en ram, ett mellanrum, en utsmyckning eller en bild som bara upprepar texten bredvid. Ge dem ett tomt alt-attribut (alt="") så att skärmläsare hoppar över dem, eller lägg dem i stilmallen som bakgrund.
• Bilder av text är en sista utväg. Om du behöver en upprepar alternativtexten orden i bilden. En logotyp som inte är en länk får organisationens namn.

Så skriver du en bra alternativtext

1. 1Fråga dig varför bilden finns på sidan. Vad skulle en besökare gå miste om om den var borta?
2. 2Skriv det som är viktigt för det syftet, i en fras eller en mening.
3. 3Börja med innehållet. En skärmläsare meddelar oftast att något är en bild, så ”bild av” eller ”foto av” hjälper sällan.
4. 4Upprepa inte det som texten bredvid bilden redan säger. Om den säger allt är bilden dekorativ och får en tom alt.
5. 5Läs alternativtexten högt utan att titta på sidan. Är den begriplig på egen hand?

Vanliga misstag

• Inget alt-attribut alls. Vissa skärmläsare läser då upp filnamnet.
• Ett filnamn eller en kod som alternativtext, som ”IMG_2041.jpg”.
• Samma rad med sökord på många bilder. Alternativtext är främst till för människor.
• En lång beskrivning av en rent dekorativ bild.
• Att beskriva hur en knappbild ser ut i stället för vad den gör. En sökknapp är inte ”förstoringsglas”, den är ”Sök”.

Hur lång ska den vara?

WCAG 1.1.1 anger inget antal tecken. W3C:s råd är att hålla den kort, helst en fras eller en mening. För diagram och andra komplexa bilder, ge hela informationen som text på sidan och håll alternativtexten kort. Om du behöver mer än en mening bär bilden troligen innehåll som hör hemma i sidans text.

Kontrollera din webbplats

För att hitta bilder utan användbar alternativtext, kör den kostnadsfria kontrollen av alternativtext på en sida. För att få förslag för många bilder, använd verktyget Alternativtexter. Ett automatiskt förslag kan missa det som är viktigt på din sida, så läs varje text och ändra den när den inte passar bildens syfte.

Do4U:s verktyg hjälper till med skrivandet, inte med beslutet: om en bild är informativ, funktionell eller dekorativ vet du bäst. Kontrollera igen efter stora ändringar på din webbplats.