Web Content Accessibility Guidelines (WCAG) är de internationella standarderna för webbtillgänglighet. AA-nivån är den mest rekommenderade nivån för de flesta webbplatser och krävs ofta i lagstiftning. Denna guide ger dig en snabb överblick över de viktigaste principerna.
De fyra huvudprinciperna (POUR)
WCAG bygger på fyra grundläggande principer:
- Perceivable (Uppfattbar) — Information och användargränssnitt måste presenteras så att användare kan uppfatta dem
- Operable (Hanterbar) — Användargränssnitt och navigation måste vara hanterbara
- Understandable (Begriplig) — Information och hantering av användargränssnittet måste vara begriplig
- Robust (Robust) — Innehållet måste vara robust nog för att tolkas tillförlitligt av olika användarprogram, inklusive hjälpmedel
1. Perceivable (Uppfattbar)
Alternativ text för bilder
Alla bilder som förmedlar information måste ha beskrivande alternativ text (alt-text). Dekorativa bilder ska ha tom alt-text (
alt="").Exempel: En bild på en katt som klickar på en dator bör ha alt-text som "Katt som sitter vid tangentbord och trycker på tangenter".
Video och ljud
- Videor måste ha textning för dövhörda
- Ljud-innehåll måste ha transkript
- Videor med viktig visuell information behöver syntolkning
Färgkontrast
Text och bilder av text måste ha tillräcklig kontrast mot bakgrunden:
- Normal text: minst 4.5:1 kontrastförhållande
- Stor text (18pt+ eller 14pt+ fetstil): minst 3:1
Anpassningsbart innehåll
- Innehållet ska kunna presenteras på olika sätt utan att förlora information
- Använd semantisk HTML (rubriker, listor, tabeller korrekt)
- Information får inte förlitas enbart på färg, form, position eller ljud
2. Operable (Hanterbar)
Tangentbordstillgänglighet
All funktionalitet måste vara tillgänglig via tangentbord:
- Användare ska kunna navigera med Tab-tangenten
- Fokusordningen ska vara logisk
- Fokusindikatorn måste vara synlig
- Inga tangentbordsfällor (användaren måste kunna navigera bort från alla element)
Tillräckligt med tid
- Ge användare möjlighet att pausa, stoppa eller dölja rörligt innehåll
- Om tidsgränser finns, varna användaren och ge möjlighet att förlänga
- Automatisk uppdatering/omdirigeringar ska kunna pausas eller stängas av
Undvik blinkande innehåll
Innehåll får inte blinka mer än tre gånger per sekund, eftersom det kan utlösa kramper hos personer med fotosensitiv epilepsi.
Navigation och struktur
- Tydliga och konsekventa navigationsmenyer
- Använd beskrivande sidtitlar
- Länkar ska ha tydlig länktext (undvik "klicka här")
- Ge användare sätt att hoppa över återkommande innehåll (t.ex. "Hoppa till huvudinnehåll")
3. Understandable (Begriplig)
Läsbar text
- Ange språk på sidan med
lang-attributet
- Använd tydligt och enkelt språk
- Förklara ovanliga ord, förkortningar och facktermer
Förutsägbar funktionalitet
- Navigering och funktioner ska fungera konsekvent genom hela webbplatsen
- Komponenter med samma funktionalitet ska vara konsekventa
- Ändra inte kontext automatiskt (t.ex. skicka formulär när användaren väljer något)
Hjälp med inmatning
- Tydliga felmeddelanden som förklarar problemet och hur det åtgärdas
- Etiketter och instruktioner för formulärfält
- Förslag på åtgärder när fel upptäcks
- Bekräftelse eller möjlighet att ångra viktiga åtgärder (t.ex. köp, juridiska åtaganden)
4. Robust (Robust)
Kompatibilitet
Koden måste vara skriven så att den kan tolkas av olika webbläsare och hjälpmedel:
- Använd valid HTML (korrekt öppnings- och stängningstagg)
- Unika ID:n på element
- Använd ARIA (Accessible Rich Internet Applications) korrekt när det behövs
Namn, roll och värde
Alla användargränssnittskomponenter måste ha programmatiskt bestämt namn och roll så att hjälpmedel kan förstå dem.
Vanliga misstag att undvika
- Saknad alt-text på bilder — Detta hindrar skärmläsare från att förmedla bildinnehåll
- För låg färgkontrast — Använd kontrastverktyg för att testa
- Ej tangentbordsåtkomlig funktionalitet — Testa alltid med endast tangentbord
- Otydliga länkar — "Klicka här" säger inget om vart länken går
- Automatiskt ljud — Starta aldrig ljud automatiskt, låt användaren välja
- Formulär utan etiketter — Alla fält behöver tydliga
<label>-element
- Saknad sidstruktur — Använd rubriknivåer (h1-h6) logiskt
Verktyg för att testa tillgänglighet
- WAVE — Webbläsartillägg för visuell tillgänglighetsgranskning
- axe DevTools — Automatiserad testning i webbläsaren
- Lighthouse — Inbyggt i Chrome DevTools
- Kontrastkontroll — WebAIM Contrast Checker
- Skärmläsare — NVDA (Windows), JAWS (Windows), VoiceOver (Mac/iOS)
- Tangentbordstestning — Navigera med Tab, Enter, Space, piltangenter
Sammanfattning
Tillgänglighet handlar om att göra webbplatser användbara för alla, oavsett funktionsvariation. AA-nivån i WCAG täcker de mest kritiska områdena:
- Se till att allt innehåll är uppfattbart (alternativt innehåll, kontrast)
- Gör funktioner hanterbara (tangentbord, tillräckligt med tid)
- Håll innehållet begripligt (tydlig text, förutsägbart)
- Bygg robust kod som fungerar med hjälpmedel
Tillgänglighet är inte ett engångsprojekt — det är en kontinuerlig process som bör integreras i hela utvecklingsprocessen från start till förvaltning.
Nästa steg
- Läs den fullständiga WCAG 2.1 AA-standarden på W3C:s webbplats
- Testa din webbplats med automatiserade verktyg
- Genomför manuella tangentbords- och skärmläsartester
- Inkludera användare med funktionsvariationer i användartester
- Utbilda ditt team i tillgänglighetsprinciper
- Skapa riktlinjer och checklistor för tillgänglighet i er organisation