Mobil tillgänglighet: är du redo?

Alt-text, eller alternativ text, beskriver vad som kan ses i en bild. Den används för att göra din webbplats tillgänglig för alla – inklusive personer som är blinda eller synskadade.

Skärmläsare läser alt-text högt, vilket gör att användarna kan förstå vad en bild representerar. Det betyder att alt-text direkt bidrar till digital tillgänglighet och hjälper din webbplats att följa WCAG-riktlinjerna.

Alt-text förbättrar inte bara tillgängligheten – den stärker även din SEO. Tydliga beskrivningar hjälper sökmotorer att förstå vad en bild handlar om, vilket stöder både användbarhet och webbplatsens prestanda.

Kort sagt

• Alt-text gör webbplatser tillgängliga för alla

• Tydliga beskrivningar hjälper sökmotorer att bättre förstå ditt innehåll

• Alt-text är avgörande för att följa riktlinjerna för digital tillgänglighet

Hur man skriver bra alternativ text (alt-text)

Du skapar alt-text genom att lägga till en kort beskrivning av det element du vill förtydliga. Detta kan göras i koden eller via ditt CMS (Content Management System). Ett CMS låter dig hantera webbplatsinnehåll utan att kräva avancerad teknisk kunskap.

I HTML lägger du till beskrivningen med hjälp av alt-attributet inuti img-taggen. Detta talar om för användare – och hjälpmedel – vad bilden visar. Till exempel:

<img src="flower.jpg" alt="gul tulpan i vas" title="gul tulpan i vas>

Förutom alt-attributet kan du även använda titelattribut Detta ger extra information när användare håller muspekaren över ett element. Vissa skärmläsare läser titeln istället för alt-texten. Genom att använda samma beskrivning i båda säkerställer du att ingen information går förlorad.

För knappar och formulär, använd ARIA-attribut såsom aria-etikett eller aria-märkt av . Dessa beskriver ett elements funktion, även när det inte finns några visuella signaler.

Attribut

Ändamål

Exempel

alla

Beskrivning av en bild

<img alt=" Eye-Able-logotyp">

titel

Ytterligare förklaring

<img title="Eye-Able logotyp">

aria-etikett

Beskriver knappar eller formulär

<button aria-label="Skicka formulär">

Olika typer av bilder

Informativa bilder

Informativa bilder innehåller viktigt innehåll. De hjälper skärmläsare att förstå vad som visas visuellt.

Ett vanligt exempel är en logotyp. Alt-texten bör kortfattat beskriva vad logotypen visar och vilken organisation den tillhör.

<img src="logotyp.jpg" alt=" Eye-Able-logotypen som visar ett stiliserat öga "titel=" Eye-Able-logotypen som visar ett stiliserat öga .">

Undvik vaga beskrivningar som ”fin bild” eller ”foto”. Fokusera bara på information som är relevant.

En skärmläsare läser upp texten högt, så att någon som inte kan se bilden fortfarande vet att det är Eye-Able-logotypen. Detta gör webbplatsen tillgänglig och säkerställer att den följer WCAG-riktlinjerna.

Exempel:

Dåligt exempel

Bra exempel

"Bild av ett diagram"

"Stapeldiagram som visar försäljningssiffror för 2025"

"Logotyp"

”Eye-Able-logotyp med ett stiliserat öga”

"Bild"

"Porträtt av en anställd som arbetar på en bärbar dator"

Diagram och diagram

Diagram visar data och relationer. Alt-texten bör förklara vad diagrammet visar och varför det är viktigt.

• För enkla diagram, inkludera nyckeldata direkt i alt-texten.

• För komplexa diagram, beskriv syftet och hänvisa användarna till närliggande text för mer information.

Om diagrammet är komplext, beskriv bara syftet och hänvisa till texten nedan för mer information. Detta förhindrar att alt-texten blir för lång.

Exempel:
<img src="election-chart.jpg" alt="Stapeldiagram som visar valresultatet. Ytterligare förklaring följer i texten.">

