Elke keer dat een klant met een beperking je afrekenproces niet kan doorlopen, een productfilter niet kan invullen of je productbeschrijvingen niet kan lezen, mis je een verkoop. Meer dan 1 op de 4 volwassenen in de VS heeft een of andere vorm van beperking. Dat is geen klein marktsegment. Het is jouw markt.
Websitetoegankelijkheid is niet alleen een ethische kwestie. Het is een wettelijke eis. De Americans with Disabilities Act (ADA) eist dat bedrijven hun diensten toegankelijk maken voor mensen met een beperking. Dat geldt ook voor webshops. Elk jaar ontvangen duizenden websites een juridische eis wegens overtreding van toegankelijkheidsregels, en webshops zijn het vaakst het doelwit. In dit artikel lees je wat toegankelijkheid betekent, waarom het belangrijk is voor je shop, wat de wet eist en hoe je het invoert zonder dure gespecialiseerde tools.
Wat is websitetoegankelijkheid?
Websitetoegankelijkheid betekent dat je site bruikbaar is voor iedereen, ook voor mensen met een beperking. Denk aan mensen die blind of slechtziend zijn, doof of slechthorend, een motorische beperking hebben waardoor muisgebruik moeilijk is, een cognitieve beperking of leerstoornis hebben, of andere aandoeningen die invloed hebben op hoe ze het web gebruiken.
Toegankelijke websites werken met hulptechnologie zoals schermlezers (software die tekst hardop voorleest), navigatie met alleen het toetsenbord (voor mensen die geen muis kunnen gebruiken) en vergrotingshulpmiddelen. Een toegankelijke site gebruikt ook duidelijke taal, voldoende kleurcontrast, een goede kopstructuur en formulierlabels die schermlezers kunnen begrijpen.
Het kernprincipe: je klanten moeten kunnen doen waarvoor ze kwamen. Ze moeten kunnen bladeren, filteren, beschrijvingen lezen, iets in de winkelwagen leggen en afrekenen, welke hulptechnologie of aanpassingen ze ook gebruiken.
Wat is de ADA en waarom geldt die voor je webshop?
De Americans with Disabilities Act (ADA), aangenomen in 1990, is Amerikaanse federale wetgeving die discriminatie van mensen met een beperking verbiedt. Title III van de ADA eist dat alle bedrijven die open zijn voor het publiek gelijke toegang bieden aan mensen met een beperking. Dat geldt ook voor websites en online diensten. De wet kent geen uitzonderingen voor kleine bedrijven of online verkopers.
Je webshop geldt onder de ADA als openbare voorziening. Dat betekent dat je website toegankelijk moet zijn. Je kunt niet beweren dat je shop te klein of te nieuw is, of dat toegankelijkheid te duur is. De wet geldt. Rechtbanken hebben steeds geoordeeld dat de ADA voor websites geldt, en het Amerikaanse ministerie van Justitie heeft verklaard dat websitetoegankelijkheid een burgerrechtenkwestie is en niet optioneel.
WCAG 2.1 niveau AA: de toegankelijkheidsstandaard
De webtoegankelijkheidsstandaard die in rechtszaken en compliance-eisen wordt gebruikt heet WCAG (Web Content Accessibility Guidelines) 2.1 niveau AA. WCAG wordt onderhouden door het World Wide Web Consortium (W3C), een non-profitorganisatie die standaarden voor het web vaststelt.
WCAG 2.1 niveau AA bevat richtlijnen op vier hoofdgebieden:
Waarneembaar: gebruikers kunnen je content zien of horen
Je content moet worden gepresenteerd op manieren die klanten kunnen waarnemen. Dat betekent tekstbeschrijvingen (alt-tekst) voor alle productafbeeldingen, ondertitels bij video's, voldoende kleurcontrast voor tekst en knoppen (minimaal 4,5:1 voor standaardtekst) en geen content die vaker dan 3 keer per seconde flitst, want dat kan aanvallen veroorzaken.
Bedienbaar: gebruikers kunnen door je shop navigeren en ermee werken
Gebruikers moeten door je shop kunnen navigeren met alleen een toetsenbord (geen muis nodig). Links en knoppen moeten met het toetsenbord bereikbaar zijn. Formulieren moeten duidelijke labels hebben die schermlezers begrijpen. Je shop mag toetsenbordgebruikers niet in eindeloze lussen laten vastlopen of acties met een tijdslimiet vragen die gebruikers niet kunnen aanpassen. Menu-items en invoervelden moeten makkelijk te vinden en te gebruiken zijn.
Begrijpelijk: gebruikers snappen wat je shop zegt en doet
Je shop moet makkelijk te begrijpen zijn. Gebruik duidelijke taal en korte zinnen. Leg jargon uit bij het eerste gebruik. Orden je pagina's logisch met een goede kopstructuur (één H1 per pagina, gevolgd door H2's en H3's in volgorde). Leg foutmeldingen bij formulieren duidelijk uit. Maak je site consistent, zodat gebruikers kunnen voorspellen hoe navigatie en interacties werken.
Robuust: je shop werkt met hulptechnologie
Je code moet correct geschreven zijn, zodat schermlezers en andere hulpmiddelen haar kunnen begrijpen. Dat betekent goede semantische HTML (knoppen zijn echte button-elementen, geen div's die eruitzien als knoppen), een goede kophiërarchie en ARIA-labels waar nodig om complexe interactieve elementen te beschrijven. Je shop moet werken in alle browsers en op alle apparaten.
Veelvoorkomende toegankelijkheidsbarrières in webshops
Dit zijn de meest voorkomende toegankelijkheidsproblemen in webshops:
Ontbrekende of slechte alt-tekst bij productafbeeldingen
Veel webshops hebben geen alt-tekst bij productafbeeldingen, of vage alt-tekst zoals "afbeelding" of "productfoto". Gebruikers van schermlezers kunnen afbeeldingen niet zien. Alt-tekst moet beschrijven wat belangrijk is aan de afbeelding. Bij een rood t-shirt is goede alt-tekst "rood katoenen t-shirt met ronde hals en borstzak", niet "shirt" of "rood shirt foto". Bij een keuzemenu voor productvarianten kan alt-tekst het kleurstaaltje of de stijlopties duidelijk beschrijven. Elke productafbeelding heeft nauwkeurige, beschrijvende alt-tekst nodig.
Formulieren zonder goede labels
Als een formulierveld (e-mailveld, telefoonveld, adresveld) geen bijbehorend label heeft, of het label alleen een visuele plaatshoudertekst is, weten gebruikers van schermlezers niet wat ze moeten invullen. Goed gelabelde formulieren hebben onzichtbare maar toegankelijke label-elementen die schermlezers vertellen waarvoor elk veld is.
Geen toetsenbordnavigatie
Sommige sites vereisen een muis om te navigeren of een aankoop af te ronden. Gebruikers met alleen een toetsenbord kunnen dan geen uitklapmenu's gebruiken, zien niet welk onderdeel de focus heeft of kunnen niet in een logische volgorde met Tab door formuliervelden. Elke functie moet met het toetsenbord bereikbaar zijn. De toetsenbordfocus moet zichtbaar zijn op de pagina, zodat gebruikers weten waar ze zijn.
Slecht kleurcontrast
Lichtgrijze tekst op een witte achtergrond is voor jou misschien leesbaar. Voor mensen die slechtziend zijn is het dat niet. WCAG niveau AA eist een contrastverhouding van minimaal 4,5:1 voor normale tekst. Knoppen, links en alle tekst die gebruikers moeten lezen moeten aan deze norm voldoen. Controleer je contrast met een gratis tool zoals de contrastchecker van WebAIM.
Verwarrende kopstructuur
Gebruikers van schermlezers navigeren pagina's vaak door tussen koppen te springen. Springt je pagina van H1 naar H3 naar H2, of worden koppen alleen voor opmaak gebruikt, dan geven schermlezers een verwarrende ervaring. Gebruik koppen in logische volgorde om je pagina te structureren. Eén H1 per pagina, dan H2's voor hoofdsecties en H3's voor subsecties. Sla nooit kopniveaus over.
Knoppen en links zonder duidelijk doel
Een knop met "klik hier" vertelt gebruikers van schermlezers niets over wat klikken doet. Gebruik beschrijvende knopteksten: "In winkelwagen", "Bekijk reviews", "Doorgaan naar afrekenen". Heb je een knop met een icoon nodig, voeg dan tekst of een ARIA-label toe dat de actie beschrijft. Elk interactief element moet een duidelijk, beschrijvend label hebben.
Ontoegankelijke uitklapmenu's en filters
Productfiltermenu's, categoriemenu's en sorteeropties die alleen met een muis werken zijn veelvoorkomende barrières. Toetsenbordgebruikers moeten er op dezelfde manier bij kunnen. Complexe interactieve onderdelen hebben ARIA-rollen en toetsenbordondersteuning nodig om met hulptechnologie te werken.
Zo maak je je shop toegankelijk
Toegankelijkheid vraagt geen dure adviseur en geen gespecialiseerde software. Begin met de basis:
1. Schrijf alt-tekst voor alle productafbeeldingen
Dit is de verandering met de meeste impact. Loop je producten door en schrijf voor elke afbeelding beschrijvende alt-tekst. Beschrijf het product, de kleur, het materiaal, de staat en onderscheidende kenmerken. Test je alt-tekst door hem hardop te lezen. Begrijpt iemand die de afbeelding niet kan zien het product? Zo niet, verbeter hem dan.
2. Zorg dat alle formulieren goede labels hebben
Elk formulierveld moet in je code een bijbehorend label-element hebben. Vertrouw niet op plaatshoudertekst. Haal de plaatshoudertekst weg zodra het veld focus krijgt, of houd hem maar voeg een echt label toe. Groepeer checkboxen en keuzerondjes en label ze duidelijk. Foutmeldingen bij formulieren moeten specifiek zijn en gebruikers precies vertellen wat ze moeten herstellen.
3. Controleer of toetsenbordnavigatie werkt
Test je hele shop met alleen je toetsenbord. Druk op Tab om te navigeren. Kun je elke knop, link en elk formulier bereiken? Zie je waar de focus is? Is de tabvolgorde logisch (van links naar rechts, van boven naar beneden)? Als toetsenbordgebruikers vastlopen of ergens niet bij kunnen, los dat dan op. De meeste toegankelijkheidsbarrières zijn toetsenbordbarrières.
4. Controleer en verbeter het kleurcontrast
Gebruik een gratis contrastchecker op je productpagina, knoppen, links en formulierlabels. Zorg dat tekst een contrast van 4,5:1 haalt voor normale tekst en 3:1 voor grote tekst (18pt of groter). Vertrouw niet alleen op kleur om informatie over te brengen (bijvoorbeeld "rode artikelen zijn in de aanbieding"). Voeg tekstlabels of iconen toe om de betekenis te ondersteunen.
5. Herstel je kopstructuur
Controleer je paginastructuur. Je moet één H1 hebben (de hoofdtitel van de pagina), dan H2's voor hoofdsecties en H3's voor subsecties. Sla nooit kopniveaus over. Gebruik koppen om content logisch te structureren, niet voor opmaak. Heb je opgemaakte tekst nodig die geen echte kop is, gebruik dan een div en CSS, geen koptag.
6. Schrijf duidelijke link- en knopteksten
Gebruikers van schermlezers roepen vaak een lijst op van alle links op een pagina. Links moeten ook buiten hun context betekenis hebben. "Meer over verzendopties" is beter dan "meer informatie". "Bekijk productreviews" is beter dan "lees reviews". Knoppen moeten hun actie duidelijk beschrijven: "In winkelwagen", "Doorgaan naar afrekenen", "Bewaren voor later".
7. Test met hulptechnologie
Download een gratis schermlezer zoals NVDA (voor Windows) of gebruik de ingebouwde toegankelijkheidstools op Mac en iPhone. Luister hoe je site klinkt. Kun je een aankoop afronden met alleen het toetsenbord en een schermlezer? Dat is de echte toets voor toegankelijkheid. Veel barrières worden duidelijk als je je eigen shop probeert te gebruiken als blinde of als gebruiker met alleen een toetsenbord.
Toegankelijkheid testen en controleren
Test je shop op toegankelijkheid nadat je wijzigingen hebt gedaan. Begin met deze tools:
Geautomatiseerde testtools
Gratis tools zoals WebAIM, Axe en Lighthouse (ingebouwd in Chrome) scannen je pagina's en melden veelvoorkomende problemen zoals ontbrekende alt-tekst, laag contrast en een slechte kopstructuur. Deze tools vangen misschien 30% van de toegankelijkheidsproblemen, dus ze zijn een startpunt en niet het volledige antwoord. Gebruik ze voor een snelle scan, maar ga er niet vanuit dat een schone uitslag betekent dat je site volledig toegankelijk is.
Toetsenbordtest
Navigeer door je site met alleen Tab, Shift+Tab, Enter en de pijltjestoetsen. Geen muis. Dit is de belangrijkste test. Kun je elke taak voltooien? Loop je vast? Is de focus zichtbaar? Is de tabvolgorde logisch? Als toetsenbordnavigatie niet werkt, voldoet je shop niet aan de toegankelijkheidsstandaard, wat geautomatiseerde tools ook zeggen.
Test met een schermlezer
Luister naar je site met NVDA (Windows) of VoiceOver (Mac). Beschrijft de schermlezer productafbeeldingen duidelijk? Begrijp je de formulierlabels? Is de navigatie logisch? Zijn er knoppen of links zonder uitleg? Professionele toegankelijkheidsaudits huren vaak blinde testers in om je site te gebruiken, maar je kunt grote problemen al vangen door zelf basis-schermlezertests te doen.
Handmatige codecontrole
Controleer je HTML-code op goede semantische opmaak. Knoppen moeten button-elementen zijn, geen opgemaakte div's. Links moeten anchor-tags zijn. Formuliervelden hebben label-elementen nodig. Koppen moeten h1-, h2-, h3-tags in volgorde zijn, niet h1, h3, h2. Goede semantische HTML is de basis van toegankelijkheid.
Zo helpt WEMASY bij toegankelijkheid
De websitebouwer van WEMASY is gebouwd met toegankelijkheid in gedachten. Het platform heeft een semantische HTML-structuur, goede formulierafhandeling met toegankelijke labels, menu's en winkelwagenfuncties die met het toetsenbord te bedienen zijn, en tools om makkelijk alt-tekst aan afbeeldingen toe te voegen. Bouw je je shop met WEMASY, dan is de onderliggende HTML al gestructureerd voor toegankelijkheid. Je erft geen ontoegankelijke code van het platform.
Dat betekent niet dat je site automatisch volledig toegankelijk is: je moet nog steeds goede alt-tekst geven, duidelijke taal gebruiken en testen met echte gebruikers. Maar de basis van WEMASY haalt veel veelvoorkomende barrières weg waar andere webshopplatforms last van hebben. Op onze prijzenpagina zie je wat elk abonnement bevat.
De zakelijke reden voor toegankelijkheid
Naast wettelijke compliance is toegankelijkheid gewoon goede business. Toegankelijke sites zijn bruikbaarder voor iedereen, niet alleen voor mensen met een beperking. Duidelijke taal, goed contrast, logische structuur en toetsenbordnavigatie komen ouderen ten goede, gebruikers op mobiele apparaten, gebruikers in rumoerige omgevingen en gebruikers met een trage internetverbinding. Een site die toegankelijk is voor mensen met een beperking is een betere site voor alle gebruikers.
Directer nog: 1 op de 4 volwassenen in de VS heeft een beperking. Dat zijn ruwweg 65 miljoen mensen. Als je shop niet toegankelijk is, sluit je een enorme markt uit. Je laat ook geld liggen. Blinde en slechtziende kopers geven miljarden uit online. Ze willen bij jouw shop kopen. Maak het mogelijk.
Juridisch is het risico reëel. In 2025 zijn meer dan 5.000 rechtszaken over websitetoegankelijkheid aangespannen. Webshops zijn goed voor 70% van die zaken. Een eis wegens overtreding van toegankelijkheidsregels kost tijd en juridische kosten om je tegen te verweren. Schikken zonder de onderliggende problemen op te lossen nodigt alleen uit tot meer claims. De slimste aanpak is je site nu te verbeteren, je inspanningen vast te leggen en het probleem helemaal te vermijden.
Aan de slag
Is je shop niet toegankelijk, raak dan niet in paniek. Begin met de oplossingen met de meeste impact: alt-tekst, toetsenbordnavigatie en contrast. Deze drie veranderingen vangen de meeste toegankelijkheidsbarrières. Test met toetsenbordnavigatie en een schermlezer. Los de problemen op die je vindt. Leg je werk vast. Test regelmatig opnieuw, zeker na wijzigingen aan je site. Toegankelijkheid is geen eenmalig project, maar een voortdurende manier van inclusief bouwen.
Veelgestelde vragen
Geldt de ADA echt voor mijn kleine webshop?
Ja. De ADA geldt voor alle bedrijven die open zijn voor het publiek, ongeacht de omvang. Er is geen uitzondering voor kleine bedrijven. Verkoop je online, dan valt je website eronder.
Wat is het verschil tussen toegankelijk en compliant?
Toegankelijk betekent dat je site echt bruikbaar is voor mensen met een beperking. Compliant betekent dat hij voldoet aan een technische standaard zoals WCAG 2.1 niveau AA. Een site kan technisch aan de standaard voldoen en toch moeilijk te gebruiken zijn, of heel goed bruikbaar zijn zonder technisch perfect te zijn. Het doel is allebei: toegankelijk in de praktijk en compliant met de standaard.
Moet ik iemand inhuren om mijn shop toegankelijk te maken?
Niet per se. Heeft je shop basisproblemen (ontbrekende alt-tekst, slecht contrast, kapotte toetsenbordnavigatie), dan kun je veel daarvan zelf oplossen. Schrijf alt-tekst, controleer het contrast met een gratis tool, test met je toetsenbord en een schermlezer. Is je site gebouwd op een modern platform met een goede HTML-structuur, dan is toegankelijkheid herstellen vaak eenvoudig. Grotere sites met complexe functionaliteit hebben mogelijk baat bij een professionele audit, maar kleine shops kunnen hun grootste barrières vaak zelf oplossen.
Wat als ik een brief krijg met een toegankelijkheidseis?
Neem het serieus. Negeer het niet. Zulke brieven geven je meestal een termijn om de problemen op te lossen. Werk met je ontwikkelaar of de support van je platform aan de genoemde overtredingen. Leg alles vast wat je doet. Je kunt ook een jurist raadplegen die bekend is met toegankelijkheidsrecht. Schikken zonder de onderliggende problemen op te lossen is geen oplossing voor de lange termijn: herstel de site.
Maakt een toegankelijke site de laadtijden langer?
Nee. Toegankelijkheid en prestaties staan los van elkaar. Een site kan snel en ontoegankelijk zijn, of traag en toegankelijk. Semantische HTML (de codestructuur die nodig is voor toegankelijkheid) is vaak lichter en sneller dan slecht geschreven code. Veel toegankelijkheidsverbeteringen, zoals een goede kopstructuur en duidelijke taal, hebben geen invloed op de snelheid.
Dekt WCAG 2.1 niveau AA alles wat ik nodig heb om wettelijk te voldoen?
WCAG 2.1 niveau AA is de standaard waar de meeste rechtszaken over toegankelijkheid naar verwijzen. Het is de maatstaf die rechtbanken hebben gebruikt om te beoordelen of een website toegankelijk is. Voldoen aan WCAG 2.1 niveau AA is de beste manier om aan te tonen dat je toegankelijkheid serieus hebt genomen en aan de wettelijke norm hebt voldaan.
Lees ook: Privacybeleid, cookietoestemming en AVG voor je webshop en Zo bescherm je je merk en producten tegen kopiëren.