eaachecker.nl Gratis scan →
Voorbeeldrapport · volledige versie

Dit is het hele rapport. Niet een stukje ervan.

Bekijk de opbouw van een volledig rapport: cover, score-opbouw, 12 bevindingen en controlepunten met codevoorbeelden, de roadmap, een concept-toegankelijkheidsverklaring en de briefing voor je bouwer. Dit geanonimiseerde praktijkvoorbeeld komt uit een echte scan van een Nederlandse webshop.

Eindscore
57/100 · Matig
Bevindingen
12 · 9 uit de interactietest
Pagina's gescand
7 van de webshop
Scandatum
8 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.

Meetlat van dit voorbeeld: WCAG 2.1 AA. De scan dateert van 8 augustus 2026. De oorspronkelijke score en aantallen zijn behouden; de tekst is geanonimiseerd en verduidelijkt. Dit is geen nieuwe meting. Nieuwe klantrapporten gebruiken WCAG 2.2 AA en de actuele scanner. De extra criteria uit 2.2 zijn in dit voorbeeld niet getoetst.

De bevindingen omvatten ook punten die handmatige controle vragen. De historische score bewijst geen conformiteit en is niet één op één vergelijkbaar met een nieuwe scan.

Scan je eigen website, gratis Download als pdf (899 kB)

De pdf toont dezelfde opbouw en rapportonderdelen als een klantrapport; je eigen bevindingen en teksten zijn uiteraard anders.

Voorbeeldrapport-2026-08-08.pdf Geredigeerd praktijkvoorbeeld
eaachecker.nl
EAA-toegankelijkheidsrapport

Hoe staat jouw website ervoor?

Een geautomatiseerde technische analyse tegen WCAG 2.1 AA, waarbij je dienst onder de European Accessibility Act (EAA) kan vallen, inclusief fix-instructies voor je websitebouwer.

Historisch praktijkvoorbeeld: gemeten tegen WCAG 2.1 AA op 8 augustus 2026. Score en aantallen zijn overgenomen uit de oorspronkelijke scan; dit is geen nieuwe meting. De tekst is geanonimiseerd en verduidelijkt. Nieuwe rapporten gebruiken WCAG 2.2 AA. Dit voorbeeld bevat ook handmatig te controleren punten; de score bewijst geen conformiteit.

57
/ 100
Eindscore
Matig

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

Risico-indicatie: middel 12 bevindingen en controlepunten
Gescande website
https://voorbeeldwebshop.nl
Sector
ecommerce
Datum
08 augustus 2026

Inhoudsopgave

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

Managementsamenvatting

Voor de ondernemer

De historische scan bevat 12 bevindingen en controlepunten, verdeeld over zeven pagina’s van Voorbeeldwebshop.nl. Invoervelden missen zichtbare labels en de toetsenbordtest vond focus op onzichtbare onderdelen. Op de homepage is één contrastprobleem gemeten; bij andere teksten kon het contrast niet automatisch worden vastgesteld. Op een smal scherm loopt de inhoud op meerdere pagina’s buiten beeld. Deze drempels kunnen zoeken, lezen en formulieren invullen bemoeilijken. Of de webshop onder de EAA valt, vraagt informatie over de onderneming en de aangeboden dienst; de scan stelt dat niet vast.

Risico-indicatie: middel

De historische risico-indicatie is gebaseerd op het aantal en de ernst van technische bevindingen. Dit is geen juridische beoordeling, geen voorspelling van handhaving en geen vaststelling dat de EAA op deze webshop van toepassing is.

Wat dit betekent voor jouw sector

Voor een webshop zijn vindbare producten, begrijpelijke informatie en bruikbare formulieren belangrijk. De gemeten drempels kunnen die handelingen bemoeilijken. De scan meet geen klantgedrag, omzet of conversie; daarover doet dit rapport geen uitspraak.

Bepaal afzonderlijk of de onderneming en haar diensten onder de EAA vallen. De sector en deze technische steekproef zijn onvoldoende om wettelijke toepasselijkheid of de kans op handhaving vast te stellen.

Wat is onderzocht?

7 pagina’s zijn onderzocht tegen WCAG 2.1 AA. De score vat gevonden problemen samen; 100 punten bewijst geen volledige toegankelijkheid.

