Hoe toegankelijk zijn de top 300 webwinkels in Nederland voor mensen met een beperking?

Geschreven door Rian Rietveld

door

Hoe toegankelijk zijn de top 300 webwinkels in Nederland voor mensen met een beperking?

Artikel

Hoe toegankelijk zijn de top 300 webwinkels in Nederland voor mensen met een beperking?

Samenvatting

Hoe toegankelijk zijn webwinkels in Nederland voor mensen met een beperking? Level Level onderzocht de voorpagina meer dan 300 websites van bedrijven uit de Twinkle 300. Hiervoor zijn de voorpagina’s  automatisch gescand op fouten.

De conclusie: alle onderzochte websites bevatten problemen betreffende toegankelijkheid. Veel van de problemen zijn dezelfde: 

  • onvoldoende kleurcontrast voor tekst;
  • geen alternatieve teksten bij afbeeldingen;
  • links en knoppen zonder naam. 

Het goede nieuws is: deze drie problemen zijn goed op te lossen zonder ingrijpende verbouwing van de websites. De bedrijven moeten echter wel snel aan de slag, in juni 2025 wordt een toegankelijke website wettelijk verplicht.

Waarom dit onderzoek?

We stelden ons de vraag: hoe goed zijn bedrijven voorbereid op de nieuwe wetgeving, de European Accessibility Act? In juni 2025 moeten grote webwinkels voldoen aan de richtlijnen voor webtoegankelijkheid (WCAG AA) . 

Hoe ver zijn bedrijven met het toegankelijk maken van hun webshop voor bijvoorbeeld bezoekers die slechtziend of blind zijn of de muis niet kunnen gebruiken? Wat is de algemene trend?

Mensen met een beperking hebben geld te besteden en zijn potentiële klanten. Het uitsluiten van (geschat) 20% van de bevolking heeft grote consequenties voor de omzet. 

Daarnaast: toegang tot een webshop is voor veel mensen met een beperking de toegang tot onafhankelijkheid. Je hoeft niet meer naar de supermarkt met een lijstje, waar een medewerker de spullen voor je bij elkaar zoekt omdat je blind bent. Je kunt gewoon je boodschappen thuis laten bezorgen. 

Een toegankelijke website zorgt voor de vrijheid om zelf je inkopen te doen, ook als je bijvoorbeeld in een rolstoel zit en niet makkelijk zelf het huis uit kunt. 

De websites

De 300 bedrijven, vermeld in de Twinkle100, zijn het uitgangspunt van ons onderzoek. Sommige bedrijven beheren meerdere websites, waardoor het totaal onderzochte webwinkels op 317 uitgekomen is.

Om een beeld te krijgen van de stand van zaken zijn de voorpagina’s van deze 317 webshops met een automatische test gescand.

De top 15 uit de Twinkle100  is daarnaast ook handmatig getest. Hierbij is niet alleen de voorpagina, maar het hele besteltraject doorgenomen. Level Level voert dit webwinkel onderzoek voor de derde keer uit.

Illustratie van een desktop scherm met een webwinkel erop. Twee personen wijzen met een stokje de foute en goede onderdelen aan.

De meetmethode

300 Websites testen op toegankelijkheid, hoe pak je dan aan? Sinds 2021 test Level Level de top 15 van de Twinkle100, en dat is steeds een hele klus. De hele bestelprocedure wordt handmatig en gedeeltelijk geautomatiseerd getest. Dit om goed te kunnen beoordelen of een gebruiker met een beperking echt kan bestellen. 

Om toch een beeld te krijgen van de toegankelijkheid van een website zijn de voorpagina’s met een automatisch gescand met axe-scan. Hiermee kun je verschillende websites tegelijk geautomatiseerd testen.

Een toegankelijke website moet aan een aantal richtlijnen voldoen. De Web Accessibility Content Guidelines (WCAG). Een aantal van deze richtlijnen is geautomatiseerd te meten. Op dit moment is nog niet alles zo te meten, voor een goede beoordeling moet nog veel handmatig getest worden. Maar een scan geeft toch een goed algemeen beeld.

