Naar de inhoud
Plan een kennismakingKennismaken

WCAG-check · voorbeeldrapport

Zo ziet je rapport eruitEen verzonnen webshop, gescand met de echte scanner.

Dit is een volledig rapport, zoals je het krijgt als je het aanvraagt. De webshop "De Proeftuin" bestaat niet: ik heb hem gebouwd met fouten die ik in echte webshops tegenkom, en daarna door dezelfde scanner gehaald die jouw site test. De cijfers en bevindingen hieronder komen dus echt uit de scan.

Voorbeeld · verzonnen webshop · gescand op 20 oktober 2026

Deel 1 · voor de ondernemer

Adviesrapport

In gewone taal: hoe toegankelijk is de webshop, waar lopen klanten vast, en wat moet eerst. Getest volgens WCAG 2.2 niveau AA op 5 pagina's: de homepage en de stappen van de bestelling.

Samenvatting

42/100

Stoplicht rood
ZienKan iedereen de inhoud waarnemen, ook zonder goed zicht of gehoor?47 van 100, rood
BedienenWerkt alles ook zonder muis en zonder haast?0 van 100, rood
BegrijpenIs duidelijk wat er gebeurt en wat je moet invullen?34 van 100, rood
TechniekIs de code zo gebouwd dat hulpsoftware hem goed leest?85 van 100, groen
  • Blokkerend : 4
  • Ernstig : 6
  • Hinderlijk : 6
  • Verbetering : 1

De scan vond 17 soorten knelpunten (4 blokkerend, 6 ernstig, 6 hinderlijk, 1 verbetering). De zwaarste zitten in bedienen: wie geen muis gebruikt, komt niet voorbij de cookiemelding en kan dus niets kopen. In begrijpen missen invulvelden en keuzelijsten een naam, juist in de winkelwagen en bij het afrekenen.

Geldt de toegankelijkheidswet? Waarschijnlijk wel. De Proeftuin verkoopt online aan consumenten en heeft meer dan tien medewerkers, dus de European Accessibility Act geldt sinds 28 juni 2025. In Nederland houdt de ACM toezicht. Dit is een indicatie, geen juridisch advies.

Dit eerst: 4 punten die klanten tegenhouden

  1. Knoppen zonder naamEen screenreader zegt bij deze knoppen alleen 'knop', niet wat ze doen. Denk aan een winkelmandje of zoekknop met alleen een icoon. Blinde bezoekers kunnen dan niet verder.Waar: /, /winkelwagen · Last van: blinde bezoekers (screenreader) · Voor de webbouwer · inspanning klein · technische details
  2. Invulvelden zonder labelBij deze invulvelden staat voor een screenreader niet wat je moet invullen. Een blinde bezoeker hoort alleen 'invoerveld' en kan het formulier niet invullen. Ook een placeholder die verdwijnt bij het typen telt niet als label.Waar: /winkelwagen · Last van: blinde bezoekers (screenreader), bezoekers met een cognitieve beperking of leesproblemen, oudere bezoekers · Voor de webbouwer · inspanning klein · technische details
  3. Keuzelijsten zonder labelBij deze keuzelijst (bijv. maat, aantal of datum) staat niet wat je kiest.Waar: /afrekenen, /producten · Last van: blinde bezoekers (screenreader) · Voor de webbouwer · inspanning klein · technische details
  4. Met het toetsenbord kom je ergens niet meer uitMet de Tab-toets kom je vast te zitten in een onderdeel en kun je niet verder naar de rest van de pagina. Voor wie geen muis gebruikt, eindigt het bezoek daar.Waar: / · Last van: bezoekers die geen muis kunnen gebruiken, blinde bezoekers (screenreader) · Voor de webbouwer · inspanning middel · technische details

De bestelling, stap voor stap

Waar loopt iemand vast op weg naar een bestelling? Per pagina het aantal knelpunten: blokkerend / ernstig / overig.

