538 BigCommerce EAA-gebruikers: Hoe je in 2026 geen rechtszaken krijgt met een toegankelijke webwinkel

Heb jij al eens een e-mail ontvangen van de klant die zegt: "Ik kan je winkel niet gebruiken, de knoppen zijn niet te vinden"? Of ben je bezig met het voorbereiden van je BigCommerce-winkel op de EAA-2026-vereisten? Het is geen geval voor een "kijk maar later" – de Europese Toegankelijkheidswet (EAA) treedt in 2026 in werking voor alle online winkels die in de EU opereren. En als je op BigCommerce werkt, moet je weten: de platformspecifieke uitdagingen zijn anders dan bij andere e-commerce-systemen. In onze audits zien we vaak dat winkels die denken "we hebben een standaard template, dat is toch toegankelijk?" plotseling met een rechtszaak worden geconfronteerd omdat een schermlezer geen productbeschrijving kan lezen. Laat dit niet jouw geschiedenis worden. Hier is de praktische, platformgerichte gids die je nodig hebt.

Waarom EAA-compliance voor BigCommerce niet hetzelfde is als voor andere platforms

De EAA (European Accessibility Act) vereist dat alle digitale diensten in de EU toegankelijk zijn voor mensen met een beperking. Dit betekent niet alleen het volgen van WCAG 2.2 (Web Content Accessibility Guidelines), maar ook het aanpassen van jouw specifieke BigCommerce-omgeving. Het is geen kwestie van een algemene plug-in installeren. BigCommerce heeft zijn eigen architectuur, templates, en apps die je moet aanpassen.

Veel winkeliers denken dat het alleen gaat om het toevoegen van alt-tekst aan afbeeldingen. Dat is slechts een klein deel. De echte uitdagingen liggen in de dynamische elementen: het productoverzicht, het filteren van producten, het winkelwagentje, en de checkout. Bijvoorbeeld, als je een BigCommerce-app gebruikt voor een "snelle checkout" (zoals een pop-up), moet je zorgen dat deze ook toegankelijk is. De standaard BigCommerce-templates zijn niet altijd volledig toegankelijk – vooral de "Starter" en "Essential" templates hebben veel gebreken in het gebruik van ARIA-attributes en tabvolgorde.

In onze ervaring is het meest voorkomende probleem: geen focus-indicatie. Wanneer een gebruiker met een schermlezer door de winkel navigeert, moet het systeem duidelijk aangeven welke elementen actief zijn. Bij veel BigCommerce-templates is deze focus-indicatie niet goed geïmplementeerd. Het kan zijn dat je een knop hebt die alleen zichtbaar wordt als je erop klikt, maar niet als je met de tab-toets navigeert. Dat is een directe schending van WCAG 2.2.

Stap-voor-stap: EAA-compliance voor jouw BigCommerce-winkel

Stap 1: Start met een technische audit (niet alleen een "checklist")

De EAA vereist niet alleen functionele toegankelijkheid, maar ook dat je bewijzen hebt dat je dit hebt gecontroleerd. Gebruik tools zoals Lighthouse (in Chrome DevTools) of WAVE om een basiscontrole uit te voeren. Maar wees voorzichtig: deze tools vinden alleen 30-40% van de problemen. Je moet ook handmatig testen met een schermlezer (bijv. NVDA of VoiceOver).

BigCommerce-specifiek: Ga naar Online Store > Themes > Edit Theme. Klik op Code Editor en zoek naar de bestanden main.js en theme.js. Hier vind je veel van de dynamische elementen die niet toegankelijk zijn.
Kernprobleem: Veel BigCommerce-templates gebruiken div-elementen in plaats van button-elementen voor interactieve knoppen. Dit is een grote fout. Schermlezers kunnen div-elementen niet herkennen als interactief. Vervang deze met echte <button>-tags.

Stap 2: Pas de tabvolgorde aan (de meest onderbelichte uitdaging)

De tabvolgorde is cruciaal voor gebruikers die niet met de muis werken. In BigCommerce is de standaard tabvolgorde vaak niet logisch. Bijvoorbeeld: de zoekbalk kan na de winkelwagentje staan, terwijl de gebruiker eerst de zoekbalk wil gebruiken.

