Je webshop toegankelijk maken: een EAA-stappenplan naar WCAG 2.1 AA

Je verkoopt online, je verwerkt bestellingen, en toch kan een deel van je klanten je webshop niet of nauwelijks gebruiken. Iemand die blind is en met een screenreader winkelt, iemand met een motorische beperking die alleen het toetsenbord gebruikt, of iemand die door slechtziendheid lichte grijze tekst gewoon niet leest. Sinds de European Accessibility Act van kracht is, is dat niet langer alleen een kwestie van fatsoen of gemiste omzet, maar een wettelijke eis. En de praktijk is hardnekkig: op bijna elke webshop is digitale toegankelijkheid nog niet op orde.

Deze gids is voor ondernemers en teams die een webshop draaien (van een MKB-winkel tot de e-commerce-afdeling van een groter bedrijf) en die toegankelijkheid van een vaag begrip naar een afgeronde checklist willen brengen. Geen juridisch college, maar een werkbaar stappenplan: wat je nodig hebt, in welke volgorde je test en repareert, waar het misgaat, en wanneer je het zelf oplost of beter laat bouwen.

Wat de wet van je webshop vraagt

De European Accessibility Act geldt voor webshops met tien of meer medewerkers of meer dan 2 miljoen euro jaaromzet. Ben je een micro-onderneming (minder dan tien mensen in dienst en maximaal 2 miljoen euro omzet), dan ben je vrijgesteld. Val je er wel onder, dan moet je online winkel voldoen aan WCAG 2.1 niveau AA (de A- en AA-eisen samen). In de loop van 2026 wordt WCAG 2.2 niveau AA de nieuwe norm, dus bouw daar nu al naartoe.

Toezicht ligt bij de Autoriteit Consument & Markt. De ACM werkt getrapt: eerst een schriftelijke aanwijzing met een hersteltermijn, en pas als je daarna niet levert volgen sancties, een last onder dwangsom of een boete tot 900.000 euro of 1% van de jaaromzet. De toezichthouder rondde begin 2026 een eerste controleronde af bij ruim honderd grote webwinkels, dus de handhaving is geen papieren tijger meer.

Belangrijk om te weten: een onafhankelijke audit of certificaat is niet verplicht. Wat wél moet, is een vindbare toegankelijkheidsverklaring op je site. Dat dit een reële opdracht is, blijkt uit de stand van zaken: in eerder onderzoek bleek dat geen enkele Nederlandse organisatie volledig aan de Europese toegankelijkheidswet voldoet. Tegelijk is dat geen reden tot paniek, want toegankelijkheid is vooral een bedrijfskans en geen strafmaatregel: je vergroot je bereik, je SEO en je conversie tegelijk.

Wat je nodig hebt

Voor een eerste, serieuze ronde heb je geen duur gereedschap nodig. Dit is genoeg om te beginnen:

• Een moderne browser (Chrome of Firefox) met een gratis testextensie: axe DevTools van Deque, WAVE van WebAIM, of de ingebouwde Lighthouse in Chrome DevTools.
• Een screenreader. Op Windows is NVDA gratis; op Mac zit VoiceOver standaard in het systeem. Beide kosten niets en zijn genoeg om je koopflow te testen.
• Een kleurcontrast-checker, bijvoorbeeld de Colour Contrast Analyser of de contrast-functie in je browser-devtools.
• Toegang tot je code of CMS-thema. Sommige fixes los je op in de teksteditor (alt-teksten), andere zitten in je thema of front-end (contrast, labels, focus).
• Een halve tot hele dag voor de nulmeting van je kernpagina's. Reken op meer tijd voor het repareren zelf.

Het stappenplan

Een webshop toegankelijk maken doe je in een vaste volgorde: bepaal of je onder de wet valt, scan je belangrijkste sjablonen automatisch, test daarna handmatig met toetsenbord en screenreader, repareer de fouten die het vaakst voorkomen, publiceer een toegankelijkheidsverklaring en borg het in je proces. Werk steeds van grootste impact naar kleinste moeite.

Doorloop deze zeven stappen op je belangrijkste templates (homepage, categoriepagina, productpagina, winkelmandje, checkout en account):

1. Baken je scope af

Bevestig eerst of je onder de wet valt (tien of meer medewerkers, of meer dan 2 miljoen euro omzet) en kies dan je testpagina's. Je hoeft niet elke productpagina los te testen, maar wél elk uniek sjabloon. De koopflow (van productpagina naar betaalde bestelling) is je hoofdpad: een ontoegankelijke checkout blokkeert direct omzet, dus die krijgt prioriteit.

2. Draai een automatische scan

Open elk kernsjabloon en laat axe DevTools, WAVE of Lighthouse erop los. Dit kost vijf minuten per pagina en vangt de laaghangende fouten: ontbrekende alt-teksten, formuliervelden zonder label, te laag contrast, een ontbrekende paginataal. Besef de grens: automatische tools vinden grofweg een derde tot de helft van alle problemen. Ze zien dat een knop geen toegankelijke naam heeft, niet of je tabvolgorde logisch loopt. Gebruik de scan als startpunt, niet als eindrapport.

3. Test met alleen je toetsenbord

Leg je muis weg. Navigeer met Tab (vooruit), Shift+Tab (terug), Enter en spatie (activeren) en Escape (sluiten) door je hele koopflow. Let op drie dingen: is er altijd een zichtbare focusrand te zien (WCAG 2.4.7), is de volgorde logisch (van boven naar beneden, links naar rechts), en kun je alles bereiken en bedienen zonder muis (2.1.1). Kom je met je toetsenbord niet in je eigen winkelmandje of door je checkout, dan kan een deel van je klanten dat ook niet.

