Toegankelijkheid webshop (EAA): 7 fixes, geen overlay

Sinds 28 juni 2025 moet een webshop die aan consumenten in de EU verkoopt toegankelijk zijn volgens de Europese Toegankelijkheidswet (European Accessibility Act), tenzij het om een micro-onderneming gaat (minder dan 10 personen en een jaaromzet of balanstotaal van hooguit €2 miljoen). In de praktijk betekent dat: je shop moet voldoen aan WCAG 2.1 niveau AA. Dat zijn leesbaar contrast, knoppen en links met een naam, afbeeldingen met alt-tekst, zoom die werkt en een checkout die je met alleen het toetsenbord kunt afronden. De meeste shops falen op dezelfde handvol punten, en die los je op in de code van het thema, niet met een overlay-widget. Toen we in oktober 2026 1.482 webshops scanden, had 64% tekst met te weinig contrast en had de helft links zonder leesbare naam.

Dit is de technische kant. Het is geen juridisch advies: elk EU-land heeft de wet in zijn eigen recht omgezet (in Duitsland het Barrierefreiheitsstärkungsgesetz, BFSG), en de exacte plichten en de handhaving verschillen per land.

Wat de wet van een webshop vraagt

• Wie: bedrijven die online producten of diensten aan consumenten in de EU verkopen. E-commercediensten worden in de richtlijn zelf genoemd (Richtlijn (EU) 2019/882, artikel 2).
• Wie is vrijgesteld: micro-ondernemingen die diensten verlenen: minder dan 10 werknemers en een jaaromzet of balanstotaal van hooguit €2 miljoen. Controleer dit voor je eigen bedrijf; groei je erboven, dan val je eronder.
• Sinds wanneer: de regels gelden vanaf 28 juni 2025. Dienstencontracten die vóór die datum zijn afgesloten, mogen uiterlijk tot 28 juni 2030 ongewijzigd doorlopen, maar een webshop die vandaag live staat is een dienst die nu wordt geleverd.
• Tot welk niveau: de geharmoniseerde norm EN 301 549, die voor webcontent verwijst naar WCAG 2.1 niveau AA. Dat is de maatstaf van een auditor of een toezichthouder.

Wat we vonden in 1.482 echte shops

Tussen 20 en 26 oktober 2026 scanden we de homepages van 1.482 Shopify- en WooCommerce-shops in het Verenigd Koninkrijk, Nederland, België en Thailand met EngineeringScore, onze eigen audittool. De volledige resultaten staan in we scanden 1.482 webshops voor Black Friday. Het toegankelijkheidsdeel:

Probleem op de homepage	Shops
Tekst met te weinig contrast	64%
Links zonder leesbare naam (winkelwagen-, social- en menulinks met alleen een icoon)	50%
Afbeeldingen zonder alt-tekst	21% (Shopify 24%, WooCommerce 17%)
Zoomen geblokkeerd op mobiel	12%

Dat was alleen de homepage, automatisch gecontroleerd. Automatische controles vinden ongeveer de problemen die je in code kunt meten; toetsenbordgebruik, focusvolgorde en de checkout vragen om een mens. Lees deze cijfers dus als een ondergrens, niet als een bovengrens.

De oplossingen, in de volgorde waarin wij ze zouden aanpakken

1. Contrast

WCAG vraagt een contrastverhouding van minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst (ongeveer 24 px, of 19 px vet). De gebruikelijke boosdoeners zijn lichtgrijze prijzen en labels, witte tekst op een foto en een lichte merkkleur op knoppen. De oplossing zit in de kleurinstellingen of de CSS van het thema: maak het grijs donkerder, zet tekst op een effen of verdonkerde achtergrond in plaats van direct op een foto, en controleer elk kleurenpaar één keer in een contrastchecker. Doe het waar mogelijk in de thema-instellingen, zodat een update het niet ongedaan maakt.

2. Geef elke link en knop een naam

Een winkelwagenicoon, een vergrootglas, een hamburgermenu of een Instagram-logo zegt een schermlezer niets, tenzij er een tekstnaam bij hoort. Google leest die namen ook. Voeg visueel verborgen tekst toe of een aria-label:

<a href="/cart" aria-label="Cart, 2 items"><svg aria-hidden="true">…</svg></a>

Bij Shopify zitten de meeste hiervan in de header- en footersecties van het thema; bij WooCommerce in de headertemplate van het thema of in een widget van een paginabuilder, die vaak een labelveld heeft dat niemand heeft ingevuld.

3. Alt-tekst die het product beschrijft

Productfoto's hebben alt-tekst nodig die zegt wat er op de foto staat: "Zwarte leren enkellaars, zijaanzicht", niet "IMG_4021" of vijf keer de productnaam. Puur decoratieve afbeeldingen krijgen een lege alt="", zodat schermlezers ze overslaan. Zowel Shopify als WooCommerce heeft per afbeelding een alt-veld in de admin; het werk zit in het invullen ervan, en in controleren dat het thema het ook echt uitvoert.

