ALT-texter utan krångel – lär dig grunderna

Vad är en ALT-text?

ALT står för ”alternativ text” och är en beskrivning av en bild (på webben/sociala medier/digitala dokument) som läses upp av skärmläsare för användare som inte kan se bilden. Den visas också om bilden inte laddas in korrekt. ALT-texter hjälper alltså både människor och sökmotorer att förstå bildens innehåll.

Varför är ALT-texter viktiga?

Tillgänglighet – ALT-texter gör ditt innehåll tillgängligt för personer med synnedsättning.

Sökmotoroptimering (SEO) – Sökmotorer läser ALT-texter för att förstå vad en sida handlar om.

Bättre användarupplevelse – Om bilden inte laddas på en webbsida visas istället ALT-texten.

Behöver alla bilder en ALT-text?

Nej, men många gör det. Här är de vanligaste fallen där en ALT-text ska finnas med enligt tillgänglighetsstandarden WCAG:

Om bilden innehåller text som inte återges någon annanstans – T.ex. ett erbjudande, en skylt eller ett budskap i en bild. ALT-texten ska då återge den texten.

Om bilden fungerar som en länk eller knapp – ALT-texten ska då beskriva vad som händer om man klickar på bilden, inte bara vad den föreställer. T.ex. ”Gå till kontaktsidan.”

Om bilden tillför viktig information till innehållet – T.ex. ett foto i en artikel, en illustration i en instruktionsguide eller en ikon som visar något betydelsefullt. Då bör ALT-texten beskriva vad bilden visar, i sitt sammanhang.

Om bilden är ett diagram/graf – ALT-texten ska då ge en kort summering, t.ex. ”Stapeldiagram över antal användare per månad.”
MEN! När det gäller just diagram och grafer rekommenderas det att du beskriver innehållet mer utförligt i den omgivande texten – eller länkar till en separat beskrivning. Här räcker det alltså inte att bara lägga in bilden, om innehållet ska vara tillgängligt vill säga.

Vill du göra det enkelt?
Fråga dig själv ”skulle någon gå miste om viktig information om bilden inte syntes?”. Om svaret är ja – ja då behövs en ALT-text.

5 saker att tänka på när du skriver en ALT-text

1. Beskriv vad bilden faktiskt föreställer – Föreställ dig att du beskriver bilden för någon som inte kan se den, vad säger du då?
2. Var specifik men kortfattad – ”Röd cykel på landsväg” är bättre än bara ”cykel”. Tänk tydligt och konkret, med undvik onödig information.
3. Undvik ”bild av…” eller ”foto av…” – Det är underförstått.
4. Tänk på sammanhanget – Vad är bildens syfte i innehållet? Det påverkar hur du ska beskriva den.
5. Använd nyckelord, men undvik ”keyword stuffing” – En ALT-text kan hjälpa SEO, men den ska i första hand vara för människor, inte bara sökmotorer.

Så här kan en ALT-text se ut

Att avgöra vad som är relevant att nämna i en ALT-text kan vara svårt, så låt oss visa med ett exempel. Här nedan är en verklig bild från vår vardag. Bilden föreställer Per, Fia, Martin och Helena som står i en ljus miljö och tittar ner på två pappersark som ligger på ett träbord. De är glada, ler och pekar på papprena. Om vi nu frågar oss, är all denna information relevant att nämna i dess ALT-text? Svaret är nej, informationen är för utförlig och innehåller information som inte tillför något. Miljön, ansiktsuttryck och gester är ej relevanta i sammanhanget, och i just detta fallet är det inte heller viktigt att namnge personerna. Därför utformar vi ALT-texten enligt följande:

”Fyra personer står framför ett bord och tittar på papper som ligger på bordet.”

Kortfattat, men texten ger ändå en person som inte kan se bilden en tydlig bild av vad fotot föreställer.

Genom att ge dina bilder rätt ALT-texter gör du både webben mer tillgänglig och din egen kommunikation starkare. En liten insats – med stor effekt.
Har du frågor om tillgänglig design? Hör av dig!