17.3 Digitale toegankelijkheid (European Accessibility Act)

Sinds 28 juni 2025 moeten de meeste webshops digitaal toegankelijk zijn. De European Accessibility Act (EAA) maakt van toegankelijkheid een wettelijke plicht, geen vrijblijvende bonus. Concreet betekent het dat je webshop bruikbaar moet zijn voor mensen met een visuele, motorische, auditieve of cognitieve beperking — circa 1 op de 6 mensen. Het mooie: dezelfde aanpassingen verhogen je conversie, je SEO en je Core Web Vitals. Dit hoofdstuk maakt het praktisch.

Na dit hoofdstuk kun je:

Je legt uit wat de European Accessibility Act eist en dat WCAG 2.1 niveau AA het wettelijke standaardniveau is.
Je kunt de vier POUR-principes benoemen en vertalen naar concrete eisen (contrast 4,5:1, alt-teksten, toetsenbordbediening, labels).
Je voert een audit uit met scan, toetsenbordtest, contrastcheck en screenreader, en weet dat een scan slechts 30 tot 40% van de problemen vangt.
Je kunt beoordelen of je onder de micro-onderneming-uitzondering valt en wat er in een toegankelijkheidsverklaring hoort.

Kernconcepten

European Accessibility Act (EAA). Richtlijn (EU) 2019/882, van toepassing sinds 28 juni 2025. Verplicht onder andere e-commercediensten om toegankelijk te zijn voor mensen met een beperking. In Nederland geïmplementeerd in nationale wetgeving met toezicht door aangewezen instanties.

WCAG 2.1 niveau AA. De Web Content Accessibility Guidelines zijn de technische standaard. Niveau AA is het wettelijk vereiste niveau. Het bevat tientallen succescriteria, gegroepeerd onder vier principes (POUR).

POUR-principes. De vier pijlers van WCAG: Perceivable (waarneembaar — alt-teksten, contrast, ondertiteling), Operable (bedienbaar — toetsenbordnavigatie, geen tijdvallen), Understandable (begrijpelijk — duidelijke taal, voorspelbaarheid, foutmeldingen) en Robust (robuust — werkt met screenreaders en hulptechnologie).

Toegankelijkheidsverklaring. Een pagina op je site die beschrijft in hoeverre je voldoet aan de toegankelijkheidseisen, welke onderdelen nog niet voldoen en hoe gebruikers problemen kunnen melden.

Uitzondering micro-ondernemingen. Bedrijven met minder dan 10 medewerkers én een jaaromzet of balanstotaal onder 2 miljoen euro zijn voor het leveren van diensten (zoals een webshop) vrijgesteld van de EAA-verplichting. Let op: deze uitzondering kan vervallen zodra je groeit, en gemak voor de gebruiker blijft een commercieel voordeel.

Waarom is een geslaagde geautomatiseerde scan geen bewijs dat je voldoet?

Een schone Lighthouse- of axe-score voelt als een eindstreep, maar de stap-voor-stap audit noemt niet voor niets dat automatische tools slechts circa 30 tot 40% van de problemen vangen. De reden zit in wat een machine kán meten. Een scanner ziet of een afbeelding een alt-attribuut heeft, niet of die alt-tekst de afbeelding zinvol beschrijft. Hij ziet of een veld een label heeft, niet of dat label klopt. En hij kan een contrastverhouding van 4,5:1 narekenen, maar niet beoordelen of je toetsenbordvolgorde logisch is of dat je foutmeldingen begrijpelijk zijn.

Juist de meest impactvolle barrières — een checkout die je met Tab niet kunt afronden, een pop-up zonder focus-trap, “groen = op voorraad” zonder tekst — vallen in die onzichtbare 60 tot 70%. Daarom is de menselijke test met toetsenbord en screenreader geen extraatje bovenop de scan, maar het deel dat de echte blokkades vindt. Een score van 100 met een onbruikbare checkout is precies de valkuil die de EAA wil voorkomen.

Wat het concreet betekent voor je webshop

