eaachecker.nl Gratis scan →
Voorbeeldrapport · volledige versie

Dit is het hele rapport. Niet een stukje ervan.

Hieronder staat een compleet rapport zoals een klant het ontvangt — cover, score-opbouw, alle 12 bevindingen met code-voorbeelden, de roadmap, de toegankelijkheidsverklaring en de briefing voor je bouwer. Het komt uit een echte scan van een Nederlandse webshop en is verder niet bijgewerkt.

Eindscore
57/100 · Matig
Bevindingen
12 · 9 uit de interactietest
Pagina's gescand
7 van de webshop
Scandatum
2 augustus 2026

Waarom er geen naam bij staat. De webshop hieronder is echt gescand, maar wij publiceren geen namen van gescande websites — die van jou dus ook niet. Weggehaald is alles wat naar de winkel terugleidt: het webadres werd voorbeeldwebshop.nl, en productnamen, filternamen en een veldnaam staan er als [productnaam A] of [filternaam]. Die haken zie je staan, zodat duidelijk is dát daar iets is weggelaten.

Verder is er niets aangeraakt. De score en hoe die is opgebouwd, de aantallen per pagina en per ernstniveau, de gemeten waarden, de code-voorbeelden, de fix-instructies en de teksten die de scanner schreef staan er precies zoals ze uit de scan kwamen.

Scan je eigen website — gratis Download als pdf (845 kB)

De pdf is exact het bestand dat na betaling in je mailbox komt, met een btw-factuur ernaast.

Voorbeeldrapport-2026-08-02.pdf Ongewijzigd overgenomen uit de scanner
eaachecker.nl
EAA-toegankelijkheidsrapport

Hoe staat jouw website ervoor?

Een complete analyse op de European Accessibility Act en WCAG 2.1 AA — inclusief fix-instructies voor je websitebouwer.

57
/ 100
Eindscore
Matig

Voorbeeldwebshop.nl scoort matig op toegankelijkheid: formulieren, kleurcontrast en navigatie met het toetsenbord vragen dringende aandacht.

Juridisch risico: middel 12 issues totaal
Gescande website
https://voorbeeldwebshop.nl
Sector
ecommerce
Datum
02 augustus 2026

Inhoudsopgave

  1. Beheerssamenvatting
    Wat we vonden, wat het betekent, en hoe urgent het is.
  2. Score-opbouw en verdeling
    Hoe de eindscore tot stand kwam en waar de issues zitten.
  3. WCAG-principes (POUR)
    Score per categorie: waarneembaar, bedienbaar, begrijpelijk, robuust.
  4. Per-pagina analyse
    Wat is gevonden op elke gescande pagina.
  5. Bevindingen in detail
    12 issues met code-voorbeelden, impact en fix-instructies.
  6. Quick wins
    Issues die je bouwer in een uur of minder kan oplossen.
  7. Roadmap
    Wat je deze week, deze maand en dit kwartaal oppakt.
  8. Toegankelijkheidsverklaring
    Kant-en-klaar concept (gedeeltelijk conform) om op je website te publiceren.
  9. Briefing voor je websitebouwer
    Tekst die je direct kunt doorsturen naar je bouwer.
  10. Begrippenlijst
    Uitleg van de gebruikte termen.

Beheerssamenvatting

Voor de ondernemer

De scan van Voorbeeldwebshop.nl heeft 12 toegankelijkheidsproblemen gevonden, verdeeld over de homepage, productpagina's, de winkelwagen en de advies-pagina. De meest urgente problemen zitten in de formulieren: invoervelden missen zichtbare labels en de zoekbalk heeft geen echte omschrijving voor hulpsoftware. Daarnaast is er op alle pagina's waarschijnlijk onvoldoende kleurcontrast bij tientallen tekstelementen, en op een smal scherm (of bij sterk inzoomen) loopt de pagina buiten beeld. De European Accessibility Act (EAA) is per 28 juni 2025 van kracht in Nederland; webshops vallen onder toezicht van de ACM en kunnen bij niet-naleving boetes krijgen tot €900.000 of 1% van de jaaromzet. De gevonden problemen raken direct de bestelflow en het contactformulier — precies de pagina's die de ACM als eerste beoordeelt. Met gerichte aanpassingen zijn de meeste problemen snel op te lossen.

Juridisch risico — middel

Er zijn 5 ernstige problemen gevonden, waaronder ontbrekende formulierlabels op de checkout- en contactpagina's. Dat is precies het type overtreding waarop de ACM bij e-commerce handhaving let. Er zijn geen kritieke problemen, maar de combinatie van meerdere ernstige issues op commercieel gevoelige pagina's plaatst het risico op middel.

Wat dit betekent voor jouw sector

Voor een webshop als Voorbeeldwebshop.nl zijn toegankelijke formulieren en een werkende bestelflow extra belangrijk: de ACM richt zich bij handhaving van de EAA als eerste op e-commerce en let specifiek op de checkout-flow, productpagina's en contactformulieren. Bovendien winkelen steeds meer mensen met een beperking online — een toegankelijke webshop bereikt een grotere doelgroep en heeft een lagere kans op klachten bij de toezichthouder.

De ACM kan bij een klacht of steekproef de bestelflow en het contactformulier als eerste beoordelen; de gevonden formulierproblemen (ontbrekende labels, geen autocomplete) zijn precies het type overtreding dat in handhavingstrajecten terugkomt.

Score-opbouw en verdeling

Hoe de eindscore tot stand kwam

100
Startpunt
−24
3× ernstig issues
−12
2× ernstig issues
−6
6× matig issues
−1
1× laag issue
=
57
Eindscore