Deze scan is een steekproef. De scanner onderzoekt code en een beperkte reeks interacties. Een volledige schermlezertest, inhoudelijke beoordeling van alternatieve teksten en een doorlopen bestel- of formulierproces ontbreken.

Cookievensters kunnen tijdens de voorbereiding worden gesloten en zijn uitgesloten van de code-analyse. Laat deze afzonderlijk toetsen. De bouwer moet oplossingen in de werkelijke gebruikersroute controleren.

homepage

https://www.voorbeeldwebshop.nl

Interactietests: Niet vastgelegd

product

https://voorbeeldwebshop.nl/producten

Interactietests: Niet vastgelegd

checkout

https://voorbeeldwebshop.nl/winkelwagen

Interactietests: Niet vastgelegd

checkout

https://voorbeeldwebshop.nl/bestellen-en-betalen

Interactietests: Niet vastgelegd

contact

https://voorbeeldwebshop.nl/advies

Interactietests: Niet vastgelegd

product

https://voorbeeldwebshop.nl/producten/categorie

Interactietests: Niet vastgelegd

diensten

https://voorbeeldwebshop.nl/service

Interactietests: Niet vastgelegd

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. Bij de interactietest bediende de scanner de pagina zelf: met het toetsenbord, op een smal scherm en bij vergroot lettertype. Die ronde vond nog eens 9 problemen: 2 ernstige (-12 punten), 6 matige (-6 punten) en 1 laag (-1 punt).

Twee meetlagen

De score kan bevindingen uit code-analyse en interactietests bevatten. Interactietests onderzoeken onder meer Tab-navigatie, een venster van 320 pixels, tekst op 200%, bewegende inhoud en formuliervelden. Alleen daadwerkelijk vastgestelde fouten geven aftrek; handmatige controlepunten en aanbevelingen staan apart. De meetdekking vermeldt welke tests konden worden uitgevoerd.

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

Vastgestelde fouten per ernstniveau

0
Kritiek
4
Ernstig
5
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 of 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, dankzij 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

Hieronder staan 7 bezochte pagina's, inclusief eventueel onvolledig geladen pagina’s. Hieronder zie je per pagina wat is gevonden.

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

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

product
https://voorbeeldwebshop.nl/producten
7 bevindingtypen 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 bevindingtypen 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 bevindingtypen 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 bevindingtypen 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 bevindingtypen 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 bevindingtypen 1 hoog 2 middel

De servicepagina heeft terugkerende bevindingen bij het e-mailveld en horizontaal scrollen. De scan beoordeelt alleen automatisch meetbare onderdelen.

Bevindingen in detail

Hoog · 4 issues

B-01 · Invoervelden zonder zichtbaar label

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

Op alle gescande pagina's hebben meerdere invoervelden geen echt label. Er staat alleen een grijze hinttekst, en 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

Een blijvend zichtbaar label helpt bezoekers te begrijpen wat ze moeten invullen, ook nadat de hinttekst verdwenen is. Een schermlezer heeft daarnaast een programmatisch gekoppelde naam nodig.

Impact op je business

Onduidelijke invoervelden kunnen zoeken of een formulier invullen bemoeilijken.

Fragment uit de meting
<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">
Mogelijke correctie
<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">
Oplossing en hertest voor B-01
Juridische relevantie

WCAG 2.1 criterium 3.3.2 (niveau A) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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.

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op homepage, product, checkout, contact, diensten en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

B-03 · Focusring springt naar onzichtbare elementen

Hoog
WCAG · 2.4.3 Focusvolgorde Pagina: homepage Geschatte werktijd: 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

Toetsenbordgebruikers kunnen hun positie op de pagina kwijtraken wanneer de focus naar onzichtbare onderdelen gaat.

Impact op je business

Onzichtbare focus kan navigeren naar een product of formulier bemoeilijken.

Fragment uit de meting
<a class=" tw-group " href="https://voorbeeldwebshop.nl/aanbiedingen"> <div class="tw-absolute tw-inset-0">...</div> </a>
Mogelijke correctie
<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 -->
Oplossing en hertest voor B-03
Juridische relevantie

