Je website toegankelijk maken: het gratis stappenplan voor KMO's
Toets je KMO-website met gratis tools als WAVE en Lighthouse, los de vijf knelpunten op die steeds terugkomen en leg vast wanneer je site voor het laatst is nagekeken.
Een bezoeker met een schermlezer wil bij jou een afspraak boeken en komt niet voorbij het contactformulier. Hij zegt er niets over en vertrekt gewoon, dus jij ziet alleen een afgebroken sessie in je statistieken. De meeste oorzaken daarvan spoor je met gratis tools in één middag op.
Key takeaways
- WAVE en Lighthouse zijn gratis en wijzen binnen enkele minuten de meest voorkomende toegankelijkheidsknelpunten op een pagina aan.
- Vijf problemen komen bij KMO-websites steeds terug: ontbrekende alt-tekst, te laag kleurcontrast, formuliervelden zonder label, een rommelige koppenstructuur en nietszeggende linktekst.
- De European Accessibility Act is sinds 28 juni 2025 van toepassing op een reeks onlinediensten in de EU, waaronder webshops. Toegankelijkheid is daarmee ook een nalevingsvraag geworden en niet langer alleen een kwestie van gebruiksgemak.
- Eén ronde met alleen het toetsenbord vindt wat geen enkele automatische scanner ziet.
- De basis doe je zelf. HisarWeb springt bij als het technisch vastloopt of te veel tijd kost.
Stap 1: scan je belangrijkste pagina's
Installeer de WAVE-browserextensie van WebAIM in Chrome of Firefox. Open je homepage en klik op het WAVE-icoon. De extensie tekent iconen op de pagina zelf: rood is een fout, geel is een waarschuwing, groen is iets dat goed staat. Begin bij de rode iconen. Dat zijn de knelpunten die een schermlezer of toetsenbordgebruiker echt tegenhouden.
Open daarna Chrome DevTools met F12, ga naar het tabblad Lighthouse, vink alleen de categorie Accessibility aan en start de analyse. Je krijgt een score van 0 tot 100 en een lijst gefaalde tests, elk met uitleg waarom het een probleem is en welk WCAG-criterium het raakt. Die twee tools vullen elkaar aan: WAVE laat zien waar op de pagina het misgaat, Lighthouse legt uit waarom.
Doe dit niet alleen op je homepage. Neem ook het contactformulier, je belangrijkste dienst- of productpagina en de kassa of het aanvraagformulier. Dat zijn de pagina's waar een bezoeker geld of een opdracht achterlaat, en dus de pagina's waar vastlopen het duurst is. Deze stap is gelukt zodra je per pagina een lijst met benoemde problemen hebt, in plaats van een vaag gevoel dat het wel goed zal zitten.
Stap 2: los de vijf terugkerende knelpunten op
Bijna alle meldingen van WAVE en Lighthouse op een KMO-website vallen in vijf categorieën. Werk ze in deze volgorde af, want ze staan op volgorde van hoeveel bezoekers ze raken.
- Alt-tekst. Elke afbeelding die informatie overbrengt, zoals een productfoto, een schema of een knop in beeldvorm, krijgt een korte beschrijvende alt-tekst. Een puur decoratieve afbeelding krijgt een leeg alt-attribuut, zodat een schermlezer ze overslaat in plaats van een bestandsnaam voor te lezen.
- Kleurcontrast. Tekst tegen de achtergrond, en ook knoptekst tegen de knop, moet genoeg verschil hebben. Lichtgrijze tekst op wit en witte letters op een zachte pastelknop zijn de twee klassiekers. Ze zien er rustig uit op jouw scherm en verdwijnen op een telefoon in de zon.
- Formulierlabels. Elk invoerveld krijgt een zichtbaar label dat er programmatisch aan gekoppeld is. Een placeholder telt niet mee: die verdwijnt zodra iemand begint te typen, en hij wordt lang niet door elke schermlezer voorgelezen.
- Koppenstructuur. Een pagina heeft één h1, daarna volgen h2 en h3 in logische volgorde zonder een niveau over te slaan. Veel schermlezergebruikers springen via de koppenlijst door een pagina. Een rommelige structuur maakt die lijst onbruikbaar als kaart.
- Linktekst. Vervang klik hier en lees meer door een link die zelf zegt waar hij heen gaat, zoals bekijk onze openingsuren. Dat helpt ook je vindbaarheid, want zoekmachines lezen linktekst mee.
Pak één categorie tegelijk aan en draai WAVE daarna opnieuw. Deze stap is gelukt als het aantal rode meldingen voor die categorie op nul staat.
Stap 3: test zonder muis en zonder kleur
Leg je muis weg en loop je site door met alleen de Tab-toets. Elke link, knop en veld moet bereikbaar zijn, en je moet altijd kunnen zien welk element actief is dankzij een duidelijke focusrand. Blijf je hangen in een uitklapmenu of in een cookiebanner die niet meer weggaat, dan heb je een blokkade gevonden die geen enkele scanner voor je oplost.
Zet daarna je scherm tijdelijk op grijswaarden, via de weergave-instellingen van Windows of macOS. Controleer of je nog steeds ziet welke velden verplicht zijn en welke knop de hoofdactie is. Wordt dat alleen met kleur aangegeven, bijvoorbeeld een rode rand zonder tekst of icoon erbij, dan mist een kleurenblinde bezoeker het signaal volledig.
Deze stap is gelukt als je zonder muis en zonder kleurherkenning een bestelling of aanvraag volledig kunt afronden.
Stap 4: leg vast wat je gecontroleerd hebt
Zet in een gedeeld document welke pagina's je hebt getest, met welke tool, op welke datum en wat er nog openstaat. Dat klinkt bureaucratisch, maar het voorkomt het echte probleem: over drie maanden weet niemand meer of de kassa ooit is nagekeken, en dan begint iemand opnieuw bij nul.
Neem daarna één regel op in je werkwijze. Elke nieuwe pagina en elk nieuw formulier gaat pas online na een WAVE-scan. Toegankelijkheid verslechtert namelijk sluipend: een nieuwe banner, een aangepaste huisstijlkleur of een extra veld in het formulier haalt er stilletjes weer iets uit. Deze stap is gelukt als je kunt aanwijzen wanneer je site voor het laatst is getoetst en door wie.
Aanbevolen platforms en tools
| Tool | Wat het doet | Kosten |
|---|---|---|
| WAVE (WebAIM) | Browserextensie die fouten, waarschuwingen en paginastructuur direct op de pagina markeert | Gratis |
| Lighthouse (Chrome DevTools) | Ingebouwde audit in Chrome met een toegankelijkheidsscore en uitleg per gefaalde test | Gratis, zit in Chrome |
| axe DevTools (Deque) | Browserextensie die elk knelpunt koppelt aan het exacte WCAG-criterium | Gratis basisversie |
| WebAIM Contrast Checker | Rekent uit of een kleurcombinatie de WCAG-contrastnorm haalt | Gratis |
| NVDA (NV Access) | Schermlezer voor Windows, waarmee je je eigen site hoort zoals een blinde bezoeker hem hoort | Gratis, open source |
Tips en tricks
- WAVE en Lighthouse oordelen bij randgevallen soms net iets anders over contrast. Houd bij twijfel de WebAIM Contrast Checker aan, die rekent volgens de officiële WCAG-formule.
- Automatische scanners vinden ongeveer de helft. Een korte ronde met NVDA op Windows of VoiceOver op Mac legt dingen bloot die geen enkele scanner ziet, zoals een voorleesvolgorde die niet klopt met wat je op het scherm ziet staan.
- Zoek in je CSS naar
outline: none. Dat is de meest gebruikte manier om de focusrand weg te werken omdat iemand hem lelijk vond, en daarmee verdwijnt precies het enige signaal waar toetsenbordgebruikers op varen. - Je pdf-bestanden tellen mee. Een prijslijst of brochure zonder getagde structuur is voor een schermlezer vaak onleesbaar, ook als het document er op je scherm keurig uitziet. Zet de kerninformatie liever ook als gewone webpagina online.
- De European Accessibility Act kent uitzonderingen, onder meer voor de kleinste dienstverleners. Ga er niet zomaar vanuit dat die op jou van toepassing is. Laat je situatie nakijken als naleving voor jou zwaar weegt, en behandel de basis intussen gewoon als goed vakmanschap.
Doe de zelfscan
Kan ik mijn hele website bedienen met alleen de Tab-toets?
Nee? Loop met WAVE of Lighthouse na welk element de focus vasthoudt, en zorg dat elke link, knop en veld in een logische volgorde bereikbaar blijft.
Heeft elke betekenisvolle afbeelding een beschrijvende alt-tekst?
Nee? Schrijf per afbeelding kort op wat er te zien is of welke functie ze heeft, en geef decoratieve afbeeldingen een leeg alt-attribuut.
Is het contrast tussen tekst, knoppen en achtergrond voldoende?
Nee? Toets je kleurcombinaties in de WebAIM Contrast Checker en pas ze aan tot ze slagen, te beginnen bij knoppen en foutmeldingen.
Heeft elk formulierveld een gekoppeld label en niet alleen een placeholder?
Nee? Zet er een zichtbaar label boven en koppel dat programmatisch aan het veld, zodat een schermlezer voorleest welke informatie je vraagt.
Weet ik wanneer mijn site voor het laatst is getoetst?
Nee? Draai vandaag een WAVE-scan op je homepage en je contactformulier, en noteer datum, tool en bevindingen in een document dat je collega's ook kunnen vinden.
Begin vandaag met de WAVE-extensie op je homepage en je contactformulier. Dat zijn de twee pagina's waar de meeste bezoekers vastlopen, dus daar levert een half uur werk direct het meeste op. Kom je er zelf niet uit of ontbreekt de tijd, dan voert HisarWeb een gerichte toegankelijkheidsaudit voor je uit.
