WCAG — wat is het, Web Content Accessibility Guidelines en AA-niveaus

Wat is WCAG?

WCAG (Web Content Accessibility Guidelines) — een set aanbevelingen voor het waarborgen van de toegankelijkheid van webcontent voor mensen met een handicap. De standaard wordt sinds 1999 ontwikkeld door W3C Web Accessibility Initiative (WAI). WCAG dekt blinden en slechtzienden, doven en slechthorenden, mensen met mobiliteits-, spraak- en cognitieve beperkingen, evenals oudere gebruikers met leeftijdsgebonden veranderingen.

De eerste versie WCAG 1.0 werd uitgebracht in 1999 en bevatte 14 richtlijnen. WCAG 2.0 (2008) werd technologisch neutraal, toepasbaar op HTML, PDF, multimedia en mobiele applicaties. WCAG 2.1 (2018) voegde criteria toe voor mobiele apparaten en aanraakinvoer. WCAG 2.2 (2023) — de huidige versie met nieuwe criteria voor animatie en focus. WCAG is geen wet, maar veel landen verwijzen ernaar in hun wetgeving.

GOST R 52872-2019 in Rusland, European Accessibility Act in de EU en Section 508 in de VS — allemaal vereisen ze WCAG AA-conformiteit. Voor zakelijke en overheidswebsites is WCAG AA een verplichte standaard, waarvan niet-naleving leidt tot rechtszaken. Volgens UsableNet (2024) zijn er in de VS meer dan 12.000 rechtszaken aangespannen over ontoegankelijkheid van websites.

WCAG-versies: vergelijking

Juridische gevolgen van niet-conformiteit

Het niet naleven van WCAG brengt serieuze risico’s met zich mee. In 2025 is de European Accessibility Act (EAA) in werking getreden, die WCAG 2.1 AA vereist voor alle openbare websites en mobiele applicaties in de EU. Boetes kunnen oplopen tot 5% van de jaarlijkse omzet van een bedrijf. Het gemiddelde schikkingsbedrag in de VS is $25.000–$50.000. Toegankelijkheidsaudits moeten in elke ontwikkelingsfase worden uitgevoerd, niet alleen vlak voor de release.

Vier principes van WCAG: POUR

POUR — het acroniem van de vier WCAG-principes: Perceivable (waarneembaar), Operable (bedienbaar), Understandable (begrijpelijk), Robust (robuust). Elk principe bevat richtlijnen en de richtlijnen bevatten testbare succescriteria. In totaal bevat WCAG 2.2 13 richtlijnen en 86 succescriteria. Elk criterium heeft niveau A, AA of AAA.

Perceivable — Waarneembaar

Het principe Perceivable vereist dat content wordt gepresenteerd in een vorm die de gebruiker kan waarnemen. Richtlijnen: 1.1 Text Alternatives (tekstalternatieven), 1.2 Time-based Media (ondertiteling, transcripties), 1.3 Adaptable (content zonder verlies bij formaatwijziging), 1.4 Distinguishable (contrast 4.5:1, kleur, geluid). Het belangrijkste criterium 1.4.3 Contrast Minimum (AA) — het meest overtreden: 86% van de pagina’s voldoet er niet aan volgens WebAIM.

Operable — Bedienbaar

Het principe Operable vereist bedienbaarheid van de interface. Richtlijnen: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Criterium 2.1.1 Keyboard (A) — een van de meest kritische: alle functies moeten toegankelijk zijn via het toetsenbord zonder muis. Modale vensters die alleen door te klikken sluiten, dropdownmenu’s zonder toetsenbordnavigatie — typische overtredingen.

Understandable — Begrijpelijk

Het principe Understandable vereist begrijpelijkheid van content en interface. Richtlijnen: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Vooral criterium 3.3.4 Error Prevention is belangrijk voor financiële en medische applicaties: het voorkomen van ernstige gevolgen van invoerfouten. Criterium 3.2.6 Consistent Help (nieuw in WCAG 2.2) vereist dat hulpknoppen op dezelfde plaatsen staan.

Robust — Robuust

Het principe Robust vereist compatibiliteit met ondersteunende technologieën. Richtlijn 4.1 Compatible met het belangrijkste criterium 4.1.2 Name, Role, Value (A): elk UI-component moet een programmeerbaar bepaalde naam, rol en staat hebben. ARIA-attributen (role, aria-label, aria-expanded) — het belangrijkste hulpmiddel. Zonder hen kunnen schermlezers niet bepalen of een element een knop, link of tab is.

Tabel van WCAG-principes

WCAG-conformiteitsniveaus: A, AA, AAA