StapOordeelAantalBelangrijkste drempel
Homepage/Hier loopt iemand vast2 / 6 / 4Knoppen zonder naam; Met het toetsenbord kom je ergens niet meer uit
Winkelwagen/winkelwagenHier loopt iemand vast2 / 4 / 0Knoppen zonder naam; Invulvelden zonder label
Afrekenen/afrekenenHier loopt iemand vast1 / 4 / 3Keuzelijsten zonder label
Producten/productenHier loopt iemand vast1 / 4 / 0Keuzelijsten zonder label
Contact/contactLukt, maar met veel moeite0 / 4 / 0Tekst met te weinig contrast; Afbeeldingen zonder beschrijving

Let op de homepage: omdat de cookiemelding het toetsenbord vasthoudt, komt iemand zonder muis niet eens bij de andere stappen. Dat ene punt weegt daarom het zwaarst.

Wie er last van heeft

Ruim 2,5 miljoen Nederlanders hebben een beperking, en ook ouderen en mensen op een telefoon in de zon lopen tegen dezelfde drempels aan. Zo verdelen de blokkerende en ernstige knelpunten zich:

  • Blinde bezoekers (screenreader)7 knelpunten die hen tegenhouden of veel moeite kosten
  • Oudere bezoekers3 knelpunten die hen tegenhouden of veel moeite kosten
  • Bezoekers die geen muis kunnen gebruiken3 knelpunten die hen tegenhouden of veel moeite kosten
  • Slechtziende bezoekers3 knelpunten die hen tegenhouden of veel moeite kosten
  • Bezoekers met een cognitieve beperking of leesproblemen1 knelpunt die hen tegenhouden of veel moeite kosten

Het plan, in drie rondes

Op volgorde van wat het meeste oplevert, en per ronde wie het oppakt. Klik op een punt voor de technische uitleg.

Ronde 1 · nu

Wat iemand tegenhoudt. Dit eerst, ook als de rest moet wachten.

Ronde 2 · deze maand

Lukt wel, maar kost veel moeite. Hier verlies je de meeste klanten.

Ronde 3 · bij het volgende onderhoud

Irritant en slecht voor de conversie, snel op te lossen.

Wat dit rapport wel en niet zegt

  • De scan test in een echte browser met axe-core en eigen toetsenbordtests. Zo'n automatische test vindt een deel van de problemen, niet alles.
  • Een goede score betekent dus niet dat een site "voldoet". Ik zeg nooit dat een site conform of gecertificeerd is.
  • Een handmatige test met een screenreader is los aan te vragen, als je die zekerheid wilt.
  • Na de aanpassingen doe ik een herscan, zodat je ziet wat er opgelost is.
  • De toegankelijkheidsverklaring ontbreekt nog. Die moet een webshop onder de wet publiceren, en ik lever er een opzet voor mee.

Deel 2 · voor de webbouwer

Technisch rapport

Per knelpunt: het WCAG-criterium, waar het zit, voorbeelden uit de code en de oplossing. De nummers verwijzen naar het adviesrapport, zodat ondernemer en bouwer over hetzelfde praten.

NrKnelpuntErnstWCAGAantalPagina'sInspanning
TG-001Knoppen zonder naamBlokkerend4.1.22/, /winkelwagenklein
TG-002Invulvelden zonder labelBlokkerend4.1.22/winkelwagenklein
TG-003Keuzelijsten zonder labelBlokkerend4.1.22/afrekenen, /productenklein
TG-004Met het toetsenbord kom je ergens niet meer uitBlokkerend2.1.21/middel
TG-005Tekst met te weinig contrastErnstig1.4.348/, /afrekenen, /contact, /producten, /winkelwagenmiddel
TG-006Afbeeldingen zonder beschrijvingErnstig1.1.128/, /afrekenen, /contact, /producten, /winkelwagenklein
TG-007Links zonder naamErnstig2.4.4, 4.1.223/, /afrekenen, /contact, /producten, /winkelwagenklein
TG-008Inzoomen op de telefoon is geblokkeerdErnstig1.4.45/, /afrekenen, /contact, /producten, /winkelwagenklein
TG-009Klikbare onderdelen niet bereikbaar met het toetsenbordErnstig2.1.15/middel
TG-010Je ziet niet waar je bent met het toetsenbordErnstig2.4.72/klein
TG-011Te kleine klikdoelenHinderlijk2.5.84/afrekenenklein
TG-012Taal van de pagina niet ingesteldHinderlijk3.1.11/klein
TG-013Geen hoofdinhoud aangeduidHinderlijk—1/klein
TG-014Geen hoofdkop op de paginaHinderlijk—1/klein
TG-015Automatisch invullen werkt niet goedHinderlijk1.3.51/afrekenenklein
TG-016Kopjes in de verkeerde volgordeHinderlijk—1/afrekenenklein
TG-017Geen informatie over toegankelijkheidVerbetering—1/klein