WCAG 2.1 criterium 2.4.3 (niveau A) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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.

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op homepage en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

B-04 · Filteropties missen een groepsnaam voor schermlezers

Hoog
WCAG · 1.3.1 Info en relaties Pagina: product Geschatte werktijd: 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

Schermlezergebruikers missen de naam van de filtergroep en kunnen daardoor moeilijker begrijpen welke keuze ze maken.

Impact op je business

Zonder begrijpelijke filters kan het vinden van een passend product meer moeite kosten.

Fragment uit de meting
<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>
Mogelijke correctie
<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>
Oplossing en hertest voor B-04
Juridische relevantie

WCAG 2.1 criterium 1.3.1 (niveau A) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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.

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op product en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

B-05 · Fout in de structuur van de definitielijst

Hoog
WCAG · 1.3.1 Info en relaties Pagina: product Geschatte werktijd: 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, en 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

Schermlezergebruikers kunnen de samenhang tussen een begrip en de bijbehorende beschrijving minder goed herkennen.

Impact op je business

Een onduidelijke lijststructuur kan het begrijpen van productinformatie bemoeilijken.

Fragment uit de meting
<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>
Mogelijke correctie
<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>
Oplossing en hertest voor B-05
Juridische relevantie

WCAG 2.1 criterium 1.3.1 (niveau A) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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.

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op product en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

Middel · 5 issues

B-06 · Pagina loopt buiten beeld op een smal scherm

Middel
WCAG · 1.4.10 Reflow Pagina: homepage, product, contact, diensten Geschatte werktijd: 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 moeten op de betrokken pagina’s ook horizontaal scrollen. Dat maakt het lezen en navigeren omslachtiger.

Impact op je business

Horizontaal scrollen kan het lezen van informatie op een smal scherm bemoeilijken.

Fragment uit de meting
<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>
Mogelijke correctie
<div class="swiper-slide tw-w-full lg:tw-w-auto tw-flex tw-justify-center" style="margin-right: 0;"> ... </div>
Oplossing en hertest voor B-06
Juridische relevantie

WCAG 2.1 criterium 1.4.10 (niveau AA) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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.

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op homepage, product, contact, diensten en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

B-07 · Geen 'sla het menu over'-knop

Middel
WCAG · 2.4.1 Blokken omzeilen Pagina: homepage, product, checkout, contact, diensten Geschatte werktijd: 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

Toetsenbordgebruikers moeten herhaalde navigatie doorlopen wanneer geen bruikbare manier beschikbaar is om die over te slaan.

Impact op je business

Herhaalde navigatie overslaan kan het bereiken van producten en formulieren vergemakkelijken.

Fragment uit de meting
<body> <header class="tw-sticky tw-top-0 tw-z-40" data-navigation=""> ... </header>
Mogelijke correctie
<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>
Oplossing en hertest voor B-07
Juridische relevantie

WCAG 2.1 criterium 2.4.1 (niveau A) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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.

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op homepage, product, checkout, contact, diensten en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

B-08 · Invoervelden missen een herkenbaar invoerdoel

Middel
WCAG · 1.3.5 Doel van invoer Pagina: homepage, product, contact, diensten Geschatte werktijd: 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

Een herkenbaar invoerdoel helpt browsers en hulpsoftware bij het invullen van persoonsgegevens. Dat kan handmatig typewerk verminderen.

Impact op je business

Herkenbare invoerdoelen kunnen het invullen van een aanvraag of bestelling vergemakkelijken.

Fragment uit de meting
<input type="text" id="app_advice_name" name="app_advice[name]" required="required" class="tw-border tw-rounded tw-p-2 tw-w-full">
Mogelijke correctie
<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">
Oplossing en hertest voor B-08
Juridische relevantie

WCAG 2.1 criterium 1.3.5 (niveau AA) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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.

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op homepage, product, contact, diensten en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

B-09 · Afbeeldingen met een betekenisloze omschrijving

Middel
WCAG · 1.1.1 Niet-tekstuele content Pagina: homepage, product Geschatte werktijd: 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

Bezoekers die afbeeldingen niet kunnen zien, hebben een beschrijving nodig van de relevante informatie die de afbeelding overbrengt.

