Shopify website WCAG toegankelijk maken

Shopify is wereldwijd een van de meest populaire platforms voor snelgroeiende e-commerce merken. Maar wist je dat een Shopify store standaard niet volledig WCAG-compliant is? Hoewel Shopify een solide technische basis biedt en streeft naar toegankelijkheid in zijn standaard afrekenproces (checkout), hangt de uiteindelijke compliance volledig af van jouw gekozen thema, de geïnstalleerde apps en de content die je zelf uploadt.

Sinds de handhaving van de European Accessibility Act (EAA) en de strengere WCAG 2.2-richtlijnen riskeren webshops die digitale barrières laten bestaan zware boetes, claims en zelfs uitsluiting van de Europese markt. Cardan helpt je van bewustwording tot structurele broncode, zodat jouw Shopify winkel voor iedere klant bruikbaar is.

Mannetje kijkt naar desktop scherm met Shopify logo erop

De mythe van de "accessibility overlays" op Shopify

De Shopify App Store staat vol met zogeheten 'accessibility overlays' en handige JavaScript-widgets die beloven je site met één regel code 100% compliant te maken. De harde juridische en technische realiteit? Deze tools werken niet. Grote toezichthouders en consumentenorganisaties hebben geoordeeld dat overlays geen geldige oplossing zijn. Inmiddels zijn wereldwijd al honderden websites mét zo'n widget geïnstalleerd alsnog succesvol aangeklaagd.

Een plug-and-play widget werkt niet voor een complexe Shopify-omgeving omdat:

  • Schermlezers (screenreaders) scannen de achterliggende HTML-broncode nog voordat een JavaScript-overlay kan laden. Als de basiscode niet klopt, blijft de shop ontoegankelijk.

  • Populaire Shopify-apps voor reviews (zoals Judge.me of Loox), marketing pop-ups (Klaviyo) of live-chats injecteren hun eigen stukjes code. Deze code is vrijwel nooit toegankelijk en blokkeert toetsenbordgebruikers of veroorzaakt focus-traps.

  • Zodra je binnen Shopify secties verschuift of productpagina's aanpast, raakt de logische koppenstructuur (H1, H2, H3) vaak onbewust beschadigd. Een plugin herstelt dit niet.

Echte digitale toegankelijkheid zit in de kern van je Shopify-thema (de broncode) en niet in een cosmetische plugin.

Waar moet een toegankelijke Shopify website aan voldoen?

Om te voldoen aan de wettelijke e-commerce norm (WCAG 2.2 niveau AA), moeten design, techniek en productbeheer naadloos samenwerken op basis van de vier principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust.

Voor Shopify-merchants betekent dit concreet:

  • Zelfs populaire basisthema's zoals Dawn, Refresh of Sense vereisen handmatige aanpassingen. Denk aan het garanderen van een minimale klikdoelgrootte (target size van 24x24 pixels voor varianten en filters), het herstellen van verborgen focus-indicators, en het voorkomen dat 'sticky headers' interactieve elementen overlappen tijdens het browsen met een toetsenbord.

  • Productinformatie die voor iedereen begrijpelijk is. Dit vraagt om unieke, contextuele alt-teksten voor je productafbeeldingen en het vermijden van maattabellen die enkel als afbeelding zijn geüpload en daardoor onleesbaar zijn voor schermlezers.

Wil je precies weten wat deze vier principes inhouden? Lees de volledige uitleg over de richtlijnen op onze pagina: De WCAG-richtlijnen uitgelegd.

