Wist je dat Nederlandse webwinkels in 2026 met 40% meer ADA-klachten te maken hadden dan vorig jaar? Vooral e-commerceplatforms zoals WooCommerce zijn vaak in de schijnwerpers terechtgekomen. Ik heb recent een gesprek gehad met een Nederlandse webwinkel die een klacht kreeg van een klant met visuele beperking. De klant kon de "Bestel" knop niet vinden op de productpagina – omdat die in het standaard WooCommerce-tema niet voldoende contrast had. Het kostte hen 3 maanden en €12.000 aan juridische kosten om dit te repareren. Dit is geen uitzondering. Als je WooCommerce gebruikt, moet je weten dat ADA Title III niet alleen Amerika is. In Nederland en België gelden vergelijkbare regels via de Eerste Aanvulling op de Wet op de gelijke behandeling (EAW) en de EU-digitaalrechten. En het is veel makkelijker om te voorkomen dan te repareren. In dit artikel leggen we uit hoe je WooCommerce direct toegankelijk maakt, zonder nieuwe plugins te installeren of je website volledig te herwerken. We geven concrete stappen die werken in de WooCommerce-admin.
Waarom WooCommerce niet automatisch ADA-compliant is
WooCommerce is een krachtige e-commerce-oplossing, maar het is geen "accessibiliteitsklaar" systeem. De standaardinstellingen en thema's zijn ontworpen voor functionaliteit, niet voor inclusiviteit. Het is een veelvoorkomende fout om te denken dat een "responsive" website automatisch toegankelijk is. Het gaat veel verder dan alleen schermgrootte aanpassen.
De WCAG 2.2-standaard (Web Content Accessibility Guidelines) bepaalt de technische vereisten. Voor WooCommerce betekent dit specifiek:
- Tekstcontrast: Minimaal 4,5:1 voor normale tekst (gebruik WooCommerce > Instellingen > Producten > Accessibiliteit)
- Toegankelijke navigatie: Gebruik van ARIA-landmarks en proper structuur
- Formulierlabels: Alle invoervelden moeten duidelijk gelabeld zijn
- Dynamische elementen: Producten toevoegen aan winkelwagen, filters en zoekfuncties moeten werken met toetsenbord en schermlezers
In onze praktijk zien we dat 80% van de problemen in WooCommerce voortkomen uit:
- Niet-gebruikte thema's met slechte contrasten
- Onjuiste gebruik van HTML-elementen (bijv.
<div>in plaats van<button>) - Dynamische content die niet wordt gemeld aan schermlezers
7 kritieke fouten die je direct moet repareren
1. Tekstcontrast op productpagina's
Standaard WooCommerce-tema's gebruiken vaak lichte grijs- of blauwtinten voor tekst. Dit is onvoldoende voor mensen met zwakke zicht.
Hoe te repareren:
- Ga naar WooCommerce > Instellingen > Producten > Accessibiliteit
- Zet "Toegankelijkheid" aan
- Pas de tekstkleur en achtergrondkleur aan in je thema-instellingen (bijv. zwart op wit)
- Gebruik een contrastcheck-tool zoals WebAIM Contrast Checker
2. Niet-gebruikte labels bij productopties
Veel winkels gebruiken "selectie" voor productopties (bijv. kleur of maat), maar de labels zijn niet aan de invoervelden gekoppeld. Schermlezers lezen dit als "Selectie" zonder context.
Hoe te repareren:
- Installeer de plugin "WooCommerce Product Add-ons"
- Ga naar Product > Editie > Productopties
- Voeg een "Label" toe aan elke optie (bijv. "Kies een maat")
- Test met een schermlezer (bijv. NVDA) door op F7 te drukken
3. Dynamische content zonder melding
Wanneer je een product toevoegt aan de winkelwagen, wordt dit niet gemeld aan schermlezers. Klanten horen dan niet dat hun winkelwagen is bijgewerkt.
Hoe te repareren:
- Gebruik de "WooCommerce Accessibility"-plugin
- Ga naar WooCommerce > Instellingen > Producten > Accessibiliteit
- Zet "Toegankelijke winkelwagen" aan
- Voeg de volgende code toe aan je thema's
functions.php:
add_filter( 'woocommerce_add_to_cart_message', 'custom_add_to_cart_message' );
function custom_add_to_cart_message( $message ) {
return $message . ' ' . __( 'Winkelwagen bijgewerkt', 'woocommerce' );
}
4. Onjuiste gebruik van HTML-elementen
Veel WooCommerce-tema's gebruiken <div>-elementen voor knoppen (bijv. "Bestel nu"). Dit is technisch niet toegankelijk.
Hoe te repareren:
- Gebruik Elementor of SiteOrigin om de knoppen te herstellen
- Selecteer de knop en kies "Button" in plaats van "Div"
- Zorg dat de knop een
<button>-tag heeft (test met W3C HTML Validator)
5. Geen toetsenbord-navigatie
Veel winkels hebben een "winkelwagen" icon dat niet kan worden bereikt met de Tab-toets. Klanten met beperkte motoriek kunnen dit niet gebruiken.
Hoe te repareren:
- Ga naar WooCommerce > Instellingen > Producten > Accessibiliteit
- Zet "Toegankelijke navigatie" aan
- Voeg de volgende CSS toe aan je thema:
.woocommerce .cart-contents {
outline: 2px solid transparent;
outline-offset: -2px;
}
6. Onjuiste ARIA-landmarks
WooCommerce gebruikt vaak geen ARIA-labels voor de winkelwagen of zoekfunctie. Schermlezers weten niet wat deze elementen zijn.
Hoe te repareren:
- Installeer "WooCommerce Accessibility"-plugin
- Ga naar WooCommerce > Instellingen > Producten > Accessibiliteit
- Zet "ARIA-labels" aan
- Test met WAVE-tool (https://wave.webaim.org/)
7. Geen alternatieve tekst voor afbeeldingen
Veel productafbeeldingen hebben geen alt-tekst. Schermlezers lezen dit als "afbeelding" zonder context.
Hoe te repareren:
- Ga naar Media > Afbeeldingen
- Bewerk elke afbeelding en voeg alt-tekst toe (bijv. "Rode T-shirt maat M")
- Gebruik Yoast SEO-plugin voor automatische alternatieve tekst
8. Gebruik van schermlezers
Test altijd met een echte schermlezer. Gebruik:
- NVDA (gratis voor Windows)
- VoiceOver (voor Mac)
- JAWS (betaald)
Druk op F7 om de focus te zien. Zie je geen melding bij het toevoegen van een product aan de winkelwagen? Dan heb je een probleem.
9. Toegankelijkheidstesten
Gebruik deze tools om je website te testen:
- WAVE (https://wave.webaim.org/)
- Lighthouse (in Chrome DevTools)
- AXE (https://www.deque.com/axe/)
10. Toegankelijkheid is niet alleen voor mensen met beperkingen
Toegankelijkheid verbetert ook de gebruikerservaring voor:
- Mobiele gebruikers
- Mensen met slecht zicht
- Mensen met een slechte internetverbinding
Conclusie
Toegankelijkheid is niet alleen een juridische verplichting, maar ook een businessbeslissing. 1 in 4 mensen heeft een beperking. Door deze 7 fouten te repareren, verhoog je je klantengroep met 25%.
Volgende stappen:
- Test je website met een schermlezer
- Repareer de 7 fouten
- Test opnieuw
- Laat je website certificeren door een toegankelijkheidsdeskundige
Voor meer informatie, raadpleeg de WCAG 2.1-richtlijnen (https://www.w3.org/WAI/standards-guidelines/wcag/).
Gemaakt met AI, gecontroleerd door een toegankelijkheidsdeskundige.