Impact op je business

Beschrijvende alternatieve teksten kunnen bezoekers helpen producten te begrijpen en te vergelijken.

Fragment uit de meting
<img alt="Afbeelding" src="https://voorbeeldwebshop.nl/media/cache/[platform]/media/afbeelding.webp" style="width: 100%; height: 100%;" loading="lazy">
Mogelijke correctie
<img alt="[productnaam], [relevante zichtbare kenmerken]" src="https://voorbeeldwebshop.nl/media/cache/[platform]/media/afbeelding.webp" style="width: 100%; height: 100%;" loading="lazy">
Oplossing en hertest voor B-09
Juridische relevantie

WCAG 2.1 criterium 1.1.1 (niveau A) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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], [relevante zichtbare kenmerken]". Als een afbeelding puur decoratief is, gebruik dan alt="" (leeg attribuut).

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op homepage, product en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

B-10 · Linkteksten zijn niet uniek genoeg

Middel
WCAG · 2.4.4 Linkdoel (in context) Pagina: product Geschatte werktijd: 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

Schermlezergebruikers kunnen moeite hebben om gelijknamige links te onderscheiden wanneer ook de programmatisch gekoppelde context geen duidelijkheid geeft.

Impact op je business

Duidelijke linkdoelen kunnen het vinden van de juiste productpagina vergemakkelijken.

Fragment uit de meting
<a href="/producten/[productnaam A]">Bekijk</a> <a href="/producten/[productnaam B]">Bekijk</a>
Mogelijke correctie
<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>
Oplossing en hertest voor B-10
Juridische relevantie

WCAG 2.1 criterium 2.4.4 (niveau A) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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]".

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op product en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

Laag · 1 issue

B-11 · Verplichte velden worden niet aangekondigd

Laag
WCAG · 3.3.2 Labels of instructies Pagina: contact Geschatte werktijd: 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. Dat hoor je pas als je het formulier verstuurt en een foutmelding krijgt.

Vastgesteld door de pagina zelf te bedienen
Impact op gebruikers

Bezoekers die hulpsoftware gebruiken hebben informatie nodig over verplichte velden. Controleer daarbij zowel de gekoppelde labeltekst als de programmatische aanduiding.

Impact op je business

Duidelijke informatie over verplichte velden kan het invullen van een adviesaanvraag vergemakkelijken.

Fragment uit de meting
<select id="app_advice_planAppointment" name="app_advice[planAppointment]" data-appointment-target="location"> <option value="home">Aan huis</option> </select>
Mogelijke correctie
<select id="app_advice_planAppointment" name="app_advice[planAppointment]" required="required" data-appointment-target="location"> <option value="home">Aan huis</option> </select>
Oplossing en hertest voor B-11
Juridische relevantie

WCAG 2.1 criterium 3.3.2 (niveau A) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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'.

Hertest en verwacht resultaat

Herhaal na de aanpassing de scan op contact en controleer dat deze bevinding niet terugkomt. Test de aangepaste functie daarnaast met alleen het toetsenbord en, waar relevant, een schermlezer.

Handmatig beoordelen · 2 issues

B-02 · Contrastfout en handmatig te controleren tekst

Handmatig beoordelen
WCAG · 1.4.3 Contrast (minimum) Pagina: homepage, product, checkout, contact, diensten Geschatte werktijd: halve dag ⚠ Verificatie nodig
Wat is er aan de hand?

Op de homepage is bij één productnaam ('[productnaam A]') een contrastverhouding van 2,99:1 gemeten, waar 4,5:1 vereist is. Bij 37 tekstelementen op de homepage kon de scanner en bij teksten op andere pagina’s het contrast niet automatisch vaststellen. Voor die teksten is nog onbekend of het contrast voldoet; laat ze handmatig controleren.

Aanwijzing die nog beoordeeld moet worden; geen vastgestelde overtreding
Impact op gebruikers

Mensen die weinig contrast kunnen onderscheiden, kunnen de gemeten producttekst moeilijker lezen. Of dit ook bij de overige teksten speelt, moet handmatig worden gecontroleerd.

Impact op je business