Hoe helpt Cardan jou naar een toegankelijke Shopify site?

  1. Shopify funnel & WCAG audit</h3>

    We voeren een handmatige en geautomatiseerde inspectie uit van je belangrijkste conversie-flows: van de home- en collectiepagina's tot aan de winkelwagen en checkout.

    • WCAG 2.2 onderzoeken

      Zet onze WCAG onderzoeken in om een duidelijk beeld te krijgen hoe toegankelijk jouw website, app of PDF-document is.

  2. Technisch & redactioneel rapport

    Je ontvangt een concreet werkdocument. We brengen direct in kaart welke issues veroorzaakt worden door je basisthema, welke door specifieke apps uit de App Store, en welke door de ingevoerde productdata. 

  3. Implementatie & training

    We duiken rechtstreeks in de Liquid-templates, HTML, CSS en JavaScript van jouw Shopify-thema om structurele codefouten op te lossen. Dit doen we via gecontroleerde pull requests (bijvoorbeeld via GitHub) zodat je backend stabiel blijft. 

    • WCAG trainingen

      Volg één van onze WCAG trainingen en wordt een specialist in digitale toegankelijkheid. Schrijf je in!

  4. Compliance & Monitoring

    We helpen je bij het opstellen van de verplichte e-commerce toegankelijkheidsverklaring en richten periodieke monitoring in, zodat nieuwe apps of marketingcampagnes je compliance score niet opnieuw omlaag halen. 

  5. Borging & procesintegratie

    We verankeren toegankelijkheid definitief in je dagelijkse e-commerce workflows. Via gerichte trainingen voor je contentteam en praktische richtlijnen voor het toevoegen van nieuwe Shopify-apps en producten, blijft jouw webshop duurzaam toegankelijk zonder dat je afhankelijk bent van externe partijen.

    • Digitale toegankelijkheid borgen

      Borg digitale toegankelijkheid van A tot Z. Stop met losse audits en veranker WCAG structureel in je bedrijf. Vraag workshop aan of plan een gesprek.

Wil je eerst zelf de basis controleren?

Wil je samen met je e-commerce- of marketingteam de eerste stappen zetten om de toegankelijkheid van je winkel te testen? Download onze praktische checklist voor Shopify stores. 

Naam ontbreekt
E-mailadres ontbreekt
Waarde ongeldig
Waarde ongeldig
Nieuwsbrief

Deze website wordt beschermd door reCAPTCHA en de privacy en gebruiksvoorwaarden van Google zijn van toepassing.

Marijn van der Laan

Meer over digitale toegankelijkheid en webshops

Direct aan de slag met digitale toegankelijkheid?

Wil je direct weten waar jouw Shopify store staat en grote juridische risico's of misgelopen conversies van miljoenen Europeanen met een beperking voorkomen? Laat Cardan een professioneel onderzoek uitvoeren.

Voornaam ontbreekt
Achternaam ontbreekt
Organisatie ontbreekt
E-mailadres ontbreekt
Waarde ongeldig
Nieuwsbrief

Deze website wordt beschermd door reCAPTCHA en de privacy en gebruiksvoorwaarden van Google zijn van toepassing.

Maartje Beek

Veelgestelde vragen over Shopify & WCAG

  • Wanneer een essentiële app (zoals een handige productbundel- of review-app) digitale barrières opwerpt, onderzoekt Cardan de mogelijkheden. Vaak kunnen we de output van de app via aangepaste styling (CSS) of JavaScript-correcties in je thema tóch keyboard- en schermlezer-vriendelijk maken. Mocht dat niet lukken, adviseren we een bewezen toegankelijk alternatief.

  • Shopify beheert de kerninfrastructuur van de checkout en levert hiervoor VPAT-toegankelijkheidsrapporten aan. Echter, zodra je als merchant aanpassingen doet (zoals bij Shopify Plus via checkout extensies, ingebouwde apps van derden of aangepaste scripts), kun je de toegankelijkheid heel eenvoudig onbewust breken. Een controle blijft daarom altijd noodzakelijk.

  • Omdat meer dan 60% van het Shopify-verkeer mobiel is, introduceert WCAG 2.2 strenge mobiele eisen. Zo moeten interactieve knoppen (zoals winkelwagen-iconen, variant-swatches en filters) een minimale grootte van 24x24 pixels hebben en mag content nooit per ongeluk bedekt worden door 'sticky' elementen onderin of bovenin het scherm.

  • Naast het mislopen van omzet uit een markt van miljoenen consumenten met een beperking, riskeer je formele waarschuwingen van toezichthouders (zoals de ACM), flinke boetes tot een percentage van je jaaromzet, of in het ergste geval marktuitsluiting binnen de EU.