4. Loop de koopflow door met een screenreader

Zet NVDA of VoiceOver aan en doe een echte aankoop met je ogen dicht of scherm uit. Hoor je voor elke productafbeelding een zinnige beschrijving? Worden formuliervelden mét hun label voorgelezen ("E-mailadres, invoerveld")? Krijg je bij een foutmelding te horen wát er misging? Deze test is oncomfortabel en juist daarom waardevol: hij legt bloot wat een scan nooit ziet.

5. Repareer de meest voorkomende fouten eerst

Een handvol fouttypes is verantwoordelijk voor het leeuwendeel van alle problemen op het web. Uit het WebAIM Million-onderzoek blijkt dat op 79,1% van de homepages de tekst te weinig contrast heeft met de achtergrond; ontbrekende alt-teksten (55,5%), formuliervelden zonder label (48,2%), lege links (45,4%) en lege knoppen (29,6%) volgen. Pak die zes in deze volgorde aan:

• Contrast: normale tekst minimaal 4,5:1, grote tekst en interface-elementen 3:1. Fix dit in je design tokens, niet per pagina.
• Alt-teksten: elke productfoto krijgt een beschrijvende alt; puur decoratief beeld krijgt een lege alt (alt="") zodat de screenreader het overslaat.
• Formulierlabels: elk invoerveld een gekoppeld <label>. Een placeholder is géén label.
• Lege links en knoppen: een icoon-knop (zoals een winkelmandje of hamburgermenu) heeft een toegankelijke naam nodig via tekst of aria-label.
• Paginataal: zet lang="nl" op je <html>, zodat de screenreader de juiste uitspraak kiest.

6. Schrijf en publiceer je toegankelijkheidsverklaring

Maak een pagina waarop je beschrijft hoe toegankelijk je webshop is, welke norm je aanhoudt (WCAG 2.1 AA), welke onderdelen nog niet voldoen en hoe bezoekers een probleem kunnen melden. Link ernaar vanuit je footer, zodat hij makkelijk te vinden is. Dit is de enige formele verplichting naast het toegankelijk zijn zelf, en de eerste plek waar een toezichthouder kijkt.

7. Hertest en borg het in je proces

Toegankelijkheid is geen project met een einddatum, maar een eigenschap die wegslijt bij elke nieuwe pagina of campagne. Borg het: voeg een automatische toegankelijkheidscheck toe aan je build of CI, leg contrastregels vast in je design-systeem, en geef je contentredacteuren een korte instructie over alt-teksten en koppenstructuur. Zo voorkom je dat je over een half jaar opnieuw begint.

Valkuilen

De toegankelijkheids-overlay als wondermiddel. Widgets die met één regel JavaScript beloven je site "in seconden compliant" te maken (overlays met een poppetjes-icoon rechtsonder) maken je webshop niet conform en kunnen de ervaring voor screenreader-gebruikers juist verslechteren. Toezichthouders en belangenorganisaties wijzen ze structureel af. Steek je geld in echte fixes, niet in een pleister.

Alleen vertrouwen op de automatische scan. Een groene Lighthouse-score betekent niet dat je voldoet. De helft van de problemen, juist de problemen rond toetsenbordbediening, focus en begrijpelijke foutmeldingen, vind je alleen handmatig. Een schone scan is een begin, geen bewijs.

De checkout vergeten. Veel webshops testen netjes de homepage en de productpagina, maar laten de stappen daarna (bezorgopties, betaalkeuze, foutafhandeling) ongemoeid. Juist daar haakt iemand af die niet verder komt, en juist daar verlies je omzet.

Placeholder verwarren met label. Grijze tekst ín een invoerveld verdwijnt zodra je typt en wordt door veel screenreaders niet als label gezien. Het ziet er strak uit, maar het is een klassieke toegankelijkheidsfout.

Toegankelijkheid eenmalig afvinken. Zonder borging in je proces sluipt elke nieuwe landingspagina of actiebanner er weer in. De grootste fout is denken dat je "klaar" bent.

Kant-en-klaar of maatwerk?

Hoe je dit aanpakt, hangt af van je platform, je team en hoeveel je zelf in de hand hebt. De realistische opties:

Voor een standaardwebshop op een gangbaar platform kom je een heel eind met een toegankelijk thema plus de handmatige fixes uit dit stappenplan. Heb je een eigen of zwaar aangepaste front-end, een complexe configurator of een checkout met veel maatwerk, dan is toegankelijkheid iets dat je in de bouw zelf verankert: in je componenten, je design tokens en je geautomatiseerde tests. Overlays sla je in beide gevallen over. Heb je een platform als Shopify of WooCommerce, check dan eerst hoe ver het standaardthema je brengt voordat je iets bijbouwt.

Tot slot

Toegankelijkheid voelt als een verplichting, maar gedraagt zich als kwaliteit. Een webshop die met het toetsenbord te bedienen is, duidelijke labels heeft en genoeg contrast biedt, is voor iedereen prettiger: hij laadt voorspelbaarder, scoort beter in zoekmachines en verliest minder mensen onderweg naar de kassa. De wet zet er nu een deadline en een boete onder, maar de echte winst zit in de klanten die je tot nu toe stilletjes kwijtraakte bij de eerste hobbel. Begin bij je koopflow, repareer de grote zes, en maak van toegankelijkheid een vast onderdeel van hoe je bouwt, niet een project dat je één keer afvinkt.