Moeilijk leesbare productinformatie kan het vergelijken en kiezen van producten bemoeilijken.

Oplossing en hertest voor B-02
Juridische relevantie

WCAG 2.1 criterium 1.4.3 (niveau AA) is de technische meetlat voor deze bevinding; de toepasselijke wettelijke verplichting hangt af van organisatie en dienst.

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.

Hertest en verwacht resultaat

Controleer op homepage, product, checkout, contact, diensten eerst handmatig of dit probleem werkelijk optreedt. Als herstel nodig blijkt: herhaal daarna dezelfde controle en leg het verwachte en werkelijke resultaat vast.

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.

B-12 · Controleer contrast en herkenbaarheid van tekstlinks

Handmatig beoordelen
WCAG · 1.4.3 Contrast (minimum) Pagina: checkout, contact, diensten Geschatte werktijd: 15 min ⚠ Verificatie nodig
Wat is er aan de hand?

Bij links in lopende tekst op meerdere pagina’s kon de scanner het contrast niet automatisch vaststellen. Handmatige controle moet uitwijzen of het contrast voldoende is en of de links naast kleur ook op een andere manier herkenbaar zijn. Dit is een controlepunt, geen vastgestelde overtreding.

Aanwijzing die nog beoordeeld moet worden; geen vastgestelde overtreding
Impact op gebruikers

Als links uitsluitend met kleur worden aangeduid, kunnen bezoekers die kleuren moeilijk onderscheiden ze missen. Of dat hier gebeurt moet nog worden gecontroleerd.

Impact op je business

Goed herkenbare links helpen bezoekers informatie over privacy en voorwaarden te vinden.

Oplossing en hertest voor B-12
Juridische relevantie

Controleer WCAG 2.1 criterium 1.4.3 (niveau AA) voor contrast en 1.4.1 (niveau A) voor kleurgebruik. Voor deze links is nog geen overtreding vastgesteld.

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.

Hertest en verwacht resultaat

Controleer op checkout, contact, diensten eerst handmatig of dit probleem werkelijk optreedt. Als herstel nodig blijkt: herhaal daarna dezelfde controle en leg het verwachte en werkelijke resultaat vast.

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.

Quick wins: start hier

Deze bevindingen lijken relatief weinig werk te vragen. De tijden zijn schattingen; laat je bouwer de aanpak en benodigde tijd bevestigen.

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
Controleer contrast en herkenbaarheid van tekstlinks
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 toegankelijkheidsinformatie op de website. De EAA vraagt in-scope dienstverleners uit te leggen hoe hun dienst aan de eisen voldoet; een toegankelijkheidspagina is daarvoor een praktische vorm.

Toegankelijkheidsverklaring: concept

Informatie over toegankelijkheid. Dit concept helpt je uit te leggen wat is onderzocht en welke verbeteringen je plant. Het is een zelfverklaring, geen keurmerk. De status is "niet volledig onderzocht": een geautomatiseerde steekproef stelt geen volledige of gedeeltelijke conformiteit vast. Controleer welke informatieplicht voor je organisatie en dienst geldt, laat ontbrekende controles uitvoeren en vul de placeholders [zo aangeduid] in. Publiceer het concept alleen als de inhoud klopt.
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: niet volledig onderzocht Er zijn toegankelijkheidsproblemen gevonden. Deze geautomatiseerde steekproef is onvoldoende om een conformiteitsstatus voor de hele website vast te stellen. Vul die status pas in na een passende volledige beoordeling. Evaluatiemethode Deze verklaring is gebaseerd op een geautomatiseerde steekproef. De onderzochte pagina's en de destijds vastgelegde controles staan in het rapport. 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 planning voor herstel en aanvullende controle is [planning invullen]. 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. Controleer het contrast en de herkenbaarheid van de tekstlinks; voeg zo nodig onderstreping toe. 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 (pas de breedte of marges aan en controleer dat alle inhoud bereikbaar blijft). 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.
Toegankelijkheidsverklaring
Een openbare 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 tot vier pagina's en laat je de score plus maximaal drie bevindingen zien. Een volledig rapport onderzoekt tot acht pagina's en bevat alle gerapporteerde bevindingen, codevoorbeelden, een roadmap en een 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.