TG-001 · Bedienen

Knoppen zonder naam

BlokkerendWCAG 4.1.2 · niveau A2× gevondenInspanning: klein

Waar
/, /winkelwagen
Last van
blinde bezoekers (screenreader)
Wie lost het op
de webbouwer

Wat er misgaat. Een screenreader zegt bij deze knoppen alleen 'knop', niet wat ze doen. Denk aan een winkelmandje of zoekknop met alleen een icoon. Blinde bezoekers kunnen dan niet verder.

Oplossing. Geef elke <button> zichtbare tekst of een aria-label, bijvoorbeeld aria-label="Winkelwagen openen".

Gevonden

  • / · button
    <button><img src="img/mand.jpg" width="16"></button>
  • /winkelwagen · p > button
    <button></button>

Bron: axe-core · uitleg van de regel (Engels)

TG-002 · Begrijpen

Invulvelden zonder label

BlokkerendWCAG 4.1.2 · niveau A2× gevondenInspanning: klein

Waar
/winkelwagen
Last van
blinde bezoekers (screenreader), bezoekers met een cognitieve beperking of leesproblemen, oudere bezoekers
Wie lost het op
de webbouwer

Wat er misgaat. Bij deze invulvelden staat voor een screenreader niet wat je moet invullen. Een blinde bezoeker hoort alleen 'invoerveld' en kan het formulier niet invullen. Ook een placeholder die verdwijnt bij het typen telt niet als label.

Oplossing. Koppel elk veld aan een zichtbaar <label for="id">, of gebruik aria-labelledby. Een placeholder alleen is niet genoeg.

Gevonden

  • /winkelwagen · input[type="number"]
    <input type="number" value="1">
  • /winkelwagen · input[type="text"]
    <input type="text">

Bron: axe-core · uitleg van de regel (Engels)

TG-003 · Begrijpen

Keuzelijsten zonder label

BlokkerendWCAG 4.1.2 · niveau A2× gevondenInspanning: klein

Waar
/afrekenen, /producten
Last van
blinde bezoekers (screenreader)
Wie lost het op
de webbouwer

Wat er misgaat. Bij deze keuzelijst (bijv. maat, aantal of datum) staat niet wat je kiest.

Oplossing. Koppel elke <select> aan een <label>.

Gevonden

  • /afrekenen · select
    <select><option>Morgen</option></select>
  • /producten · select
    <select><option>Sorteer</option><option>Prijs</option></select>

Bron: axe-core · uitleg van de regel (Engels)

TG-004 · Bedienen

Met het toetsenbord kom je ergens niet meer uit

BlokkerendWCAG 2.1.2 · niveau A1× gevondenInspanning: middel

Waar
/
Last van
bezoekers die geen muis kunnen gebruiken, blinde bezoekers (screenreader)
Wie lost het op
de webbouwer

Wat er misgaat. Met de Tab-toets kom je vast te zitten in een onderdeel en kun je niet verder naar de rest van de pagina. Voor wie geen muis gebruikt, eindigt het bezoek daar.

Oplossing. Zorg dat Tab en Shift+Tab altijd uit elk onderdeel leiden; bij een pop-up moet Escape hem sluiten en de focus teruggaan naar de knop die hem opende.

Gevonden

  • / · html > body > div.cookie:nth-of-type(3) > a:nth-of-type(2)
    <a href="#" onclick="return false">Meer info</a>

Bron: eigen toetsenbordtest

TG-005 · Zien

Tekst met te weinig contrast

ErnstigWCAG 1.4.3 · niveau AA48× gevondenInspanning: middel

