Skip to main content

Woordenlijst toegankelijkheid

WCAG-criteria, patronen en normen — met interactieve demo’s, detectiemethoden en auditgegevens.

De eerste vier categorieën — Perceivable, Operable, Understandable, Robust — zijn de WCAG-principes (“POUR”). Filter op een categorie om te zien wat die omvat.

132 termen

A

Section 1
Section 2
Section 3

Accordion

Gebruik <details>/<summary> of button + aria-expanded + aria-controls. Pijltoetsen optioneel. Inhoudspaneel moet gekoppeld zijn aan de trigger.

UI Patterns

ADA & Section 508

VS: ADA geldt voor de private sector (jurisprudentie, 4000+ rechtszaken in 2024). Section 508 geldt voor federale instanties en contractanten. Beide sluiten aan bij WCAG 2.1 AA. DOJ Title II-regel vereist naleving per april 2026.

Compliance

Afbeeldingen van tekst

Gebruik geen afbeeldingen om tekst weer te geven, tenzij essentieel (logo's). Afbeeldingen van tekst kunnen niet worden vergroot, herschaald of aangepast door gebruikers. Gebruik echte tekst met CSS-opmaak.

Perceivable 1.4.5
Click me
clear ✓
Click me
unclear ✗

Affordance

Visuele aanwijzingen die aangeven hoe een element gebruikt kan worden. Knoppen moeten klikbaar eruitzien (verhoogd, gekleurd, gelabeld). Links moeten tappable eruitzien (onderstreept, gekleurd). Flat design vernietigt vaak affordance — voeg het terug toe met schaduwen, randen of onderstrepingen.

UX Principles

Alternatieve tekst

54% fail

Elke betekenisvolle afbeelding heeft een tekstalternatief nodig dat het doel beschrijft — niet het uiterlijk. Decoratieve afbeeldingen krijgen alt="". 54% van de homepagina's heeft afbeeldingen zonder alt-tekst.

Essentieel Perceivable 1.1.1
role="button" on div
<button> native ✓

ARIA: gebruik & misbruik

80% fail

80% van de homepagina's gebruikt ARIA — en die pagina's hebben 2× meer fouten dan pagina's zonder. ARIA voegt geen gedrag toe, alleen semantiek. Misbruikt ARIA is erger dan geen ARIA. Vijf regels: gebruik geen ARIA als native werkt.

Robust

Audiodescriptie

Video's moeten belangrijke visuele inhoud beschrijven in het audiospoor voor blinde gebruikers. Vereist wanneer dialoog alleen niet overbrengt wat er op het scherm gebeurt.

Perceivable 1.2.5
jane@acme.co
autocomplete="email"

Autocomplete-attributen

Voeg autocomplete-attributen toe aan invoervelden die persoonlijke gegevens verzamelen (naam, e-mail, adres, betaling). Helpt wachtwoordmanagers en hulptechnologie formulieren automatisch in te vullen.

UI Patterns 1.3.5

B

Beschrijvende paginatitel

Elke pagina heeft een unieke, beschrijvende <title> nodig. Schermlezersgebruikers horen dit als eerste. Patroon: "Paginanaam — Sectie — Sitenaam". Helpt alle gebruikers met tabbladen en geschiedenis.

Operable 2.4.2

Beweging & animatie

Bied een manier om niet-essentiële beweging uit te schakelen. Respecteer prefers-reduced-motion. Parallax-scrolling, auto-play video en geanimeerde achtergronden veroorzaken vestibulaire aandoeningen bij ~35% van volwassenen.

Operable 2.3.3
Home/
Products/
Shoes

Broodkruimelnavigatie

Gebruik nav met aria-label="Broodkruimel", een geordende lijst, en aria-current="page" op het laatste item. Scheidingstekens moeten decoratief zijn (CSS of aria-hidden). Helpt oriëntatie voor alle gebruikers.

UI Patterns

C

Slide 2

Carrousel / slider

Bied pauze/stopbesturingen. Ondersteun toetsenbordnavigatie (pijlen voor slides). Role="group" op elke slide met aria-roledescription="slide". Auto-rotatie moet prefers-reduced-motion respecteren.

UI Patterns
6 fields
3 fields ✓

Cognitieve belasting

Mentale inspanning om informatie te verwerken. Meer opties = langzamere beslissingen (Hick's Law). Meer velden = meer afhaakgedrag. Chunk inhoud, vereenvoudig keuzes, elimineer onnodige invoer.

UX Principles
Search…
Apple
Banana
Cherry

Combobox / autocomplete

Een tekstinvoer met een pop-uplijst met opties. Een van de moeilijkste ARIA-patronen: role="combobox" + aria-expanded + aria-activedescendant + listbox. Kapotte implementaties zijn overal — test met schermlezers.

UI Patterns

Conformiteit & claims

Conformiteit is per pagina, niet per site. Niveau AA betekent dat alle A + AA-criteria slagen op die pagina. Claims moeten versie (2.2), niveau (AA), reikwijdte (pagina's/processen) en datum specificeren. Gedeeltelijke conformiteit bestaat voor inhoud van derden die je niet beheert.

WCAG Levels

Conformiteitsbeoordeling

De procedure die gebruikt wordt om aan te tonen dat een product voldoet aan de toegankelijkheidsvereisten van de EAA. Voor producten die onder de EAA vallen, is dit interne productiecontrole (Module A - Bijlage IV van de richtlijn): de fabrikant stelt een technisch dossier samen, voert zelf de beoordeling uit, stelt de EU-conformiteitsverklaring op en brengt de CE-markering aan.

Compliance

Consistente hulp

Als hulpmechanismen (contactinfo, chat, FAQ-link) op meerdere pagina's verschijnen, moeten ze in dezelfde relatieve volgorde staan. Nieuw in WCAG 2.2 (Niveau A). Vereist niet het bieden van hulp — alleen consistentie wanneer je dat doet.

Understandable 3.2.6

Consistente identificatie

Componenten met dezelfde functie moeten consistent worden geïdentificeerd. Als 'Zoeken' een label is op één pagina, noem het dan niet 'Vinden' op een andere.

Understandable 3.2.4

Consistente navigatie

Navigatiemechanismen die op meerdere pagina's worden herhaald, moeten in dezelfde relatieve volgorde verschijnen. Verander geen menu's tussen pagina's.

Understandable 3.2.3

D

Accept All
manage
manipulative ✗

Dark patterns

Bedrieglijke UI-trucs die gebruikers manipuleren: verborgen kosten, geforceerde continuïteit, misleiding, bevestigingsschaamte, kakkerlakhotels, verklede advertenties. Het ethische tegenargument van Laws of UX. Steeds vaker illegaal onder GDPR, FTC-handhaving en de EU Digital Services Act.

UX Principles
Name
Role
Dept

Datatabel

Gebruik <th> met scope="col"/"row". Voeg <caption> of aria-labelledby toe. Gebruik nooit tabellen voor lay-out. Slechts 19% van de waargenomen tabellen had geldige opmaak in de WebAIM Million 2026.

UI Patterns

Data Visualization

Charts and graphs need a text alternative — a short summary, a data table, or both. Don't tell data series apart by color alone; add labels, patterns, or direct annotations. Bars, lines, and segments must meet 3:1 non-text contrast.

UI Patterns
April 2026
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Datumkiezer

Berucht ontoegankelijk. Moet toetsenbordnavigatie ondersteunen (pijltoetsen voor dagen, page up/down voor maanden). Bied altijd een tekstinvoer-alternatief. Native <input type="date"> is vaak de beste optie.

UI Patterns

Designated Authority

The body each EU Member State names to receive complaints, monitor compliance, and where applicable impose sanctions under the EAA. Some Member States designate a single accessibility authority; others split responsibility between sectoral regulators (e.g., banking, transport, telecoms).

Compliance

Dialoog / modal

65% fail

Focusvasthouding binnenin, Escape om te sluiten, focus keert terug naar trigger bij sluiting. Gebruik <dialog> of role="dialog" + aria-modal="true". Een van de meest kapotte patronen.

Essentieel UI Patterns

Disability Spectrum

Disability isn't one fixed group. It can be permanent (one arm), temporary (a broken arm), or situational (holding a baby). Solve for one and you extend to many — the curb-cut effect: curb ramps built for wheelchairs also help strollers, luggage, and carts.

UX Principles

Documentstructuur

Koppen, lijsten, tabellen en leesvolgorde moeten structureel gecodeerd zijn — niet alleen visueel gestyled. Geldt voor Word, PowerPoint, InDesign en Google Docs. Exporteer naar getagde PDF.

Documents
<html> no lang
<html lang="en">

Documenttaal

16% fail

Elke pagina heeft lang="xx" nodig op het <html>-element. Schermlezers gebruiken dit om van uitspraakengine te wisselen. Ontbreekt op 16% van de homepagina's. Eenregelige fix met enorme impact.

Essentieel Understandable 3.1.1
16px
24px ✓
44px ★

Doelgrootte

Interactieve doelen moeten minimaal 24×24 CSS-pixels zijn (Niveau AA, nieuw in WCAG 2.2). 44×44px is de beste praktijk. Uitzonderingen: inline links in tekst, items met een alternatief doelwit.

Operable 2.5.8
<400ms
feels instant
>1s
flow breaks

Doherty-drempel

Productiviteit stijgt enorm wanneer de responstijd onder 400ms is. Interacties die instant aanvoelen behouden de flow-state. Gebruik skeleton screens, optimistic UI en voortgangsindicatoren wanneer latentie deze drempel overschrijdt.

Laws of UX

E

E-mailtoegankelijkheid

HTML-e-mail heeft beperkte rendering-engines (Outlook gebruikt Word). Gebruik semantische tabellen voor lay-out, echte tekst boven afbeeldingen, voldoende contrast, alt-tekst op afbeeldingen en betekenisvolle linktekst. Test in Litmus of Email on Acid.

Documents

EAA Penalties

Sanctions for EAA non-compliance are set by each Member State and must be 'effective, proportionate and dissuasive.' Penalty ceilings vary widely: Germany up to €100,000 per infringement under BFSG; Ireland up to €60,000 plus possible imprisonment; the Netherlands and France use periodic-penalty and administrative-fine regimes. Repeat or serious cases can trigger market-access restriction.

Compliance

EN 301 549

Europese standaard voor ICT-toegankelijkheidsvereisten. Omvat WCAG en breidt uit naar software, hardware, documentatie en ondersteunende diensten. Verwezen door de EAA en EU Web Accessibility Directive.

Compliance

Esthetisch-bruikbaarheidseffect

Gebruikers ervaren esthetisch aantrekkelijke ontwerpen als bruikbaarder — zelfs wanneer ze dat niet zijn. Mooi ontwerp bouwt tolerantie op voor kleine wrijving. Maar esthetiek kan niet compenseren voor fundamentele toegankelijkheidsfouten.

Laws of UX
EAA
Jun 2025

Europese Toegankelijkheidswet

EU-richtlijn die toegankelijke producten en digitale diensten vereist sinds 28 juni 2025. Geldt voor e-commerce, bankieren, vervoer, e-books en meer. Niet-naleving brengt markttoegangsrisico met zich mee.

Compliance

F

Flow-state

Totale onderdompeling in een taak waarbij uitdaging overeenkomt met vaardigheid. Ontwerp voor flow: minimaliseer onderbrekingen, bied duidelijke doelen, geef onmiddellijke feedback en verwijder onnodige wrijving. Toegankelijkheidsbarrières verbreken flow.

Laws of UX

Focusbeheer

65% fail

Bij dynamische wijzigingen (modals openen/sluiten, items verwijderen, AJAX-laden) moet de focus programmatisch naar een logische locatie worden verplaatst. Eén van de meest over het hoofd geziene patronen.

Essentieel Operable
sticky header
btn
obscured ✗

Focus niet verborgen

Wanneer een element toetsenbordfocus ontvangt, mag het niet volledig verborgen worden door sticky headers, cookiebanners, chatwidgets of overlays. Het meest gefaalde nieuwe WCAG 2.2-criterium.

Essentieel Operable 2.4.11

Focusvolgorde

De tabvolgorde moet logisch en voorspelbaar zijn en de visuele lay-out volgen. Gebruik geen positieve tabindex-waarden. Bronvolgorde moet overeenkomen met visuele volgorde.

Operable 2.4.3

Focusweergave

Focusindicatoren moeten minimaal 2px dik zijn rondom de omtrek met 3:1 contrast tussen gefocuste en ongefocuste staten. Niveau AAA in WCAG 2.2. Het criterium dat eindelijk kwantitatief definieert wat 'zichtbaar' betekent.

Operable 2.4.13
Button
Link

Focus zichtbaar

68% fail

Alle interactieve elementen moeten een zichtbare focusindicator hebben bij toetsenbordnavigatie. Faalt op 68% van de homepagina's. Gebruik :focus-visible voor indicatoren die alleen bij toetsenbordgebruik verschijnen.

Essentieel Operable 2.4.7 Interactive

Forced Colors & High Contrast

Operating systems let people swap every color for their own palette (Windows High Contrast / `forced-colors` mode). Don't fight it: use semantic HTML, keep meaning out of background images, and check that content still reads after the swap.

Robust
<label> ✓
Email
placeholder ✗

Formulierlabel

49% fail

Elk invoerveld heeft een zichtbaar, programmatisch gekoppeld label nodig. Placeholder-tekst is geen label. Ontbrekende formulierlabels treffen 49% van de homepagina's — de op één na meest voorkomende WCAG-fout na contrast.

Essentieel UI Patterns 1.3.1
Item deleted Undo

Foutherstel

Maak fouten makkelijk te herstellen, niet bestraffend. Bewaar formuliergegevens bij validatiefouten. Sta ongedaan maken toe. Identificeer duidelijk wat er mis ging en hoe het te repareren. Norman's 'Design of Everyday Things'-principe.

UX Principles

Foutidentificatie

62% fail

Fouten moeten in tekst worden beschreven (niet alleen kleur), bij het veld worden geplaatst, en via aria-describedby + role="alert" worden aangekondigd. Specifiek en actiegericht: "Voer een geldig e-mailadres in" niet alleen "Ongeldige invoer".

Essentieel Understandable 3.3.1

Foutpreventie

Voor juridische, financiële of gegevensverwijderingsacties: laat gebruikers controleren voordat ze indienen, sta ongedaan maken toe, of bevestig de actie. Vermindert de gevolgen van fouten voor iedereen.

Understandable 3.3.4

Fundamentele wijziging

Een EAA-vrijstelling wanneer het voldoen aan een toegankelijkheidseis een fundamentele wijziging van het product of de dienst zou vereisen - de fundamentele aard ervan veranderen. Kleiner dan onevenredige belasting. Dezelfde documentatieplicht is van toepassing.

Other

G

Geautomatiseerd testen

Tools zoals axe, WAVE, Lighthouse vangen ~30-40% van de WCAG-problemen automatisch. Goed voor contrast, alt-tekst, labels, ARIA-attributen. Kan focusvolgorde, leesbegrip of toetsenbordvallen niet detecteren.

Testing
color only ✗
!
+ shape ✓

Gebruik van kleur

Kleur mag niet het enige visuele middel zijn om informatie over te brengen. Voeg iconen, patronen, onderstrepingen of tekstlabels toe naast kleurcodering. Treft 300 miljoen mensen met kleurenblindheid.

Perceivable 1.4.1

Geharmoniseerde normen

Technische normen die door een Europese normalisatie-instelling zijn aangenomen en waarnaar in het Publicatieblad van de EU wordt verwezen. Overeenstemming met een geharmoniseerde norm creëert een "vermoeden van overeenstemming" met de overeenkomstige EAA-vereisten. Voor ICT-diensten is de geldende norm EN 301 549.

Compliance
Step 3/4Almost there

Goal-gradient effect

Mensen versnellen hun gedrag naarmate ze dichter bij een doel komen. Voortgangsbalken, stap-indicatoren en voltooiingspercentages benutten dit. "Stap 3 van 4" is motiverender dan "bijna klaar".

Laws of UX

H

Home
About
Contact

Hamburgermenu

aria-expanded op de triggerknop, aria-controls verwijzend naar het menupaneel. Focusbeheer: verplaats focus naar menu bij openen, terug naar trigger bij sluiten. Escape om te sluiten.

UI Patterns

Handmatig testen

Toetsenbordnavigatie, schermlezertesten, zoomtesten en expertbeoordeling. Vangt de ~60-70% van problemen die automatisering mist. Essentieel voor focusbeheer, leesbegrip en echte gebruikerservaring.

Testing

Hulptechnologie

Elk apparaat of software dat mensen met beperkingen helpt bij het gebruik van technologie. Omvat schermlezers, vergrootglazen, schakelaartoestellen, eye trackers, spraakbesturing (Dragon), brailleleesregels en alternatieve toetsenborden. Ontwerp en test voor het volledige spectrum.

Testing

I

In-Scope Services (EAA)

The EAA covers a defined list of consumer services: e-commerce (B2C); banking services for consumers; e-books and dedicated software; electronic communications services; access to audiovisual media services; passenger transport (web, apps, e-ticketing, terminals); and emergency communications to 112. Other digital services are outside the directive's scope.

Essentieel Compliance
permanent
temporary
situational

Inclusief ontwerp

Ontwerp voor de volledige reeks menselijke diversiteit: permanent, tijdelijk en situationeel. Een gebroken arm, een baby vasthouden en een drukke trein zijn allemaal "éénhandig". Microsoft's Inclusive Design Toolkit.

UX Principles

Info & relaties

60% fail

Informatie, structuur en relaties die visueel worden overgebracht moeten programmatisch bepaalbaar zijn. Visuele koppen moeten echte heading-elementen zijn. Visuele lijsten moeten ul/ol gebruiken.

Essentieel Perceivable 1.3.1

K

Keuzestress

Te veel opties leidt tot beslissingsverlamming en verminderde tevredenheid (paradox van keuze). Beperk zichtbare opties, gebruik standaardwaarden en sta filtering toe. Overlapt direct met cognitieve belastingsvermindering.

Laws of UX
Aa
18:1 ✓
Aa
1.5:1 ✗

Kleurcontrast

84% fail

Tekst moet een contrastverhouding van minimaal 4,5:1 hebben ten opzichte van de achtergrond (3:1 voor grote tekst ≥18pt/14pt vet). De meest voorkomende WCAG-fout — gevonden op 84% van de homepagina's in de WebAIM Million 2026.

Essentieel Perceivable 1.4.3 Interactive
normal
deuteranopia

Kleurenblindheid-simulatie

Tools die kleurvisiegebreken simuleren: protanopie (geen rood), deuteranopie (geen groen), tritanopie (geen blauw), achromatopsie (geen kleur). Chrome DevTools heeft een ingebouwde simulator. Gebruik om te verifiëren dat kleur nooit de enige indicator is.

Testing
H1
H2
H3
H2

Koppenstructuur

Koppen (H1–H6) moeten een logische hiërarchie vormen. Sla geen niveaus over. Gebruik koppen als document-outline, niet voor opmaak. 20% van de homepagina's heeft koppen die niveaus overslaan.

Perceivable 1.3.1

L

Label in naam

De toegankelijke naam van een component moet de zichtbare labeltekst bevatten. Als een knop visueel "Zoeken" zegt, moet de aria-label niet "Vind items" zijn. Essentieel voor spraakbesturingsgebruikers.

Understandable 2.5.3
header
nav
main
footer

Landmarks

HTML5 landmarks (header, nav, main, aside, footer) of ARIA-rollen laten schermlezersgebruikers snel naar secties springen. Elke pagina heeft minimaal main nodig. Duplicaat landmarks hebben unieke labels nodig.

Perceivable 1.3.1

Leesbaarheid van inhoud

Schrijf op het laagste praktische leesniveau. Vermijd jargon, gebruik korte zinnen, definieer technische termen. WCAG 3.1.5 (AAA) vereist lager middelbaar onderwijsniveau. Helpt iedereen, niet alleen gebruikers met cognitieve beperkingen.

UX Principles 3.1.5
<a href="#"></a> empty
<a href="#">Read more</a>

Linkdoel

47% fail

Linktekst moet het doel beschrijven, niet "klik hier" of "lees meer". Lege links (links zonder tekst) treffen 47% van de homepagina's. Schermlezergebruikers navigeren vaak via een linkenlijst — "klik hier" zegt niets.

Operable 2.4.4

Live Regions

A part of the page marked with `aria-live` so screen readers announce changes without moving focus. Use `polite` for routine updates (a results count) and `assertive` for urgent ones (an error). The region must exist before its text changes.

Robust

M

Markttoezichthoudende autoriteit

De nationale autoriteit die elke EU-lidstaat aanwijst om de EAA tegen producten te handhaven. De bevoegdheden omvatten het opvragen van documentatie, het inspecteren van diensten, het bevelen van corrigerende maatregelen, het beperken van de markttoegang en het opleggen van sancties. Voor diensten wijzen de lidstaten een aparte autoriteit aan die verantwoordelijk is voor de naleving van de voorschriften.

Compliance

Member State Transposition

Each EU Member State must transpose the EAA into national law. Operators comply with the national transposition, not the directive directly. Penalties, exemption procedures, and (in some cases) the scope of covered services vary between Member States.

Compliance

Mentaal model

De interne representatie van een gebruiker van hoe iets werkt. Wanneer de interface het mentale model schendt, ontstaat verwarring. Gebruik bekende patronen, duidelijke labels en voorspelbaar gedrag.

Laws of UX

N

Naam, rol, waarde

Alle interactieve componenten moeten hun naam (wat het heet), rol (wat het is) en status (in welke toestand het is) blootstellen aan hulptechnologie. De basis van compatibiliteit met hulptechnologie.

Essentieel Robust 4.1.2

Niet-tekstueel contrast

UI-componenten en grafische objecten hebben minimaal 3:1 contrast nodig. Geldt voor iconen, formulierranden, grafiekonderdelen, focusindicatoren — alles betekenisvol dat geen tekst is.

Perceivable 1.4.11

O

Occam's Razor

De eenvoudigste oplossing is meestal de beste. Elke toegevoegde complexiteit moet zijn gewicht bewijzen. Geldt voor UI-ontwerp, navigatiestructuur en formulierontwerp.

Laws of UX

Ondertiteling & transcripties

Vooraf opgenomen video heeft gesynchroniseerde ondertiteling nodig. Vooraf opgenomen audio heeft een transcriptie nodig. Live video heeft real-time ondertiteling nodig (Niveau AA). Helpt 430 miljoen mensen met gehoorverlies plus iedereen in een lawaaierige omgeving.

Perceivable 1.2.2

Onevenredige belasting

Een EAA-vrijstelling waarop een dienstverlener zich kan beroepen als conformiteit een onevenredige belasting zou vormen. Geen algemene opt-out: vereist een schriftelijke, gedocumenteerde beoordeling waarin de kosten, de omvang van de organisatie en het voordeel voor gebruikers met een handicap worden afgewogen. Ten minste elke 3 jaar herzien en vernieuwd.

Other

Overbodige invoer

Vraag gebruikers niet om dezelfde informatie twee keer in te voeren in hetzelfde proces, tenzij essentieel. Auto-vul eerder ingevoerde gegevens. Nieuw in WCAG 2.2. Vermindert cognitieve belasting.

Understandable 3.3.7

P

1
2
3
4

Paginering

Gebruik nav met aria-label="Paginering". Huidige pagina krijgt aria-current="page". Uitgeschakelde links gebruiken aria-disabled, niet verwijderde href. Bied duidelijke vorige/volgende labels.

UI Patterns

Paradox van de actieve gebruiker

Gebruikers lezen geen handleidingen — ze duiken er meteen in en leren al doende. Ontwerp voor ontdekking en foutbestendigheid in plaats van vereiste instructies.

Laws of UX
20%
80%
causes → effects

Pareto-principe

80% van de effecten komt van 20% van de oorzaken. Focus op de ~6 meest impactvolle WCAG-fouten (contrast, alt-tekst, labels, lege links, lege knoppen, taal) voor het grootste rendement.

Laws of UX
PDF
Tagged

PDF-toegankelijkheid

72% fail

Een ongetagde PDF is een platte afbeelding voor hulptechnologie — geen koppen, geen leesvolgorde, geen alt-tekst, geen formulierlabels. Scannen naar PDF en OCR uitvoeren maakt het niet toegankelijk.

Documents
peakend

Peak-end rule

Mensen beoordelen een ervaring op basis van het hoogtepunt en het einde, niet het gemiddelde. Maak het meest memorabele moment en de laatste interactie uitstekend. Geldt voor onboarding, checkout en foutafhandeling.

Laws of UX

Plain Language

Write so the widest audience understands on the first read: short sentences, everyday words, one idea per paragraph, and abbreviations spelled out the first time. Helps people with cognitive differences, non-native speakers, and anyone in a hurry.

Understandable

Pointer Gestures

Anything that uses a complex gesture — pinch-to-zoom, swipe along a path, two-finger rotate — must also work with a single tap or click. Maps, sliders, and carousels are common offenders. Affects people who can't make precise movements.

Operable 2.5.1

Progressieve onthulling

Toon alleen wat gebruikers nu nodig hebben; onthul complexiteit stap voor stap. Vermindert cognitieve belasting, verhoogt voltooiingspercentages. Wizards, accordions en "toon meer"-patronen zijn implementaties.

UX Principles

R

Reflow

Inhoud moet bruikbaar zijn bij 400% zoom zonder horizontaal scrollen (bij 320px CSS-breedte). Geen informatie mag verloren gaan of functionaliteit verbroken raken. Essentieel voor slechtziende gebruikers.

Perceivable 1.4.10

S

Schermlezer-basiskennis

NVDA (gratis, Windows), JAWS (commercieel, Windows), VoiceOver (ingebouwd macOS/iOS), TalkBack (Android). Test met minimaal twee. Schermlezergebruikers navigeren via koppen, landmarks en linkenlijsten — niet visueel.

Testing

Seizure Safety

Nothing on the page may flash more than three times in any one second — fast flashing can trigger seizures in people with photosensitive epilepsy. Avoid strobing animation, flashing ads, and rapid red flashes. When in doubt, don't flash.

Operable 2.3.1

Selectieve aandacht

Mensen kunnen maar één ding tegelijk verwerken. Overmatige animatie, pop-ups en concurrerende visuele elementen overweldigen de aandacht. Ontwerp voor focus, niet afleding.

Laws of UX
role="button" on div
<button> native ✓

Semantische HTML

Gebruik HTML-elementen voor hun bedoelde doel: <button> voor acties, <a> voor navigatie, <nav> voor navigatiesecties, <main> voor hoofdinhoud. Semantische HTML is de basis van webtoegankelijkheid.

Robust

Sensory Characteristics

Instructions can't depend on shape, size, position, or sound alone. "Press the round green button on the right" fails for anyone who can't see it — always add a text label: "Press Submit".

Perceivable 1.3.3
1
2
3
4
5

Seriële positie-effect

Mensen onthouden het eerste (primacy) en laatste (recency) item in een reeks het best. Plaats essentiële navigatie en acties aan het begin en einde van lijsten, menu's en formulieren.

Laws of UX
Skip to content

Skiplink

Een link "Ga naar hoofdinhoud" als eerste focusbaar element op de pagina. Laat toetsenbordgebruikers herhalende navigatie overslaan. Vereist door WCAG 2.4.1. Moet zichtbaar worden bij focus.

Operable 2.4.1

Sleepbewegingen

Elke sleepbewerking moet een niet-slepalternatief hebben (knoppen, formulierbesturingselementen). Nieuw in WCAG 2.2. Treft gebruikers die geen precieze aanwijzerbewegingen kunnen uitvoeren.

Operable 2.5.7
3 new messages
aria-live="polite"

Statusberichten

Statusberichten moeten programmatisch bepaalbaar zijn via rol of eigenschappen zodat ze aan schermlezers worden gepresenteerd zonder focus te ontvangen. Gebruik role="status" of aria-live.

Robust 4.1.3

T

Tab 1
Tab 2
Tab 3

Tabbladen

role="tablist" > role="tab" + role="tabpanel". Pijltoetsen voor tabbladwisseling, niet Tab. aria-selected op actief tabblad. Paneel wordt gekoppeld via aria-labelledby.

UI Patterns

Tekstafstand

Inhoud moet leesbaar en functioneel blijven wanneer gebruikers tekstafstand aanpassen: regelafstand 1,5×, alinea-afstand 2×, letterafstand 0,12em, woordafstand 0,16em.

Perceivable 1.4.12

Timing aanpasbaar

Als er een tijdslimiet is, moeten gebruikers deze kunnen uitschakelen, aanpassen of verlengen. Sessie-timeouts moeten 20+ seconden waarschuwen. Uitzonderingen: real-time evenementen, essentiële tijdslimieten.

Operable 2.2.1
Saved

Toastmelding

Korte statusberichten die verschijnen en automatisch verdwijnen. Gebruik role="status" of aria-live="polite". Mogen niet de enige manier zijn om kritieke informatie over te brengen. Bied sluitknop en voldoende weergavetijd.

UI Patterns

Toegankelijke authenticatie

Authenticatie mag geen cognitieve functietests vereisen (onthouden, overschrijven, puzzels) tenzij een alternatief bestaat. Sta plakken toe in wachtwoordvelden. Ondersteun wachtwoordmanagers. Nieuw in WCAG 2.2.

Understandable 3.3.8
🔍
""no name
🔍
"Search"

Toegankelijke naam

Elk interactief element heeft een berekende toegankelijke naam nodig. Bronnen (in prioriteit): aria-labelledby → aria-label → <label> → tekstinhoud → title. Lege naam = onzichtbaar voor hulptechnologie.

Essentieel Robust

Toegankelijkheidsboom

De parallelle DOM die hulptechnologie leest. Als een element niet in de toegankelijkheidsboom staat, bestaat het niet voor schermlezersgebruikers. Inspecteer via DevTools → tabblad Toegankelijkheid.

Robust Interactive
≠ fix

Toegankelijkheidsoverlays

JavaScript-widgets die beweren toegankelijkheid automatisch te repareren. Dat doen ze niet — pagina's met overlays hebben meer fouten, niet minder. 25% van de ADA-rechtszaken in 2024 betrof overlay-widgets. De FTC beboette één aanbieder miljoen in 2025 voor misleidende claims.

Compliance

Toegankelijkheidsverklaring

Publieke verklaring van toegankelijkheidsinzet, nalevingsniveau, bekende beperkingen en contactinformatie voor het melden van barrières. Vereist onder de EAA en veel nationale wetten. WAI biedt een generatortool.

Testing
Tab
Esc
Space
←→

Toetsenbordtoegankelijk

78% fail

Alle functionaliteit moet bereikbaar en bedienbaar zijn via het toetsenbord. 78% van de homepagina's heeft toetsenbordtoegankelijkheidsproblemen. Als het niet werkt met een toetsenbord, werkt het niet voor een groot deel van je publiek.

Essentieel Operable 2.1.1
Save your work
💾

Tooltip

Tooltips moeten toegankelijk zijn via focus (niet alleen hover). Gebruik role="tooltip" + aria-describedby. Escape om te sluiten. Mag essentiële inhoud niet verbergen.

UI Patterns

V

Vermoeden van conformiteit

Als een product of dienst voldoet aan een geharmoniseerde norm waarvan de referentie is gepubliceerd in het Publicatieblad van de EU, wordt het *vermoed* te voldoen aan de EAA-vereisten die door die norm worden gedekt. Conformiteit met EN 301 549 (waarnaar verwezen wordt) creëert dit vermoeden voor ICT.

Compliance
CC

Videospeler

Alle besturingen moeten toetsenbordtoegankelijk zijn. Bied ondertiteling, audiodescriptie en transcriptie. Geen autoplay (of respecteer prefers-reduced-motion). Volume en voortgang moeten via toetsenbord bedienbaar zijn.

UI Patterns

Voice Control

Software like Dragon, plus the dictation built into every phone, lets people operate a device entirely by speaking. Users say a button's visible label to activate it — which is why a control's visible text must match its accessible name.

Testing
!

Von Restorff-effect

Het item dat het meest afwijkt wordt het best onthouden. Markeer CTA's, fouten en essentiële informatie visueel. Maar gebruik isolatie spaarzaam — als alles opvalt, valt niets op.

Laws of UX

VPAT / ACR

Voluntary Product Accessibility Template: een gestandaardiseerd document dat verklaart hoe een product voldoet aan Section 508 / EN 301 549. Een ACR (Accessibility Conformance Report) is de ingevulde versie. Klanten eisen dit bij aanbestedingen.

Compliance

Vrijstelling voor micro-ondernemingen

Micro-ondernemingen (minder dan 10 werknemers EN jaaromzet of balans ≤ €2M) die diensten verlenen zijn vrijgesteld van de toegankelijkheidsvereisten van de EAA. De vrijstelling geldt NIET voor micro-ondernemingen die producten op de markt brengen - die moeten nog steeds aan de eisen voldoen.

Other

W

WCAG-overzicht

Web Content Accessibility Guidelines: de technische standaard voor webtoegankelijkheid. Versie 2.2 (oktober 2023) heeft 87 succescriteria in drie niveaus (A, AA, AAA) georganiseerd rond vier principes (POUR).

Compliance

WCAG 3.0 (W3C Accessibility Guidelines)

Toekomstige opvolger van WCAG 2.x. Nieuw scoremodel (brons/zilver/goud), gemoderniseerde testmethoden en bredere dekking inclusief cognitieve toegankelijkheid. Nog in concept — niet gebruiken voor huidige naleving.

Compliance

WCAG Niveau A

De basislaag: 32 criteria die de meest fundamentele barrières aanpakken. Als een Niveau A-criterium faalt, kunnen sommige gebruikers de inhoud helemaal niet gebruiken. Elke site moet minimaal Niveau A halen.

WCAG Levels
A
32
AA
56
AAA
87

WCAG Niveau AA

Niveau AA is de juridische standaard wereldwijd. Het omvat 56 criteria in totaal (32 van Niveau A + 24 Niveau AA) en wordt verwezen door de ADA, Europese Toegankelijkheidswet, Section 508, EN 301 549 en vrijwel elke nationale toegankelijkheidswet.

Essentieel WCAG Levels

WCAG Niveau AAA

Het hoogste nalevingsniveau: 87 criteria in totaal. Wordt zelden als volledig verplicht gesteld, maar individuele AAA-criteria (zoals verbeterd contrast 7:1) worden als beste praktijk beschouwd. Focus Appearance (2.4.13) is AAA.

WCAG Levels

WCAG POUR-principes

De vier principes die alle WCAG-criteria organiseren: Perceivable (waarneembaar), Operable (bedienbaar), Understandable (begrijpelijk), Robust (robuust). Elk criterium valt onder één principe.

WCAG Levels

Web Accessibility Directive

EU Directive 2016/2102 — the WAD. Requires public-sector body websites and mobile apps to meet EN 301 549 (which embeds WCAG 2.1 AA). Distinct from the EAA, which targets private-sector products and services. Some operators fall under both regimes.

Compliance

Werkgeheugen

Beperkt tot ~4 chunks tegelijk (bijgewerkt van Miller's 7±2). Dwing gebruikers niet om informatie tussen schermen te onthouden. Toon context, herhaal essentiële info en minimaliseer geheugenbelasting.

Laws of UX
OK

Wet van Fitts

Tijd om een doel te bereiken = f(afstand, grootte). Grotere, dichterbijere doelen zijn sneller te raken. Maak primaire acties groot en dicht bij de cursor. Geldt direct voor doelgrootte-toegankelijkheid (WCAG 2.5.8).

Laws of UX

Wet van gelijkenis

Elementen die visueel op elkaar lijken worden als gerelateerd waargenomen. Gebruik consistente vormen, kleuren en groottes voor dezelfde type elementen. Vermeng visuele stijlen alleen voor bewuste differentiatie.

Laws of UX

Wet van gemeenschappelijke regio

Elementen binnen een gedeelde visuele grens worden als gegroepeerd waargenomen. Kaarten, secties, veldsets en panelen gebruiken dit principe. Effectiever dan alleen nabijheid.

Laws of UX
slow
fast ✓

Wet van Hick

Beslissingstijd neemt logaritmisch toe met het aantal keuzes. Verminder zichtbare opties, groepeer gerelateerde keuzes, gebruik progressieve onthulling. Meer dan 7±2 opties vertraagt iedereen.

Laws of UX

Wet van Jakob

Gebruikers besteden het merendeel van hun tijd op andere sites. Ze verwachten dat jouw site hetzelfde werkt als alle andere die ze kennen. Volg gevestigde conventies tenzij je een dwingende reden hebt om af te wijken.

Laws of UX
4805551234
(480) 555-1234
chunked → memorable

Wet van Miller

Mensen kunnen ~7 (±2) items tegelijk in het werkgeheugen houden. Chunk informatie in groepen. Telefoonnummers, creditcardnummers en navigatiemenu's moeten allemaal gestructureerd zijn.

Laws of UX
spacing = grouping

Wet van nabijheid

Objecten die dicht bij elkaar staan worden als gerelateerd waargenomen. Groepeer gerelateerde formuliervelden, navigatie-items en inhoudssecties met witruimte. Gebroken nabijheid creëert valse groepen.

Laws of UX

Wet van Parkinson

Werk breidt zich uit om de beschikbare tijd te vullen. Stel duidelijke deadlines en beperkingen in voor taken. Formulieren met minder velden worden sneller ingevuld.

Laws of UX

Wet van Postel

Wees conservatief in wat je verstuurt, liberaal in wat je accepteert. Accepteer verschillende invoerformaten (datums, telefoonnummers), maar geef consequente, schone uitvoer. Vergelijkbaar met robuust foutafhandeling.

Laws of UX

Wet van Prägnanz

Mensen interpreteren ambigue vormen op de eenvoudigste manier. Houd interfaces simpel en voorspelbaar. Complexe lay-outs worden mentaal vereenvoudigd — zorg dat die vereenvoudiging de juiste interpretatie is.

Laws of UX

Wet van Tesler

Elk systeem heeft een inherente hoeveelheid complexiteit die niet kan worden verminderd. De vraag is: wie draagt die complexiteit — de gebruiker of het systeem? Verschuif complexiteit naar het systeem waar mogelijk.

Laws of UX

Wet van uniforme verbondenheid

Elementen die visueel verbonden zijn (door lijnen, kleuren of randen) worden als meer gerelateerd waargenomen dan elementen die niet verbonden zijn. Sterker dan nabijheid of gelijkenis.

Laws of UX

Z

Set up profile
Add photo
Invite team

Zeigarnik-effect

Mensen onthouden onvoltooide taken beter dan voltooide. Voortgangsbalken, opgeslagen formulierstatussen en "hervat waar je gebleven was"-patronen benutten dit effect.

Laws of UX
100%
400%

Zoom- & vergrootglastesten

Test op 200% en 400% zoom. Controleer: is alle inhoud nog beschikbaar? Overlapt er iets? Is horizontaal scrollen vermeden bij 320px breedte? Werken sticky elementen nog? Test zowel browserzoom als OS-vergroting.

Testing