Hoe test ik mijn site op toegankelijkheid?

Geautomatiseerde tools (axe, WAVE, Lighthouse) vangen 30-40% van de toegankelijkheidsproblemen in minuten. De overige 60-70% vereist handmatig testen: alleen-toetsenbordnavigatie door je volledige aankoopflow, en testen met een schermlezer zoals NVDA of VoiceOver. Beide soorten zijn essentieel.

Begin met geautomatiseerd testen

Geautomatiseerd toegankelijkheidstesten is snel, herhaalbaar en gratis voor basisgebruik. Het vangt de duidelijke overtredingen: ontbrekende alt-tekst, onvoldoende kleurcontrast, ontbrekende formulierlabels en ongeldig ARIA-gebruik.

axe browserextensie (aanbevolen startpunt) Beschikbaar voor Chrome en Firefox. Draait op elke pagina die je bekijkt, rapporteert problemen op ernst (Critical, Serious, Moderate, Minor) en koppelt elke bevinding aan een gedetailleerde uitleg. De gratis versie vangt de meest impactvolle problemen. Draai het op: je homepage, een productpagina, een categoriepagina en elke stap van je checkout.

WAVE (webaim.org/wave) Visuele overlay-tool die toegankelijkheidsfouten en -waarschuwingen direct op de pagina markeert. Bijzonder nuttig voor niet-ontwikkelaars, omdat het problemen in context toont en niet alleen als lijst. Plak een willekeurige URL of installeer de browserextensie.

Google Lighthouse Ingebouwd in Chrome DevTools (F12 > tabblad Lighthouse). Voer een toegankelijkheidsaudit uit naast prestaties, SEO en best practices. Scoort 0-100, waarbij 90+ een redelijk doel is. Nuttig om verbetering in de tijd te volgen. Let op: een score van 100 betekent geen volledige WCAG-naleving. Het betekent dat de automatiseerbare controles slagen.

Axe-core in CI/CD Voor ontwikkelteams vangt het integreren van axe-core in je geautomatiseerde testsuite (via jest-axe of Playwright/Cypress-plugins) toegankelijkheidsregressies voordat ze in productie komen. Dit is de meest efficiënte langetermijnaanpak voor het onderhouden van toegankelijkheid.

Handmatig toetsenbordtesten

Toetsenbordtesten kost 15-30 minuten en onthult problemen die geen enkele geautomatiseerde tool kan detecteren: logische focusvolgorde, functionele toetsenbordinteracties op aangepaste componenten, focus-trap-gedrag in modals.

Het toetsenbordtestprotocol:

1. Open je site en leg je muis weg (haal hem fysiek los of schakel hem uit)
2. Druk op Tab om voorwaarts door interactieve elementen te bewegen, Shift+Tab om achterwaarts te bewegen
3. Let op: kun je bij elke stap zien welk element focus heeft? (Focus moet altijd zichtbaar zijn)
4. Druk op Enter of Spatie om knoppen en links te activeren
5. Gebruik de pijltjestoetsen om binnen dropdowns, radiogroepen en carrousels te navigeren
6. Druk op Escape om modals en dropdowns te sluiten. Keert de focus terug naar het element dat het activeerde?

Doorloop dit proces in je volledige aankoopflow: productontdekking, variantselectie, toevoegen aan winkelwagen, winkelwagenreview, checkout (alle stappen) en orderbevestiging.

Documenteer elk punt waar je niet verder kunt of waar het focusgedrag verwarrend is. Dit zijn blokkerende problemen voor gebruikers die alleen het toetsenbord gebruiken.

Waar je specifiek op moet letten in ecommerce:

• Kun je de maat-/variantselector bereiken en een selectie maken?
• Kun je “Toevoegen aan winkelwagen” activeren?
• Komt de focus correct in de winkelwagen-zijbalk wanneer deze wordt geopend?
• Kun je elke checkout-stap navigeren en voltooien?
• Vangen modale dialogen (maattabellen, quick view) de focus correct en sluiten ze netjes?

Testen met een schermlezer

Schermlezers vertalen visuele content naar audio- of braille-uitvoer. Testen met een schermlezer onthult hoe je site daadwerkelijk wordt ervaren door gebruikers met visuele beperkingen. Niet alleen of de ARIA technisch correct is.

NVDA (Windows), gratis Download van nvaccess.org. Gebruik met Firefox voor de beste compatibiliteit. Schakel het in en navigeer je site met sneltoetsen: H voor koppen, B voor knoppen, F voor formuliervelden, T voor tabellen, pijltjestoetsen om content sequentieel voor te lezen.

VoiceOver (Mac en iOS), ingebouwd Inschakelen op Mac: Command+F5. Op iPhone/iPad: Instellingen > Toegankelijkheid > VoiceOver. Gebruik rotor-gebaren (rotatie met twee vingers) om per elementtype te navigeren. Test de checkout-flow op zowel desktop als mobiel.

JAWS (Windows). Betaald, maar standaard in enterprise-testen De meest gebruikte schermlezer onder professionele gebruikers. Als je doelgroep zakelijke klanten omvat, is testen met JAWS belangrijk. Gratis proefperiode van 30 dagen beschikbaar.

Waar je naar moet luisteren:

• Worden knoppen aangekondigd met hun doel? (“Toevoegen aan winkelwagen, knop”, niet “knop”)
• Worden afbeeldingen beschreven? (“Middernachtblauwe linnen jurk, vooraanzicht”, niet “afbeelding”)
• Worden formuliervelden aangekondigd met hun labels? (“E-mailadres, verplicht”, niet “tekstveld”)
• Worden foutmeldingen aangekondigd wanneer ze verschijnen?
• Worden dynamische updates aangekondigd? (Wordt de wijziging gecommuniceerd wanneer de winkelwagen wordt bijgewerkt?)

Kleurcontrast testen

WebAIM Contrast Checker: Voer hexcodes in voor voorgrond- en achtergrondkleuren, krijg direct de contrastverhouding en het slagen/zakken-resultaat. Snel voor het steekproefsgewijs controleren van specifieke kleurcombinaties.

Chrome DevTools kleurkiezer: Inspecteer een willekeurig tekstelement, klik op het kleurvlak in het Styles-paneel, zie de contrastverhouding automatisch berekend ten opzichte van de huidige achtergrond.

Stark (browserextensie): Voert een contrastcontrole uit over een hele pagina en kan kleurenblindheid simuleren om te tonen hoe je site verschijnt voor gebruikers met verschillende types kleurzichtbeperking.

Een duurzaam testproces opbouwen

Vóór lancering (nieuwe features/herontwerpen): Handmatig toetsenbord- en schermlezertesten van alle nieuwe interactieve componenten.

Maandelijks: Geautomatiseerde axe-scan van alle belangrijke paginasjablonen. Bekijk nieuwe problemen die sinds de laatste scan zijn geïntroduceerd.

Per kwartaal: Volledig handmatig toetsenbordtesten van de aankoopflow. Schermlezertesten van eventuele nieuwe checkout-functionaliteit.

Jaarlijks: Uitgebreide audit tegen de volledige WCAG 2.1 AA-checklist. Bijzonder belangrijk als je site aanzienlijk is gegroeid of grote wijzigingen heeft ondergaan.

Een UX-audit biedt een complete toegankelijkheidsbasislijntest met bevindingen geprioriteerd op ernst en gebruikersimpact. Een sneller alternatief dan vanaf nul je eigen testinfrastructuur opbouwen.