Tekstcontrast. Tekst tegen achtergrond moet een contrastverhouding van minimaal 4,5:1 hebben (3:1 voor grote tekst vanaf 18 punt of 14 punt vet). Lichtgrijze tekst op wit valt vaak af.
Alt-teksten. Elke informatieve afbeelding (productfoto’s, infographics) krijgt een beschrijvende alt-tekst. Decoratieve plaatjes krijgen een lege alt.
Toetsenbordnavigatie. Alles moet bedienbaar zijn met alleen het toetsenbord (Tab, Enter, pijltjes). Mega-menu’s, sliders en pop-ups mogen geen muis vereisen.
Zichtbare focus-states. Het element dat focus heeft (via Tab) moet een duidelijke visuele rand of markering tonen.
Formulierlabels. Elk invoerveld heeft een gekoppeld label. “Placeholder-only” velden voldoen niet.
Koppenstructuur. Logische hiërarchie met één H1 en daaronder H2, H3 in volgorde, zonder niveaus over te slaan.
Geen informatie alleen via kleur. “De rode velden zijn verplicht” voldoet niet; gebruik ook tekst of een icoon.
Leesbare lettergroottes. Body-tekst minimaal circa 16 px en schaalbaar tot 200% zonder dat content wegvalt.
Toegankelijke checkout. Foutmeldingen in tekst, duidelijke labels, voldoende tijd, en geen stappen die alleen met de muis of binnen een korte timer werkbaar zijn. Zie 3.4.

Stap-voor-stap audit

Draai een geautomatiseerde scan. Gebruik WAVE, axe DevTools of Lighthouse (tabblad Accessibility) op je homepage, een categoriepagina, een productpagina en de checkout. Dit vangt circa 30 tot 40% van de problemen.
Test de toetsenbordnavigatie. Leg je muis weg. Navigeer met Tab door de hele aankoopflow. Kun je alles bereiken en zie je steeds waar de focus staat? Werken pop-ups en menu’s?
Controleer het contrast. Meet de tekst-/achtergrondcombinaties met een contrast-checker. Let vooral op knoppen, badges, kortingsteksten en footer.
Controleer alt-teksten en koppen. Loop de afbeeldingen langs op zinvolle alt-teksten en check of de koppenstructuur logisch is (één H1, geen niveaus overgeslagen).
Test met een screenreader. Zet NVDA (gratis, Windows) of VoiceOver (Mac) aan en doorloop een aankoop. Wordt alles voorgelezen en is de volgorde logisch?
Stel verbeteringen prioritair op. Sorteer bevindingen op impact (blokkeert het de aankoop?) en moeite. Begin bij de checkout en productpagina’s.
Publiceer een toegankelijkheidsverklaring met de stand van zaken en een contactpunt voor meldingen.

WCAG-richtwaarden (niveau AA)

Criterium	Eis (AA)
Contrast normale tekst	Minimaal 4,5:1
Contrast grote tekst	Minimaal 3:1
Contrast UI-componenten/iconen	Minimaal 3:1
Tekst schaalbaar	Tot 200% zonder verlies van content
Toetsenbordbediening	100% van de functionaliteit
Zichtbare focus	Verplicht op alle interactieve elementen
Klikdoel (mobiel, AAA-aanrader)	Circa 44 bij 44 px

Tools

Tool	Functie	Wanneer kiezen
WAVE (wave.webaim.org)	Visuele scan met fouten en contrast	Snelle eerste check per pagina
axe DevTools	Browser-extensie, gedetailleerde WCAG-checks	Diepere audit door ontwikkelaar
Lighthouse (Chrome)	Accessibility-score plus performance	Gecombineerd met CWV-check
NVDA / VoiceOver	Screenreader voor echte gebruikerstest	Validatie van de aankoopflow
WebAIM Contrast Checker	Contrastverhoudingen meten	Bij kleur- en knopontwerp

Veelgemaakte fouten

Denken dat een “accessibility-overlay-widget” voldoet. Die plug-in-knopjes lossen de onderliggende code niet op en bieden geen juridische dekking. Fix de bron.
Placeholder-tekst als label gebruiken. Verdwijnt zodra je typt en wordt niet altijd voorgelezen.
Lichtgrijze tekst en lichtgekleurde knoppen met te laag contrast (de klassieke “subtiele” webshop-stijl).
Pop-ups en sliders zonder toetsenbordbediening of zonder focus-trap.
Informatie alleen via kleur (“groen = op voorraad”) zonder tekst of icoon.
Geen alt-teksten op productfoto’s, wat ook je SEO schaadt.
Geen toegankelijkheidsverklaring en geen meldpunt voor gebruikers.

Bonus: toegankelijkheid verhoogt conversie en SEO

Toegankelijke webshops presteren beter. Hoger contrast en grotere tekst verlagen drempels voor álle bezoekers (ook ouderen en mobiele gebruikers in fel zonlicht). Duidelijke formulierlabels en foutmeldingen verlagen de uitval in je checkout. Alt-teksten en een nette koppenstructuur helpen zoekmachines je content begrijpen, wat direct meespeelt in technische SEO en Core Web Vitals. Compliance en commercie wijzen hier dezelfde kant op.

