Hur hittar jag dessa problem på min sajt?

Använd automatiska verktyg som Xrayd, Lighthouse eller axe DevTools för att hitta de flesta. Manuell testning med tangentbord och skärmläsare fångar resten.

Vilket problem är viktigast att fixa först?

Prioritera efter påverkan. Problem som blockerar användare helt (tangentbordsfällor, formulär utan labels) bör fixas före estetiska problem (kontrast på sekundär text).

Read in English

Guider

10 vanligaste tillgänglighetsproblemen på svenska webbplatser

Alexander Xrayd

Accessibility Expert

Lästid

5 min

Publicerad

20 nov. 2025

Efter att ha skannat tusentals svenska webbplatser ser vi samma mönster om och om igen. Vissa problem är så vanliga att de förekommer på över 90% av alla sajter.

Den goda nyheten? De flesta av dessa problem är enkla att fixa. Ofta handlar det om grundläggande HTML-struktur och CSS-justeringar som en utvecklare kan åtgärda på några timmar.

I denna guide går vi igenom de 10 vanligaste problemen vi hittar, förklarar varför de är allvarliga, och visar hur du fixar dem.

1. Otillräcklig färgkontrast

Förekomst: 86% av alla sajter

Allvarlighet: Hög (WCAG 1.4.3)

Ljusgrå text på vit bakgrund, vit text på pastellfärger, och färgade knappar med otillräcklig kontrast är överallt.

Vanliga syndare:

•Grå brödtext (#666 eller ljusare)

•Placeholder-text i formulär

•Footer-länkar på mörk bakgrund

•Call-to-action-knappar i varumärkesfärg

Så fixar du det:

Minst 4.5:1 kontrast för normal text, 3:1 för stor text (18px+). Använd verktyg som WebAIM Contrast Checker. Mörkna texten eller ljusna bakgrunden – ofta räcker minimal justering.

Kontrast är det vanligaste problemet och ett av de enklaste att fixa. Ett par hex-värdesändringar kan göra enorm skillnad.

2. Saknade eller dåliga alt-texter

Förekomst: 61% av alla sajter

Allvarlighet: Hög (WCAG 1.1.1)

Bilder utan alt-attribut, eller med icke-beskrivande alt som 'bild' eller 'image_01.jpg'.

Vanliga problem:

•Produktbilder med bara filnamn

•Ikoner utan textalternativ

•Bilder med alt='bild' eller alt='foto'

•Dekorativa bilder som saknar tom alt (alt='')

Så fixar du det:

Beskriv bildens innehåll och funktion. 'Röd klänning från Acme, stl M, 599 kr' – inte 'produktbild'. Dekorativa bilder ska ha tom alt (alt='') så skärmläsare hoppar över dem.

3. Formulär utan labels

Förekomst: 54% av alla sajter

Allvarlighet: Hög (WCAG 1.3.1, 4.1.2)

Formulärfält som förlitar sig på placeholder-text istället för riktiga -element.

Varför det är dåligt:

•Placeholder försvinner när användaren börjar skriva

•Skärmläsare läser inte alltid placeholder

•Låg kontrast på placeholder-text (ofta ljusgrå)

Så fixar du det:

Varje input behöver en kopplad label:

<label for='email'>E-post</label>

<input type='email' id='email'>

Använd placeholder som komplement, inte ersättning.

4. Ej tangentbordsnavigerbara

Förekomst: 47% av alla sajter

Allvarlighet: Kritisk (WCAG 2.1.1)

Interaktiva element som bara fungerar med mus – dropdown-menyer, modaler, karuseller.

Vanliga problem:

•Dropdown som bara öppnas vid hover

•Modal som inte kan stängas med Escape

•Fokus som 'försvinner' bakom modal

•Custom components (sliders, tabs) utan tangentbordsstöd

Så fixar du det:

Testa hela sajten med enbart Tab och Enter. Varje interaktivt element måste vara nåbart (Tab) och aktiverbart (Enter/Space). Använd native HTML-element där möjligt (

WCAG 2.1 AA-kontroll

2-minuters skanning

Åtgärdsbar rapport