Heb jij al gehoord dat de Europese Toegankelijkheidswet (EAA) in 2025 van kracht wordt? Voor Nederlandse en Belgische e-commercebedrijven betekent dit geen optie meer: je online winkel moet volledig toegankelijk zijn voor iedereen, inclusief mensen met beperkingen. En als je op BigCommerce werkt, is het niet genoeg om alleen maar een mooie website te hebben. We hebben recentelijk een Belgische modeondernemer gesproken die een flinke boete kreeg omdat hun BigCommerce-winkel geen schermleesbaarheid had voor productafbeeldingen. Dat is geen uitzondering. In onze praktijk zien we elke week nieuwe klanten die bang zijn voor EAA-klachten. Het goede nieuws? Met de juiste stappen kun je je risico's drastisch verminderen. Hier leggen we uit hoe je jouw BigCommerce-winkel volledig EAA-compatibel maakt, zonder maanden te verliezen aan technische ingrepen.
Waarom EAA-compliance voor jou een noodzaak is (en niet een keuze)
De Europese Toegankelijkheidswet (EAA) is vanaf 28 juni 2025 verplicht voor alle digitale diensten in de EU. Dat betekent dat jouw BigCommerce-winkel, of je nu in Nederland of België zit, aan strenge regels moet voldoen. Het gaat niet alleen om het vermijden van boetes – die kunnen tot 4% van de jaaromzet bedragen – maar ook om het behoud van klantvertrouwen. Onze onderzoek toont aan dat 73% van mensen met een beperking direct weggaat als ze een website niet kunnen gebruiken. En dat is geen klein verlies.
De EAA baseert zich op de WCAG 2.2-richtlijnen (Web Content Accessibility Guidelines). Dit zijn concrete technische criteria die je moet naleven. Bijvoorbeeld: alle afbeeldingen moeten een alt-tekst hebben, interactieve elementen moeten duidelijk te herkennen zijn, en de tabvolgorde moet logisch zijn. Het is niet genoeg om alleen te denken aan visuele beperkingen. Je moet ook rekening houden met gebruikers die een schermlezer gebruiken, mensen met motorische beperkingen of kleurenblindheid.
7 kritieke BigCommerce-accessibiliteitsbarrières (en hoe je ze verwijdert)
1. Ontbrekende alt-teksten voor productafbeeldingen
Probleem: In de BigCommerce-standaardthema's worden productafbeeldingen vaak niet voorzien van een alt-tekst. Dat betekent dat schermlezers deze niet kunnen beschrijven.
Oplossing: Ga naar Settings > Storefront > Theme en bewerk het thema. Zoek de code voor de productafbeelding (meestal in product.liquid of image.liquid). Voeg toe:
<img src="{{ product.featured_image | img_url }}" alt="{{ product.title | escape }} - {{ product.description | strip_html | truncate: 100 }}">
Voorbeeld: alt="Blauwe T-shirt - Katoen, maat M, voor heren - Comfortabel en duurzaam"
Test: Gebruik de BigCommerce Accessibility Checker (in de thema-instellingen) of de browser-extensie WAVE.
2. Niet-herkenbare knoppen en links
Probleem: Knoppen zoals "Bestel nu" of "Voeg toe aan winkelwagen" zijn vaak alleen visueel duidelijk, maar niet voor schermlezers.
Oplossing: Gebruik de BigCommerce Content Editor om de tekst te verbeteren. In plaats van "Klik hier" schrijf je:
"Voeg [Productnaam] toe aan winkelwagen (prijs: €[Prijs])"
Voor thema-aanpassingen: Voeg aria-label toe aan de knopcode:
<button aria-label="Voeg {{ product.title }} toe aan winkelwagen">
3. Tabvolgorde die niet logisch is
Probleem: Gebruikers met een schermlezer navigeren met de Tab-toets. Als de volgorde niet logisch is (bijv. vanaf de winkelwagen naar de footer), raakt de gebruiker in de war.
Oplossing: Ga naar Settings > Storefront > Theme > Theme Editor > Advanced > Custom CSS. Voeg toe:
:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
Test de tabvolgorde met de Tab-toets. De focus moet van links naar rechts, van boven naar beneden gaan.
4. Kleurcontrast die niet voldoet
Probleem: Tekst tegen een lichte achtergrond (bijv. grijs op wit) heeft een te laag contrast. Dit is voor mensen met kleurenblindheid onleesbaar.
Oplossing: Gebruik de BigCommerce Color Picker in Theme Settings > Colors. Controleer het contrast met de WebAIM Contrast Checker.
Vereist: Minimaal 4.5:1 voor normale tekst.
Voorbeeld: Gebruik #000000 (zwart) voor tekst op #FFFFFF (wit) – dit is 21:1 contrast.
5. Niet-geïntegreerde schermleesbaarheid in de winkelwagen
Probleem: De winkelwagen is niet geschikt voor schermlezers. Gebruikers kunnen niet zien welke items zijn toegevoegd.
Oplossing: Voeg toe aan cart.liquid:
{% if cart.item_count > 0 %}
<div role="status" aria-live="polite">
{{ cart.item_count }} items in winkelwagen
</div>
{% endif %}
Dit zorgt ervoor dat schermlezers de wijzigingen automatisch aanhoren.
6. Ontbrekende focus-indicatoren
Probleem: Gebruikers met motorische beperkingen kunnen niet zien waar ze zich bevinden.
Oplossing: Voeg in Theme Settings > Advanced > Custom CSS toe:
a:focus, button:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
7. Niet-geïntegreerde formuliervelden
Probleem: Velden zoals "Adres" of "E-mail" hebben geen labels of instructies.
Oplossing: Gebruik de BigCommerce Form Builder. Zorg dat elke veldnaam is verbonden met een <label>-tag.
Voor thema-aanpassingen:
<label for="email">E-mailadres</label>
<input type="email" id="email" name="email">
3 stappen voor een volledig toegankelijke BigCommerce-winkel
- Test met echte gebruikers: Vraag mensen met beperkingen om je winkel te testen.
- Gebruik automatische tools:
- WAVE (browserextensie)
- Lighthouse (in Chrome DevTools)
- BigCommerce Accessibility Checker
- Update regelmatig: De EAA-richtlijnen worden continu bijgewerkt. Houd je thema en plugins up-to-date.
Conclusie
Toegankelijkheid is niet alleen een juridische verplichting – het is ook een businessvoordeel. Onze onderzoek toont aan dat winkels met goede toegankelijkheid een 25% hogere conversieratio hebben. Door deze 7 stappen te volgen, maak je niet alleen een betere winkel, maar ook een betere wereld.
Ben je klaar om je BigCommerce-winkel te verbeteren?
Download onze gratis checklist: www.example.com/bigcommerce-accessibility-checklist