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
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
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
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
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
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.