Je Shopify-webshop toegankelijk maken: een praktische gids
5 juni 2026
Kort antwoord. Shopify legt een goede basis, maar levert geen toegankelijke webshop "uit de doos". De meeste fouten zitten in je thema, je content en je apps, en juist die kun je vaak themabreed in één keer oplossen. Loop de zes punten hieronder langs (contrast, alt-teksten, koppen, apps, toetsenbord, taal) en je hebt het leeuwendeel te pakken.
Waarom is Shopify alleen niet genoeg?
Een Shopify-thema is een sjabloon. Of je site voldoet aan WCAG hangt af van hoe dat thema is gebouwd, welke kleuren je koos, welke apps je installeerde en hoe je je producten invulde. Twee shops op hetzelfde thema kunnen dus heel verschillend scoren. Het goede nieuws: omdat veel terugkomt via het thema, dekt één fix vaak honderden pagina's.
1. Controleer je kleurcontrast
De meest voorkomende fout. Ga in je dashboard naar Online Store → Themes → Customize → Theme settings (tandwiel) → Colors en zorg dat tekst en achtergrond minstens 4,5:1 contrast hebben (3:1 voor grote tekst). Let vooral op knopteksten, prijslabels, links, en op de tekst óp je Add to cart-knop. Eén keer goed instellen en het geldt winkelbreed. Zie kleurcontrast: de WCAG-eis en hoe je 'm meet.
2. Geef je productfoto's alt-teksten
Ga naar Products, klik een product en scroll naar Media → klik de
afbeelding → Add alt text. Beschrijf kort en feitelijk wat erop staat
(bv. "Zwarte suède herenschoen met veters"), geen marketingtaal. Begin bij je
bestverkopende producten en je homepage-banners. Decoratieve beelden krijgen een
lege alt (alt="").
3. Controleer je koppenstructuur
Gebruik koppen in logische volgorde (H1 → H2 → H3) en niet alleen voor de opmaak. In de Shopify-editor zie je de koppen terug in je secties en rich-text-blokken; sla geen niveaus over.
4. Let op je apps
Dit is vaak de grootste bron van problemen. Apps voor reviews, chat, pop-ups en filters injecteren hun eigen code, regelmatig via iFrames of de Shadow DOM, 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 app, en test je site altijd mét de apps actief. Blijkt een app ontoegankelijk, stap dan over op een alternatief dat de WCAG-normen wél respecteert.
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, filters, winkelwagen, afrekenen, en zie je steeds waar de focus staat? Veel mensen navigeren zo, en het legt drempels snel bloot.
6. Controleer je taalinstelling
Zorg dat je thema het juiste taalattribuut zet, zodat een schermlezer de juiste
uitspraak kiest. Ga naar Themes → Actions (⋯) → Edit code, open
layout/theme.liquid en controleer dat de <html>-tag de taalvariabele bevat:
<html lang="{{ request.locale.iso_code }}">. Shopify regelt dit meestal goed,
maar controleer het na bij het gebruik van vertaal-apps.
Veelgemaakte Shopify-fouten en hun fix
| Shopify-element | Veelgemaakte fout | De fix |
|---|---|---|
| Knoppen | te licht lettertype op de "Afrekenen"-knop | contrast in thema-instellingen naar minstens 4,5:1 |
| Productfoto's | bestandsnaam als beschrijving (product_v2.png) | functionele alt-tekst toevoegen via Media |
| Winkelwagen-pop-up | sluit-kruisje (X) zonder label | aria-label="Sluit winkelwagen" in de template |
| Toegankelijkheids-app | een overlay-widget installeren | vermijden, repareert je code niet en beschermt niet tegen claims |
Helpt een toegankelijkheids-app uit de Shopify App Store?
Nee. Zoek je in de App Store op "accessibility", dan vind je tientallen apps die beloven je shop met één klik compliant te maken via een widget. Trap er niet in: ze repareren je basisthema 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 Shopify-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 apps en je content samen. Of de European Accessibility Act op jou van toepassing is, lees je in onze checklist. En let op: een overlay-app lost dit niet op, die repareert je thema-code niet.
Draai je een chatbot op je shop, bijvoorbeeld Shopify Inbox? Dan raakt vanaf 2 augustus 2026 óók de EU AI Act je winkel: je klant moet bij het eerste contact weten dat hij met AI chat. Welke melding je bij welke leverancier aanzet, staat in de chatbot-AI-melding per leverancier.
Hoe weet ik waar mijn Shopify-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 loopt, los je het vaak in één keer voor je hele winkel op. In minder dan 60 seconden, zonder account. Scan je site gratis.