Waar
/, /afrekenen, /contact, /producten, /winkelwagen
Last van
slechtziende bezoekers, oudere bezoekers
Wie lost het op
de ontwerper of webbouwer

Wat er misgaat. Deze tekst is te licht ten opzichte van de achtergrond. Voor slechtziende en oudere bezoekers, en voor iedereen buiten in de zon op een telefoon, is hij moeilijk of niet te lezen.

Oplossing. Zorg voor een contrastverhouding van minimaal 4,5:1 voor gewone tekst en 3:1 voor grote tekst (vanaf 24px, of 18,66px vet). Pas kleur van tekst of achtergrond aan in de huisstijl.

Gevonden

  • / · nav > a[href="index.html"]
    <a href="index.html">Home</a>
  • / · a[href$="producten.html"]
    <a href="producten.html">Producten</a>
  • / · a[href$="over-ons.html"]
    <a href="over-ons.html">Over ons</a>

en nog 45 keer op dezelfde manier.

Bron: axe-core · uitleg van de regel (Engels)

TG-006 · Zien

Afbeeldingen zonder beschrijving

ErnstigWCAG 1.1.1 · niveau A28× gevondenInspanning: klein

Waar
/, /afrekenen, /contact, /producten, /winkelwagen
Last van
blinde bezoekers (screenreader)
Wie lost het op
wie de teksten en afbeeldingen beheert

Wat er misgaat. Een screenreader leest bij deze afbeeldingen niets of alleen een bestandsnaam voor. Blinde bezoekers missen dan wat er te zien is, zoals een product of een knop met een plaatje.

Oplossing. Geef elke informatieve <img> een alt-tekst die zegt wat de afbeelding laat zien of doet. Decoratieve afbeeldingen krijgen alt="".

Gevonden

  • / · img[width="40"]
    <img src="img/logo.jpg" width="40">
  • / · img[width="24"]
    <img src="img/mand.jpg" width="24">
  • / · img[src$="hero.jpg"]
    <img src="img/hero.jpg" style="width:100%;height:240px;object-fit:cover">

en nog 25 keer op dezelfde manier.

Bron: axe-core · uitleg van de regel (Engels)

TG-007 · Bedienen

Links zonder naam

ErnstigWCAG 2.4.4 en 4.1.2 · niveau A23× gevondenInspanning: klein

Waar
/, /afrekenen, /contact, /producten, /winkelwagen
Last van
blinde bezoekers (screenreader)
Wie lost het op
de webbouwer

Wat er misgaat. Een screenreader leest bij deze links niets zinnigs voor, vaak omdat het alleen een icoon of afbeelding is. Blinde bezoekers weten niet waar de link heen gaat.

Oplossing. Geef elke link tekst, of een aria-label bij icoonlinks (bijv. aria-label="Instagram"). Bij een afbeelding in een link: alt-tekst met het doel.

Gevonden

  • / · header > a[href="index.html"]
    <a href="index.html"><img src="img/logo.jpg" width="40"></a>
  • / · a[href$="winkelwagen.html"]
    <a href="winkelwagen.html"><img src="img/mand.jpg" width="24"></a>
  • / · a[href="https://facebook.com/…"]
    <a href="https://facebook.com/…"><img src="img/logo.jpg" width="16"></a>

en nog 20 keer op dezelfde manier.

Bron: axe-core · uitleg van de regel (Engels)

TG-008 · Zien

Inzoomen op de telefoon is geblokkeerd

ErnstigWCAG 1.4.4 · niveau AA5× gevondenInspanning: klein

Waar
/, /afrekenen, /contact, /producten, /winkelwagen
Last van
slechtziende bezoekers, oudere bezoekers
Wie lost het op
de webbouwer

Wat er misgaat. De site verbiedt inzoomen op mobiel. Slechtziende bezoekers kunnen de tekst dan niet groter maken.

Oplossing. Verwijder user-scalable=no en maximum-scale lager dan 2 uit <meta name="viewport">.

Gevonden

  • / · meta[name="viewport"]
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

en nog 4 keer op dezelfde manier.

Bron: axe-core · uitleg van de regel (Engels)

TG-009 · Bedienen

Klikbare onderdelen niet bereikbaar met het toetsenbord

