Hoppa till huvudinnehållet

Så skriver du alternativtext för klickbara bilder

Det finns olika slags bilder man av olika orsaker vill kunna länka, det vill säga göra klickbara.

Klickbara bilder används oftast för att initiera en handling, snarare än att förmedla bildens information. Alternativtexten för klickbara bilder bör därför beskriva vart länken leder eller knappens funktion – snarare än att man beskriver hur själva bilden eller knappen ser ut. För personer som använder skärmläsare är det bättre att alternativtexten blir “logga in” snarare än “blå knapp med vit text”.

Här är några exempel på vad du ska ange i alternativtext för klickbara bilder.

En länkad bild

Exempel 1 på en länkad bild

7minds logotyp

Denna logotyp består av en bild med texten 7minds. Denna klickbara bild leder till webbplatsens startsida. En bra alternativtext är ”7minds startsida” eller ”Gå till startsida 7minds.se”. Då beskriver vi vad som händer när man klickar på bilden. En mindre bra alternativtext skulle vara “logotyp” eller “7minds logotyp”.

Exempel 2 på länkade bilder i en lista

Punktlista på logotyp Apple Podcasts, Google podcasts och spotify

Dessa länkade bilder ligger på en svensk webbplats. Därför är det viktigt att alternativtexten skrivs på svenska. Länkarna leder till en annan webbplats. En bra alternativtext för respektive bild skulle kunna vara:

  • ”Lyssna på Apple Podcasts, länk till annan webbplats”
  • ”Lyssna på Google Podcasts, länk till annan webbplats”
  • ”Lyssna på Spotify, länk till annan webbplats”

Dålig alternativtext är ”Podcast hos Apple”.

Länkad bild med synlig länktext

Logotyp Göteborgs universitet

I det här exemplet innehåller både logotypen och länktexten ”Göteborgs universitet”. För att undvika upprepning kan bilden ha alternativtexten ”Gå till startsida” som en komplement till den synliga länktexten.

Ikonbild som förmedlar information i en länktext

länktext Min myndighetspost med ikonbild

I det här exemplet finns en ikonbild efter länken. Bilden informerar användaren om att länken går till en annan webbplats. Bilden har alternativtexten “Länk till annan webbplats”.

Fristående ikonbilder som är klickbara

Skärmdumpa på dela sociala medieikoner

Dessa ikoner används för att det ska bli enkelt att dela en sida. Länken leder oftast användare till deras sociala mediesidor. Därför är det viktigt att alternativtexten beskriver vart länken leder och inte bara anger namnet på ikonen.

Bra alternativtext för respektive ikon är:

  • ”Dela denna sida på Facebook”
  • ”Dela denna sida på Twitter”
  • ”Dela denna sida på Linkedin”
  • ”Skriv ut denna sida”

Mindre bra förslag på alternativtexter:

  • ”Facebook”
  • ”Twitter”
  • ”Linkedin”
  • ”Skrivare”

Vill du ha hjälp med tillgänglighet?

Vi granskar din webbplats och kravställer de åtgärder du behöver genomföra, eller utbildar din organisation i hur man skapar tillgängliga webbsidor och dokument.

Våra tjänster inom tillgänglighet

Inspireras av vårt nyhetsbrev
Anmäl dig till vårt nyhetsbrev för spännande innehåll, från vetenskapliga upptäckter till praktiska tips. Uppdatera dina kunskaper och inspireras tillsammans med oss.
Aktivera JavaScript i din webbläsare för att slutföra detta formulär.
Namn

Vi kommer använda de personuppgifter du lämnar här för att kunna kontakta dig och genomföra ett eventuellt uppdrag. Vi kommer inte lämna ut dem till någon annan. Kontakta oss om du vill att vi tar bort dina uppgifter. Läs mer hur vi hanterar personuppgifter i vår dataskyddspolicy.