Blog

Hoe test je je website op toegankelijkheid?

Automatisch voor de basis, handmatig voor de rest.

Hoe je een website in twee sporen test op toegankelijkheid, en waarom dekking belangrijker is dan grondigheid.


Een website testen op toegankelijkheid

Je test een website op toegankelijkheid in twee sporen: een automatische scan voor de basis en handmatig onderzoek voor de rest.
Dat is geen kwestie van grondigheid, maar van dekking.
WCAG 2.2 kent 55 succescriteria op niveau A en AA en daarvan is naar schatting 20 tot 40 procent geautomatiseerd te toetsen, afhankelijk van hoe je meet: volledig automatisch beoordeelbaar is maar een klein deel.

Sinds 28 juni 2025 is de European Accessibility Act, richtlijn 2019/882, van toepassing.
De richtlijn zelf noemt geen WCAG-versie, maar formuleert functionele eisen.
In de praktijk wordt getoetst tegen EN 301 549, de Europese norm voor ICT-toegankelijkheid, die op zijn beurt naar WCAG teruggrijpt.
De versie die vandaag in het Publicatieblad geciteerd staat, v3.2.1, verwijst naar WCAG 2.1 niveau AA.
Versie 4.1.1, op 2 september 2026 door ETSI gepubliceerd, verwijst naar WCAG 2.2 niveau AA en wordt naar verwachting eind 2026 geciteerd.
Onder de EAA is er tot nu toe geen enkele geharmoniseerde norm geciteerd, dus er is op dit moment ook geen formeel vermoeden van conformiteit.
Ik test standaard tegen WCAG 2.2 niveau AA, omdat dat de meest recente versie is en 2.1 er volledig in zit.
Welke versie voor jouw situatie formeel geldt, laat je juridisch nakijken.
Hieronder de testronde die ik zelf draai: welke tools, in welke volgorde en hoe je de bevindingen ordent.

Wat automatische tools wel en niet vinden

Een scanner vindt foutklassen, geen gebruikservaring.
Tools toetsen betrouwbaar wat in de HTML meetbaar is: contrastverhoudingen tussen opgegeven kleuren, ontbrekende alt-attributen, knoppen zonder toegankelijke naam, formuliervelden zonder label, een ontbrekend lang-attribuut, ARIA-rollen met ongeldige attributen.
Dat werk moet je doen, want het zijn de fouten die het vaakst voorkomen.

Een website testen met alleen het toetsenbord

Wat een tool niet beoordeelt is de inhoud van wat het vindt.
Of de alt-tekst klopt bij de afbeelding, of de koppen de structuur beschrijven in plaats van alleen groot te zijn, of de focusvolgorde klopt met wat je ziet, of een zelfgebouwde dropdown zich gedraagt zoals een gebruiker verwacht, of een foutmelding uitlegt wat er misging.
Een groene score in Lighthouse zegt op zich dus weinig.
Grofweg laten de vier WCAG-principes waarneembaar, bedienbaar, begrijpelijk en robuust zich niet even goed automatiseren: waarneembaar en robuust vindt een tool nog deels, bedienbaar en begrijpelijk vragen bijna altijd handwerk.
Tools voor de basis, handwerk voor de rest.

Welke gratis tools bruikbaar zijn

Tool Wat het doet Wanneer
axe DevTools Scant de pagina op de regels uit axe-core en wijst het element aan. Eerste scan per paginatype.
Lighthouse Draait een deel van dezelfde axe-core-regels in Chrome DevTools, naast performance.
Minder regels dan axe DevTools zelf, dus een groene score dekt minder dan je denkt.
Steekproef zonder installatie.
WAVE Legt koppen, landmarks en fouten visueel over de pagina heen. Kopstructuur en leesorde.
Accessibility Insights Scan plus begeleide handmatige tests per criterium. Als je een volledig rapport wil.
Colour Contrast Analyser Meet contrast van kleuren die je zelf aanwijst, ook in beeld. Tekst op foto's en gradiënten.
Nu HTML Checker Valideert de HTML, inclusief dubbele id-waarden en foute nesting. Bij vreemd gedrag in een schermlezer.
NVDA of VoiceOver Leest de pagina voor zoals een schermlezergebruiker hem krijgt. De hoofdflows, laatste ronde.

Laat axe-core of pa11y meelopen in je build, dan komen opgeloste fouten niet terug.
Eén ding werkt niet: een overlay-widget die met één regel JavaScript toegankelijkheid belooft.
Die sleutelt tijdens runtime aan de DOM, maar raakt je broncode en je componenten niet aan en maakt gedrag soms net stuk.

Handmatig testen met het toetsenbord

