WCAG — vad är det, Web Content Accessibility Guidelines och AA-nivåer

Vad är WCAG?

WCAG (Web Content Accessibility Guidelines) — en uppsättning rekommendationer för att säkerställa tillgängligheten av webbinnehåll för personer med funktionsnedsättning. Standarden har utvecklats av W3C Web Accessibility Initiative (WAI) sedan 1999. WCAG täcker blinda och synskadade, döva och hörselskadade, personer med rörelse-, tal- och kognitiva begränsningar, samt äldre användare med åldersrelaterade förändringar.

Den första versionen WCAG 1.0 släpptes 1999 och innehöll 14 vägledande principer. WCAG 2.0 (2008) blev tekniskt neutral, tillämplig på HTML, PDF, multimedia och mobila applikationer. WCAG 2.1 (2018) lade till kriterier för mobila enheter och tryckinmatning. WCAG 2.2 (2023) — den aktuella versionen med nya kriterier för animation och fokus. WCAG är inte lag, men många länder hänvisar till den i sin lagstiftning.

GOST R 52872-2019 i Ryssland, European Accessibility Act i EU och Section 508 i USA — alla kräver WCAG AA-överensstämmelse. För företags- och myndighetswebbplatser är WCAG AA en obligatorisk standard, vars överträdelse leder till rättsprocesser. Enligt UsableNet (2024) har över 12 000 stämningsansökningar gällande otillgänglighet av webbplatser lämnats in i USA.

WCAG-versioner: jämförelse

Juridiska konsekvenser av bristande efterlevnad

Underlåtenhet att följa WCAG innebär allvarliga risker. År 2025 trädde European Accessibility Act (EAA) i kraft, som kräver WCAG 2.1 AA för alla offentliga webbplatser och mobila applikationer inom EU. Böter kan uppgå till 5% av företagets årliga omsättning. Den genomsnittliga förlikningssumman i USA är $25 000–$50 000. Tillgänglighetsrevision bör utföras i varje utvecklingssteg, inte bara före lansering.

Fyra principer för WCAG: POUR

POUR — akronymen för de fyra WCAG-principerna: Perceivable (uppfattbar), Operable (hanterbar), Understandable (begriplig), Robust (robust). Varje princip innehåller riktlinjer och riktlinjerna innehåller testbara framgångskriterier. Totalt innehåller WCAG 2.2 13 riktlinjer och 86 framgångskriterier. Varje kriterium har nivå A, AA eller AAA.

Perceivable — Uppfattbar

Principen Perceivable kräver att innehållet presenteras i en form som användaren kan uppfatta. Riktlinjer: 1.1 Text Alternatives (textalternativ), 1.2 Time-based Media (texter, transkriptioner), 1.3 Adaptable (innehåll utan förlust vid formatändring), 1.4 Distinguishable (kontrast 4.5:1, färg, ljud). Nyckelkriteriet 1.4.3 Contrast Minimum (AA) — det mest överträdda: 86% av sidorna uppfyller det inte enligt WebAIM.

Operable — Hanterbar

Principen Operable kräver hanterbarhet av gränssnittet. Riktlinjer: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Kriterium 2.1.1 Keyboard (A) — ett av de mest kritiska: alla funktioner måste vara tillgängliga från tangentbordet utan mus. Modal fönster som bara stängs genom klick, rullgardinsmenyer utan tangentbordsnavigering — typiska överträdelser.

Understandable — Begriplig

Principen Understandable kräver begriplighet av innehåll och gränssnitt. Riktlinjer: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Särskilt viktigt är kriterium 3.3.4 Error Prevention för finansiella och medicinska applikationer: förebyggande av allvarliga konsekvenser av inmatningsfel. Kriterium 3.2.6 Consistent Help (nytt i WCAG 2.2) kräver att hjälpknapparna finns på samma platser.

Robust — Robust

Principen Robust kräver kompatibilitet med assisterande teknik. Riktlinje 4.1 Compatible med nyckelkriteriet 4.1.2 Name, Role, Value (A): varje UI-komponent måste ha ett programmeringsmässigt bestämbart namn, roll och tillstånd. ARIA-attribut (role, aria-label, aria-expanded) — det huvudsakliga verktyget. Utan dem kan skärmläsare inte avgöra om ett element är en knapp, länk eller flik.

Tabell över WCAG-principer

WCAG-nivåer: A, AA, AAA

WCAG definierar tre nivåer: A (minsta), AA (standard) och AAA (högsta). Nivå A — det obligatoriska minimum: utan den är innehållet otillgängligt för vissa användarkategorier. AA tar bort de huvudsakliga tillgänglighetshindren. AAA — den högsta standarden, men kan inte uppnås för allt innehåll (till exempel är vissa teckenspråk eller ljudtranskriptioner inte alltid genomförbara).

