Alternativtexter för bilder

Varför ska du skriva alternativtext?

Att skriva alt-text är viktigt för att göra innehållet tillgängligt för personer med framför allt synnedsättning, som behöver få innehållet uppläst. Här är några skäl till varför det är viktigt att skriva alternativtext:

• Tillgänglighet: För personer som använder skärmläsare eller andra hjälpmedel är alternativtext avgörande för att förstå innehållet. Genom att tillhandahålla beskrivande alternativtext för bilder kan du säkerställa att personer med synnedsättning kan ta del av innehållet på lika villkor som andra användare.
• Förståelse: Alternativtexten hjälper inte bara personer med funktionsnedsättningar att förstå innehållet, utan kan också vara till hjälp för personer med långsam internetuppkoppling eller tekniska problem som förhindrar bildvisning. Dessutom kan alternativtexten hjälpa till att klargöra innehållet för alla användare, oavsett om de ser bilden eller inte.
• Sökmotoroptimering: Alternativtext spelar också en roll för sökmotoroptimering (SEO). Genom att använda beskrivande och relevanta alternativtexter för bilder kan sökmotorer förstå innehållet och relevansen på din webbsida bättre. Det kan bidra till att förbättra din webbsidas synlighet och rangordning i sökresultaten.
• Lagkrav: I vissa länder, inklusive Sverige med dos-lagen (Lag (2018:1937) om tillgänglighet till digital offentlig service), finns det lagkrav som kräver att digitala offentliga tjänster ska vara tillgängliga för alla. Det innebär att alternativtext måste tillhandahållas för bilder på webbsidor inom det offentliga sektorn.

Genom att skriva alternativtext kan du alltså göra ditt innehåll tillgängligt för en bredare publik, förbättra användarupplevelsen och uppfylla lagkrav.

Vad säger lagen om alternativtexter?

Enligt Lag (2018:1937) om tillgänglighet till digital offentlig service, även känd som DOS-lagen i Sverige, samt de internationella riktlinjerna Web Content Accessibility Guidelines (WCAG) 2.1 och den kommande WCAG 2.2, är alternativtexter (alt-texter) en viktig del av digital tillgänglighet. Dessa riktlinjer och lagar säger att bilder på webbplatser och i digitala dokument som tillhandahålls av offentliga sektorns organ ska ha alternativtexter för att vara tillgängliga för personer med synnedsättningar, särskilt de som använder skärmläsare.

Tillhandahåll alternativ i form av text till allt icke-textbaserat innehåll så att det kan konverteras till format som användarna behöver, till exempel stor stil, punktskrift, tal, symboler eller enklare språk.
Utdrag ur Webbriktlinjer

WCAG 1.1.1 Beskriv med text allt innehåll som inte är text (nivå A)
WCAG 1.4.5 Använd text, inte bilder, för att visa text (nivå A)
Utdrag ur WCAG från W3C

Meningsbärande bilder ska ha alt-text

En bild anses vara meningsbärande om den bidrar till förståelsen eller budskapet på webbsidan eller i ditt dokument. Om bilden är avsedd att kommunicera något viktigt, till exempel en illustration, diagram eller fotografiskt innehåll, så anses den vara meningsbärande. Då ska bilden alltid ha en förklarande alternativtext.

Hur vet du om en bild är meningsbärande eller inte?

För att avgöra om en bild är meningsbärande eller inte, kan du ställa dig följande frågor:

• Bidrar bilden till att förklara eller förtydliga textinnehållet?
• Ger bilden viktig information som inte kan uttryckas effektivt med text?
• Är bilden central för att förstå budskapet eller syftet med webbsidan eller dokumentet?

Om svaret är ja på någon av dessa frågor, så är sannolikheten hög att bilden är meningsbärande och bör ha en lämplig alt-text för att tillhandahålla tillgänglig information till användare som inte kan se bilden.

När ska du inte skriva alt-text?

Det finns några specifika situationer där det inte är nödvändigt eller lämpligt att skriva alternativtext för bilder. Här är några exempel:

• Dekorativa bilder: Om bilden endast har en dekorativ funktion och inte tillför något viktigt till förståelsen eller budskapet på webbsidan eller ditt dokument.
• CSS-bilder: Om bilden endast visas som en del av CSS-styling, till exempel genom bakgrundsbilder eller ikoner, och inte innehåller någon viktig information eller betydelse för innehållet, kan du överväga att inte ange alternativtext. Detta gäller dock endast om innehållet fortfarande är tydligt och förståeligt utan att bilden visas.
• Textbaserade bilder: Om bilden innehåller text som redan representeras på annat sätt på webbsidan, till exempel som vanlig text eller en rubrik, kan det vara onödigt att duplicera samma information i alternativtexten. I sådana fall kan du använda en kort beskrivning eller lämna alt-attributet tomt beroende på sammanhanget.

Det är viktigt att notera att det är bäst att använda sunt förnuft och göra bedömningen baserat på hur bilden bidrar till innehållet och förståelsen av innehållet. Om du är osäker på om alternativtext är nödvändig eller inte, kan det vara bäst att inkludera en kort och beskrivande alternativtext för att säkerställa tillgänglighet för alla användare.

Hur gör du om bilden inte är meningsbärande?

Alla bilder behöver inte ha alternativtext (alt-text). Alternativtext är nödvändig för bilder som är meningsbärande och bidrar till förståelsen eller budskapet på webbsidan. Men det finns situationer där bilder kan vara dekorativa eller har ingen direkt koppling till innehållet och därmed inte kräver alternativtext.

Om bilden inte är meningsbärande, det vill säga om den inte tillför något viktigt till förståelsen eller budskapet på webbsidan eller i ditt dokument, kan du använda en tom alt-attribut för bilden. Det kan göras genom att inkludera alt=”” i HTML-koden för bilden.

