Förklaring till varför en bild visas!
Alternativtext (Alt-text) är avsedd att förmedla bildens ”varför” i förhållande till innehållet i ett dokument eller på en webbsida. Alt-text är en text som beskriver innehållet i bilder för sökmotorn. Genom att arbeta med bra alt-texter förbättras webbplatsens SEO och användarvänlighet. Användarvänlighet har med tiden blivit en allt viktigare rankingfaktor för sökmotorer och du bör absolut anstränga dig med att skapa bra Alt-texter.
Alt-text är ett attribut för HTML-bildtaggen. CMS-plattformar som WordPress hanterar koden för själva bildtaggen. Det du själv måste göra är att beskriva bildens information med ord och avgöra om en bild överhuvudtaget bär på relevant information.
Alt-texten är en text som du lägger in i koden på din webbplats för att beskriva vad en bild föreställer. För att se om en bild har en alt-text kan du låta markören stå stilla över en bild. Om bilden har en alt-text visas texten efter några sekunder.
Varför används Alt-text?
Googles sökresultat ger nästan lika många bildträffar som textträffar. Det är därför viktigt att du lägger till alt-texter för alla bilder på din webbplats så att de syns i både bildsökresultat och textresultat.
Alt-texter används huvudsakligen av följande tre skäl:
- Stöd till synskadade
- Sökmotoroptimering
- Teknisk lösning
Stöd till synskadade
De som har nedsatt syn och behöver använda en skärmläsare måste också kunna förstå bilder och grafiskt innehåll. En programvara läser av 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 så att personer med nedsatt syn lättare kan ta till sig informationen på webbplatsen.
Alt-text för sökmotoroptimering
Sökmotorer är fortfarande dåliga på att läsa bilder. De använder alt-texterna för att förstå bilderna på sidan och kan därmed indexera dem bättre, vilket förbättrar webbplatsens SEO. Sökmotorer avgör vad som finns i bilden utifrån den textinformation som ges i bl.a. filnamnet och Alt-texten. Det blir därmed ett sätt att tydliggöra för sökmotorn vad som finns i bilden och skapa relevans i en text, dvs. förbättra SEO. Vid bildsökningar har Alt-texten extra stor betydelse.
Alt-texten är något som brukar kallas en direkt rankingfaktor. Det innebär att de ord du väljer att använda i din alt-text direkt påverkar vilka sökningar Google väljer att visa din sida på i sökresultatet, dvs. Serp. Google läser nämligen innehållet i alt-texten och tar med det i den övergripande bedömningen av din sida. Med hjälp av strategiskt utformade alt-texter syns du inte bara i vanliga sökresultat, utan din bild visas också högre upp i Googles bildsökning.
Kom ihåg att det inte bara är alt-texten som påverkar positionen i bildsökningar. Förutom detta attribut kan både bildtext, sammanhang och webbplatsens övergripande SEO påverka hur högt den visas i bildsökningar.
Teknisk lösning
Om bilden av någon anledning inte kan visas, kommer alt-texten att visas istället. Det är också därifrån den fått sitt namn, dvs ”Ett Alternativ till Bilden”. På så sätt kan besökaren åtminstone se att en bild var avsedd att finnas på en viss plats och vad bilden föreställer.
Rekommendationer för alt-text
Inkludera dina nyckelord
För sökmotoroptimering är alt-texter viktiga. Även om ditt huvudfokus bör ligga på tillgänglighet, är det viktigt att komma ihåg att Google också indexerar och ”läser” dina alt-texter.
Kom därför ihåg att inkludera nyckelordet på sidan i alt-texten om det är lämpligt. Inkludera därför sökordet i en mening som beskriver bilden i sin helhet. Texten ska fortfarande kännas bra för den som inte ser bilden. I brödtexten använder du ibland ditt nyckelord för att skapa ett tydligt ämne för sidan. Du kan göra samma sak i alt-texterna.
Kom ihåg att arbeta med synonymer och inte hålla dig för hårt till ett specifikt sökord.
Var dock försiktig med användningen av nyckelord. Inkludera inte nyckelordet för mer än 2/3 av de bilder du använder på din webbplats. Google kan straffa din ranking om du ägnar dig åt så kallad keyword stuffing, dvs. om det uppfattas som att du överdriver användningen av dina sökord.
Samma funktion som bilden
En alt-text bör så långt som möjligt vara ett likvärdigt alternativ till själva bilden. Den ska alltså inte i första hand beskriva bilden som sådan utan fylla samma funktion. Fråga dig själv om du raderar bilden, kommer någon information att gå förlorad? Om svaret är ja, måste bilden ha en alternativ text.
Ingen alt-text alls
Om bilden inte har något syfte behöver den ingen alt-text. I vissa fall har en bild endast en estetisk funktion på en webbplats och tillför inte någon funktion, bilden finns på sidan endast för dekoration.
När texten läses med en webbläsare är alt-texten på dessa bilder inget annat än distraherande, alt-texten är bara förvirrande. Om du utelämnar attributet blir det lättare för både Google och bildläsarna att hantera texten.
Alla bilder måste dock ha en alt-text, antingen med text eller tom. För en tom alt-text skriver du alt=”” i HTML. Skriv ordet tom i det avsedda fältet om ditt CMS-verktyg har ett mediebibliotek. Att helt utelämna alt-text orsakar problem eftersom många webbläsare istället kommer att läsa upp bildens URL.
Bilden innehåller text
Bilder kan ibland innehålla text. Om bilden har ett textinnehåll bör dess alt-text säga samma sak. Särskilt viktigt att tänka på är t.ex. när diagram och figurer används för att förmedla information som inte finns i huvudtexten.
Texten har en funktion
Ange funktionen i Alt-texten. Genom att klicka på bilden kan utskrift ske eller besökaren kan ledas till ett kontaktformulär. Det finns alltså en tydlig skillnad mellan vad bilden visar och dess funktion. Ett förstoringsglas används vanligtvis för att visa en sökfunktion på en webbplats. Om det är möjligt att göra en intern sökning genom att klicka på förstoringsglaset, bör det ha ”Sök” som Alt-text och alltså inte ”Litet förstoringsglas med svart handtag”.
bilden är en länk
Förklara vart länken går eftersom detta är relevant för den person (och Google) som inte ser bildens funktion.
bilden har en unik text
Om bilden har en unik text, som inte presenteras i textform i närheten, ska denna text anges som Alt-text. Utgå från syftet med bilden och användarens behov.
När bilden visas flera gånger
Om bilden förekommer flera gånger på samma sida behöver endast attributet anges vid det första tillfället, förutsatt att bilden inte har någon specifik funktion.
Allmänna råd
- Alt-texten är beroende av sammanhanget och hur bilden används på den aktuella sidan. Samma bild kan därför ha olika alt-texter beroende på sammanhanget.
- Bädda inte in innehållet i en text som inte berättar vad bilden föreställer. Håll nere antalet ord som ”bilden representerar”, ”tryck på knappen”, etc. Skärmläsare talar ändå om för sina användare vad en bild eller en länk är, så de extra orden blir bara irriterande.
- Om det inte finns något meningsfullt att säga om bilden ska du inte säga något om den. Bilder som har en rent dekorativ funktion klarar sig ofta bra utan alt-text.
- Alla bilder måste ha alt-text, antingen med text eller tomt. Att utelämna alt-text orsakar problem eftersom många skärmläsare istället kommer att läsa upp URL:en till bilden.
- Använd bindestreck mellan ord istället för mellanslag i filnamnet. Skriv t.ex. så här: ”helst-skriven-såhär.jpg”. Ersätt det svenska å ä ö med motsvarande vokal utan tecken ovanför.
- Om bilden ligger nära innehåll som beskriver innehållet i bilden bör du ge den en tom alt-tagg för att undvika redundans, det vill säga att bildinformationen läses upp två gånger.
- Var kortfattad. Försök att inte skriva längre än 80-120 tecken och absolut inte mer än 150 tecken. Det finns ingen strikt regel för hur många tecken attributet får innehålla. Håll det kort och koncist eftersom bilden bara ska vara en del av texten, inte ersätta texten.
- Eftersom alt-texten läses högt tillsammans med annan text bör den ha normal interpunktion.
- Välj detaljnivå på texten baserat på användarnas behov, olika användare kan behöva olika alt-texter.
- Undvik upprepningar genom att lyssna på sidan.
Var du ska ange Alt-texten
CSS (Cascading Style Sheets)
Oavsett vilket CSS-system som används finns det en ruta där Alt-texten anges. Den nås vanligtvis via mediabiblioteket eller när bilden infogas.
Den text som anges i rutan sparas automatiskt och kommer att vara densamma varje gång bilden infogas. Om Alt-texten ändras kommer bilder som infogas efteråt att ha den nya Alt-texten.
Alt-text ska alltid anges när bilder infogas.
Eftersom samma bild kan ha olika funktioner och anges i olika sammanhang kan Alt-texten behöva varieras mellan de olika sidor som bilden finns på. Det är inte alltid som förändringar behöver ske, men det är en fördel att se över attributet innan bilden sätts in så att bilden verkligen fyller sin funktion.
HTML
I alla CSS-system är det möjligt att växla till HTML-läge för att se koden. I kodningen ser Alt-texten ut på följande sätt:
alt=”Blå bil med takräcken”/>
Efter bildkällan anges alltså ”alt=Alt-text”. Därefter kan även andra attribut läggas till bilden. Om bilden även har en bildtext är det en fördel om denna anges före Alt-texten. Detta för att denna information ska läsas först av skärmläsare och Google.
Skriva in alt-text i WordPress
I WordPress har du möjlighet att lägga till en titel och ett alt-attribut när du laddar upp en bild. Standardbeteendet är att använda bildens filnamn som title-attribut och kopiera det till alt-attributet om det lämnas tomt. Detta är visserligen bättre än att lämna alt-attributet tomt, men det anses inte vara bästa praxis. Jag rekommenderar starkt att du tar dig tid att skapa en beskrivande alt-text för varje bild som du lägger till i ett inlägg. På så sätt kan både användare och sökmotorer dra nytta av den ytterligare kontext som tillhandahålls.
- Logga in på din WordPress-webbplats. När du är inloggad kommer du till din ”Dashboard”.
- Öppna inlägget eller sidan för att redigera innehållet.
- Klicka på blocket Bild för att öppna inställningarna för Bild på blockfliken i sidofältet. Bildinställningarna visas på fliken Block i sidofältet.
- Lägg till alt-text och title-attribut.
- Klicka på knappen ”Uppdatera” i det övre högra hörnet.
Slutsats
Alternativ text är en utmärkt möjlighet att förbättra tillgängligheten för icke-textelement på webben.
Alt-attribut för bilder används för att förklara innehållet i bilder, vilket gör det möjligt för skärmläsare att förmedla informationen till användarna på ett effektivt sätt. Dessutom använder sökmotorerna dessa taggar för att förstå hur bilderna förhåller sig till materialet på sidan.
Om alt-texten används på rätt sätt kan den också hjälpa till att ranka för relevanta bildsökfrågor.
Det är dock viktigt att undvika redundans och endast lägga till alt-text när den tillför ett värde som inte redan finns. Det är också viktigt att notera att tillägg av alt-text till bilder på en webbplats inte garanterar en högre ranking i sökmotorresultaten.
