Teknik

Hur fungerar skärmläsare? Guide för utvecklare

Sarah Dev

Lead Frontend

Lästid

5 min

Publicerad

5 dec. 2025

För att bygga tillgängliga webbplatser måste du förstå hur skärmläsare fungerar. Det räcker inte att gissa – du behöver veta hur din kod faktiskt tolkas och presenteras för användaren.

En skärmläsare är inte bara text-till-tal. Det är ett komplext navigeringsverktyg som låter användare hoppa mellan rubriker, formulärfält, landmarker och länkar. Hur du strukturerar din HTML påverkar direkt användarupplevelsen.

I denna guide förklarar vi hur skärmläsare tolkar webbsidor, vilka de vanligaste är, och ger konkreta tips för att göra dina sajter kompatibla.

Vad är en skärmläsare?

En skärmläsare är ett program som läser upp innehållet på en skärm för användaren, primärt för personer med synnedsättning. Men det är mer än bara uppläsning – det är ett fullständigt gränssnitt för att navigera och interagera med digitalt innehåll.

Huvudfunktioner:

•Läser upp text, rubriker, länkar och formulärfält

•Meddelar elementtyp ('knapp', 'länk', 'textruta')

•Låter användare navigera med genvägar (hoppa till nästa rubrik, lista alla länkar)

•Annonserar statusändringar (nya fel, uppdateringar)

•Fungerar med braille-displayer för dövblinda användare

Vem använder skärmläsare?

Primärt blinda användare, men också personer med allvarlig synnedsättning, vissa kognitiva funktionsnedsättningar, och personer som temporärt inte kan se skärmen.

Populära skärmläsare

Det finns flera skärmläsare på marknaden med olika styrkor:

NVDA (NonVisual Desktop Access)

•Plattform: Windows

•Pris: Gratis, open source

•Marknadsandel: ~40% på desktop

•Bra för: Utvecklartestning (gratis, populär bland användare)

JAWS (Job Access With Speech)

•Plattform: Windows

•Pris: ~$1000/år

•Marknadsandel: ~50% bland yrkesverksamma

•Bra för: Arbetsplatsanpassning, avancerade funktioner

VoiceOver

•Plattform: macOS, iOS

•Pris: Gratis, inbyggd

•Marknadsandel: Dominerande på Apple-enheter

•Bra för: Mobiltestning, Mac-utvecklare

TalkBack

•Plattform: Android

•Pris: Gratis, inbyggd

•Bra för: Android-apptest

Hur skärmläsare tolkar sidor

Skärmläsare bygger en intern representation av sidan som kallas accessibility tree. Denna skiljer sig från DOM:en:

Accessibility tree:

•Baseras på DOM men filtreras och berikas

•Inkluderar bara tillgängliga element (inte rent dekorativa)

•Lägger till information från ARIA-attribut

•Beräknar 'accessible name' och 'role' för varje element

Exempel på hur en knapp tolkas:

<button>Skicka</button>

Skärmläsaren annonserar: 'Skicka, knapp'

Den kombinerar elementets innehåll ('Skicka') med dess roll (button → 'knapp').

Vad händer med CSS?

•display: none och visibility: hidden → Element döljs helt

•opacity: 0 → Element är osynligt men läses fortfarande

•Pseudo-element (::before, ::after med content) → Läses ofta upp

•Position utanför skärmen → Läses upp (bra för skip links)

Navigeringsmönster

Användare läser inte webbsidor linjärt. Skärmläsare erbjuder genvägar för effektiv navigation:

Vanliga genvägar (varierar per skärmläsare):

•H – Hoppa till nästa rubrik

•1-6 – Hoppa till nästa rubrik på den nivån

•K – Hoppa till nästa länk

•F – Hoppa till nästa formulärfält

•B – Hoppa till nästa knapp

•D – Hoppa till nästa landmarker

•Tab – Hoppa till nästa interaktiva element

Vad det betyder för dig:

Om dina rubriker är fel strukturerade (H1 → H3 → H2) fungerar inte rubriknavigeringen. Om formulärfält saknar labels blir F-navigering meningslös.

Listvyer:

Användare kan lista alla rubriker, länkar eller landmarker på en sida. 'Klicka här'-länkar blir obegripliga i en lista. Rubriker som inte beskriver innehållet gör listan värdelös.

Testa att lista alla rubriker eller länkar på din sida i en skärmläsare. Om listan inte ger en meningsfull översikt har du ett problem.

Tips för utvecklare

1. Använd semantisk HTML

Skärmläsare förstår native HTML-element automatiskt. En

Testa din webbplats tillgänglighet

Gratis skanning, ingen registrering

Vanliga frågor

Måste jag testa med alla skärmläsare?+

Nej, det räcker oftast med en eller två. NVDA (Windows) är gratis och populär. VoiceOver (Mac/iOS) är inbyggd och bra för mobiltestning. JAWS har störst marknadsandel bland yrkesverksamma men är dyr.

Hur börjar jag testa med skärmläsare?+

Börja med VoiceOver om du har Mac (Cmd+F5 för att starta). På Windows, ladda ner NVDA (gratis). Stäng av skärmen och försök navigera din egen sajt – det är ögonöppnande.

Varför läser skärmläsaren inte upp mitt innehåll?+

Vanliga orsaker: 1) Elementet är dolt med display:none eller aria-hidden, 2) Det saknas textalternativ (tom alt eller ingen label), 3) Dynamiskt innehåll som lagts till utan att meddela skärmläsaren.