Toe­gan­ke­lijke webshop: van pro­duct­pa­gina tot afre­ke­nen

Een toegankelijke webshop is een webshop waarin iedereen zelfstandig een bestelling kan afronden: van zoeken en filteren tot betalen en de bevestigingsmail lezen, ook met alleen een toetsenbord, een screenreader of een vergrote weergave. Het gaat dus niet om losse pagina’s, maar om het hele aankooppad. Eén blokkade in de checkout maakt de rest van je moeite waardeloos.

Sinds 28 juni 2025 is dat voor de meeste webshops ook een wettelijke plicht. In dit artikel lopen we het pad stap voor stap langs, met fouten die je in de praktijk vaak tegenkomt en de WCAG-criteria die erbij horen.

Waarom een toe­gan­ke­lijke webshop nu moet

Onder de European Accessibility Act valt een webshop als e-handelsdienst. De ACM houdt toezicht en hanteert WCAG 2.1 niveau AA als basis, met het advies om nu al met WCAG 2.2 te werken. Alleen micro-ondernemingen, met minder dan 10 medewerkers en maximaal 2 miljoen euro jaaromzet, zijn vrijgesteld. In uitzonderingen op de European Accessibility Act lees je hoe je dat precies bepaalt.

Voor webshops noemt de ACM een paar specifieke punten die verder gaan dan de pagina’s zelf:

• inloggen, identificatie, digitale handtekeningen en betaalmethoden moeten toegankelijk zijn, net als de e-mails en bijlagen die daarbij horen;
• je geeft informatie over de toegankelijkheid van de producten die je verkoopt, op basis van gegevens van de fabrikant of leverancier;
• je publiceert een toegankelijkheidsverklaring en houdt de toegankelijkheid op peil bij elke wijziging.

Dat tweede punt wordt vaak vergeten. Stel: je verkoopt e-readers of koptelefoons. Dan hoort op de productpagina wat de fabrikant aangeeft over de toegankelijkheid van dat apparaat, bijvoorbeeld over spraakuitvoer of bediening zonder aanraakscherm. Vraag die informatie bij je leveranciers op en geef er in je productdata een vaste plek voor, zodat het niet per product handwerk wordt.

Los van de wet is het ook gewoon omzet. Een klant die de maatkeuze niet kan bedienen, belt niet om te helpen. Die gaat naar een concurrent.

Na­vi­ga­tie, zoeken en filters

De eerste drempel ligt meestal al vóór de productpagina. Megamenu’s die alleen op hover openen, zoekvelden zonder label en filters die de pagina stilletjes herladen: het zijn klassiekers.

• Toet­sen­bord: alle menu’s, filters en knoppen moeten met Tab, Enter en spatie werken (WCAG 2.1.1), zonder dat de focus ergens vast komt te zitten (2.1.2).
• Zicht­bare focus: haal de focusrand niet weg met outline: none zonder een duidelijk alternatief (2.4.7). WCAG 2.2 voegt toe dat een sticky header of cookiebanner het element met focus niet volledig mag bedekken (2.4.11).
• Zoekveld: een echt label, niet alleen een placeholder of vergrootglas-icoon (3.3.2 en 4.1.2).
• Filters: laat een screenreader weten dat er nu bijvoorbeeld 24 resultaten zijn, zonder de focus te verplaatsen. Daarvoor is 4.1.3 (statusberichten) bedoeld. En verander niet ongevraagd van pagina zodra iemand één vinkje zet.

De pro­duct­pa­gina

Op de productpagina valt de koopbeslissing, en juist daar zitten veel visuele trucs die niet voor iedereen werken.

Af­beel­din­gen en video

Elke productfoto die informatie geeft, krijgt een tekstalternatief (1.1.1). Niet “afbeelding1.jpg” en niet de producttitel nog eens, maar wat de foto toont: “Achterkant van de rugzak met laptopvak open”. Productvideo’s die je na 28 juni 2025 plaatst, hebben ondertiteling nodig. Een carrousel die automatisch draait, moet te pauzeren zijn (2.2.2).

Va­rian­ten, prijs en voorraad