Sjablonen

Toegankelijkheidsverklaring (basis)

Toegankelijkheidsverklaring

[Bedrijfsnaam] streeft ernaar dat iedereen onze webshop kan gebruiken. We werken aan naleving van de Web Content Accessibility Guidelines (WCAG) 2.1 niveau AA, conform de European Accessibility Act.

Stand van zaken: we voldoen grotendeels aan WCAG 2.1 AA. Bekende aandachtspunten: [bijvoorbeeld contrast in de footer, ondertiteling video].

Een probleem melden: ervaar je een toegankelijkheidsdrempel? Mail ons via [e-mailadres]. We reageren binnen [x] werkdagen en zoeken samen naar een oplossing.

Laatst bijgewerkt: [datum].

Oefen het zelf

Case: diagnosticeer de toegankelijkheid van een checkout

Je draait een Lighthouse Accessibility-scan op de checkout van je webshop en krijgt een score van 96 op 100. Tevreden wil je de pagina afvinken. Voor de zekerheid doe je nog twee handmatige checks. Je merkt het volgende:

De knop ‘Plaats bestelling’ is lichtgroen met witte tekst; je contrast-checker meet een verhouding van 2,3:1.
Verplichte velden worden alleen aangegeven door een rode rand, zonder tekst of icoon.
Met alleen het toetsenbord kun je tot de betaalstap navigeren, maar de pop-up met betaalmethodes vangt de focus niet: na het openen springt Tab terug naar de pagina eronder.

De vraag: welke van deze drie bevindingen zijn echte WCAG-AA-overtredingen, waarom miste de scan ze grotendeels, en in welke volgorde pak je ze aan?

Toon uitwerking

Alle drie zijn overtredingen van WCAG 2.1 niveau AA.

Contrast knop (2,3:1). Normale tekst vereist minimaal 4,5:1; UI-componenten minimaal 3:1. Met 2,3:1 zakt de knop onder beide drempels. Een scanner kán dit meten, maar Lighthouse beoordeelt soms alleen tekst-op-achtergrond en mist contrast op samengestelde of overlappende elementen — vandaar de hoge score ondanks de fout. Oplossing: donkerder groen tot je minstens 4,5:1 haalt.
Informatie alleen via kleur. Een rode rand zonder tekst of icoon valt weg voor kleurenblinde en screenreader-gebruikers. Dit is precies het type criterium dat een machine niet kan beoordelen: hij ziet de rand wel, maar niet dat die de enige drager van betekenis is. Oplossing: voeg het woord ‘verplicht’ of een sterretje met uitleg toe.
Pop-up zonder focus-trap. De ernstigste: dit blokkeert de aankoop volledig voor toetsenbordgebruikers. Geautomatiseerde scans testen de focusvolgorde nauwelijks, dus ook dit telt mee in de onzichtbare 60 tot 70%.

Prioriteit: eerst de focus-trap (blokkeert de aankoop), dan het contrast en de kleur-only velden (verlagen voltooiing, maar blokkeren niet). Les: een score van 96 is geen vrijbrief — de handmatige checks vonden hier de echte blokkades.

Test jezelf

Snelle kennischeck — digitale toegankelijkheid en de EAA

Welke contrastverhouding is volgens WCAG 2.1 AA minimaal vereist voor normale bodytekst?
Waarom voldoet een placeholder-tekst niet als vervanging voor een formulierlabel?
Waarom geeft een hoge Lighthouse-score nog geen garantie dat je webshop voldoet?
Wanneer mag je 'groen = op voorraad' zo tonen volgens WCAG AA?

Samenvatting

Sinds 28 juni 2025 verplicht de EAA de meeste webshops tot WCAG 2.1 niveau AA; circa 1 op de 6 mensen heeft een beperking.
Kerneisen: tekstcontrast minimaal 4,5:1 (3:1 voor grote tekst), zinvolle alt-teksten, 100% toetsenbordbediening, zichtbare focus en gekoppelde formulierlabels.
Een geautomatiseerde scan vangt maar 30 tot 40% van de problemen; de menselijke toetsenbord- en screenreadertest vindt de echte blokkades.
Breng geen informatie alleen via kleur over en plaats een toegankelijkheidsverklaring met meldpunt.
Toegankelijkheid verhoogt tegelijk conversie, SEO en Core Web Vitals — compliance en commercie wijzen dezelfde kant op.