Vad är WCAG?

WCAG står för Web Content Accessibility Guidelines och är en internationell standard som tas fram av W3C (World Wide Web Consortium). Standarden beskriver hur digitalt innehåll ska utformas för att vara tillgängligt för personer med funktionsnedsättning.

WCAG 2.1 publicerades 2018 och är den version som DOS-lagen hänvisar till. Standarden är uppbyggd kring fyra principer, 13 riktlinjer och 78 mätbara framgångskriterier. Varje framgångskriterium har en av tre nivåer: A, AA eller AAA. DOS-lagen kräver att nivå AA uppfylls.

De fyra principerna

1. Möjlig att uppfatta (Perceivable)

Innehåll måste presenteras på sätt som användare kan uppfatta. Det innebär exempelvis att bilder behöver alt-texter, att video ska ha undertexter och att text ska ha tillräcklig kontrast mot bakgrunden.

Vanliga brister: saknade alt-texter, otillräcklig färgkontrast, video utan textning, information som enbart förmedlas genom färg.

2. Hanterbar (Operable)

Gränssnittet måste gå att använda med olika inmatningsmetoder. Alla funktioner ska vara tillgängliga via tangentbord, användare ska kunna navigera effektivt och det ska finnas tillräckligt med tid för att läsa och använda innehållet.

Vanliga brister: element som inte går att nå med tangentbord, avsaknad av synlig fokusindikator, fällor där tangentbordsfokus fastnar, sidor utan möjlighet att hoppa förbi navigation.

3. Begriplig (Understandable)

Innehåll och gränssnitt ska vara begripliga. Text ska vara läsbar, webbplatsen ska bete sig förutsägbart och användare ska få hjälp att undvika och rätta till fel i formulär.

Vanliga brister: formulär utan tydliga felmeddelanden, sidans språk inte angivet i HTML, oförutsägbar navigering, komplicerat språk utan förklaringar.

4. Robust (Robust)

Innehållet ska vara kompatibelt med olika webbläsare, hjälpmedel och framtida tekniker. Det innebär framför allt korrekt HTML och att rätt ARIA-attribut används där det behövs.

Vanliga brister: felaktig HTML-struktur, felaktiga ARIA-roller, duplicerade id-attribut, anpassade komponenter som saknar tillgänglig semantik.

Nivåerna A, AA och AAA

Framgångskriterierna delas in i tre nivåer beroende på hur stor påverkan de har:

  • Nivå A – De mest grundläggande kraven. Utan dessa är innehållet omöjligt att använda för vissa grupper. Exempel: alt-text för bilder (1.1.1), tangentbordstillgänglighet (2.1.1).
  • Nivå AA – Den nivå som DOS-lagen kräver. Inkluderar A-kraven plus ytterligare krav som färgkontrast (1.4.3), omflöde av text vid zoom (1.4.10) och synlig fokusindikator (2.4.7).
  • Nivå AAA – Den högsta nivån. Ställer ännu strängare krav, exempelvis kontrastförhållande 7:1 och teckenspråkstolkning av video. Det är sällan möjligt att uppfylla AAA för allt innehåll.

Vad innebär WCAG 2.1 jämfört med 2.0?

WCAG 2.1 lades till ovanpå 2.0 och introducerade 17 nya framgångskriterier. De viktigaste nyheterna handlar om:

  • Mobil tillgänglighet – Krav på att pekgester ska ha alternativ (2.5.1), att orientering inte ska vara låst (1.3.4) och att inmatning via rörelse ska ha alternativ (2.5.4).
  • Kognitiv tillgänglighet – Tydligare krav på identifierbara fält (1.3.5) och möjlighet att förebygga fel.
  • Synnedsättning – Krav på textavstånd (1.4.12), omflöde utan horisontell scroll (1.4.10) och kontrast för icke-textuella element (1.4.11).

Praktiska tips

Att arbeta mot WCAG 2.1 AA behöver inte vara komplicerat. Här är de viktigaste sakerna att tänka på:

  1. Använd semantisk HTML – Rätt HTML-element (h1-h6, nav, main, button) ger tillgänglighet på köpet.
  2. Testa med tangentbordet – Tabba igenom din webbplats och kontrollera att allt går att nå och använda.
  3. Kontrollera kontrasten – Använd ett kontrastverktyg för att säkerställa att text uppfyller kraven.
  4. Skriv beskrivande alt-texter – Varje meningsfull bild behöver en alt-text som beskriver bildens innehåll och syfte.
  5. Testa med skärmläsare – Prova att navigera din webbplats med VoiceOver (Mac), NVDA (Windows) eller TalkBack (Android).

WCAG kan verka överväldigande med sina 78 kriterier, men genom att fokusera på de vanligaste bristerna gör du stor skillnad för tillgängligheten.

Vill du ha en konkret startpunkt? Vår WCAG 2.1 checklista på svenska bryter ner de viktigaste kontrollerna i begripliga steg för webbredaktörer och utvecklare.