We hebben gekeken naar kritieke en serieuze overtredingen van WCAG; overtredingen die mensen met een beperking echt verhinderen de website goed te begrijpen en te gebruiken. Hier gaat het om gebruikers die bijvoorbeeld blind zijn of de muis niet kunnen gebruiken.

Hoeveel fouten in de toegankelijkheid op de voorpagina?

Totaal aantal fouten

In de 312 websites vonden we totaal 38349 fouten. Welke fouten worden gemaakt en hoe vaak komen ze voor?

  • 39%: Links hebben geen naam
  • 22%: Knoppen hebben geen naam
  • 20%: Afbeeldingen hebben geen alternatieve tekst
  • 14%: Teksten hebben te weinig kleurcontrast
  • 4%: Verkeerd gebruik van ARIA in de HTML-code
  • 1%: Links in de tekst worden alleen aangegeven met een andere kleur en zijn niet onderstreept
  • minder dan 1% zijn fouten in de HTML code, zoals het blokkeren van inzoomen en niet aangeven in welke taal een webpagina is geschreven.
Illustratie van een staafdiagram die de fouten toont welke gemaakt worden met percentages.

39%: Links hebben geen naam		
22%: Knoppen hebben geen naam			
20%: Afbeeldingen hebben geen alternatieve tekst	
14%: Teksten hebben te weinig kleurcontrast		
4%: Verkeerd gebruik van ARIA in de HTML-code
1%: Links in de tekst worden alleen aangegeven met een andere kleur en zijn niet onderstreept
minder dan 1% zijn fouten in de HTML code, zoals het blokkeren van inzoomen en niet aangeven in welke taal een webpagina is geschreven.

Disclaimer: Een automatische test geeft een algemeen beeld en geen exacte weergave per website. Voor een goed beeld van de toegankelijkheid van een website is naast een automatische scan ook een handmatige toetsing nodig.

Fouten per website

Bij hoeveel websites komen deze fouten voor?

  • 71%: Teksten hebben te weinig kleurcontrast
  • 70%: Links hebben geen naam
  • 64%: Knoppen hebben geen naam
  • 40%: Afbeeldingen hebben geen alternatieve tekst
  • 33%: Blokkeren van inzoomen
  • 30%: Verkeerd gebruik van ARIA in de HTML-code
  • 10%: Niet aangeven in welke taal een webpagina is geschreven
  • 10%: Links in de tekst worden alleen aangegeven met een andere kleur en zijn niet onderstreept
  • 4%: Fouten in de HTML- code
Illustratie van een staafdiagram die de fouten per website toont in percentages.

71%: Teksten hebben te weinig kleurcontrast
70%: Links hebben geen naam	
64%: Knoppen hebben geen naam
40%: Afbeeldingen hebben geen alternatieve tekst	
33%: Blokkeren van inzoomen
30%: Verkeerd gebruik van ARIA in de HTML-code
10%: Niet aangeven in welke taal een webpagina is geschreven
10%: Links in de tekst worden alleen aangegeven met een andere kleur en zijn niet onderstreept
4%: Fouten in de HTML- code

Elk jaar publiceert WebAIM een vergelijkbaar onderzoek van 1 miljoen websites wereldwijd: de WebAIM Million.

Opvallend dat de vaakst gemeten fouten in Nederlandse webwinkels overeenkomen met de wereldwijde trend: te weinig kleurcontrast voor teksten, links en knoppen zonder naam en afbeeldingen zonder teksten.

De meest voorkomende fouten

Teksten hebben te weinig kleurcontrast

Je wilt natuurlijk dat je bezoeker de tekst kan lezen. Als je jong en gezond bent kun je zelfs heel licht grijs van wit onderscheiden. Als we ouder worden, kleurenblind zijn of slechtziend, gaat een goed kleurcontrast echt een rol spelen. Voldoende kleurcontrast voor tekst is daarom essentieel voor een goed werkende webwinkel. 