De eindscore van 57 komt uit twee meetlagen. De code-analyse vond 3 ernstige problemen (samen -24 punten), waaronder kleurcontrast en een fout in de lijststructuur. De interactietest — waarbij de scanner de pagina zelf heeft bediend met het toetsenbord, op een smal scherm en bij vergroot lettertype — vond nog eens 9 problemen: 2 ernstige (-12 punten), 6 matige (-6 punten) en 1 laag (-1 punt).

Twee meetlagen

Deze scan bestaat uit twee onderdelen. De code-analyse leest de opbouw van elke pagina. De interactietest bedient de pagina daarna zoals een bezoeker dat doet: met de Tab-toets erdoorheen, op een venster van 320 pixels, met de tekst op 200% en met een controle op bewegende content en formuliervelden.

OnderdeelGevondenAftrek
Code-analyse (axe-core) 3 bevindingen −24
Interactietest (toetsenbord, zoom, formulieren) 9 bevindingen −19

Issues verdeeld over ernstniveaus

0
Kritiek
5
Ernstig
6
Matig
1
Laag

WCAG-principes — waar zit de pijn?

WCAG kent vier principes: een goede website is waarneembaar, bedienbaar, begrijpelijk en robuust. Hieronder zie je hoe jouw website per principe scoort.

Elk principe krijgt een eigen cijfer. Dat cijfer staat los van de hoofdscore: het zegt hoe zwaar dit ene onderdeel geraakt is, niet hoeveel het van de hoofdscore afhaalt. Daarom wegen bevindingen hier zwaarder. Een principe kleurt alleen groen als we er niets vonden.

Waarneembaar — 7 issues
4/100

Inhoud die voor iedereen zichtbaar/hoorbaar is — alt-teksten, contrast, ondertiteling.

Dit is veruit het zwakste onderdeel van de website. Zeven problemen raken de waarneembaarheid: afbeeldingen met betekenisloze omschrijvingen, waarschijnlijk onvoldoende kleurcontrast op tientallen tekstelementen, en pagina's die op een smal scherm buiten beeld lopen. Bezoekers die slecht zien of een schermlezer gebruiken, missen hierdoor informatie.

Bedienbaar — 3 issues
70/100

Elke functie te bedienen met toetsenbord, geen tijdklemmen.

De bediening met het toetsenbord werkt grotendeels, maar er zijn drie verbeterpunten. Op de homepage springen 16 van de 50 focuspunten naar onzichtbare elementen, en op alle pagina's ontbreekt een 'sla het menu over'-knop. Wie alleen het toetsenbord gebruikt, moet daardoor elke keer door honderden menulinks heen voordat hij bij de inhoud is.

Begrijpelijk — 2 issues
79/100

Voorspelbare navigatie, duidelijke foutmeldingen, leesbare taal.

De website is grotendeels begrijpelijk opgebouwd. Twee problemen zijn gevonden: invoervelden missen zichtbare labels (de grijze hinttekst verdwijnt zodra je begint te typen), en op de advies-pagina worden verplichte velden niet als zodanig doorgegeven aan hulpsoftware. Dit raakt mensen die een schermlezer of spraakbediening gebruiken.

Robuust — 0 issues
100/100

Werkt met schermlezers en hulptechnologie — semantische HTML.

Op het gebied van technische code-kwaliteit zijn geen problemen gevonden. De pagina's zijn correct opgebouwd voor hulpsoftware wat betreft de basisstructuur, en er is één H1-kop per pagina aanwezig. Dit onderdeel is in orde.

Per-pagina analyse

We scanden 7 pagina's. Hieronder zie je per pagina wat is gevonden.

homepage
https://www.voorbeeldwebshop.nl
5 issues 2 hoog 3 middel

De homepage heeft een bevestigd kleurcontrastprobleem bij een productnaam, en 16 focuspunten die naar onzichtbare elementen springen. Daarnaast loopt de pagina op een smal scherm 19 pixels buiten beeld.

product
https://voorbeeldwebshop.nl/producten
7 issues 2 hoog 5 middel

De productoverzichtspagina heeft de meeste problemen: filteropties missen een groepsnaam voor schermlezers, meerdere afbeeldingen hebben een betekenisloze alt-tekst, en linkteksten zijn niet uniek genoeg om te onderscheiden.

checkout
https://voorbeeldwebshop.nl/winkelwagen
3 issues 1 hoog 2 middel

De winkelwagen heeft een fout in de lijststructuur en een invoerveld zonder zichtbaar label. Vier best-practice-aanbevelingen over de paginastructuur zijn hier ook aangetroffen, maar tellen niet mee als wettelijke verplichting.

checkout
https://voorbeeldwebshop.nl/bestellen-en-betalen
4 issues 1 hoog 3 middel

De bestel- en bezorginformatiepagina heeft dezelfde terugkerende problemen: ontbrekend label op het e-mailveld en horizontaal scrollen op een smal scherm.

contact
https://voorbeeldwebshop.nl/advies
6 issues 2 hoog 3 middel

De advies-pagina heeft het meest uitgebreide formulier en daarmee de meeste formulierproblemen: 7 velden zonder autocomplete, verplichte velden die niet als zodanig worden aangekondigd, en een koppenstructuur die een niveau overslaat.

product
https://voorbeeldwebshop.nl/producten/categorie
7 issues 1 hoog 6 middel

De productcategorie-pagina heeft dezelfde filterproblematiek als de producten-pagina, plus 4 afbeeldingen met een betekenisloze alt-tekst en een koppenstructuur die een niveau overslaat.

