HTML5-bildtaggen (<img>) har ett attribut som krävs för att få en sida validerad enligt HTML5-kodstandard, som är: ”alt”-attributet.

Detta är bra att ha med för att dels få sidan validerad – men även för två andra syften, nämligen: talsyntes och sökmotoroptimering.

Bilddata för indexeringsrobotar

För bilder på webbsidor så gäller samma sak för indexeringsrobotar såväl som blinda personer i stort sett (nästan) – de är väldigt intet-sägande såvida du inte specifikt får dina bilder att tala om för de personer utan möjlighet att se dem – just vad bilderna föreställer. Och detta kan man då göra med hjälp av ”alt”-attributet som låter dig som utvecklare ange en alternativ text till bilden utifall den inte skulle kunna laddas in, visas eller om besökaren på sidan använder talsyntes t ex.

Om ni har möjlighet och SEO är av vikt – föredra ren text över bilder med text!

När du skriver värdena till dina ”alt”-attribut för bilderna så kan det vara värt att hålla detta i åtanke. Detta är också en av anledningarna att jag själv har börjat föredra att använda HTML-Text + CSS för mina logotyper på mina webbplatser, för sökmotoroptimeringsskäl, då ”alt”-attributet är enda möjligheten att sökmotoroptimera en bild. Jag brukar sätta mina textlogotyper i sådana fall som <h1> taggar för att ge störst ”rubriktexts-vikt” sökmotormässigt på sidan. Alla andra rubriker efter logotype-rubriken följer sen med <h2> som ”underrubriker” till själva sidans logotype. Vissa kanske anser detta fel, andra kanske tycker det är OK, det funkar för mig så jag kör på det tills någon annan ger mig anledning att överväga annat tillvägagångssätt :)

Alternativ text visas vid misslyckad laddning av bild

Ni kan själva testa detta genom att med vilje, ange en felaktig src-url för bilden på er sida, har ni angett bredd och höjd då, så kommer ni i vissa webbläsare att kunna se en ruta med en tunn kantlinje med just de dimensionerna ni hade angivit för bilden, tillsammans med er ”alt”-attributs textvärde inuti rutan där bilden egentligen skulle visats.

Alternativ text hjälper blinda bilda sig en uppfattning om bilder på webben

Alternativ texten som anges till bilder är det enda hjälpmedlet blinda personer har för att förstå vad bilden ni visar på er webbsida föreställer. Utan alternativ texts attributvärdet så har de lika mycket att gå på, som om bilden inte existerat överhuvudtaget.

Alternativ text för bilder läses av indexeringsrobotar som innehåll

Alternativ texten som ni angivit till era bilder används som sagt inte bara för att visa ”fallback-innehåll” för utifall bild inte kunde visas, eller bidra med talsyntes kontext för blinda som besöker ens webbsida, utan även indexeringsrobotarna som crawlar igenom er sida i jakt på innehåll att indexera till sökmotorjättarna kommer att läsa och indexera alternativ texten för bilderna – då även indexeringsrobotarna har svårt för att tolka bilddata.

Sammanfattning – Alt text värt att ha i åtanke av många anledningar

Detta innebär att du bör skriva din alternativ-text (alt-attribut) med alla dessa 3 faktorerna i åtanke(!) – texten skall vara anpassad att beskriva bilden för blinda personer och deras talsyntes som då kommer att läsa upp bild-alternativ-texten (speciellt viktigt om du vet att din sida kommer ha blinda besökare, kan anses vara minst lika viktigt trots att ni siktar in ert innehåll på seende individer – som en artighetsgest till alla som är blinda och surfar nätet som alla andra, det är trots allt inte så mycket jobb att lägga till en alt text), såväl som för indexerings robotarna så de får ytterligare innehåll som kan indexeras till sökmotorerna och ytterligare förbättra sökmotoroptimeringen av din sida. Samt anpassa texten som substitut utifall bild skulle misslyckas att laddas in på din webbsida.