WCAG definieert drie niveaus: A (minimaal), AA (standaard) en AAA (maximaal). Niveau A — het verplichte minimum: zonder is de content ontoegankelijk voor sommige categorieën gebruikers. AA verwijdert de belangrijkste toegankelijkheidsbarrières. AAA — de hoogste standaard, maar kan niet voor alle content worden bereikt (bijvoorbeeld zijn sommige gebarentalen of audiotranscripties niet altijd haalbaar).

Niveau A (30 criteria): text alternatives, bediening met toetsenbord, voldoende tijd, geen flikkering boven 3 Hz. Niveau AA (+24 criteria): contrast ratio 4.5:1, ondertiteling voor video, resize van tekst tot 200%, duidelijke toetsenbordfocus. Niveau AAA (+32 criteria): contrast ratio 7:1, gebarentaal, uitschakelen van animatie (2.3.3), audiotranscriptie. Voor overheidswebsites is AA voldoende.

WCAG-auditproces

Een toegankelijkheidsaudit volgens WCAG omvat: automatisch testen (axe DevTools, WAVE, Lighthouse — vindt 30–40% van de fouten), handmatig testen met toetsenbord en schermlezers (VoiceOver, TalkBack, NVDA), expert-audit voor complexe criteria en gebruikerstesten met mensen met een handicap. Het auditrapport moet het conformiteitsniveau en een lijst van niet-conformiteiten per criterium bevatten.

Wat is nieuw in WCAG 2.2

WCAG 2.2 heeft 9 nieuwe criteria toegevoegd. De belangrijkste: 2.4.11 Focus Appearance (AA) — focusindicator >= 2px met contrast 3:1, 2.5.8 Target Size Minimum (AA) — aanraakdoelwit minimaal 24x24 pixels, 3.3.7 Accessible Authentication (AA) — authenticatie zonder CAPTCHA. Criterium 2.3.3 Animation from Interactions (AAA) — uitschakelbare animatie of niet langer dan 5 seconden.

Focus Appearance — de belangrijkste verandering. Voorheen was outline: none zonder vervanging een overtreding, maar er waren geen duidelijke eisen. WCAG 2.2 stelde vast: dikte >= 2px, contrast 3:1 met de achtergrond, het oppervlak van de indicator ten minste zo groot als het oppervlak van het element. Gebruik voor aangepaste knoppen met border-radius box-shadow in plaats van outline.

Focus Appearance in 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 van :focus-visible zorgt voor conformiteit met het Focus Appearance-criterium. Het alternatief via box-shadow is geschikt voor elementen met border-radius. Donkere modus en High Contrast passen de focuskleuren aan.

Accessible Authentication

Criterium 3.3.7 Accessible Authentication (AA) — een van de meest besproken vernieuwingen. CAPTCHA met objectherkenning, puzzels, het verslepen van schuifregelaars — is nu een overtreding als er geen alternatief is. Toegestane methoden: OTP via e-mail/SMS, biometrie (Face ID, Touch ID), QR-codes, Magic link. Dit maakt het leven niet alleen gemakkelijker voor mensen met cognitieve beperkingen, maar voor alle gebruikers.

WCAG voor mobiele applicaties

WCAG is van toepassing op native iOS- en Android-applicaties. De vier POUR-principes dekken mobiele interfaces volledig. Specifieke criteria: 2.5.1 Pointer Gestures (gebaren zonder hoge precisie), 2.5.2 Pointer Cancellation (annuleren van onbedoelde aanraking), 2.5.3 Label in Name (knoptekst komt overeen met het accessibility-label). Voor iOS wordt UIKit/UIAccessibility gebruikt, voor Android AccessibilityService en ContentDescription.

De meest voorkomende overtredingen in mobiele applicaties: 1.1.1 Non-text Content — pictogrammen zonder contentDescription, 2.4.3 Focus Order — onjuiste navigatievolgorde, 2.5.8 Target Size — knoppen kleiner dan 24x24dp, 1.4.3 Contrast — tekst op achtergrondafbeeldingen. iOS biedt Accessibility Inspector in Xcode, Android Accessibility Scanner voor automatische auditing.

WCAG-conforme SwiftUI-code

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("Klik voor actie")
        .accessibilityAddTraits(.isButton)
    }
}

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

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("E-mail")
                TextField("Voer e-mail in", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("E-mailinvoerveld")
                    .accessibilityHint("Voer e-mailadres in")
            }
            AccessibleButton(
                action: { },
                title: "Verzenden",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

SwiftUI-componenten met accessibilityLabel, accessibilityHint en minWidth/minHeight >= 48pt zorgen voor conformiteit met WCAG 2.5.8 (Target Size) en 2.5.3 (Label in Name). Gebruik Xcode Accessibility Inspector om VoiceOver-focus, navigatievolgorde en touch target-afmetingen te controleren. Vergelijkbare vereisten zijn van toepassing op Jetpack Compose via Modifier.semantics.