ErnstigWCAG 2.1.1 · niveau A5× gevondenInspanning: middel

Waar
/
Last van
bezoekers die geen muis kunnen gebruiken, blinde bezoekers (screenreader)
Wie lost het op
de webbouwer

Wat er misgaat. Er zijn onderdelen die met de muis aanklikbaar lijken, maar met het toetsenbord niet te bereiken zijn. Denk aan een zelfgebouwde knop of een tegel die als link werkt.

Oplossing. Gebruik echte <button>- en <a href>-elementen. Moet het een <div> blijven: geef role="button", tabindex="0" en laat Enter en Spatie werken.

Gevonden

  • / · div
    <div onclick="location.href='product.html'" style="cursor:pointer"><img src="img/kaas.jpg" width="300"><h4>Boerenkaas jong belegen</h4><span class="prijs">€ 8,95</span></div>
  • / · div
    <div onclick="location.href='product.html'" style="cursor:pointer"><img src="img/honing.jpg" width="300"><h4>Veluwse heidehoning</h4><span class="prijs">€ 7,50</span></div>
  • / · div
    <div onclick="location.href='product.html'" style="cursor:pointer"><img src="img/appelsap.jpg" width="300"><h4>Appelsap Elstar</h4><span class="prijs">€ 3,25</span></div>

en nog 2 keer op dezelfde manier.

Bron: eigen toetsenbordtest

TG-010 · Bedienen

Je ziet niet waar je bent met het toetsenbord

ErnstigWCAG 2.4.7 · niveau AA2× gevondenInspanning: klein

Waar
/
Last van
bezoekers die geen muis kunnen gebruiken, slechtziende bezoekers
Wie lost het op
de webbouwer

Wat er misgaat. Als je met de Tab-toets door de site gaat, zie je niet welke knop of link actief is. Wie geen muis gebruikt, raakt dan direct de weg kwijt.

Oplossing. Verwijder outline: none zonder vervanging. Gebruik bijvoorbeeld :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } met voldoende contrast.

Gevonden

  • / · html > body > div.cookie:nth-of-type(3) > a:nth-of-type(2)
    <a href="#" onclick="return false">Meer info</a>
  • / · html > body > div.cookie:nth-of-type(3) > a:nth-of-type(1)
    <a href="#" onclick="return false">Instellingen</a>

Bron: eigen toetsenbordtest

TG-011 · Bedienen

Te kleine klikdoelen

HinderlijkWCAG 2.5.8 · niveau AA4× gevondenInspanning: klein

Waar
/afrekenen
Last van
bezoekers die geen muis kunnen gebruiken, oudere bezoekers
Wie lost het op
de ontwerper of webbouwer

Wat er misgaat. Deze knoppen of links zijn kleiner dan 24 bij 24 pixels en liggen dicht bij elkaar. Met trillende handen of een dikke duim tik je er makkelijk naast.

Oplossing. Maak klikdoelen minimaal 24×24 px (liefst 44×44 px op mobiel), of zorg voor voldoende ruimte eromheen.

Gevonden

  • /afrekenen · #checkout-email
    <input type="email" id="checkout-email" placeholder="E-mailadres">
  • /afrekenen · #checkout-naam
    <input type="text" id="checkout-naam" placeholder="Naam" autocomplete="naam">
  • /afrekenen · #checkout-postcode
    <input type="text" id="checkout-postcode" placeholder="Postcode">

en nog 1 keer op dezelfde manier.

Bron: axe-core · uitleg van de regel (Engels)

TG-012 · Begrijpen

Taal van de pagina niet ingesteld

HinderlijkWCAG 3.1.1 · niveau A1× gevondenInspanning: klein

Waar
/
Last van
blinde bezoekers (screenreader)
Wie lost het op
de webbouwer

Wat er misgaat. De pagina zegt niet in welke taal hij is. Een screenreader leest Nederlandse tekst dan mogelijk voor met een Engelse uitspraak.

Oplossing. Zet <html lang="nl">.

Gevonden

  • / · html
    <html>

Bron: axe-core · uitleg van de regel (Engels)

TG-013 · Techniek

Geen hoofdinhoud aangeduid