diensten
https://voorbeeldwebshop.nl/service
3 issues 1 hoog 2 middel

De plaatsingsservice-pagina heeft de terugkerende problemen met het e-mailveld en horizontaal scrollen, maar is verder relatief schoon.

Bevindingen in detail

Hoog — 5 issues

1. Invoervelden zonder zichtbaar label

Hoog
WCAG A · 3.3.2 Labels of instructies Pagina: homepage, product, checkout, contact, diensten Fix-tijd: 1 uur
Wat is er aan de hand?

Op alle gescande pagina's hebben meerdere invoervelden geen echt label — alleen een grijze hinttekst die verdwijnt zodra je begint te typen. De scanner heeft in totaal 5 van dit soort velden vastgesteld, waaronder het zoekveld en het e-mailadresveld voor de nieuwsbrief. Zodra je iets intypt, zie je niet meer wat er van je gevraagd wordt.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Circa 350.000 Nederlanders met een visuele beperking en de naar schatting 50.000 gebruikers van schermlezers kunnen dit veld niet correct bedienen. Ook mensen met een cognitieve beperking (circa 1,2 miljoen Nederlanders) ondervinden hinder wanneer de hinttekst verdwijnt.

Impact op je business

Bezoekers die het zoekveld of het bestelformulier niet kunnen gebruiken, haken af — direct conversieverlies in de bestelflow.

Voor (huidig)
<input type="email" id="nieuwsbrief_email" name="nieuwsbrief[email]" required="required" placeholder="Jouw e-mailadres" class="tw-border-none tw-py-2 tw-px-4 tw-flex-grow tw-outline-none tw-w-full">
Na (juist)
<label for="nieuwsbrief_email">Jouw e-mailadres</label> <input type="email" id="nieuwsbrief_email" name="nieuwsbrief[email]" required="required" autocomplete="email" placeholder="Jouw e-mailadres" class="tw-border-none tw-py-2 tw-px-4 tw-flex-grow tw-outline-none tw-w-full">
Juridische relevantie

WCAG 2.1 criterium 3.3.2 (niveau A) is een verplichte eis onder de EAA voor webshops.

Voor je bouwer — wat te doen

Voeg aan elk invoerveld een zichtbaar <label>-element toe dat via het for-attribuut aan het veld is gekoppeld. Voor het zoekveld: <label for="s">Zoek een product</label>. Voor het e-mailveld: <label for="nieuwsbrief_email">Jouw e-mailadres</label>. De hinttekst (placeholder) mag blijven staan als extra hulp, maar vervangt het label niet.

2. Tekst heeft waarschijnlijk te weinig kleurcontrast

Hoog
WCAG AA · 1.4.3 Contrast (minimum) Pagina: homepage, product, checkout, contact, diensten Fix-tijd: halve dag ⚠ Verificatie nodig
Wat is er aan de hand?

Op de homepage is bij één productnaam ('[productnaam A]') een bevestigd contrastprobleem gevonden: de groene tekst op de lichtgroene achtergrond haalt slechts een verhouding van 2,99:1, terwijl 4,5:1 vereist is. Daarnaast kon de scanner bij 37 tekstelementen op de homepage en tientallen meer op andere pagina's het contrast niet automatisch meten — dit zijn teksten boven afbeeldingen of met een doorzichtige achtergrond. Handmatige controle is nodig, maar de kans is groot dat ook hier het contrast tekortschiet.

Vastgesteld in de code van de pagina
Impact op gebruikers

Naar schatting 800.000 Nederlanders hebben een vorm van kleurenblindheid, en een grote groep ouderen heeft moeite met laag contrast. Zij kunnen productnamen en navigatieteksten mogelijk niet lezen.

Impact op je business

Slecht leesbare productnamen en prijzen leiden direct tot minder conversie, met name bij oudere bezoekers die een groeiende kopersgroep vormen.

Voor (huidig)
<span class="tw-text-primary-dark tw-font-bold tw-text-lg tw-text-center">[productnaam A]</span>
Na (juist)
<span class="tw-text-primary-darkest tw-font-bold tw-text-lg tw-text-center">[productnaam A]</span> <!-- Zorg dat tw-text-primary-darkest een kleur heeft met minimaal 4.5:1 contrast op #f8fbf9 -->
Juridische relevantie

WCAG 2.1 criterium 1.4.3 (niveau AA) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

