Shopify of WooCommerce? Het platform maakt je niet vanzelf toegankelijk.

Waarom je platform je niet redt

Shopify en WooCommerce zijn twee van de meest gebruikte webshopplatforms ter wereld, en beide leveren een fatsoenlijke technische basis. Maar een platform is een gereedschapskist, geen garantie. Twee shops op exact hetzelfde platform kunnen totaal verschillend scoren — omdat de toegankelijkheid wordt bepaald door de laag die jíj erbovenop zet.

Denk aan het theme dat je koos en aanpaste, de kleuren die je merk-mooi maakte maar die onder de contrastnorm zakken, de tientallen productfoto's die je uploadde zonder alt-tekst, en de apps of plugins die pop-ups, reviews en cookiebanners in je pagina injecteren. Dat is waar de fouten zitten. Het platform rendert netjes wat jij het opdraagt — inclusief de barrières.

Juridisch verandert het platform helemaal niets aan je positie. Als verkoper ben jij eindverantwoordelijk voor wat de klant ervaart. Wil je het volledige kader — WCAG per principe, ACM-handhaving en de verplichte verklaring — lees dan de complete EAA-gids voor webshops.

Waar de fouten vandaan komen

De vier fouten die we het vaakst zien op Shopify

1. Productfoto's zonder alt-tekst
   Je importeert of upload honderden afbeeldingen; het alt-veld blijft leeg. Schermlezer-gebruikers horen alleen "afbeelding".
   Fix: Producten → afbeelding aanklikken → "Alt-tekst toevoegen". Bij grote catalogi via een bulk-app of een CSV-import met het image-alt-veld.
2. Apps die ontoegankelijke widgets injecteren
   Klaviyo/Privy-pop-ups, review-sterren, cookiebanners en "kortingswiel"-widgets voegen knoppen zonder label en toetsenbordvallen toe — buiten je theme om.
   Fix: test elke app met alleen het toetsenbord. Kun je de pop-up niet met Tab en Esc bedienen, kies dan een toegankelijk alternatief of vraag de leverancier om een fix.
3. Merkkleuren onder de contrastnorm
   Lichte tekst op pastelknoppen, grijze prijzen, witte tekst op een "sale"-badge. In de theme-customizer zomaar ingesteld, ruim onder 4,5:1.
   Fix: pas de kleurinstellingen in de customizer aan tot tekst minstens 4,5:1 contrast haalt (3:1 voor grote koppen).
4. Aangepaste secties zonder koppenstructuur
   Zelfgebouwde of geïmporteerde secties gebruiken opgemaakte div's in plaats van echte koppen, waardoor schermlezer-navigatie instort.
   Fix: gebruik één H1 per pagina en logisch oplopende H2/H3 in de sectie-instellingen of Liquid-templates.

De vier fouten die we het vaakst zien op WooCommerce

1. Page builders die semantiek platslaan
   Elementor, Divi en WPBakery renderen alles als geneste div's. Knoppen zijn dan geen echte buttons en koppen geen echte headings — een schermlezer ziet losse tekst.
   Fix: gebruik de heading- en button-widgets van de builder (niet "tekst met grote letters") en controleer het HTML-tag-veld per element.
2. Variant-swatches en galerij-lightbox als toetsenbordval
   Kleur/maat-swatch-plugins en de PhotoSwipe-lightbox zijn vaak alleen met de muis te bedienen. Wie met het toetsenbord navigeert, komt vast te zitten.
   Fix: test variant-keuze en het openen/sluiten van de galerij volledig met Tab, Enter en Esc. Vervang plugins die dat niet ondersteunen.
3. Formuliervalidatie die alleen met kleur werkt
   Bij checkout en contact krijgt een fout veld een rood randje, zonder tekstuele foutmelding. Kleurenblinde klanten zien niet wat er mis is.
   Fix: zorg dat foutmeldingen als tekst naast het veld verschijnen en aan het veld gekoppeld zijn (aria-describedby). Veel form-plugins hebben hiervoor een instelling.
4. Theme dat focus-outlines verwijdert
   Veel themes zetten outline: none "voor de looks". Toetsenbordgebruikers zien dan niet meer waar ze zijn op de pagina.
   Fix: voeg via Extra CSS een zichtbare :focus-visible-stijl toe, of kies een accessibility-ready theme dat de focus intact laat.

Vijf checks die op beide platforms gelden

Deze vijf vang je vaak in een halve dag af, ongeacht je platform:

• Alt-tekst op elke inhoudelijke afbeelding, met name productfoto's.
• Labels op icoon-knoppen (prullenbak, plus/min, kruisje) in winkelwagen en checkout.
• Contrast van minstens 4,5:1 op tekst, prijzen, badges en actielabels.
• Foutmeldingen in tekst, niet alleen in kleur, bij elk formulier.
• Zichtbare focus bij toetsenbordnavigatie door de hele bestelflow.

Wat een scan wél en niet vaststelt

Onze scanner draait axe-core in een echte browser en beoordeelt de pagina zoals je klant hem krijgt — inclusief alles wat je apps en plugins injecteren. Daardoor werkt hij even goed op Shopify, WooCommerce, Lightspeed of een custom shop: hij kijkt naar het resultaat, niet naar het platform.

Wees wel eerlijk over de grenzen: een geautomatiseerde scan vangt ongeveer een derde tot de helft van alle WCAG-criteria. Dingen als "is deze alt-tekst inhoudelijk juist?" of "klopt de leesvolgorde logisch?" vragen een mens. Daarom markeert ons rapport per bevinding of die zeker is of handmatige controle vraagt — en beloven we nooit een certificaat, alleen een eerlijk, bruikbaar startpunt. Meer daarover in de complete EAA-gids.

Veelgestelde vragen

Verdiep je in de EAA