Nivå A (30 kriterier): textalternativ, tangentbordshantering, tillräcklig tid, ingen blinkning över 3 Hz. Nivå AA (+24 kriterier): kontrastförhållande 4.5:1, textning för video, storleksändring av text till 200%, tydlig tangentbordsfokus. Nivå AAA (+32 kriterier): kontrastförhållande 7:1, teckenspråk, avaktivering av animation (2.3.3), ljudtranskription. För myndighetswebbplatser räcker AA.

WCAG-revisionsprocess

En tillgänglighetsrevision enligt WCAG omfattar: automatisk testning (axe DevTools, WAVE, Lighthouse — hittar 30–40% av felen), manuell testning med tangentbord och skärmläsare (VoiceOver, TalkBack, NVDA), expertrevision för komplexa kriterier och användartestning med personer med funktionsnedsättning. Revisionsrapporten bör innehålla överensstämmelsenivå och en lista över brister för varje kriterium.

Vad är nytt i WCAG 2.2

WCAG 2.2 lade till 9 nya kriterier. De viktigaste: 2.4.11 Focus Appearance (AA) — fokusindikator >= 2px med kontrast 3:1, 2.5.8 Target Size Minimum (AA) — pekmål minst 24x24 pixlar, 3.3.7 Accessible Authentication (AA) — autentisering utan CAPTCHA. Kriterium 2.3.3 Animation from Interactions (AAA) — avstängningsbar animation eller högst 5 sekunder.

Focus Appearance — den viktigaste förändringen. Tidigare var outline: none utan ersättning en överträdelse, men det fanns inga tydliga krav. WCAG 2.2 fastställde: tjocklek >= 2px, kontrast 3:1 med bakgrunden, indikatoryta minst lika stor som elementets yta. För anpassade knappar med border-radius, använd box-shadow istället för outline.

Focus Appearance i CSS

/* WCAG 2.2 Focus Appearance (2.4.11 AA) */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

.button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #FFFFFF,
        0 0 0 6px #0066CC;
}

@media (prefers-color-scheme: dark) {
    :focus-visible { outline-color: #66B2FF; }
}

@media (prefers-contrast: more) {
    :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
}

Styling av :focus-visible säkerställer överensstämmelse med Focus Appearance-kriteriet. Alternativet via box-shadow passar för element med border-radius. Mörkt tema och High Contrast anpassar fokusfärgerna.

Accessible Authentication

Kriterium 3.3.7 Accessible Authentication (AA) — en av de mest omdiskuterade nyheterna. CAPTCHA med objektigenkänning, pussel, dragning av reglage — är nu en överträdelse om det inte finns något alternativ. Tillåtna metoder: OTP via e-post/SMS, biometri (Face ID, Touch ID), QR-koder, Magic link. Detta förenklar livet inte bara för personer med kognitiva störningar utan för alla användare.

WCAG för mobila applikationer

WCAG är tillämpligt på inbyggda iOS- och Android-applikationer. De fyra POUR-principerna täcker mobila gränssnitt fullständigt. Specifika kriterier: 2.5.1 Pointer Gestures (gester utan hög precision), 2.5.2 Pointer Cancellation (avbrytande av oavsiktlig beröring), 2.5.3 Label in Name (knapptext överensstämmer med tillgänglighetsetiketten). För iOS används UIKit/UIAccessibility, för Android — AccessibilityService och ContentDescription.

De vanligaste överträdelserna i mobila applikationer: 1.1.1 Non-text Content — ikoner utan contentDescription, 2.4.3 Focus Order — felaktig navigeringsordning, 2.5.8 Target Size — knappar mindre än 24x24dp, 1.4.3 Contrast — text på bakgrundsbilder. iOS tillhandahåller Accessibility Inspector i Xcode, Android — Accessibility Scanner för automatisk revision.

WCAG-kompatibel SwiftUI-kod

import SwiftUI

struct AccessibleButton: View {
    let action: () -> Void
    let title: String
    let icon: String

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .padding(16)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(12)
            .frame(minWidth: 48, minHeight: 48)
        }
        .accessibilityLabel(title)
        .accessibilityHint("Klicka för åtgärd")
        .accessibilityAddTraits(.isButton)
    }
}

struct AccessibleForm: View {
    @State private var email = ""

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("E-post")
                TextField("Ange e-post", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("E-postinmatningsfält")
                    .accessibilityHint("Ange e-postadress")
            }
            AccessibleButton(
                action: { },
                title: "Skicka",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

SwiftUI-komponenter med accessibilityLabel, accessibilityHint och minWidth/minHeight >= 48pt säkerställer överensstämmelse med WCAG 2.5.8 (Target Size) och 2.5.3 (Label in Name). Använd Xcode Accessibility Inspector för att kontrollera VoiceOver-fokus, navigeringsordning och touch target-storlekar. Liknande krav gäller för Jetpack Compose via Modifier.semantics.