Leg de muis weg en doorloop de site met Tab, Shift+Tab, Enter, spatie, de pijltjestoetsen en Escape.
Dit is de goedkoopste handmatige test en levert het meeste op per uur.

  • Zichtbare focus (2.4.7): je ziet altijd waar je staat, ook in uitklapmenu's.
  • Focus niet bedekt (2.4.11, nieuw in 2.2): een sticky header of cookiebanner mag het gefocuste element niet volledig verbergen.
    Volledig zichtbare focus is strenger (2.4.12, niveau AAA) en niet vereist.
  • Focusvolgorde (2.4.3): de volgorde volgt de visuele indeling, zonder sprong naar de footer.
  • Geen toetsenbordval (2.1.2): uit elke modal, carrousel en datumkiezer kom je weer weg.
  • Blokken overslaan (2.4.1): een skiplink als eerste focuspunt, die ook echt werkt.
  • Alles bedienbaar (2.1.1): accordeons, filters, menuknop en zoekveld, zonder muis.
  • Slepen (2.5.7, nieuw in 2.2): wat je sleept moet ook met losse klikken kunnen.
  • Doelgrootte (2.5.8, nieuw in 2.2): minstens 24 bij 24 CSS-pixels, of genoeg tussenruimte.
Navigatie testen met het toetsenbord en focus

Test per paginatype en per flow, niet per pagina.
Een formulier, een filteroverzicht en het afrekenproces dekken meer af dan honderd artikelpagina's uit hetzelfde template.

Handmatig testen met een schermlezer

Eerlijk daarover: ik gebruik een schermlezer als testinstrument, niet als dagelijks hulpmiddel en dat geldt voor vrijwel elke ontwikkelaar.
Zo'n ronde vindt de harde fouten wel, maar zegt niet of de site fijn werkt voor wie er elke dag op vertrouwt.
Voor dat oordeel test je met echte gebruikers.

Hoe je bevindingen ordent per succescriterium

Eén bevinding is één succescriterium, op één plek, met één manier om het te reproduceren.
Een rapport dat de ruwe export van een scanner doorgeeft is onbruikbaar, want dezelfde fout uit hetzelfde template staat er dan tweehonderd keer in.

Succescriterium Niveau Waar Bevinding en oorzaak Impact
1.1.1 Niet-tekstuele content A Nieuwsteasers Informatieve afbeeldingen krijgen een leeg alt-attribuut uit de veldopmaak van het template. Hoog
2.4.7 Focus zichtbaar AA Hoofdnavigatie Een CSS-reset in het thema zet de outline uit zonder alternatief. Hoog
1.4.3 Contrast AA Secundaire knoppen De verhouding blijft onder 4,5:1 door één kleurtoken in de designtokens. Midden

Geef elk criterium daarna één van drie statussen: voldoet, voldoet niet, of niet van toepassing.
Die laatste is geen ontsnapping, want je moet uitleggen waarom een criterium niet speelt.
Sorteer op oorzaak in plaats van op pagina, want één aanpassing in een component ruimt vaak tientallen bevindingen op.
Zo houd je de onderbouwing over die je nodig hebt als een toegankelijkheidsverklaring voor jou verplicht is.

Wat een testronde niet afdekt

Een test toetst je site, niet je verplichting.
Vier zaken vallen er structureel buiten.

  • De juridische vraag: of je onder de EAA valt hangt af van wat je aanbiedt, dus laat dat juridisch toetsen.
    Lees eerst of de European Accessibility Act voor jouw website geldt.
  • Derde partijen: ingesloten video, kaarten, betaalmodules en cookiebanners staan in jouw pagina, niet in jouw codebase.
  • Documenten: PDF- en Office-bestanden vallen onder EN 301 549 en vragen een eigen beoordeling.
  • De redactie: het resultaat verschuift met elke publicatie, dus een test blijft een momentopname zolang je de uitgangspunten niet in je componenten vastlegt.

Heb je een scanrapport waar niemand mee verder kan, of wil je weten waar je site staat per succescriterium? Bekijk wat een traject digitale toegankelijkheid inhoudt, of leg je situatie voor via contact.
Ik bekijk je aanvraag en geef binnen 24 uur een eerlijk beeld van wat er nodig is.

Veelgestelde vragen

Welke tools gebruik je om een website op toegankelijkheid te testen?

Ik begin met axe DevTools op elk paginatype, gebruik WAVE om kopstructuur en landmarks visueel over de pagina te leggen en Colour Contrast Analyser voor tekst op foto's en gradiënten.
Accessibility Insights als je een volledig rapport wil, de Nu HTML Checker bij vreemd gedrag in een schermlezer en NVDA of VoiceOver voor de hoofdflows.
Lighthouse draait een deel van dezelfde axe-core-regels en is handig voor een steekproef zonder installatie.
Al die tools zijn gratis.
Laat axe-core of pa11y daarnaast meelopen in je build, dan komen opgeloste fouten niet terug.

