SevirantaJe WooCommerce-webshop toegankelijk maken: een praktische gids
9 juni 2026
Kort antwoord. WooCommerce zelf volgt de WordPress-toegankelijkheidsrichtlijnen redelijk, maar je webshop erft vooral de toegankelijkheid van je thema, je plugins en je content — en daar gaat het meestal mis. Loop de zes punten hieronder langs (contrast, alt-teksten, koppen, plugins & page-builders, toetsenbord, taal) en let extra op je blok-checkout en je productfilters; dan heb je het leeuwendeel te pakken.
Waarom is WooCommerce alleen niet genoeg?
WooCommerce is een plugin bovenop WordPress. Of je shop aan WCAG voldoet, hangt af van hoe je thema is gebouwd, welke kleuren je koos, welke plugins en page-builder je gebruikt en hoe je je producten invulde. Twee shops op dezelfde WooCommerce-versie kunnen dus totaal verschillend scoren. Het goede nieuws: omdat veel via je thema en je templates terugkomt, dekt één fix vaak honderden pagina's.
1. Controleer je kleurcontrast
De meest voorkomende fout. Bij een blok-thema (Full Site Editing) ga je naar Weergave → Editor → Stijlen → Kleuren; bij een klassiek thema naar Weergave → Aanpassen → Kleuren. Zorg dat tekst en achtergrond minstens 4,5:1 contrast hebben (3:1 voor grote tekst). Let vooral op de tekst óp je In winkelwagen-knop, prijs- en aanbiedingslabels, en links. Eén keer goed instellen geldt winkelbreed. Zie kleurcontrast: de WCAG-eis en hoe je 'm meet.
2. Geef je productfoto's alt-teksten
Open een product in Producten, klik in Productafbeelding (en
Productgalerij) op de afbeelding → vul in de mediabibliotheek het veld
Alternatieve tekst in. Beschrijf kort en feitelijk wat erop staat
(bv. "Zwarte suède herenschoen met veters"), geen marketingtaal. Begin bij je
bestverkopende producten en je homepagebanners. Decoratieve beelden krijgen een lege
alt (alt=""). Meer hierover in
alt-teksten schrijven die werken.
3. Controleer je koppenstructuur
Gebruik koppen in logische volgorde (H1 → H2 → H3) en niet alleen voor de opmaak. In de blok-editor (Gutenberg) zie je per koptekstblok het niveau; sla geen niveaus over. Let op page-builders als Elementor of Divi: die laten je elke tekst groot opmaken zónder dat het een echte kop wordt — kies daar bewust het juiste kop-niveau.
4. Let op je plugins en page-builder
Dit is vaak de grootste bron van problemen. Plugins voor reviews, chat, pop-ups, sliders en filters — en zware page-builders — injecteren hun eigen code in je thema, en die bevat geregeld knoppen zonder naam, onjuiste ARIA of elementen die niet met het toetsenbord te bedienen zijn. Installeer dus niet blindelings elke plugin, en test je site altijd mét alles actief. Blijkt een plugin ontoegankelijk, stap dan over op een alternatief dat de WCAG-normen wél respecteert. Kies waar het kan voor de nieuwe WooCommerce-blokken voor winkelwagen en afrekenen (zie punt 6).
5. Test met het toetsenbord
Probeer je site eens helemaal zonder muis: alleen met de Tab-toets en Enter. Kun je
bij alles komen — menu, productfilters, variatie-keuzes, winkelwagen, afrekenen — en
zie je steeds waar de focus staat? Let bij WooCommerce specifiek op de
variatie-dropdowns, de aantal-stepper (+/−) en de filter-widgets in je
zijbalk; dat zijn de plekken waar het toetsenbord vaak vastloopt.
6. Controleer je taalinstelling én je checkout
Zorg dat je thema het juiste taalattribuut zet, zodat een schermlezer de juiste
uitspraak kiest. In een klassiek thema staat in header.php de regel
<html <?php language_attributes(); ?>> — die hoort het taalattribuut te bevatten.
Gebruik je WPML of Polylang voor meerdere talen, controleer dan dat elke taalversie
het juiste lang-attribuut krijgt. Stap bij voorkeur over op de blok-gebaseerde
Cart- en Checkout-blokken van WooCommerce: die zijn toegankelijker dan de oude
shortcode-checkout en worden actief op toegankelijkheid onderhouden.
Veelgemaakte WooCommerce-fouten en hun fix
| WooCommerce-element | Veelgemaakte fout | De fix |
|---|---|---|
| "In winkelwagen"-knop | te licht lettertype / laag contrast | contrast in thema-stijlen naar minstens 4,5:1 |
| Productfoto's | bestandsnaam als beschrijving (IMG_2043.jpg) | functionele alt-tekst in de mediabibliotheek |
Aantal-stepper (+/−) | knoppen zonder label, niet met toetsenbord te bedienen | label/aria-label toevoegen of een toegankelijke variant gebruiken |
| Productfilter-widget | filters alleen met de muis bruikbaar | toegankelijke filter-plugin of de WooCommerce-filterblokken |
| Toegankelijkheids-plugin | een overlay-widget installeren | vermijden — repareert je code niet en beschermt niet tegen claims |
Helpt een toegankelijkheids-plugin uit de WordPress-pluginmap?
Nee. Zoek je op "accessibility", dan vind je tientallen plugins die beloven je shop met één klik compliant te maken via een widget. Trap er niet in: ze repareren je thema en templates niet, en toezichthouders controleren de rauwe broncode van je shop. Het structureel oplossen in je thema en content is de enige route die standhoudt — én het levert je betere SEO en een snellere laadtijd op. Meer hierover in waarom een overlay-widget je niet beschermt.
Voldoet mijn WooCommerce-shop daarmee aan de wet?
Deze zes punten dekken het grootste deel van wat een geautomatiseerde toets vaststelt, maar "voldoen" gaat verder: het hangt af van je hele thema, je plugins en je content samen. Of de European Accessibility Act op jou van toepassing is, lees je in onze checklist. Werk je ook met Shopify? Dan helpt onze Shopify-gids je verder.
Hoe weet ik waar mijn WooCommerce-shop nu staat?
De snelste manier: scan gratis één pagina. Je krijgt per bevinding te zien wat er fout is en hoe je het oplost — en omdat veel via je thema en templates loopt, los je het vaak in één keer voor je hele winkel op. In minder dan 60 seconden, zonder account.