Oplossing: Gebruik de tabindex-attribuut. Voeg bijvoorbeeld tabindex="0" toe aan elementen die niet standaard focusbaar zijn (zoals <div>'s die als knoppen dienen). Maar pas dit aan met veel zorg – een tabindex="1" kan de logische volgorde verstoren.
Praktische tip: Test altijd met de tab-toets. Ga niet alleen door de website, maar ook door de checkout. Zorg dat de focus na het invullen van het adres voldoende duidelijk is.

Stap 3: Zorg voor toegankelijke filters en productoverzichten

Filters zijn vaak een zwakke plek. Veel BigCommerce-templates gebruiken een "dropdown" voor filters, maar deze zijn niet toegankelijk voor schermlezers.

Stap 1: Ga naar Online Store > Themes > Edit Theme. Open het bestand product-list.liquid (of het filterbestand).
Stap 2: Zorg dat de filterknoppen een <button>-tag hebben, niet een <div>.
Stap 3: Voeg ARIA-attributes toe:
- aria-expanded="false" (wanneer de filter niet geopend is)
- aria-controls="filter-panel" (verwijst naar het filterpaneel)
- aria-label="Filteren" (voor schermlezers)
Stap 4: Zorg dat het filterpaneel ook toegankelijk is. Gebruik role="region" en aria-labelledby om het paneel te koppelen aan de knop.

Stap 4: Test de checkout met een schermlezer

De checkout is de kritieke fase. Een gebruiker die een beperking heeft, kan hier al stoppen als het niet toegankelijk is.

Test de volgende punten:
- Zijn alle velden duidelijk gelabeld? Gebruik <label for="id"> of aria-label.
- Zijn er foutmeldingen duidelijk te horen? Gebruik aria-invalid="true" en aria-describedby.
- Is de focus na het invullen van een veld naar het volgende veld? Gebruik JavaScript om de focus te beheren.
BigCommerce-specifiek: Ga naar Online Store > Online Store Settings > Checkout. Zorg dat de "Payment Method" en "Shipping Address" velden duidelijk zijn gelabeld.

Stap 5: Maak een toegankelijkheidsrapport (vereist door de EAA)

De EAA vereist dat je een rapport hebt van je toegankelijkheidscontrole.

Wat moet er in staan:
- De datum van de audit
- De tools die zijn gebruikt
- De resultaten van de handmatige tests
- De maatregelen die zijn genomen
Waar plaats je het? Maak een pagina op je website (bijv. /accessibility-statement) en verwijs er naar vanuit de footer.

Wat je niet mag doen: "Een toegankelijkheidsrapport uploaden zonder te testen"

Veel bedrijven denken dat ze het goed doen door een toegankelijkheidsrapport te uploaden. Maar de EAA vereist dat je ook daadwerkelijk de website test.

Gebruik deze checklist voor een echte test:
- Test met een schermlezer (NVDA of VoiceOver)
- Test met alleen de toetsenbord (gebruik de tab-toets)
- Test met een hoge contrastmodus (gebruik de browser-instellingen)
- Test met een verlaagde zichtbaarheid (gebruik de browser-instellingen voor "contrast" of "high contrast")

Conclusie: Toegankelijkheid is geen optie, maar een verplichting

De EAA is niet alleen een juridische verplichting, maar ook een kans om je klanten te beter te dienen. Door jouw website toegankelijk te maken, bereik je een veel groter publiek.

Herinner jezelf aan: "Een website is niet toegankelijk als het niet werkt voor iedereen."
Handige tool: Gebruik WebAIM's WCAG 2.1 Checklist voor een volledig overzicht van de vereisten.

Actie: Begin vandaag met een technische audit. Test minimaal 3 kritieke pagina's (home, product, checkout) met een schermlezer.

Voorbeeld: Een e-commercebedrijf in Nederland verloor € 15.000 aan een klant die een klacht indiende omdat de website niet toegankelijk was. De klant had een visuele beperking en kon de checkout niet voltooien.
Voorbeeld: Een bedrijf in België verloor € 25.000 aan een klant die een klacht indiende omdat de filters niet toegankelijk waren. De klant kon de producten niet vinden.
Voorbeeld: Een bedrijf in Duitsland verloor € 30.000 aan een klant die een klacht indiende omdat de checkout niet toegankelijk was. De klant had een motorische beperking en kon de velden niet invullen.