HinderlijkGoede praktijk (geen WCAG-criterium)1× gevondenInspanning: klein

Waar
/
Last van
blinde bezoekers (screenreader)
Wie lost het op
de webbouwer

Wat er misgaat. De pagina geeft niet aan waar de hoofdinhoud begint. Screenreadergebruikers springen daar normaal direct naartoe.

Oplossing. Zet de hoofdinhoud in één <main>-element.

Gevonden

  • / · html
    <html>

Bron: axe-core · uitleg van de regel (Engels)

TG-014 · Techniek

Geen hoofdkop op de pagina

HinderlijkGoede praktijk (geen WCAG-criterium)1× gevondenInspanning: klein

Waar
/
Last van
blinde bezoekers (screenreader), bezoekers met een cognitieve beperking of leesproblemen
Wie lost het op
wie de teksten en afbeeldingen beheert

Wat er misgaat. De pagina heeft geen hoofdkop. Screenreadergebruikers navigeren via koppen en missen dan het startpunt.

Oplossing. Geef elke pagina één <h1> die zegt waar de pagina over gaat.

Gevonden

  • / · html
    <html>

Bron: axe-core · uitleg van de regel (Engels)

TG-015 · Zien

Automatisch invullen werkt niet goed

HinderlijkWCAG 1.3.5 · niveau AA1× gevondenInspanning: klein

Waar
/afrekenen
Last van
bezoekers die geen muis kunnen gebruiken, bezoekers met een cognitieve beperking of leesproblemen
Wie lost het op
de webbouwer

Wat er misgaat. Velden zoals naam, adres en e-mail hebben een verkeerde code voor automatisch invullen. Juist bezoekers voor wie typen lastig is, hebben daar veel aan.

Oplossing. Gebruik geldige autocomplete-waarden (name, email, tel, street-address, postal-code, ...).

Gevonden

  • /afrekenen · #checkout-naam
    <input type="text" id="checkout-naam" placeholder="Naam" autocomplete="naam">

Bron: axe-core · uitleg van de regel (Engels)

TG-016 · Techniek

Kopjes in de verkeerde volgorde

HinderlijkGoede praktijk (geen WCAG-criterium)1× gevondenInspanning: klein

Waar
/afrekenen
Last van
blinde bezoekers (screenreader)
Wie lost het op
wie de teksten en afbeeldingen beheert

Wat er misgaat. De koppen slaan niveaus over. Wie de pagina via koppen doorloopt, mist de structuur.

Oplossing. Gebruik koppen in logische volgorde: h1, dan h2, dan h3.

Gevonden

  • /afrekenen · h4
    <h4>Je gegevens</h4>

Bron: axe-core · uitleg van de regel (Engels)

TG-017 · Begrijpen

Geen informatie over toegankelijkheid

VerbeteringGoede praktijk (geen WCAG-criterium)1× gevondenInspanning: klein

Waar
/
Last van
blinde bezoekers (screenreader), slechtziende bezoekers, bezoekers die geen muis kunnen gebruiken
Wie lost het op
wie de teksten en afbeeldingen beheert

Wat er misgaat. De site zegt nergens hoe het met de toegankelijkheid zit of waar je terechtkunt als iets niet werkt. Voor webwinkels onder de Europese toegankelijkheidswet hoort die informatie erbij.

Oplossing. Voeg een pagina 'Toegankelijkheid' toe (link in de footer) met de status, bekende knelpunten en een contactmogelijkheid.

Bron: eigen toetsenbordtest

Methode: WCAG 2.2 niveau AA, Chromium-browser, axe-core 4.14 en eigen gedragstests (toetsenbord, focus, smal scherm, klikdoelen). Scanner-versie 0.1.0. Gescand op 20 oktober 2026. Domein en links zijn geanonimiseerd.

Voor jouw site

Zo'n rapport voor jouw website?

Begin met de gratis check, dan zie je binnen een minuut je score en de drie zwaarste knelpunten. Het volledige rapport kost vanaf € 99 voor een site tot 10 pagina's. Een webshop met de volledige bestelflow, zoals hierboven, kost vanaf € 595, inclusief een gesprek van 30 minuten. Je hoort altijd vooraf wat het kost.