Wat vindt een automatische toegankelijkheidsscan niet?

De inhoud van wat hij vindt.
Een tool ziet dat een alt-attribuut ontbreekt, niet of de alt-tekst klopt bij de afbeelding.
Hij ziet de koppen, niet of ze de structuur beschrijven in plaats van alleen groot te zijn.
Hij ziet niet of de focusvolgorde klopt met wat je visueel ziet, of een zelfgebouwde dropdown zich gedraagt zoals een gebruiker verwacht, of een foutmelding uitlegt wat er misging.
Van de 55 succescriteria op niveau A en AA is naar schatting 20 tot 40 procent geautomatiseerd te toetsen, afhankelijk van hoe je meet en volledig automatisch beoordeelbaar is maar een klein deel.

Hoe test je je website met het toetsenbord?

Leg de muis weg en doorloop de site met Tab, Shift+Tab, Enter, spatie, de pijltjestoetsen en Escape.
Je let op zichtbare focus (2.4.7), focus die niet bedekt raakt door een sticky header of cookiebanner (2.4.11), een focusvolgorde die de visuele indeling volgt (2.4.3), geen toetsenbordval in modals, carrousels en datumkiezers (2.1.2), een skiplink als eerste focuspunt die ook echt werkt (2.4.1) en accordeons, filters, menuknop en zoekveld die zonder muis bedienbaar zijn (2.1.1).
Doe dat per paginatype en per flow, niet per pagina.
Dit is de goedkoopste handmatige test en levert het meeste op per uur.

Heb je een schermlezer nodig om te testen en welke?

Voor de hoofdflows wel.
Gebruik NVDA op Windows met Firefox of Chrome, of VoiceOver op macOS met Safari: NVDA is gratis en VoiceOver zit in het systeem, dus de instapkost is nul.
Vraag de koppenlijst op, in NVDA met Insert en F7, spring van landmark naar landmark, loop een formulier door in formuliermodus, verstuur het bewust fout, veroorzaak een dynamische wijziging zoals een filter en beluister een inhoudelijke naast een decoratieve afbeelding.
Zo'n ronde vindt de harde fouten wel, maar zegt niet of de site fijn werkt voor wie er elke dag op vertrouwt.
Voor dat oordeel test je met echte gebruikers.

Hoe vaak moet je hertesten op toegankelijkheid?

Dat hangt aan je releaseritme, niet aan de kalender.
Laat axe-core of pa11y in elke build meelopen, zodat wat automatisch te vinden is continu getoetst wordt.
Hertest handmatig wat je aanraakt: verandert een template, een component of een flow, dan draai je de toetsenbordronde en de schermlezerronde voor dat paginatype opnieuw.
En omdat het resultaat met elke publicatie verschuift, blijft een test een momentopname zolang je de uitgangspunten niet in je componenten vastlegt.

Een vraag over dit onderwerp?

Beschrijf kort je situatie, dan laat ik weten wat er speelt en wat het zou kosten. Zonder offertetraject.

Privacybeleid

Wie we zijn
Dit beleid geldt voor David Porschmann (freelance webdeveloper). 
Contact: support@porschmann.be.

Welke gegevens we verwerken
Naam, e-mail, bedrijfsnaam (optioneel) en je bericht/aanvraag. Bij websitebezoek verwerken we ook beperkte technische gegevens (zoals IP-adres en browser) voor beveiliging en analytics.

Waarom we je gegevens verwerken (rechtsgrond)

  • Om je vraag te beantwoorden of een offerte te bezorgen (toestemming of precontractuele noodzaak).

  • Voor administratie en facturatie bij samenwerking (contractuele noodzaak).

  • Voor beveiliging en foutopsporing (gerechtvaardigd belang).

Bewaartermijnen
Inzendingen via het contactformulier: maximaal 24 maanden. Klantdossiers en facturatie: volgens wettelijke bewaartermijnen.

Delen met derden
We delen je gegevens niet met derden, behalve met verwerkers die ons helpen de website te hosten, e-mail te versturen of administratie te doen. Met deze partijen zijn verwerkersovereenkomsten gesloten.

Jouw rechten
Recht op inzage, correctie, verwijdering, beperking, overdraagbaarheid en het intrekken van toestemming. 
Mail ons op support@porschmann.be.

Beveiliging
We nemen passende technische en organisatorische maatregelen om je gegevens te beschermen.

Cookies en analytics
Korte uitleg over gebruikte tools (bv. Matomo/Clarity/GA) en link naar cookie-verklaring indien van toepassing.

Contact
Vragen over dit beleid? 
support@porschmann.be.

Verder lezen