Genom att använda en tom alt-attribut för bilder som inte är meningsbärande, signalerar du till användare med skärmläsare att bilden inte innehåller någon relevant information. Det hjälper också till att undvika onödig repetition av information för användare som använder skärmläsare eller har bilder inaktiverade i sin webbläsare.

Skriv din alternativtext

När du har kommit fram till att din bild är meningsbärande är det dags att skriva en bra och förklarande alternativtext. När du ska beskriva en bild kan det vara svårt att veta vad du ska fokusera på. En bild kan ju innehålla så många olika delar och detaljer. Ett bra tips du kan använda dig av är att ställa sig frågan ”Vad är syftet med bilden?” och därefter skriva din alternativtext.

Alt-texten bör vara tillräckligt kort för att vara lätt att ta till sig, men samtidigt tillräckligt informativ för att beskriva innehållet i bilden på ett meningsfullt sätt. Det finns ingen fastställd maximal längd för en alt-text, men det är generellt sett bra att hålla den under 125 tecken för att inte riskera att den blir avklippt och uppläst igen som en ny alt-text. Ett bra riktmärke är att sträva efter att hålla alt-texten inom en längd på cirka 80 till 100 tecken, alltså runt 15 ord ungefär, om möjligt. Detta hjälper till att säkerställa att alt-texten kan läsas och förstås utan att vara för lång eller överdrivet detaljerad.

Det är viktigt att komma ihåg att alternativtexten ska vara beskrivande nog för att ge användarna en klar bild av vad bilden föreställer, men samtidigt undvika att vara för långdragen eller onödig. Fokusera på att kommunicera det viktigaste och mest relevanta i bilden på ett kortfattat sätt:

• fokusera på det viktigaste som bilden ska förmedla
• håll dig till 15 ord.

Fem exempel på bra alt-texter

• Alt-text för en bild av en person som håller i en kamera: “En person håller i en kamera och tar ett foto.”
• Alt-text för en bild av en hund som springer i en park: “En hund springer glatt i en grönskande park.”
• Alt-text för en bild av ett recept på chokladkaka: “Ett recept på en läcker chokladkaka med glasyr och strössel.”
• Alt-text för en bild av en solnedgång över havet: “En vacker solnedgång med röda och orange nyanser över havet.”
• Alt-text för en bild av ett par löparskor: “Ett par löparskor med bra dämpning och grepp för löpning på olika underlag.”

När det redan finns en synlig bildtext till bilden

Har du en synlig bildtext till din bild måste denna alltid ha även en alternativtext. Genom att skriva en bildtext har du redan bestämt att bilden är meningsbärande. Skulle du då markera bilden som dekorativ, trots att den har en bildtext, blir det förvirrande för läsaren när bildtexten blir uppläst ensam.

Diagram

Ett diagram är alltid meningsbärande. Att skriva en alternativtext är då extra klurigt eftersom de ofta innehåller mycket information. När du skriver alt-text för ett diagram är det därför viktigt att fokusera på den information och budskap som diagrammet förmedlar. Här är några riktlinjer för att skriva alt-text till ett diagram:

• Identifiera diagramtypen: Beskriv vilken typ av diagram det är, till exempel stapeldiagram, cirkeldiagram eller linjediagram.
• Sammanfatta innehållet: Ge en kortfattad sammanfattning av det huvudsakliga innehållet och syftet med diagrammet. Vad försöker diagrammet visa eller kommunicera?
• Beskriv data: Om möjligt, inkludera några viktiga detaljer om de specifika datavärdena eller procentandelarna som diagrammet representerar. Du kan ange siffror, trender eller jämförelser som är relevanta för diagrammet.
• Förklara axlar och enheter: Om diagrammet har axlar eller enheter, beskriv vad de representerar. Till exempel, om det är ett tidsdiagram, ange tidsskalan på x-axeln och enheten på y-axeln.
• Använd klart och koncist språk: Håll alt-texten kort och enkel att förstå. Använd tydligt och koncist språk utan onödig teknisk jargong.

Exempel på alt-text för ett stapeldiagram som visar försäljning per månad:

• “Stapeldiagram som visar försäljning per månad för år 2021. Januari: $5000, Februari: $6000, Mars: $7500, April: $5500.”

Genom att tillhandahålla en tydlig och informativ alternativtext för diagrammet kan personer med funktionsnedsättningar få en förståelse för dess innehåll och budskap, även om de inte kan se själva diagrammet.

Ifall alt-texten inte räcker för att förklara all information på ett tydligt sätt, rekommenderar vi att du kompletterar med synlig text i direkt anslutning till diagrammet, gärna presenterat som en tabell eller liknande som kan förklara innehållet på ett annat sätt. Alla vill inte få innehåll presenterat på sätt, så det kan gynna fler personer/målgrupper.

En bild kan vara meningsbärande i en kontext men dekorativ i en annan

Om en bild är meningsbärande eller dekorativ beror på kontexten. En bild kan vara meningsbärande i ett sammanhang men dekorativ i en annat.

Vi tar ett exempel. Denna bild på tulpaner skulle vara meningsbärande i ett sammanhang om tulpaner. Men har du en text som handlar om matlagning skulle bilden högst troligen vara dekorativ. Du behöver alltid fundera på syftet med bilden.

Hur låter en alternativtext för en skärmläsaranvändare?

När en skärmläsare kommer till en bild läser den ”Grafik” följt av alternativtexten. En alternativtext ska helst inte vara längre än 15 ord och det är för att skärmläsaren pausar efter 15 ord och läser ”Grafik” igen, följt av den resterande texten.

Fler tips hittar du på sidan Digital tillgänglighet – Inspiration och tips

Se även vår sida om hur man skriver alt-texter för sociala medier