När du lägger in en bild på en sida genom ett content management system (CMS) har du säkert sett en ruta för ”alt-text” eller ”alternativ text”. De flesta skriver väldigt dåliga alt-texter till sina bilder. Men det behöver inte vara så svårt.
Var är en alt-text
Tekniskt sett är alt-texten en liten tagg som läggs på HTML-koden för en bild. Den ser ut såhär:
<img src="http://example.com/min-bild.jpg" alt="" />
Alla kan inte se bilder. Men bilden är ofta viktig. Utan att se bilden blir texten mindre värd. För att förklara vad som är på bilden används alt-texten.
Texten visas alltså istället för en bild. När bilden av olika anledningar inte kan visas, ser besökaren den alternativa texten istället. Därav namnet.
Tre användningsområden för alt-texter
Alternativa texter för bilder behövs och används av främst tre olika anledningar:
- Människor med nedsatt syn eller andra som använder skärmläsare ska kunna förstå bilden. Därför behövs alt-texten som beskriver bilden som de annars inte kan se.
- Alt-texter visas om bilden av någon anledningen inte laddas. Det kan vara på grund av dåligt nät, eller någon annan anledning. Sidan går då fortfarande att förstå.
- Sökmotorer kan inte heller se bilder. De använder alt-texter för att förstå bilderna på sidan och kan därmed indexera bilden och din sida bättre.
Exempel på olika alt-texter
Ta hjälp av en kompis. Be henne plocka fram en bild. Slut dina ögon och låt henne beskriva bilden. Kan du föreställa dig en rimlig version av bilden utifrån beskrivningen, så är den bra.
Precis så är det när du skriver alternativa texter. Du ska kunna förstå det viktiga i bilden utan att se den.
Här är ett par exempel på alt-texter för en bild på en kopp varm choklad.
Okej: <img src="varm-choklad.jpg" alt="Varm Choklad" />
Den här alt-texten är bara ”okej”. Den är inte så beskrivande. Visserligen är det varm choklad på bilden, men det finns mer att berätta.
Bra: <img src="varm-choklad.jpg" alt="En kopp varm choklad med grädde och marshmallows på" />
Den här alt-texten är mycket bättre. Den beskriver i lagom detalj vad det är på bilden och fångar det väsentliga.
Dåligt: <img src="varm-choklad.jpg" alt="Kom och fika hos oss med en kopp varm choklad med grädde och marshmallows från vårt café. Fika, café, choklad. Centralt i staden." />
Här har vi stoppat in alldeles för mycket i alt-texten i tron om att det hjälper sökmotorerna och din webbplats ranking. Så här ska du absolut inte göra. Dels kommer det inte ge dig effekten du hoppas på, och dels är det riktigt dåligt för tillgänglighet.
Har bilden inget syfte behöver den ingen alt-text
Ibland har bilder inget syfte. Bilder kan vara enbart där för utsmyckning. Då behöver du inte skriva någon alt-text alls. Eftersom den som inte ser bilden inte missar någonting mer än lite utseende gör det ingen skillnad. Tvärtom skulle en alt-text bara förvirra.
Alt-texter för sökmotoroptimering
För sökmotoroptimering kan alt-texter också vara viktiga. Även om ditt största fokus ska vara på tillgänglighet, är det viktigt att komma ihåg att Google också ser och läser dina alt-texter.
Kom därför ihåg att ha med nyckelordet på sidan i alt-texten om det passar. Texten ska fortfarande kännas bra för en som inte ser bilden. I huvudtexten använder du ditt nyckelord ibland för att skapa ett tydligt ämne för sidan. Samma sak kan du göra i alt-texterna.
Låt det bara inte gå till överdrift som i det dåliga exemplet ovan.
Så här skriver du en bra alt-text – 5 regler
- Beskriv bilden noggrant och specifikt.
- Håll texten relativt kort. Sikta på maximalt 125 tecken.
- Använd dina nyckelord på sidan även i alt-texten. Det skapar sammanhang för både besökare och sökmotorer.
- Fokusera främst på de som inte kan se bilden.
- Skriv aldrig ”bild på” i din alt-text. Alla vet att det är en alternativ text istället för en bild. Det behöver du inte skriva.