Ga in gesprek met de webdesigner.

Illustratie waarin links een voorbeeld staat van te weinig kleurcontrast. Rechts staat een voorbeeld van voldoende kleurcontrast, namelijk minimaal 4.5:1 voor tekst.

Als je blind bent zie je niet wat er op het scherm staat. Een schermlezer zoals VoiceOver of NVDA leest de website voor en helpt de gebruiker op de website te navigeren.

Links of knoppen worden vaak alleen als een plaatje weergegeven. Zoals een link naar Facebook, of de knop om het menu te openen. De beste manier om dit weer te geven is om de naam erbij te zetten. Dus naast het Facebook icoontje het woord Facebook. En naast de drie streepjes het woord Menu. Een screen reader kan niet veel met een plaatje, maar tekst is altijd duidelijk.

Er zijn manieren om tekst toe te voegen die je niet ziet, maar die wel voorgelezen worden. En hier gaat het vaak fout. Veel programmeurs weten niet goed hoe dit moet. Dus laten ze de tekst weg en geven geen alternatief.

De consequentie is dat een blinde koper geen idee heeft wat een knop of link doet. En dat is echt jammer als die knop nu juist het winkelwagentje opent.

Ga in gesprek met de designer en je developer. Voeg toegankelijke namen toe aan links en knoppen.

Illustratie van een hamburger menu icon waarbij in het voorbeeld links geen begeleidende tekst staat en onjuist is. Het juiste voorbeeld aan de rechterkant heeft de begeleidende tekst 'menu' en is correct.

Afbeeldingen hebben geen alternatieve tekst

Als een plaatje geen alternatieve tekst heeft maar toch betekenis heeft voor de inhoud, mist een blinde of slechtziende gebruiker de inhoud. Jammer als dit plaatje vertelt hoe een product eruit ziet, uitverkocht is, dat er korting wordt gegeven of een speciale actie.

Een korte, beschrijvende tekst is vaak al voldoende. Bijvoorbeeld: “Korting 50%.”, “rode trui met lange mouwen.”, “Sleutelhanger met Nijntje.”. 

Je hoeft geen extra tekst toe te voegen. De tekst “dit is een afbeelding van” is overbodig. De schermlezer leest al voor dat het een plaatje is.

Het schrijven van een goede “alt-tekst” wordt vaak als een lastig en overbodig klusje gezien. Sluit geen mensen uit die bij je willen kopen en afhaken omdat ze niet te weten komen wat ze kopen.

Ga in gesprek met je content-team. 

Illustratie van een onjuiste en juiste alt-text. 

Het linker voorbeeld is onjuist en weergeeft dat een afbeelding zonder alt text de bestandsnaam krijgt uitgesproken. Met een correcte alt text word omschreven wat er op de afbeelding staat en zal dit worden uitgesproken.

Conclusie

De meest genoemde fouten zijn meteen ook de makkelijkste om te fixen. 

  • Voor het web-team: geef afbeeldingen een alternatieve tekst mee. 
  • Voor de developer: geef knoppen en links een goede (toegankelijke) naam.
  • Voor de designer: geef tekst voldoende kleurcontrast ten opzichte van de achtergrond. 

Al deze verbeteringen kun je (laten) maken zonder grote ingrijpende verbouwing van de website. Verbeter zo stapsgewijs de website. Als je deze problemen hebt opgelost, scoor je al beter dan de meeste websites (wereldwijd). 

Kan jouw website hulp gebruiken met digitale toegankelijkheid?

Of heb je vragen over de European Accessibility Act? Level Level bereidt je voor op de toekomst met optimaal toegankelijke websites.

Vertel ons meer over je plannen en ambities!

We zijn klaar om jullie online uitdaging op te pakken.