Vad innebär alt-text för bilder?

Alt-text, som är en förkortning för alternerande text, är en text som beskriver bilders innehåll för sökmotorn. Genom att arbeta med bra Alt-texter förbättras webbplatsens SEO och användarvänlighet. Och just användarvänlighet har med tiden blivit en allt viktigare rankingfaktor.

När man kollar på det innehåll som rankar bäst på Google för olika sökord så är det nästan uteslutande sidor som innehåller mycket bilder och videos.

Varför används alt-texter?

Alt-texten har flera syften och är en beskrivande text som anger vad bilden visar.

• Visas istället för bild

Skulle bilden, av någon anledning, inte kunna visas kommer alt-texten istället att presenteras. Det är även därifrån den fått sitt namn. Ett alternativ mot bilden. Därmed kan besökaren ialalfall se att det var tänkt att en bild skulle vara på en specifik plats samt vad bilden föreställer.

• Stöd vid skärmläsare (nedsatt syn)

Personer med nedsatt syn kan använda skärmläsare som hjälpmedel. En mjukvara som läser upp vad som finns på skärmen i form av rubriker, text, knappar och bilder. När en skärmläsare kommer till en bild läses bildens Alt-text upp. Genom att ha användarvänliga Alt-texter kommer de med nedsatt syn lättare kunna ta till sig informationen på hemsidan.

• Förbättrad SEO

Google kan inte se bilder utan avgör vad som är på bilden utifrån den textinformation som ges i bland annat filnamn och Alt-text. Det blir därmed ett sätt att tydliggöra för sökmotorn vad som är på bilden och skapa relevans i en text, dvs. förbättra SEO. Inom bildsök (vilket sker i stor omfattning inom vissa sök) väger Alt-texten extra tungt.

Hur användarvänlig är din webbplats?

Håll in Ctrl+Alt+Enter för att aktivera skärmläsaren i Windows 10. Navigera till din webbplats och lyssna på vad som läses upp. Hur användarvänlig blir den om alla element måste läsas upp? Hur tydlig är Alt-texten på bilderna?

Var anges Alt-texten?

CSS

Oavsett vilket CSS-system som används finns en ruta där Alt-texten anges. Den brukar nås via mediabiblioteket eller när bilden infogas. Här visas exempel från världens vanligaste CSS-system, dvs. World Press.

• Via mediabiblioteket

Ovan visas en rosa ballerinadräkt som marknadsförs av en E-butik. Längst upp finns rutan för Alternerande text.

• När bilden infogas

Det andra alternativet är att ange Alt-texten i samband med att bilden infogas på en sida. I detta fall benämns det som Alt text högst upp till höger vid bildinformationen.

Den text som anges i rutan kommer automatiskt att sparas och vara samma varje gång som bilden infogas. Byts Alt-texten kommer bilder som infogas därefter ha den nya Alt-texten.

Alt-text bör alltid anges när bilder infogas

Eftersom samma bild kan ha olika funktion och anges i olika sammanhang kan Alt-texten behöva varieras mellan de olika sidorna som bilden ligger på. Det är inte alltid som ändringar behöver ske men det är fördelaktigt att se över attributet innan bilden infogas så att bilden verkligen fyller sin funktion.

HTML

I alla CSS-system går det att växla till HTML-läge för att se koden. I kodningen ser Alt-texten ut som följande:

alt=”Grå manchestersoffa med kuddar”/>

Efter bildkällan anges alltså ”alt=Alt-texten”. Därefter kan det även komma andra attribut till bilden. Har bilden även en bildtext finns en fördel att denna anges före Alt-texten. Detta så att denna information läses först av skärmläsare och Google.

Exmepel på bra alt-text

En bra alt-text är en kortfattad text som tydligt beskriver vad bilden visar. Det är självklart omöjligt att förklara bilden exakt på en kort mening men ju kärnfullare desto bättre. Dräkten ovan skulle kunna ha följande alternativ:

Rosa tylldräkt

Rosa ballerinadräkt

Rosa ballerinadräkt för barn – med disneyprinssessor

Alla texter beskriver produkten men den sista anger tydligast vad för slags dräkt det handlar om.

Ska ange bilden – inget annat

Alt-texten ska enbart fokusera på vad som är på bilden, inte sammanhang eller tolkningar av innehållet.

• Fel

”Rosa tillkjol som passar till barnkalaset”

• Rätt

”Rosa tyllkjol med vita paljetter”

Med sökordet

Eftersom Alt-texten (i likhet med allt på webbplatsen) påverkar dess SEO bör sökordet vara med i det fall som målet är att sidan ska ranka på ett specifikt ord. Däremot bör detta alltid ske i en mening som beskriver bilden i sin helhet. Att enbart skriva ”Tyllkjol” blir därmed fel då det knappast beskriver bilden tillräckligt. Dessutom skulle detta innebära att väldigt många bilder på sidan skulle få samma Alt-text. Kom ihåg att jobba med synonymer och inte fasta för hårt till ett enda specifikt sökord.

Ingen text alls – Dekorativ bild

I vissa fall är bästa alternativet att inte ha någon Alt-text alls. Detta då en bild enbart har en estetisk funktion på en hemsida och inte tillför någon funktion. Det kan exempelvis vara en smal banner för att skapa styckesindelningar alternativt små figurer som ”skapar luft” i texten.

När texten läses med en skärmläsare blir Alt-texter på dessa bilder enbart störande. Genom att utelämna attributet blir det enklare för både Google och bildläsarna att hantera texten.

 Om bilden innehåller text

Bilder och bildcollage kan ibland innefatta text. Om denna text ska användas i Alt-texten eller inte beror på bildens funktion.

• Estetiskt inslag – Se dekorativ bild ovan
• Informationen anges även i närliggande text – Se dekorativ bild ovan
• Texten har funktion– Ange funktionen i Alt-texten. Genom att klicka på bilden kanske utskrift sker eller besökaren hänvisas till ett kontaktformulär. Här finns alltså en tydlig skillnad på vad bilden visar och dess funktion. Ett förstoringsglas brukar användas för att visa en Sök-funktion på en webbplats. Går det att genomföra en intern sökning genom att klicka på förstoringsglaset bör den ha ”Sök” som Alt-text och alltså inte ”Litet förstoringsglas med svart handtag”.
• Bilden är en länk – Förklara var länken går eftersom detta är relevant för den person (och Google) som inte ser bildens funktion.
• Bilden har unik text – Om bilden har unik text, som inte presenteras i textform i närheten, ska denna text anges som Alt-text. Det kan exempelvis vara en banner med texten ”Welcome to our blog” vilket därmed ska användas som attribut.

Utgå från syftet med bilden och användarens behov

Inte inbäddad i formulering

Eftersom bildläsarna anger att det är en bild behöver inte detta anges Alt-texten. Detsamma gäller länkar och andra funktioner.

• FEL

Bild på en grå yllestrumpa ELLER länk till Aftonbladet.se

• Rätt

Grå yllestrumpa ELLER Aftonbladet.se

80 – 120 tecken

Det finns ingen strikt regel för hur många tecken attributet kan vara på. Men för att hålla det användarvänligt brukar 80 – 120 eller 150 nämnas som riktmärke. Håll det kort och sammanfattande då bilden enbart ska vara ett element i texten, inte ersätta texten.

När samma bild förekommer flera gånger

Förekommer bilden flera gånger på samma sida? Förutsatt att bilden inte har någon specifik funktion behöver bara attributet anges vid första tillfället.

Vanliga frågor om alt texter