Tillgänglighetsgranskning enligt WCAG 2.2 och svensk lag

---
name: tillganglighet-wcag
description: Granskar webbgränssnitt och komponenter mot WCAG 2.2 nivå AA, EN 301 549 och svenska tillgänglighetskrav (DOS-lagen, lagen om tillgänglighet till produkter och tjänster). Använd när användaren nämner tillgänglighet, WCAG, skärmläsare, tangentbordsnavigering, kontrast, DOS-lagen eller tillgänglighetsredogörelse.
---

# Tillgänglighetsgranskning

Automatiska verktyg hittar ungefär en tredjedel av problemen. Du ska hitta
resten genom att läsa koden och resonera som en användare med skärmläsare,
en som bara använder tangentbord och en som har svårt att se kontraster.

## Omfattning

Fråga vilken lag som gäller om det inte framgår:
- Offentlig sektor och deras leverantörer: DOS-lagen, WCAG 2.1 AA som
  miniminivå via EN 301 549, sikta på 2.2.
- E-handel, bank, transport, e-böcker, telefoni med flera: lagen om
  tillgänglighet till produkter och tjänster, i kraft sedan 28 juni 2025.
- Övriga: ingen lagplikt, men samma kriterier fungerar.

## Granska

Gå igenom varje komponent eller vy mot dessa punkter. Ange kriterium
med nummer.

Struktur och semantik
- Rubriknivåer i ordning, en h1 per sida (1.3.1).
- Listor, tabeller och formulär med riktiga element, inte div-soppa.
- Landmärken: header, nav, main, footer.
- Språk angivet på html-elementet, och på inbäddade avsnitt på annat
  språk (3.1.1, 3.1.2).

Tangentbord
- Allt går att nå och använda med tangentbord (2.1.1). Klickbara div
  utan tabindex och tangenthantering är alltid ett fel.
- Synligt fokus, minst 2 px och kontrast 3:1 mot bakgrund (2.4.7, 2.4.11).
- Ingen fokusfälla i modaler (2.1.2). Fokus flyttas in i modalen och
  tillbaka när den stängs.
- Logisk tabbordning som följer visuell ordning (2.4.3).

Bilder och media
- Alt-text som beskriver funktion eller innehåll. Dekorativa bilder får
  tom alt (1.1.1).
- Video med undertexter, ljud med textalternativ (1.2.x).

Formulär
- Varje fält har en kopplad label (1.3.1, 4.1.2). Placeholder räcker inte.
- Felmeddelanden i text, kopplade till fältet, som säger vad som är fel
  och hur det rättas (3.3.1, 3.3.3).
- Autocomplete-attribut på personuppgiftsfält (1.3.5).
- Inga tidsgränser utan möjlighet att förlänga (2.2.1).

Färg och kontrast
- Text 4,5:1, stor text och gränssnittskomponenter 3:1 (1.4.3, 1.4.11).
- Information förmedlas inte enbart genom färg (1.4.1).
- Fungerar vid 200 procent zoom och 320 px bredd utan horisontell
  scroll (1.4.4, 1.4.10).

Nytt i 2.2
- Dragrörelser har ett alternativ med enkel pekning (2.5.7).
- Klickytor minst 24 gånger 24 px (2.5.8).
- Inloggning kräver inte att man kommer ihåg eller skriver av något (3.3.8).
- Hjälp finns på samma plats på varje sida (3.2.6).

## Leverans

Tabell: Kriterium, Var, Vad som är fel, Vem drabbas, Fix. Sortera efter
hur många som drabbas. Avsluta med vad som behöver testas manuellt med
riktig skärmläsare (VoiceOver, NVDA) eftersom du inte kan köra den.

Om användaren ska skriva en tillgänglighetsredogörelse: ge utkast med
bristerna listade i klarspråk och en kontaktväg.