Se alltid till att nyckeltalen även finns tillgängliga i text, så att alla kan ta del av informationen.

Funktionella bilder

Funktionella bilder utlöser åtgärder, såsom knappar, ikoner eller länkade logotyper. Alt-texten ska beskriva vad bilden gör , inte hur det ser ut.

Exempel:

<a href="https://eye-able.com/"> <img src="logo.jpg" alt="Gå till Eye-Able hemsida" title="Gå till Eye-Able hemsida"</a>

Alt-texten här indikerar att bilden länkar till startsidan. Logotypens utseende är inte viktigt, men dess funktion är det.

Bra exempel:

• "Starta sökning"

• "Skicka in formulär"

• "Nästa sida"

Undvik visuella beskrivningar som ”pil” eller ”förstoringsglas”.

Vanliga funktionella bilder:

Typ av bild

Fungera

Exempel på alt-text

Sökikon

Starta en sökning

"Starta sökning"

Spara-ikonen

Spara dokumentet

"Spara"

Pil till höger

Gå till nästa sida

"Nästa sida"

Hemikon

Gå till startsidan

"Hemsida"

Denna metod säkerställer att alla, inklusive skärmläsaranvändare, förstår vad som händer när de klickar på bilden.

Dekorativa bilder

Dekorativa bilder tillför inget innehåll. De finns bara där för atmosfär eller design. I det här fallet, låt alt-attributet vara tomt:

<img src="bakgrundsmönster.jpg" alt="">

Skärmläsare hoppar över dessa bilder, vilket förhindrar onödiga avbrott.

Använd dekorativa bilder medvetet. Om ett foto eller en ikon förmedlar något om innehållet ska det inte vara dekorativt. I så fall bör du lägga till en beskrivning.

Checklista för dekorativa bilder:

• Tillför bilden mening ?
  Ja → lägg till alt-text.
  Nej → lämna alt-attributet tomt.

• Är det rent dekorativt?

  Ja → använd alt="" .

• Är det en del av en knapp eller länk?

  Nej → då kan det vara dekorativt.

En tydlig åtskillnad mellan dekorativa och informativa bilder hjälper till att hålla din webbplats tillgänglig.

Genom att använda alt-text på detta sätt gör du din webbplats mer begriplig och användarvänlig för alla.

Hur man skriver effektiv alt-text

Bra alt-texter hjälper personer som inte kan se bilder att förstå innehållet. Du kan skriva en bra alt-text genom att kortfattat och tydligt beskriva vad som syns i bilden.

Bästa praxis:

• Var koncis och beskrivande

• Undvik fraser som ”bild av” eller ”foto av”

• Fokusera på det som är relevant för sammanhanget

• Håll alt-texten mellan 80–120 tecken

• Använd korrekt stavning och grammatik

Översikt över riktlinjer

Aspekt

Riktlinje

Exempel

Öppning

Undvik "bilden av"

"Blå bil på landsväg"

Längd

80–120 tecken

"Två studenter som arbetar på bärbara datorer i ett bibliotek"

Språk

Tydligt och korrekt

Inga förkortningar eller emojis

Fokus

Endast relevant kontext

Beskriv vad som är viktigt

Alt-text stöder även SEO. Sökmotorer använder den för att förstå bilder, vilket förbättrar synligheten i bildsökresultaten, utan att använda sökord.

Be om feedback från någon som använder en skärmläsare eller som inte är bekant med bilden. Deras svar visar om din beskrivning är tillräckligt tydlig. Om de förstår vad bilden visar vet du att din alt-text fungerar bra. Detta kommer att göra din webbplats mer tillgänglig och användarvänlig för alla.

Vad händer om alt-text saknas?

Utan alt-text, Skärmläsare annonserar filnamn som img123.jpg. Användare missar viktig information, och din webbplats kan bryta mot WCAG och tillgänglighetslagstiftningen.

