Hoppa till huvudinnehållet

Så skriver du alternativtext för klickbara bilder

I en digital värld där bilder spelar en allt viktigare roll, är det avgörande att din webbplats är tillgänglig för alla. Att inkludera alt-text (alternativ text) för klickbara bilder, som logotyper och knappar, är en naturlig del av arbetet med tillgänglighet.

Klickbara bilder används oftast för att initiera en handling, snarare än att förmedla bildens information. Därför bör alt-texten för klickbara bilder beskriva vart länken leder eller knappens funktion – snarare än 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.

Länkad bild

Exempel 1: En länkad logotyp

7minds logotyp

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

Exempel 2: Länkade bilder i en lista

Punktlista på logotyp Apple Podcasts, Google podcasts och spotify

De här länkade bilderna ligger på en svensk webbplats. Därför är det viktigt att alt-texten skrivs på svenska. Länkarna leder till andra webbplatser. 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”

En mindre bra alternativtext är ”Podcast hos Apple”.

Länkad bild med synlig länktext

Logotyp Göteborgs universitet

I det här exemplet innehåller bilden både logotypen och länktexten ”Göteborgs universitet”. För att undvika upprepning kan bilden ha alternativtexten ”Gå till startsidan” 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, klickbara ikonbilder

Skärmdumpa på dela sociala medieikoner

De här ikonerna används för att det ska vara enkelt att dela en sida. Länken leder oftast användaren 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 sidan på Facebook”
  • ”Dela sidan på Twitter”
  • ”Dela sidan på LinkedIn”
  • ”Skriv ut sidan”

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.