4. Laat mensen zoomen

Als je thema maximum-scale=1 of user-scalable=no in de viewport-tag heeft, kunnen bezoekers op hun telefoon niet zoomen. Haal allebei weg. De tag moet <meta name="viewport" content="width=device-width, initial-scale=1"> zijn. Zoom daarna in een desktopbrowser naar 200% en controleer dat niets overlapt of verdwijnt.

5. Toetsenbord en focus

Leg je muis weg en druk op Tab door de homepage, een productpagina en de hele checkout. Je moet altijd zien waar je bent (een zichtbare focusomlijning), elke knop kunnen bereiken, het menu en pop-ups kunnen openen en sluiten, en een maat of variant kunnen kiezen. Thema's halen de focusomlijning vaak weg omdat de ontwerper die lelijk vond; zet hem terug met een duidelijke :focus-visible-stijl. Pop-ups voor nieuwsbrieven en cookies zijn de meest voorkomende valkuil: ze zijn niet met het toetsenbord te sluiten.

6. Formulieren en de checkout

Elk veld heeft een echt label nodig (niet alleen een placeholder die verdwijnt zodra je typt), foutmeldingen moeten in tekst zeggen wat er mis is, niet alleen in het rood, en verplichte velden moeten gemarkeerd zijn. De betaalstap draait vaak in het eigen frame van de betaalprovider; dat deel is het werk van de provider, maar de stappen eromheen zijn van jou. Test het volledige traject met elke betaalmethode die je aanbiedt.

7. Taal en structuur

Stel de paginataal in (<html lang="nl"> op de Nederlandstalige shop, enzovoort) zodat schermlezers de tekst goed uitspreken, geef elke pagina één hoofdkop en houd de koppen in volgorde. Dat zijn kleine aanpassingen in het thema die ook zoekmachines helpen.

Waarom een overlay-widget het niet oplost

Toegankelijkheidsoverlays zijn scripts die een werkbalk of "AI"-laag boven op je shop zetten en met één regel code naleving beloven. De bovenstaande problemen zitten in de HTML en CSS van je thema; een script dat daarna draait kan ze niet betrouwbaar herstellen, en het kan de schermlezers en instellingen die mensen al gebruiken in de weg zitten. In april 2025 beval de Amerikaanse Federal Trade Commission overlayleverancier accessiBe om $1 miljoen te betalen en verbood haar te beweren dat haar product elke website zonder bewijs WCAG-conform kan maken. Een overlay is bovendien nog een extern script op pagina's die in onze scan al code laadden van een mediaan van 15 verschillende bedrijven.

Besteed het overlaybudget liever aan het repareren van het thema. Het is meestal een eenmalige klus, en het blijft opgelost tot iemand het thema verandert.

Shopify of WooCommerce: waar het werk zit

• Shopify: de checkout van het platform wordt door Shopify onderhouden; de storefront is jouw thema. Begin met de kleur- en typografie-instellingen van het thema, en pas daarna de header-, footer- en producttemplates aan voor labels, uitvoer van alt-tekst en focusstijlen. Apps die pop-ups en widgets injecteren zijn vaak de grootste boosdoeners, dus test met die apps ingeschakeld.
• WooCommerce: alles is van jou: thema, paginabuilder, checkoutplugins. Zet de oplossingen in een child theme, zodat updates ze niet overschrijven. Controleer elke plugin die front-end-HTML rendert, vooral sliders, megamenu's en productfilters.

Schrijf de oplossingen in beide gevallen in het thema of child theme, en test opnieuw na elke thema- of app-update. Kies je nog een platform? Onze vergelijking van e-commerceplatforms behandelt de afwegingen.

Controleer je eigen shop in 30 minuten

1. Laat je homepage, één productpagina en de winkelwagen controleren door EngineeringScore of door de Lighthouse-toegankelijkheidscheck in Chrome (F12, Lighthouse).
2. Tab zonder muis door de shop tot een afgeronde testbestelling.
3. Zoom op een laptop naar 200% en knijp-zoom op je telefoon.
4. Zet VoiceOver (iPhone, Mac) of TalkBack (Android) aan en luister naar je header en één product.
5. Schrijf op wat faalde, in volgorde van waar klanten de verkoop verliezen: eerst de checkout, dan de productpagina's, dan de rest.

Als je checkout het probleem is, helpt onze gids over een webshopcheckout die niet werkt je het volledige traject te testen. En bereid je je voor op de drukste weken van het jaar, combineer dit dan met de Black Friday-checklist.

Wil je het opgelost hebben in plaats van opgesomd?

Begin met onze websitecheck, of stuur ons het adres van je shop via contact. Hoe lang de oplossingen duren hangt af van het thema en de apps, dus we schatten het na een eerste blik. Je kunt ze per uur betalen of met een strippenkaart van 14 uur (€910).