Konsekvenser av saknad alt-text:

• Användare förstår inte innehållet

• Din webbplats uppfyller inte kraven för WCAG 2.2

• Organisationer riskerar böter enligt tillgänglighetslagar

Alt-text säkerställer lika åtkomst och efterlevnad av den europeiska tillgänglighetslagen (EAA).

Lagstiftning om digital tillgänglighet

Lagar om digital tillgänglighet kräver att organisationer gör webbplatser och appar användbara för alla, inklusive personer med funktionsnedsättning.

• WCAG riktlinjer definierar tillgänglighetsstandarder

• Från 28 juni 2025 , den Europeiska tillgänglighetslagen (EAA) gäller många digitala produkter och tjänster

• Tillämpningen övervakas av en mångfaldig grupp av (statliga) myndigheter eller institutioner.

Viktiga skyldigheter:

• Uppfyller EN 301 549

• Publicera en tillgänglighetspolicy

• Erbjud textalternativ för bilder och media

• Övervaka och underhåll tillgängligheten kontinuerligt

WCAG riktlinjer och alt-text

WCAG 2.2 förtydligar hur alt-text ska användas:

• Varje meningsfull bild behöver en beskrivande alt-text

• Dekorativa bilder använder alt=""

• Kontexten avgör vad som är relevant

• Testa regelbundet med hjälp av tillgänglighetsverktyg

Viktiga punkter från WCAG 2.2:

Riktlinje

Förklaring

Alt-texter krävs

Varje meningsfull bild får en beskrivande alt-text.

Dekorativa bilder

Använd tom alt-text ( alt="" ) om bilden inte tillför någon information.

Kontexten är viktig

Beskriv vad som är relevant för sidans innehåll.

Testa ditt innehåll

Använd en WCAG-kontroll för att verifiera att dina alt-texter uppfyller kraven.

Vanliga frågor

1. Hur lägger jag till alt-text till bilder?

Lägg till alt-attributet i HTML eller via ditt CMS med en kort och tydlig beskrivning.

2. Hur gör jag alt-texten tydlig för alla? ?

Använd ett enkelt språk, undvik onödiga detaljer och beskriv vad användarna annars skulle missa.

Bra alt-text:

• Beskriver vad någon missar om bilden inte är synlig.

• Tar hänsyn till WCAG riktlinjer för digital tillgänglighet.

• Passar in inom sidans betydelse.

3. Vilka misstag bör jag undvika?

Många lämnar alt-texten tom eller skriver meningar som är för långa. Detta gör webbplatsen mindre tillgänglig.

Undvik dessa misstag:

1. Lämna alt-texten tom

2. Att skriva generiska beskrivningar

3. Sökordsfyllning

4. Lägga till alt-text till rent dekorativa bilder

4. Hur förbättrar alt-text SEO på min webbplats?

Alt-text hjälper sökmotorer att förstå vad som finns i en bild. Detta kan förbättra din bilds ranking i Google Bilder.

Välskriven alt-text:

• Förbättrar din webbplats synlighet.

• Ger kontext till sökmotorer.

• Ökar sannolikheten att användare besöker din webbplats.

5. Påverkar saknad alt-text tillgängligheten?

Ja, utan alt-text kan skärmläsare inte beskriva vad som finns i bilden. Personer med synnedsättning går då miste om information.

Alt-text säkerställer att alla förstår samma innehåll, oavsett om de kan se det eller inte. Detta gör din webbplats mer tillgänglig och användarvänlig.

6. Hur kan jag testa min alt-text?

Använd skärmläsare som NVDA eller VoiceOver, eller kontrollera din webbplats med tillgänglighetsplattformen Eye-Able för att direkt identifiera saknade eller otydliga alt-texter.

Du kan också använda verktyg som kontrollerar tillgänglighet, till exempel vår Eye-Able-plattform. Vi visar dig snabbt och enkelt om dina alt-texter saknas eller är otydliga.