Vad är en skärmläsare?
En skärmläsare är ett hjälpmedelsprogram som tolkar innehåll på skärmen och presenterar det via tal eller punktskrift. Skärmläsare används främst av personer med synnedsättning, men även av personer med lässvårigheter och kognitiva funktionsnedsättningar.
De vanligaste skärmläsarna är:
- NVDA (Windows) – Gratis, öppen källkod, den mest använda i Sverige
- JAWS (Windows) – Kommersiell, populär i arbetslivet
- VoiceOver (macOS/iOS) – Inbyggd i alla Apple-enheter
- TalkBack (Android) – Inbyggd i Android-enheter
Hur tolkar skärmläsaren en webbsida?
När en skärmläsare läser en webbsida använder den webbläsarens tillgänglighetsträd (accessibility tree). Tillgänglighetsträdet är en förenklad representation av DOM-trädet som enbart innehåller information relevant för hjälpmedel: roller, namn, tillstånd och relationer.
Processen fungerar så här:
- Webbläsaren bygger DOM-trädet från HTML-koden
- Webbläsaren skapar ett tillgänglighetsträd baserat på DOM-strukturen, ARIA-attribut och CSS
- Skärmläsaren läser tillgänglighetsträdet och presenterar informationen för användaren
Det betyder att det som finns i HTML avgör vad skärmläsaren kan förmedla. Visuell formatering med CSS har liten eller ingen påverkan – en <div> som ser ut som en rubrik tolkas fortfarande som en generisk behållare.
Så navigerar användare med skärmläsare
Skärmläsaranvändare läser sällan en sida linjärt från topp till bott. Istället använder de olika navigeringstekniker:
Rubriknavigering
Användare trycker H-tangenten för att hoppa mellan rubriker. Det gör rubrikstrukturen till en innehållsförteckning. Rubriker som hoppar över nivåer (H1 → H3) eller saknas helt gör navigeringen förvirrande. Därför är en logisk rubrikhierarki kritiskt viktig.
Landmärkesnavigering
Skärmläsare identifierar landmärken baserat på HTML5-element: <header>, <nav>, <main>, <aside>, <footer>. Användare kan hoppa direkt till dessa sektioner. Om din webbplats inte använder dessa element missar användarna denna möjlighet.
Länklistor
Användare kan lista alla länkar på sidan och välja en. Därför är det viktigt att länktexten är beskrivande – "Klicka här" och "Läs mer" är meningslösa utan kontext.
Formulärnavigering
Användare kan hoppa mellan formulärfält. Skärmläsaren läser upp varje fälts etikett, typ och eventuellt felmeddelande. Utan kopplade etiketter vet användaren inte vad fältet handlar om.
Vanliga problem ur skärmläsarens perspektiv
Bilder utan alt-text
Skärmläsaren säger "bild" eller läser upp filnamnet. Användaren får ingen meningsfull information. Med en bra alt-text kan skärmläsaren istället säga "Kommunfullmäktige samlade i sessionssalen".
Felaktig rubrikstruktur
Om sidan hoppar från H1 till H3, eller om visuella rubriker inte är markerade som rubriker i HTML, blir navigeringen kaotisk. Skärmläsaranvändare förlitar sig på rubriker som sin primära navigeringsmetod.
Dynamiskt innehåll utan ARIA live
Innehåll som uppdateras dynamiskt (felmeddelanden, laddningsindikatorer, statusmeddelanden) kan missas av skärmläsare om det inte annonser ändringar med aria-live. Utan detta vet inte användaren att något har hänt.
Anpassade komponenter utan roller
En dropdown byggd med <div>-element presenteras som "grupp" eller ignoreras helt av skärmläsaren. Med rätt ARIA-roller (role="listbox", role="option") förstår skärmläsaren vad komponenten gör.
Dolda element som inte är dolda
Innehåll som är visuellt dolt med CSS (exempelvis opacity: 0 eller placering utanför viewport) kan fortfarande läsas av skärmläsare. Använd display: none, visibility: hidden eller aria-hidden="true" för att dölja innehåll även för skärmläsare.
Så testar du med skärmläsare
Du behöver inte vara expert för att göra grundläggande tester:
- Aktivera VoiceOver (Mac: Cmd + F5) eller starta NVDA (Windows: gratis nedladdning)
- Stäng av skärmen eller blunda – det tvingar dig att lita på det skärmläsaren säger
- Navigera med H-tangenten genom rubrikerna – är de logiska och beskrivande?
- Lista alla länkar – är länktexterna begripliga utan kontext?
- Fyll i ett formulär – läser skärmläsaren upp etiketterna korrekt?
- Öppna en modal eller meny – flyttas fokus dit? Kan du stänga den?
Tio minuters test med skärmläsare ger ofta insikter som ingen automatiserad granskning kan fånga. Det är en ovärderlig kompetens för alla som arbetar med webbutveckling och webbinnehåll.