De 10 meest voorkomende toegankelijkheidsfouten in webshops (en hoe je ze oplost)
4 juni 2026
Kort antwoord. De meeste webshops falen niet op honderden verschillende dingen, maar op dezelfde handvol fouten: te weinig kleurcontrast, ontbrekende alt-teksten, knoppen en links zonder naam, velden zonder label, een rommelige koppenstructuur en gebrekkige toetsenbordbediening. Goed nieuws: precies daardoor is het oplosbaar, vaak themabreed, zodat één fix meteen honderden pagina's dekt.
Uit het WebAIM Million-onderzoek blijkt dat ~96% van de homepages meetbare WCAG-fouten heeft, en die concentreren zich op onderstaande tien. Wil je weten welke jóuw site heeft? Onderaan scan je gratis één pagina.
1. Te weinig kleurcontrast
Veruit de meest voorkomende fout. Lichtgrijze tekst op wit, of een knopkleur die net te flets is, is onleesbaar voor slechtzienden en bij fel zonlicht op een telefoon. De norm vraagt een contrastverhouding van minstens 4,5:1 voor gewone tekst (3:1 voor grote tekst).
Oplossing: maak de tekst- of achtergrondkleur donkerder of lichter tot de verhouding klopt. In Shopify pas je dit één keer aan in je thema-instellingen → kleuren, en het geldt meteen voor je hele winkel. Meer hierover in kleurcontrast: de WCAG-eis en hoe je 'm meet.
2. Afbeeldingen zonder alt-tekst
Een productfoto zonder alt-tekst is onzichtbaar voor een schermlezer, een blinde klant weet dan niet wat het product is. Dit raakt direct je verkoop.
Oplossing: geef elke informatieve afbeelding een korte alt-tekst die
beschrijft wat erop staat. In Shopify: product → media → "alt-tekst bewerken".
Puur decoratieve afbeeldingen krijgen een lege alt (alt=""). Zie
alt-teksten schrijven die werken.
3. Knoppen zonder naam
Een knop die alleen een icoon toont (winkelwagen, zoeken, menu) wordt door een schermlezer voorgelezen als "knop", zonder dat de gebruiker weet wat-ie doet.
Oplossing: geef de knop tekst, of een aria-label dat de actie beschrijft,
bijvoorbeeld aria-label="In winkelwagen".
4. Links zonder duidelijke tekst
Net als knoppen: een link die alleen uit een icoon bestaat, of "lees meer"-links zonder context, vertellen een schermlezer-gebruiker niet waar hij heen gaat.
Oplossing: geef de link zichtbare, beschrijvende tekst, of een aria-label
("Bekijk winkelwagen" in plaats van een kaal winkelwagen-icoon).
5. Invoervelden zonder label
Zoek-, login- en afrekenvelden zonder gekoppeld label zijn lastig of onmogelijk te bedienen met hulptechnologie. Juist bij het afrekenen kost dat je klanten.
Oplossing: koppel een zichtbaar <label> aan elk invoerveld (via for/id),
of gebruik een aria-label als er geen ruimte is voor zichtbare tekst.
6. Een rommelige koppenstructuur
Schermlezer-gebruikers navigeren op koppen, zoals jij op een inhoudsopgave. Als je van een H1 naar een H4 springt, of koppen alleen voor de opmaak gebruikt, breekt die structuur.
Oplossing: gebruik koppen in logische volgorde (H1 → H2 → H3) en regel de opmaak met CSS, niet met het koppniveau.
7. Ontbrekend taalattribuut
Zonder taalattribuut weet een schermlezer niet of je pagina Nederlands of Engels is, en spreekt alles met de verkeerde uitspraak voor.
Oplossing: zet lang="nl" (of de juiste taal) op het <html>-element. In
Shopify zit dit in theme.liquid, meestal al aanwezig, maar soms leeg.
8. Niet bedienbaar met het toetsenbord
Veel mensen gebruiken geen muis. Als een menu, slider of pop-up alleen met de muis werkt, of als je niet kunt zien waar de focus staat, sluit je die bezoekers buiten.
Oplossing: zorg dat alles met de Tab-toets bereikbaar is, dat er een zichtbare focus-rand is, en dat pop-ups de focus niet "gevangen" houden.
9. Verkeerd gebruikte ARIA
ARIA-attributen kunnen hulptechnologie helpen, maar verkeerd of ongeldig gebruikt richten ze juist schade aan. Dit sluipt vaak binnen via geïnstalleerde apps of thema-onderdelen.
Oplossing: gebruik ARIA alleen waar nodig en met geldige waarden. Komt het uit een app of thema, controleer dan dat onderdeel.
10. Geen duidelijke paginatitel
Een pagina zonder unieke <title> toont in de browsertab en bij schermlezers
geen herkenbare naam, navigeren tussen tabbladen wordt giswerk.
Oplossing: geef elke pagina een unieke, beschrijvende titel. Shopify vult dit meestal automatisch; controleer je aangepaste sjablonen.
Wat is de meest voorkomende toegankelijkheidsfout?
Te weinig kleurcontrast is veruit de meest voorkomende fout, het staat met afstand bovenaan in vrijwel elk grootschalig onderzoek, omdat het ongemerkt in themakleuren, knopteksten en prijslabels sluipt. Het is tegelijk een van de makkelijkst op te lossen fouten: één keer je themakleuren goed zetten en het geldt winkelbreed.
Kun je deze fouten in één keer oplossen?
Vaak wel. Omdat een webshop met sjablonen werkt, komt dezelfde fout meestal op honderden pagina's tegelijk voor, en is hij dus ook themabreed te repareren. Eén aanpassing aan je thema (kleuren, koppen, labels) dekt dan in één klap je hele winkel.
Vangt een gratis scan al deze fouten?
Een geautomatiseerde scan stelt ongeveer 57% van de problemen betrouwbaar machinaal vast (Deque-onderzoek); de rest vraagt menselijke beoordeling. Die 57% omvat juist de fouten hierboven, contrast, alt-teksten, labels, knoppen, koppen, dus een scan brengt het leeuwendeel meteen in beeld, mét de fix erbij.
Benieuwd welke van deze tien op jouw site staan? Plak je URL en scan gratis één pagina op volle diepte, geen account, in minder dan 60 seconden.