Bilder är en central del av innehållet på internet. Men vad händer när någon inte kan se dessa bilder? Här kommer alt-texten in i bilden – bokstavligen. Låt oss dyka ner i detta viktiga, men “lite synliga” element på webbplatsen. I den här artikeln kommer du bland annat att lära dig om alt-textens funktion, vad som skiljer den från en vanlig beskrivning och hur du kan utforma en bra alt-text.
Vad är alt-text?
Alt-text, eller alternativ text, är en osynlig text som beskriver innehållet i en bild på en webbplats. Tänk på det som en bildtext som bara dyker upp när det behövs. Men varför är alt-text egentligen nödvändig?
Föreställ dig att du surfar på nätet, och plötsligt laddas inte en bild. Kanske har bildfilen raderats av misstag. Kanske är det fel i webbplatsens kod. Oavsett orsaken laddas inte bilden. Men istället för ett tomt hål på sidan, ser du en kort beskrivning av vad bilden skulle ha varit. Det är alt-texten i aktion! Men det slutar inte där. Alt-text är också ovärderlig för:
- Personer som använder skärmläsare
- Sökmotorer som försöker förstå innehållet på din sida
- Personer som surfar med bilder avstängda för att spara data eller som använder textbaserade webbläsare
I exemplet nedan ser vi alt-texten i praktiken. Till vänster ser vi en del av en webbplats med en bild av en loggbok. Till höger ser vi samma webbplats, men här har bilden av loggboken inte laddats in. Istället visas alt-texten: “En handskriven loggbok som hålls av någon på en båt. De fyra kolumnerna är nästan helt ifyllda.” Därmed representeras bilden på sidan, även när själva bildfilen av någon anledning inte laddas. Men ännu viktigare, även när bilden laddas som den ska, kommer alt-texten att läsas upp av skärmläsare som används av synskadade för att surfa på nätet.
Tillgänglighet
I en perfekt värld kan alla njuta av webbinnehåll på lika villkor. Alt-text för oss lite närmare denna vision. Genom att lägga till meningsfull alt-text till bilder gör vi webben mer inkluderande genom att bilder blir tillgängliga även för synskadade.
Det handlar inte bara om att beskriva vad som finns i bilden, utan att förmedla bildens syfte och kontext till dem som inte kan se bilden. På så sätt kan alla visuella element som tillför mening till en webbplats bli tillgängliga, även för synskadade – oavsett om det är en illustrationsbild, en grafik eller en bild med en funktionalitet kopplad till den.
Alt-text har varit i centrum för flera rättsfall om webbtillgänglighet. Ett känt exempel är stämningen mot Sydney Organising Committee for the Olympic Games år 2000, där en blind man stämde OS-kommittén eftersom webbplatsen om OS saknade alt-text. Sådana fall har bidragit till att forma dagens standarder för webbtillgänglighet.
I takt med att internet nästan har blivit en nödvändighet i västvärlden har tillgänglighet på nätet integrerats i lagstiftning. Idag är alt-text lagstadgat för webbplatser inom offentlig sektor i de flesta västländer, och i många länder även för privata webbplatser. WCAG-standarden, som utvecklats av World Wide Web Consortium, ingår i regelverket i flera länder. Att ge användaren ett textalternativ för innehåll som inte är text är ett av många WCAG-krav som verksamheter måste följa.
Men kom ihåg att inte alla bilder behöver alt-text. Dekorativa bilder som inte tillför mening kan ha tomma alt-attribut (alt=””). Detta hjälper skärmläsare att hoppa över onödig information och fokusera på det som verkligen betyder något. Men även om alt-attributet kan stå tomt, får det inte tas bort. Om alt-attributet helt utelämnas kommer skärmläsaren istället att läsa upp URL:en till bildfilen, vilket försämrar upplevelsen för användaren.
Bilder som laddas in via CSS, till exempel bakgrundsbilder, räknas också som dekorativa och behöver inte alt-text. Det är heller inte tekniskt möjligt att ge dessa bilder alt-text.
SEO: När tillgänglighet möter synlighet
Det som är bra för tillgänglighet är ofta bra för sökmotoroptimering (SEO). Alt-text ger sökmotorer som Google extra information om vad dina bilder handlar om. Detta kan hjälpa bilderna att dyka upp i bildsökningar och kan till och med ge din webbplats en liten boost i rankningarna.
Men låt dig inte frestas att fylla alt-texten med nyckelord. Kom ihåg att det primära syftet med alt-text är tillgänglighet. En välskriven, beskrivande alt-text kommer naturligt att inkludera relevanta nyckelord utan att offra det meningsfulla innehållet.
Alt-text vs. Bildbeskrivning
I vissa publiceringslösningar kan man bli ombedd att lägga till både alt-text och en bildbeskrivning (eventuellt bildtext). Många undrar nog vad som egentligen är skillnaden mellan dessa fält.
Alt-text och bildbeskrivning har olika funktioner, även om de båda ger information om en bild. Alt-text används främst på internet, medan en bildbeskrivning kan användas i flera situationer på olika plattformar. Alt-text är för synskadade användare och SEO-ändamål, medan bildbeskrivningen kan vara synlig för alla användare och ger en mer allmän beskrivning av bilden samt eventuell extra information.
Till exempel kan alt-texten för en bild av en ägg- och baconfrukost vara: “Stekt ägg, bacon och rostat bröd.” Denna text kommer endast att läsas av skärmläsare och visas om bilden saknas. En bildbeskrivning, däremot, kan vara: “Ägg och bacon är en klassisk frukost, ofta serverad på rostat bröd med ett glas apelsinjuice och en kaffe.” Denna text kommer att vara synlig för alla och kan visas före bilden, efter bilden eller som ett lager över bilden.
Hur man skriver bra alt-text
Receptet på en bra alt-text
Nu till den viktigaste frågan: Hur skriver du egentligen en bra alt-text? Här är några nyckeltips:
- Håll det kort. 1–2 meningar är vanligtvis tillräckligt. Men det beror på vad bilden kommunicerar, och längre alt-texter kan ibland vara nödvändiga.
- Undvik att skriva “Bild av”. Detta är ett onödigt sätt att starta en alt-text. Skärmläsare talar redan om att det är en bild.
- Var specifik med typ. Säg om det till exempel är en logotyp, en illustration eller en teckning.
- Upprepa inte information. Undvik att duplicera text som redan finns i närheten av bilden. Bilden och alt-texten ska tillföra något extra.
- Inkludera viktig text. Om bilden innehåller text som är en viktig del av budskapet, till exempel om bilden är av en skylt, måste texten inkluderas. Men om det är text i bakgrunden som inte är viktig, ska den inte inkluderas i alt-texten.
- Avsluta med punkt. Punkt hjälper skärmläsare att pausa korrekt.
Här är ett exempel på en bild med en bra och en dålig alt-text:
| Bra alt-text | En glad man i ett barnrum med en glad flicka på axlarna. |
| Dålig alt-text | Bild av en man i grå t-shirt och ljusblå skjorta som har en flicka på axlarna medan han håller henne i händerna. De ser båda glada ut. I bakgrunden finns något som ser ut som ett litet tält, ljusa gardiner med solljus bakom, och en vägg. På väggen står det “LOVE YOU” och “AND BACK”, plus annan text som man inte kan se. Det finns några kuddar i kanten av bilden. |
Vad är syftet med bilden?
När du ska skriva alt-text är det viktigt att tänka på vad syftet med bilden är. Tänk på varför du valde bilden, inte bara vad den visar. Och kom ihåg, olika typer av bilder kräver olika tillvägagångssätt.
Informativa och illustrerande bilder
Informativa bilder är alla bilder som tillför mening till innehållet på en webbplats. Exempel på informativa bilder är grafer och bilder som används för att förklara något. Illustrerande bilder är bilder som tillför mening till innehållet genom att visuellt illustrera det som det skrivs om. Exempel på illustrerande bilder är porträtt av människor eller bilder av objekt som det skrivs om i en text. Alt-texten ska kunna ersätta informationen i sådana bilder.
När du ska skriva alt-text till en informativ eller illustrerande bild måste du beskriva bilden utifrån vilken kontext den används i. I bilden nedan, till exempel, kommer alt-texten att variera beroende på vilken typ av text den används för att illustrera. Föreställ dig hur olika texten hade varit i en modeblogg som fokuserar på vad modellen har på sig och en teknologiblogg som fokuserar på att han kan arbeta på surfplattan var som helst.
| Typ av text | Alt-text |
| Modeblogg | En man i en enkel och professionell outfit bestående av en ljusblå skjorta och beige byxor. |
| Teknikblogg | En man som sitter i ett fönster och ser fokuserad ut på surfplattan han håller i händerna. |
Logotyper
När du publicerar bilder av logotyper, nämn varumärket och syftet – inte hur logotypen ser ut. Att beskriva Apples logotyp som “Teckning av ett äpple som någon har tagit en tugga av” ger inte läsaren något värdefullt.
Dålig alt-text: Teckning av ett äpple som någon har tagit en tugga av Bra alt-text: Apples logotyp
Ikoner
När du publicerar ikoner, som tekniskt sett är bilder, gäller lite andra regler. Förklara åtgärden ikonen representerar – inte hur den ser ut. För en tillbakaknapp, skriv “Navigera tillbaka”, inte “En pil som pekar åt vänster”.
Dålig alt-text: Liten teckning av en skrivare Bra alt-text: Skriv ut
Länkar
Ibland kan bilder fungera som länkar till andra sidor. Då ska du beskriva vart länken leder, inte hur bilden ser ut.
Dålig alt-text: Teckning av ett hundhuvud i profil Bra alt-text: imageshop.se/integrationer/labrador
Alt-text i sociala medier
Det är också viktigt att lägga till alt-text till bilder du publicerar i sociala medier. Men hur detta görs varierar mellan plattformar:
- Facebook har automatisk alt-text, men enligt University of South Carolina är den ofta inexakt. Det är därför bäst att skriva egen. Klicka på “Redigera” och “Alternativ text” efter att du valt en bild.
- Instagram genererar en generell alt-text som du bör redigera innan publicering.
- X (tidigare Twitter): På dator klickar du på “Redigera” och fliken “ALT” när du lägger till en bild. I mobilappen trycker du på “+ALT”-ikonen.
- LinkedIn: När du valt bilden du vill publicera klickar du på “ALT” för att lägga till alt-text.
Ett vanligt problem är att det finns strikta teckenbegränsningar för alt-text i sociala medier. Det är ofta rekommenderat att hålla alt-texter korta, men ibland är längre texter nödvändiga. I sådana fall bör du börja med det mest väsentliga och bygga ut därifrån tills du når teckengränsen.
När artificiell intelligens skriver alt-text
Under de senaste åren har stora språkmodeller (Large Language Models), som ChatGPT, Googles Gemini och Anthropics Claude, revolutionerat arbetslivet. Det blir allt vanligare att se hur AI används för att effektivisera olika arbetsuppgifter – och produktion av alt-text är inget undantag.
Stora språkmodeller kan idag läsa av bilder och beskriva innehållet. Det är därför naturligt att CMS- och DAM-system kommer att utveckla funktioner för automatisk generering av alt-text. Det sparar tid och säkerställer att bilder alltid har alt-text.
Men det innebär också nya utmaningar. Även om en AI lägger till alt-text automatiskt, är det ändå människans ansvar att kontrollera att den genererade texten verkligen är meningsfull för dem som behöver den. Problemet uppstår när innehållsskapare förlitar sig blint på tekniken och glömmer sitt ansvar för kvaliteten.
Det finns inga garantier för att AI alltid skriver tillräckligt bra alt-text – särskilt eftersom kontexten spelar stor roll. Se detta exempel:
När ChatGPT blev ombedd att skriva alt-text till en bild, föreslog den: “Ett stort passagerarfartyg, ‘Kong Harald’, ligger vid kaj i Tromsø. Fartyget har en svart och orange färgkombination, och snöklädda fjäll syns i bakgrunden under en molnig himmel.”
Detta är tyvärr inte en tillräckligt bra alt-text. För det första ligger inte fartyget vid kaj i Tromsø, utan i Finnsnes. ChatGPT har sannolikt bara skrivit “Tromsø” eftersom det står “Tromsø” på fartyget. För det andra är ChatGPT för fokuserad på detaljer som inte tillför meningsfull information för användaren, som att fartyget har en svart och orange färgkombination. För det tredje saknas information som inte är uppenbart synlig på bilden, som att detta är ett Hurtigruten-fartyg.
En bättre alt-text hade varit: “Hurtigrutenfartyget ‘Kong Harald’ ligger vid kaj med snöklädda fjäll i bakgrunden.”
AI och kontext
Det är kanske orättvist att bedöma ChatGPT för att skriva en dålig alt-text, eftersom det inte är ChatGPT:s primära funktion. En specialbyggd språkmodell, framtagen för att skriva alt-texter, hade kanske gjort ett bättre jobb. Men även en specialiserad alt-text-AI skulle ha problem med kontext.
Vi har redan sett hur viktig kontext kan vara när man ska skriva alt-text. En artificiell intelligens vet inget om kontexten till varför vi publicerar bilden av Hurtigruten-fartyget. Skriver vi ett inlägg i en reseblogg? En nyhetsartikel om Hurtigruten eller om Finnsnes kaj? Eller kanske en teknisk artikel om skrovkonstruktioner på större passagerarfartyg? Allt detta är med och formar hur alt-texten bör vinklas. Och en artificiell intelligens som enbart producerar en alt-text baserad på vad som syns på bilden kan omöjligen känna till denna kontext. Här är bara några exempel på hur kontexten påverkar alt-texten till bilden av Hurtigruten-fartyget:
| Typ av text | Alt-text |
| Reseblogg | “Kong Harald” ligger vid kaj med mäktiga, snöklädda fjäll i bakgrunden. |
| Nyhetsartikel om underhållsproblem | Ett Hurtigrutenfartyg ligger vid en låg och ojämn kaj. |
| Teknisk artikel om passagerarfartyg | Hurtigrutenfartyget “Kong Harald”, sedd bakifrån, ligger vid kaj. |
Trots att artificiell intelligens kan effektivisera vardagen för innehållsproducenter, och bidra till att fler bilder får alt-text, måste människor vara medvetna om teknikens begränsningar och fortfarande ta ansvar. Alt-text ska göra webben mer tillgänglig, och därför är det viktigt att AI-genererade alt-texter dubbelkontrolleras.
Alt-text i Imageshop
I Imageshop kan du såklart lägga till alt-text när du laddar upp bilder till din bildbank, tillsammans med annan metadata. Och i många av Imageshops integrationer till olika CMS-system läggs alt-texten automatiskt in när du publicerar bilder direkt från bildbanken.
Alt-text är mer än bara en teknisk detalj eller ett fält som måste fyllas i. Det är en nyckel till en mer inkluderande och begriplig webb. När du tar dig tid att skriva bra alt-text gör du inte bara din webbplats mer synlig för sökmotorer – du gör den också mer tillgänglig och användbar för alla besökare.
Så nästa gång du lägger upp en bild, tänk på alt-texten som din chans att berätta en liten historia – en som kan göra stor skillnad för någon där ute. För i den digitala världen kan ett ord ibland vara värt mer än tusen pixlar.