Pas de tekstkleur van de primaire groene kleur (#829787) aan naar een donkerdere tint die minimaal 4,5:1 contrast haalt op de lichtgroene achtergrond (#f8fbf9). Gebruik een contrastchecker (bijv. WebAIM Contrast Checker) om alle tekstvarianten te controleren. Let extra op de kleine teksten in het menu ('Winkelwagen', contactinformatie) en de gefilterde aantallen op de productpagina's.

Waarom verificatie nodig is

Het contrastprobleem bij '[productnaam A]' is zeker vastgesteld. Voor de overige 37+ tekstelementen kon de scanner het contrast niet automatisch meten omdat de achtergrond een afbeelding of doorzichtige laag is. Handmatige verificatie is nodig om te bevestigen of ook deze teksten voldoen.

3. Focusring springt naar onzichtbare elementen

Hoog
WCAG A · 2.4.3 Focusvolgorde Pagina: homepage Fix-tijd: 1 uur
Wat is er aan de hand?

Op de homepage springen 16 van de 50 focuspunten naar elementen die niet zichtbaar zijn op het scherm — waarschijnlijk ingeklapte menu's of gesloten schuifpanelen die toch bereikbaar blijven via het toetsenbord. De focusring verdwijnt dan uit beeld en de gebruiker weet niet meer waar hij is.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Circa 1,6 miljoen Nederlanders met een motorische beperking zijn afhankelijk van toetsenbordnavigatie. Voor hen is een pagina waarop de focus onzichtbaar wordt onbruikbaar.

Impact op je business

Bezoekers die de site niet met het toetsenbord kunnen bedienen, verlaten de site zonder te bestellen — direct omzetverlies.

Voor (huidig)
<a class=" tw-group " href="https://voorbeeldwebshop.nl/aanbiedingen"> <div class="tw-absolute tw-inset-0">...</div> </a>
Na (juist)
<a class=" tw-group " href="https://voorbeeldwebshop.nl/aanbiedingen" tabindex="-1" aria-hidden="true"> <div class="tw-absolute tw-inset-0">...</div> </a> <!-- Verwijder tabindex="-1" en aria-hidden zodra het element zichtbaar wordt -->
Juridische relevantie

WCAG 2.1 criterium 2.4.3 (niveau A) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

Zorg dat ingeklapte menu's en gesloten panelen ook echt niet bereikbaar zijn via het toetsenbord zolang ze verborgen zijn. Voeg aan verborgen elementen het attribuut tabindex="-1" toe, of gebruik display:none of visibility:hidden in plaats van alleen visueel verbergen. Controleer dit na elke wijziging door de pagina met de Tab-toets door te lopen.

4. Filteropties missen een groepsnaam voor schermlezers

Hoog
WCAG A · 1.3.1 Info en relaties Pagina: product Fix-tijd: 1 uur
Wat is er aan de hand?

Op de productpagina's (producten en productcategorie) staan filteropties zoals [filternaam], [filternaam] en [filternaam] als losse vinkjes zonder dat ze in een benoemde groep zijn geplaatst. De scanner heeft 10 van dit soort groepen gevonden. Een schermlezer leest de opties wel voor, maar niet de vraag waar ze bij horen — de gebruiker hoort dan '[optie]', '[optie]', '[optie]' zonder te weten dat dit over [filternaam] gaat.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Circa 50.000 blinde gebruikers van schermlezers in Nederland kunnen de productfilters niet begrijpen en missen daardoor een essentieel onderdeel van de zoekervaring.

Impact op je business

Bezoekers die de filters niet kunnen gebruiken, vinden minder snel het juiste product en haken eerder af — dit raakt direct de conversie op de productpagina's.

Voor (huidig)
<div class="tw-flex tw-flex-col"> <label class="tw-m-0 tw-flex"><input type="checkbox" name="[filternaam][]" value="[optie]"> [optie]</label> <label class="tw-m-0 tw-flex"><input type="checkbox" name="[filternaam][]" value="[optie]"> [optie]</label> </div>
Na (juist)
<fieldset> <legend>[filternaam]</legend> <label class="tw-m-0 tw-flex"><input type="checkbox" name="[filternaam][]" value="[optie]"> [optie]</label> <label class="tw-m-0 tw-flex"><input type="checkbox" name="[filternaam][]" value="[optie]"> [optie]</label> </fieldset>
Juridische relevantie

WCAG 2.1 criterium 1.3.1 (niveau A) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

Wikkel elke filtergroep in een <fieldset>-element met een <legend> die de naam van de filtergroep bevat. Voorbeeld: <fieldset><legend>[filternaam]</legend> ... vinkjes ... </fieldset>. Dit geldt voor alle filtergroepen op de producten- en productcategorie-pagina.

5. Fout in de structuur van de definitielijst

Hoog
WCAG A · 1.3.1 Info en relaties Pagina: product Fix-tijd: 15 min
Wat is er aan de hand?

Op de productpagina (producten) gebruikt de website een definitielijst om informatie te tonen, maar daarin staan scheidingslijnen (<hr>) als directe kinderen — dat is niet toegestaan. Schermlezers kunnen de structuur hierdoor verkeerd interpreteren en de informatie in de verkeerde volgorde voorlezen.

Vastgesteld in de code van de pagina
Impact op gebruikers

Circa 50.000 blinde gebruikers van schermlezers in Nederland kunnen productinformatie verkeerd of onvolledig te horen krijgen.

Impact op je business

Onleesbare productinformatie voor schermleezergebruikers leidt tot gemiste verkopen in een groep die actief online winkelt.

Voor (huidig)
<dl class="tw-w-full tw-flex tw-flex-col tw-gap-2 tw-list-none tw-p-0" data-accordion=""> <div>...</div> <hr> <div>...</div> </dl>
Na (juist)
<dl class="tw-w-full tw-flex tw-flex-col tw-gap-2 tw-list-none tw-p-0" data-accordion=""> <div class="tw-border-b">...</div> <div>...</div> </dl>
Juridische relevantie

WCAG 2.1 criterium 1.3.1 (niveau A) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

Verwijder de <hr>-elementen uit de <dl>-lijst, of vervang ze door een CSS-border op de <dt>- of <dd>-elementen. Als een visuele scheiding gewenst is, kan dat via CSS zonder de HTML-structuur te breken.

Middel — 6 issues

1. Pagina loopt buiten beeld op een smal scherm

Middel
WCAG AA · 1.4.10 Reflow Pagina: homepage, product, contact, diensten Fix-tijd: 1 uur
Wat is er aan de hand?

Op alle gescande pagina's (behalve de winkelwagen) loopt de inhoud 19 pixels buiten het scherm op een breedte van 320 pixels. Dit is de standaardbreedte voor kleine mobiele telefoons en ook de breedte die ontstaat als iemand op een desktop tot 400% inzoomt. De bezoeker moet dan horizontaal scrollen om een zin te lezen.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Mensen die sterk inzoomen op hun computer (een veelgebruikte aanpassing bij slechtziendheid) en gebruikers van kleine smartphones ondervinden hinder op elke pagina van de website.

Impact op je business

Mobiele bezoekers die horizontaal moeten scrollen om content te lezen, verlaten de pagina sneller — dit verhoogt het bouncepercentage en verlaagt de conversie.

Voor (huidig)
<div class="swiper-slide tw-w-full lg:tw-w-auto tw-flex lg:tw-mr-5 tw-justify-center" style="margin-right: 20px;"> ... </div>
Na (juist)
<div class="swiper-slide tw-w-full lg:tw-w-auto tw-flex tw-justify-center" style="margin-right: 0;"> ... </div>
Juridische relevantie

WCAG 2.1 criterium 1.4.10 (niveau AA) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

De oorzaak zit in de schuifbalk bovenaan de pagina (de 'swiper'). Zorg dat de breedte van de schuifbalk-items niet groter is dan het scherm door overflow-x: hidden toe te voegen aan de omliggende container, of door de marge (margin-right: 20px) op de laatste slide te verwijderen. Test daarna op 320 pixels breedte.

2. Geen 'sla het menu over'-knop

Middel
WCAG A · 2.4.1 Blokken omzeilen Pagina: homepage, product, checkout, contact, diensten Fix-tijd: 15 min
Wat is er aan de hand?

Op geen enkele gescande pagina is een knop aanwezig waarmee toetsenbordgebruikers direct naar de hoofdinhoud kunnen springen. De scanner heeft vastgesteld dat er tot 1.562 klikbare elementen in het menu staan. Wie met het toetsenbord werkt, moet elke keer al die elementen doorlopen voordat hij bij de inhoud is.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Circa 1,6 miljoen Nederlanders met een motorische beperking en circa 50.000 blinde gebruikers van schermlezers ondervinden hinder van het ontbreken van deze knop op elke pagina.

Impact op je business

Toetsenbordgebruikers die de site niet efficiënt kunnen bedienen, haken af voor ze een bestelling plaatsen.

Voor (huidig)
<body> <header class="tw-sticky tw-top-0 tw-z-40" data-navigation=""> ... </header>
Na (juist)
<body> <a href="#main-content" class="skip-link">Ga direct naar de inhoud</a> <header class="tw-sticky tw-top-0 tw-z-40" data-navigation=""> ... </header> <main id="main-content">...</main>
Juridische relevantie

WCAG 2.1 criterium 2.4.1 (niveau A) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

Voeg als eerste element in de <body> een link toe met de tekst 'Ga direct naar de inhoud' die verwijst naar het id van de hoofdinhoud (bijv. <a href="#main-content" class="skip-link">Ga direct naar de inhoud</a>). Maak de link visueel verborgen maar zichtbaar bij focus via CSS. Voeg het bijbehorende id toe aan het <main>-element.

3. Invoervelden kunnen niet automatisch worden ingevuld

Middel
WCAG AA · 1.3.5 Doel van invoer Pagina: homepage, product, contact, diensten Fix-tijd: 1 uur
Wat is er aan de hand?

Op meerdere pagina's missen invoervelden het attribuut dat browsers en hulpsoftware vertelt wat er ingevuld moet worden. De scanner heeft dit vastgesteld bij 1 veld op de homepage, 4 velden op de productpagina, 1 veld op de bestel-informatiepagina, 7 velden op de advies-pagina en 4 velden op de productcategorie-pagina. Het gaat onder andere om naam, telefoonnummer, adres en e-mailadres.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Circa 1,6 miljoen Nederlanders met een motorische beperking zijn afhankelijk van automatisch invullen. Zonder dit attribuut is het invullen van formulieren voor hen aanzienlijk moeilijker of onmogelijk.

Impact op je business

Formulieren die niet automatisch kunnen worden ingevuld, leiden tot meer fouten en afhakers in de bestelflow en het adviesformulier.

Voor (huidig)
<input type="text" id="app_advice_name" name="app_advice[name]" required="required" class="tw-border tw-rounded tw-p-2 tw-w-full">
Na (juist)
<input type="text" id="app_advice_name" name="app_advice[name]" required="required" autocomplete="name" class="tw-border tw-rounded tw-p-2 tw-w-full">
Juridische relevantie

WCAG 2.1 criterium 1.3.5 (niveau AA) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

Voeg het autocomplete-attribuut toe aan alle invoervelden voor persoonsgegevens. Gebruik de standaardwaarden: autocomplete="name" voor naam, autocomplete="tel" voor telefoonnummer, autocomplete="street-address" voor adres, autocomplete="email" voor e-mailadres. Dit geldt voor alle formulieren op de website.

4. Afbeeldingen met een betekenisloze omschrijving

Middel
WCAG A · 1.1.1 Niet-tekstuele content Pagina: homepage, product Fix-tijd: 1 uur
Wat is er aan de hand?

Op de homepage heeft 1 afbeelding een alt-tekst die niets zegt ('logo'). Op de producten-pagina hebben 2 afbeeldingen de alt-tekst 'Afbeelding', en op de productcategorie-pagina zijn dat er 4. In totaal zijn er 7 afbeeldingen gevonden met een omschrijving die een blinde bezoeker niets vertelt over wat er te zien is.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Circa 350.000 Nederlanders met een visuele beperking en circa 50.000 blinde gebruikers van schermlezers missen de informatie die productafbeeldingen overbrengen.

Impact op je business

Productafbeeldingen zonder betekenisvolle omschrijving verminderen de vindbaarheid in zoekmachines (SEO) en sluiten blinde kopers uit van de productervaring.

Voor (huidig)
<img alt="Afbeelding" src="https://voorbeeldwebshop.nl/media/cache/[platform]/media/afbeelding.webp" style="width: 100%; height: 100%;" loading="lazy">
Na (juist)
<img alt="[product] in volle bloei, hoogte circa 180 cm" src="https://voorbeeldwebshop.nl/media/cache/[platform]/media/afbeelding.webp" style="width: 100%; height: 100%;" loading="lazy">
Juridische relevantie

WCAG 2.1 criterium 1.1.1 (niveau A) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

Vervang de alt-teksten 'Afbeelding' en 'logo' door een beschrijving van wat er op de afbeelding te zien is. Gebruik voor productafbeeldingen de naam van het product en eventueel een korte beschrijving, bijvoorbeeld alt="[productnaam A] in herfstkleur, hoogte circa 2 meter". Als een afbeelding puur decoratief is, gebruik dan alt="" (leeg attribuut).

5. Linkteksten zijn niet uniek genoeg

Middel
WCAG A · 2.4.4 Linkdoel (in context) Pagina: product Fix-tijd: 1 uur
Wat is er aan de hand?

Op de producten-pagina zijn 4 linkteksten gevonden die meerdere keren voorkomen maar naar verschillende bestemmingen verwijzen. Op de productcategorie-pagina zijn dat er 2. Een schermlezer kan alle links van een pagina als lijst voorlezen; als dezelfde tekst naar verschillende pagina's verwijst, weet de gebruiker niet welke hij moet kiezen.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Circa 50.000 blinde gebruikers van schermlezers kunnen niet bepalen welke productlink ze moeten volgen als meerdere links dezelfde tekst hebben.

Impact op je business

Onduidelijke linkteksten verlagen de kans dat bezoekers met een schermlezer het juiste product vinden en bestellen.

Voor (huidig)
<a href="/producten/[productnaam A]">Bekijk</a> <a href="/producten/[productnaam B]">Bekijk</a>
Na (juist)
<a href="/producten/[productnaam A]" aria-label="Bekijk de [productnaam A]">Bekijk</a> <a href="/producten/[productnaam B]" aria-label="Bekijk de [productnaam B]">Bekijk</a>
Juridische relevantie

WCAG 2.1 criterium 2.4.4 (niveau A) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

Zorg dat elke link een unieke, beschrijvende tekst heeft die aangeeft waar de link naartoe gaat. Als de zichtbare tekst kort moet blijven (bijv. 'Bekijk'), voeg dan een aria-label toe met de volledige beschrijving, bijvoorbeeld aria-label="Bekijk de [productnaam A]".

6. Links in tekst zijn alleen door kleur te herkennen

Middel
WCAG AA · 1.4.3 Contrast (minimum) Pagina: checkout, contact, diensten Fix-tijd: 15 min ⚠ Verificatie nodig
Wat is er aan de hand?

Op meerdere pagina's zijn links in lopende tekst gevonden die uitsluitend door hun kleur te onderscheiden zijn van de omringende tekst. De scanner kon het contrast niet automatisch meten, maar de opmaak suggereert dat er geen onderstreping of ander visueel onderscheid aanwezig is.

Vastgesteld in de code van de pagina
Impact op gebruikers

Naar schatting 800.000 Nederlanders met een vorm van kleurenblindheid kunnen links die alleen door kleur zijn gemarkeerd niet herkennen als klikbaar.

Impact op je business

Onherkenbare links naar de privacyverklaring en gebruiksvoorwaarden kunnen bij een ACM-controle als extra overtreding worden aangemerkt.

Voor (huidig)
<a class="tw-link-primary" href="https://policies.google.com/privacy" target="_blank" rel="nofollow">Privacy Policy</a>
Na (juist)
<a class="tw-link-primary" href="https://policies.google.com/privacy" target="_blank" rel="nofollow" style="text-decoration: underline;">Privacy Policy</a>
Juridische relevantie

WCAG 2.1 criterium 1.4.1 (niveau A) vereist dat links niet uitsluitend door kleur worden onderscheiden van omringende tekst.

Voor je bouwer — wat te doen

Voeg een onderstreping toe aan links in lopende tekst, of gebruik een ander visueel onderscheid (zoals een pictogram of vetgedrukte tekst) naast de kleur. De eenvoudigste oplossing is text-decoration: underline toevoegen aan de CSS-klasse tw-link-primary.

Waarom verificatie nodig is

De scanner kon het contrast van deze links niet automatisch meten omdat ze boven een variabele achtergrond staan. Handmatige verificatie is nodig om te bevestigen of de kleur voldoende contrast heeft én of er een niet-kleur-onderscheid aanwezig is.

Laag — 1 issue

1. Verplichte velden worden niet aangekondigd

Laag
WCAG A · 3.3.2 Labels of instructies Pagina: contact Fix-tijd: 15 min
Wat is er aan de hand?

Op de advies-pagina zijn 2 keuzelijsten visueel gemarkeerd als verplicht (met een sterretje of het woord 'verplicht'), maar in de code ontbreekt het required-attribuut. Een schermlezer meldt deze velden daardoor niet als verplicht — de gebruiker hoort dit pas als hij het formulier verstuurt en een foutmelding krijgt.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Circa 50.000 blinde gebruikers van schermlezers weten niet welke velden verplicht zijn en lopen tegen onnodige foutmeldingen aan.

Impact op je business

Formulierfouten door onduidelijke verplichte velden leiden tot afhakers bij het aanvragen van advies, wat een directe dienst van Voorbeeldwebshop.nl is.

Voor (huidig)
<select id="app_advice_planAppointment" name="app_advice[planAppointment]" data-appointment-target="location"> <option value="home">Aan huis</option> </select>
Na (juist)
<select id="app_advice_planAppointment" name="app_advice[planAppointment]" required="required" data-appointment-target="location"> <option value="home">Aan huis</option> </select>
Juridische relevantie

WCAG 2.1 criterium 3.3.2 (niveau A) is een verplichte eis onder de EAA.

Voor je bouwer — wat te doen

Voeg het attribuut required="required" toe aan de keuzelijsten voor 'Locatie afspraak' en 'Budget' op de advies-pagina. Controleer ook of de visuele markering (sterretje) wordt uitgelegd aan het begin van het formulier, bijvoorbeeld met een zin als 'Velden met een * zijn verplicht'.

Quick wins — start hier

Deze issues zijn in een paar uur op te lossen. Pak ze als eerste op — je verbetert direct je score én je toegankelijkheid voor klanten.

15 min
Fout in de structuur van de definitielijst
Verwijder de <hr>-elementen uit de <dl>-lijst, of vervang ze door een CSS-border op de <dt>- of <dd>-elementen. Als een visuele scheiding gewenst is, kan dat via CSS zonder de HTML-structuur te breken.
15 min
Geen 'sla het menu over'-knop
Voeg als eerste element in de <body> een link toe met de tekst 'Ga direct naar de inhoud' die verwijst naar het id van de hoofdinhoud (bijv. <a href="#main-content" class="skip-link">Ga direct naar de inhoud</a>). Maak de link visueel verborgen maar zichtbaar bij focus via CSS. Voeg het bijbehorende id toe aan het <main>-element.
15 min
Verplichte velden worden niet aangekondigd
Voeg het attribuut required="required" toe aan de keuzelijsten voor 'Locatie afspraak' en 'Budget' op de advies-pagina. Controleer ook of de visuele markering (sterretje) wordt uitgelegd aan het begin van het formulier, bijvoorbeeld met een zin als 'Velden met een * zijn verplicht'.
15 min
Links in tekst zijn alleen door kleur te herkennen
Voeg een onderstreping toe aan links in lopende tekst, of gebruik een ander visueel onderscheid (zoals een pictogram of vetgedrukte tekst) naast de kleur. De eenvoudigste oplossing is text-decoration: underline toevoegen aan de CSS-klasse tw-link-primary.

Roadmap — wat oppakken in welke volgorde

Een concrete planning gebaseerd op de findings. Kopieer dit naar je projectbord of stuur het door naar je bouwer.

Stap 1
Deze week — eerste prioriteit
Voeg een 'Ga direct naar de inhoud'-knop toe als eerste element op elke pagina.
Verwijder de scheidingslijnen uit de definitielijst op de productpagina.
Voeg required-attribuut toe aan de verplichte keuzelijsten op de advies-pagina.
Voeg een onderstreping toe aan links in lopende tekst via de CSS-klasse tw-link-primary.
Voeg zichtbare labels toe aan het zoekveld en het e-mailveld voor de nieuwsbrief.
Stap 2
Binnen 1 maand
Zorg dat ingeklapte menu's en gesloten panelen niet bereikbaar zijn via het toetsenbord.
Wikkel alle filtergroepen op de productpagina's in een fieldset met legend.
Los het horizontale scroll-probleem op door de schuifbalk-breedte te begrenzen op 320 pixels.
Voeg autocomplete-attributen toe aan alle formuliervelden voor persoonsgegevens.
Vervang betekenisloze alt-teksten door beschrijvingen van de afbeeldingen.
Maak linkteksten uniek door aria-labels toe te voegen aan herhaalde linkteksten.
Controleer en verbeter het kleurcontrast van de primaire groene tekstkleur en laat de overige tekstelementen handmatig controleren.
Stap 3
Binnen 3 maanden — verifiëren en publiceren
Laat een handmatige WCAG 2.1 AA-audit uitvoeren met een schermlezer om criteria te toetsen die geautomatiseerd niet meetbaar zijn.
Publiceer een toegankelijkheidsverklaring op de website — dit is een wettelijke verplichting onder de EAA.

Toegankelijkheidsverklaring — concept

Verplicht onder de EAA. Elke in-scope organisatie moet een toegankelijkheidsverklaring publiceren waarin staat in hoeverre de website voldoet aan WCAG 2.1 AA. Dit is een zelfverklaring, geen keurmerk: jij onderschrijft 'm zelf. Hieronder vind je een kant-en-klaar concept met status "gedeeltelijk conform" en de evaluatiemethode erbij — eerlijk ingevuld, want een geautomatiseerde scan kan volledige conformiteit niet bewijzen. Vul de placeholders [zo aangeduid] in en publiceer 'm (bijvoorbeeld op /toegankelijkheid).
Toegankelijkheidsverklaring — [bedrijfsnaam] [bedrijfsnaam] streeft ernaar haar website voorbeeldwebshop.nl toegankelijk te maken voor iedereen, in overeenstemming met de Web Content Accessibility Guidelines (WCAG) 2.1, niveau AA. Status: gedeeltelijk conform Deze website voldoet gedeeltelijk aan de WCAG 2.1 AA-norm. Er zijn bekende onderdelen die nog niet volledig voldoen. Evaluatiemethode Deze verklaring is gebaseerd op een geautomatiseerde toetsing, aangevuld met een geautomatiseerde interactietest (toetsenbordnavigatie, focus-zichtbaarheid, weergave op 320 pixels en bij 200% tekstvergroting, formuliervelden en bewegende content). Een volledige handmatige audit met schermlezer heeft nog niet plaatsgevonden. Criteria die alleen handmatig te beoordelen zijn, zijn daardoor nog niet geverifieerd. Bekende niet-conforme onderdelen - Invoervelden missen zichtbare labels (WCAG 3.3.2) - Tekst heeft op sommige plekken onvoldoende kleurcontrast (WCAG 1.4.3) - Focusnavigatie springt op de homepage naar onzichtbare elementen (WCAG 2.4.3) - Filteropties op productpagina's missen een groepsnaam voor schermlezers (WCAG 1.3.1) - Pagina's lopen op een smal scherm buiten beeld (WCAG 1.4.10) - Er ontbreekt een 'sla het menu over'-knop (WCAG 2.4.1) - Invoervelden missen het autocomplete-attribuut (WCAG 1.3.5) Planning [bedrijfsnaam] werkt aan het oplossen van de bovenstaande punten. De verwachte datum van volledige conformiteit is [datum]. Contact Heeft u vragen of opmerkingen over de toegankelijkheid van onze website? Neem dan contact op via [contactemail]. Deze verklaring is voor het laatst bijgewerkt op [datum].

Briefing voor je websitebouwer

Hoe te gebruiken. Selecteer de tekst hieronder, kopieer hem en stuur 'm naar je websitebouwer. Vraag om een offerte of een planning. Pas eventueel [naam bouwer] aan.
Hoi [naam bouwer], We hebben voorbeeldwebshop.nl laten scannen op toegankelijkheid in het kader van de European Accessibility Act (EAA), die per 28 juni 2025 van kracht is. Hieronder de punten die we graag aangepakt zien, op volgorde van prioriteit. Deze week: 1. Voeg een 'Ga direct naar de inhoud'-knop toe als eerste element op elke pagina (een verborgen link die zichtbaar wordt bij focus). Dit is een kleine ingreep met grote impact voor toetsenbordgebruikers. 2. Voeg zichtbare labels toe aan het zoekveld en het e-mailveld voor de nieuwsbrief. De grijze hinttekst mag blijven, maar vervangt een label niet. 3. Verwijder de <hr>-elementen uit de <dl>-lijst op de productpagina. 4. Voeg required-attribuut toe aan de verplichte keuzelijsten op de advies-pagina. 5. Voeg text-decoration: underline toe aan de CSS-klasse tw-link-primary. Binnen een maand: 6. Wikkel alle filtergroepen op de producten- en productcategorie-pagina in een <fieldset> met <legend>. 7. Los het horizontale scroll-probleem op bij de schuifbalk bovenaan (overflow-x: hidden op de container, of margin-right: 0 op de laatste slide). 8. Voeg autocomplete-attributen toe aan alle formuliervelden voor persoonsgegevens (name, tel, street-address, email). 9. Vervang alt-teksten 'Afbeelding' en 'logo' door beschrijvende teksten. 10. Maak herhaalde linkteksten uniek via aria-label. 11. Controleer het kleurcontrast van de primaire groene kleur (#829787) op de lichtgroene achtergrond (#f8fbf9) — dit haalt nu slechts 2,99:1, terwijl 4,5:1 vereist is. Kun je een inschatting geven van de tijd en kosten voor deze aanpassingen? We willen de meest urgente punten zo snel mogelijk oppakken. Met vriendelijke groet, [naam ondernemer]

Begrippenlijst

Uitleg van de termen die in dit rapport worden gebruikt.

WCAG
De internationale richtlijnen voor webtoegankelijkheid (Web Content Accessibility Guidelines), opgesteld door het W3C; niveau AA is de wettelijk vereiste standaard onder de EAA.
Schermlezer
Software die de inhoud van een scherm hardop voorleest, gebruikt door blinde en slechtziende mensen; bekende voorbeelden zijn NVDA en VoiceOver.
ARIA-label
Een attribuut in de code van een webpagina waarmee je een naam of omschrijving geeft aan een element dat geen zichtbare tekst heeft, zodat schermlezers het correct kunnen voorlezen.
Conformiteitsverklaring
Een verplichte zelfverklaring op je website waarin je aangeeft in hoeverre je website voldoet aan de toegankelijkheidsnorm en welke bekende problemen er nog zijn.
ACM
De Autoriteit Consument & Markt, de Nederlandse toezichthouder die handhaaft op de naleving van de EAA voor e-commerce bedrijven.
Alt-tekst
Een tekstomschrijving die je aan een afbeelding toevoegt in de code, zodat schermlezers kunnen vertellen wat er op de afbeelding te zien is.
Kleurcontrast
De verhouding tussen de helderheid van de tekstkleur en de achtergrondkleur; WCAG vereist minimaal 4,5:1 voor normale tekst om leesbaar te zijn voor mensen met een visuele beperking.

Hoe ziet dit er voor jouw website uit?

De gratis scan kijkt naar vier pagina's en laat je de score plus drie bevindingen zien. Het volledige rapport hierboven gaat tot acht pagina's diep en bevat alles: elke bevinding, de code-voorbeelden, de roadmap en de bouwerbriefing. Je krijgt het als pdf per mail, met een btw-factuur.

Het volledige rapport kost €149 excl. btw. Niet tevreden? Binnen 14 dagen geld terug.