Alt-texter för funktionella bilder

En datorskärm. Det finns text och ett stort frågetecken på skärmen.
Bilden har skapats med Adobes AI-applikation Firefly. 

På nätet kan bilder eller symboler användas för att starta funktioner. En bild kan vara en länk till en annan webbsida, en bild kan vara en knapp, eller en symbol kan ge ytterligare information efter en länk. Vilken alternativtext, det vill säga alt-text, är lämplig i ett sådant fall? Alt-texter är avsedda för användare av skärmläsare, så det är också bra att tänka på vilken annan information en sådan användrare får.

När en bild fungerar som länk

Skärmläsaren känner igen att det är en länk och meddelar det till användaren. I alt-texten för en bild som fungerar som länk behöver ordet ”länk” därför inte nämnas. Det väsentliga är att tala om vart länken leder.

Om länken består enbart av en bild utan någon förklarande text, är det viktigt att använda en bild som är lätt att förstå. På webbplatser finns det till exempel ofta en bild av ett hus som representerar en länk till startsidan. I ett sådant fall beskriver alt-texten inte huset, utan vart länken leder, det vill säga till startsidan.

Ett vit hus med svart bakgrund
Exempel 1: Bild som används på webbplatsen Celianet.fi med alt-texten ”Till Celianets startsida”.

Fotografier bör vanligtvis inte användas som länkar utan förklarande, synlig text. Användare kan ha svårt att upptäcka att bilden är en länk, och det kan vara svårt att förstå vart länken leder. Fotot nedan fungerar som en länk till Wikipedia-artikeln om Helen Keller. Om bilden förekom i ett sammanhang där Wikipedia inte nämns i texten, skulle användarna inte veta vart länken leder. Därför skulle en lämplig alt-text för bilden vara enbart ”Helen Keller” – Wikipedia nämns alltså inte heller i alt-texten.

Helen Keller.

Exempel 2: Bild på Helen Keller som länk utan text. 
Bildkälla: Los Angeles Times, restored by User: Rhododendrites – Los Angeles Times photographic archive, UCLA Library, CC BY 4.0.

För att det ska vara lätt för alla användare att förstå vart en bildlänk leder, rekommenderas det att lägga en tydlig länktext i anslutning till bilden och placera både bilden och texten inom samma länk. I så fall lämnas alt-texten tom (alt=””). Under bilden av Helen Keller placeras alltså texten ”Wikipedia: Helen Keller”. Då meddelar skärmläsaren att det rör sig om en länk och presenterar länktexten. Skärmläsaren anger inte att det finns en bild i innehållet, eftersom alt-texten är tom.


Wikipedia: Helen Keller

Ikoner i länkar

I slutet av länktexter kan en ikon användas för att kort ange att länken öppnar ett nytt fönster eller att länkens mål finns på en annan webbplats. Den information som ikonen ger måste också förmedlas till användare av skärmläsare. 

I exemplet nedan finns en skärmbild från webbplatsen Celia.fi, där länktexten är ”Lag om Tillgänglighetsbiblioteket Celia”. I slutet av länktexten finns en ikon där en pil pekar snett uppåt åt höger från en liten rektangel. Ikonen signalerar att länken öppnas ir ett nytt fönster. Alt-texten för ikonen är ”öppnas i ett nytt fönster”. 

Bilden beskrivs ovan.
Exempel 4: Länktext med ikon som anger att länken öppnas i ett nytt fönster.

Bilder i knappar 

Om en knapp (button-element) på en webbsida enbart består av en bild, måste bildens betydelse förmedlas till dem som använder skärmläsare. Till exempel kan alt-texten för bilden av ett förstoringsglas på en sökknapp vara ”Sök”. Skärmläsare meddelar att det rör sig om en knapp, vilket gör att användaren förstår att man måste trycka på knappen för att utföra funktionen. 

Mer information

Mer information, instruktioner och exempel om funktionella bilder och deras alttexter finns på följande engelskspråkiga sidor: 

Denna artikel publicerades första gången på finska januari 2024.

Senaste blogginläggen

Tietokoneen näytöllä on tekstiä ja keskellä iso kuva, jossa on kysymysmerkki.

Yleinen | 05.11.2024

Alt-texter för funktionella bilder

Nappikuulokkeet tietokoneen näppäimistöllä.

Yleinen | 11.10.2024

Bra att veta om skärmläsare

Skrämläsare läser upp innehållet på en dators eller smart enhets...