Kleurstalen zijn vaak alleen gekleurde rondjes. Geef elke optie een naam die ook voorgelezen wordt, en laat de gekozen optie niet alleen door een kleur zien (1.4.1). Kleine maatknopjes moeten minimaal 24 bij 24 CSS-pixels zijn of genoeg ruimte om zich heen hebben (2.5.8). Prijzen en kortingen moeten als tekst te lezen zijn, niet alleen als doorgestreepte afbeelding.

In win­kel­wa­gen

Na een klik op “In winkelwagen” verschijnt vaak alleen een animatie bij het mandje. Voor een screenreadergebruiker gebeurt er dan niets. Meld het als statusbericht, of open een dialoog die de focus correct vasthoudt en weer teruggeeft. Wil je microinteracties toegankelijk houden, lees dan ook microinteracties in UX.

Win­kel­wa­gen en checkout

De checkout is waar een toegankelijke webshop zich bewijst. Het is een formulier met tijdsdruk, foutmeldingen en vaak een externe betaalstap.

• Labels en ins­truc­ties: elk veld een zichtbaar label (3.3.2) en de juiste autocomplete-waarden voor naam, adres en e-mail (1.3.5). Meer daarover in formulieren die converteren.
• Fout­mel­din­gen: benoem in tekst welk veld fout is en waarom (3.3.1), en geef een suggestie als je die kent (3.3.3). Een rood randje alleen is niet genoeg.
• Niet dubbel invullen: WCAG 2.2 vraagt dat gegevens die iemand eerder in hetzelfde proces invulde, automatisch worden ingevuld of te selecteren zijn (3.3.7). Een vinkje “factuuradres is gelijk aan bezorgadres” lost dat op.
• Inloggen: vraag geen geheugentest of puzzel zonder alternatief (3.3.8). Blokkeer plakken in wachtwoordvelden niet, zodat wachtwoordmanagers werken, en bied waar het kan afrekenen als gast aan.
• Tijds­li­mie­ten: verloopt de winkelwagen of sessie, waarschuw dan vooraf en laat de klant de tijd verlengen (2.2.1).

De be­taals­tap en wat erna komt

Gebruik je een betaalpagina of iframe van een betaalprovider, dan blijf je volgens de ACM zelf verantwoordelijk voor de dienst. Test die stap dus net zo grondig als je eigen pagina’s. Vergeet ook de bevestigingsmail en een eventuele PDF-factuur niet: de ACM noemt e-mails en bijlagen die bij betalen horen expliciet.

Over­zicht: veel­ge­maakte fouten per stap

De volledige tekst van alle criteria staat in de WCAG 2.2-specificatie van het W3C.

Zo pak je het aan

1. Kies je kritieke paden. Meestal zijn dat: zoeken, een product kiezen met variant, in de winkelwagen, afrekenen als gast, afrekenen met account en een retour aanmelden.
2. Scan au­to­ma­tisch. Een gratis scan van je webshop vindt snel ontbrekende labels, alt-teksten en contrastproblemen.
3. Test hand­ma­tig. Doorloop elk pad met alleen het toetsenbord, daarna met een screenreader zoals NVDA of VoiceOver, en op 200 procent zoom.
4. Prio­ri­teer op impact. Alles wat een bestelling blokkeert, gaat voor. Een onduidelijke alt-tekst op een blogfoto kan wachten.
5. Con­tro­leer je le­ve­ran­ciers. Betaalprovider, reviewwidget, chat en cookiebanner: vraag naar hun toegankelijkheid en test ze zelf.
6. Leg vast en borg. Werk je toegankelijkheidsverklaring bij en neem een toetsenbordtest op in elke release.

Con­clu­sie

Een toegankelijke webshop bouw je niet per pagina, maar per aankooppad. Wie navigatie, productkeuze en checkout met toetsenbord en screenreader kan doorlopen, heeft het grootste deel van de risico’s te pakken. De rest is onderhoud: bij elke nieuwe plug-in of campagne opnieuw kijken.

Draait je webshop nu op Shopify en wil je naar een shop die van jou is? Lees hoe we Shopify naar WooCommerce overzetten, met producten, redirects en betalen ingericht.

Wil je dat iemand je hele aankooppad doorlicht en de blokkades oplost? Bekijk onze aanpak voor digitale toegankelijkheid.