Website toegankelijk maken in 8 stappen

Lichtgrijze tekst op een witte achtergrond staat op duizenden MKB-sites. Het oogt strak, maar voor een flink deel van je bezoekers is het simpelweg onleesbaar. Sinds de Europese toegankelijkheidswet geldt, is dat ook een juridisch risico. Het goede nieuws is dat je de grootste drempels zelf in een middag wegneemt.

Digitale toegankelijkheid is de mate waarin iedereen, ook mensen met een visuele, auditieve, motorische of cognitieve beperking, je website zelfstandig kan gebruiken: lezen, navigeren, formulieren invullen en afrekenen, met of zonder hulpmiddelen zoals een schermlezer.

Een website toegankelijk maken betekent dus: drempels opsporen en weghalen, volgens een vaste norm. Die norm heet WCAG, en de wet die het verplicht maakt is de European Accessibility Act.

Wat is digitale toegankelijkheid en voor wie doe je het?

Digitale toegankelijkheid gaat over de vraag of iedere bezoeker je site kan gebruiken, ongeacht beperking of hulpmiddel. Denk aan iemand die slechtziend is en inzoomt, iemand die kleurenblind is, iemand die alleen een toetsenbord gebruikt of iemand die moeite heeft met lange, ingewikkelde zinnen.

Die groep is groter dan de meeste ondernemers denken. Het gaat niet alleen om mensen met een permanente beperking, maar ook om ouderen, mensen met een gebroken arm of iemand die in fel zonlicht op zijn telefoon kijkt.

Welke hulpmiddelen gebruiken bezoekers?

Om te begrijpen waarom bepaalde maatregelen werken, helpt het om te weten hoe mensen je site benaderen:

• Schermlezer: software die de tekst en structuur van een pagina voorleest. Blinde gebruikers springen ermee van kop naar kop of van link naar link.
• Vergroting en zoom: slechtziende bezoekers zoomen tot 200 procent of meer in. Je layout moet dan nog steeds werken.
• Toetsenbordnavigatie: mensen die geen muis kunnen gebruiken, bewegen met Tab, Shift+Tab en Enter door de pagina.
• Ondertiteling: doven en slechthorenden volgen video via tekst.

Waarom is een toegankelijke website ook een conversiekwestie?

Elke bezoeker die vastloopt in je formulier of je knoppen niet kan lezen, is een gemiste aanvraag of verkoop. Een toegankelijke website is daarom geen liefdadigheid maar conversieoptimalisatie: je haalt frictie weg voor iedereen, niet alleen voor de doelgroep met een beperking.

Wat eist de European Accessibility Act van jouw bedrijf?

De European Accessibility Act (in Nederland vaak de toegankelijkheidswet genoemd) verplicht bedrijven om websites en apps waarop ze producten of diensten aanbieden toegankelijk te maken. Volgens de Autoriteit Consument & Markt (ACM) geldt dit sinds 28 juni 2025 en houdt de ACM toezicht op de naleving.

Belangrijk voor het MKB: de regels gelden voor bedrijven met 10 of meer medewerkers en/of een jaaromzet boven de 2 miljoen euro. Zit je daaronder, dan ben je voor diensten meestal niet verplicht, maar de maatregelen leveren je nog steeds bezoekers en conversie op.

Wat betekent dit concreet voor je webshop of dienstensite?

De wet is geschreven in juridische taal, maar de praktische vertaling is overzichtelijk:

• Het gaat om je verkoopkanaal: webshops, boekingssites, offerte- en aanmeldformulieren en klantportalen vallen er nadrukkelijk onder.
• De norm is technisch: in de praktijk toets je aan WCAG op niveau AA, via de Europese standaard EN 301 549.
• Je moet het kunnen uitleggen: je publiceert op een vindbare plek hoe je dienst aan de eisen voldoet, meestal via een toegankelijkheidsverklaring.
• De wet geldt nu: veel informatie online is geschreven vóór de ingangsdatum. Peildatum november 2026: de regels zijn van kracht en de ACM handhaaft.

Voor juridische details per sector is de ACM-informatie de beste bron. Dit artikel richt zich op wat je daarna moet doen: de maatregelen.

Wat is WCAG 2.2 en welk niveau moet je halen?

WCAG (Web Content Accessibility Guidelines) is de internationale set richtlijnen die beschrijft wanneer een website toegankelijk is. WCAG 2.2 is de actuele versie en kent drie niveaus: A (minimum), AA (de wettelijke en gangbare norm) en AAA (het hoogste niveau, zelden volledig haalbaar).

De richtlijnen zijn opgebouwd rond vier principes: waarneembaar, bedienbaar, begrijpelijk en robuust. Een volledige uitleg per succescriterium vind je in ons artikel over de WCAG-richtlijnen; hier volstaat wat je praktisch moet weten.

Waarom kiezen voor 2.2 als de standaard nog naar 2.1 verwijst?

De Europese standaard EN 301 549 verwijst nog naar WCAG 2.1 AA. WCAG 2.2 is daar echter een uitbreiding op: wie 2.2 AA haalt, voldoet automatisch aan 2.1 AA. Bouw je nu iets aan, mik dan direct op 2.2, zodat je niet over een paar jaar opnieuw moet beginnen.

De nieuwe criteria in 2.2 die MKB-sites het vaakst missen:

• Focus niet verborgen: een sticky header of cookiebanner mag het element waar de toetsenbordgebruiker op staat niet afdekken.
• Minimale klikgrootte: knoppen en links moeten minstens 24 bij 24 CSS-pixels groot zijn of genoeg ruimte om zich heen hebben.
• Geen dubbele invoer: vraag in een afrekenproces niet twee keer om hetzelfde adres zonder optie om het over te nemen.
• Toegankelijk inloggen: geen puzzel- of geheugentest als enige manier om in te loggen; plakken van wachtwoorden moet werken.

Hoe maak je een website toegankelijk in 8 stappen?

Je maakt een website toegankelijk door eerst sitebrede fouten in je huisstijl en templates te herstellen en daarna pagina voor pagina de inhoud aan te pakken. Begin niet met een dure audit, maar met de drempels die je zelf kunt zien. Dit is de volgorde die wij hanteren:

1. Bepaal je kritieke routes. Schrijf de vijf pagina's of processen op waar het geld zit: homepage, belangrijkste product- of dienstpagina, contactformulier, offerte-aanvraag en afrekenen. Alles wat volgt, test je eerst daar.
2. Fix contrast en tekstgrootte in je huisstijl. Controleer in je browser (rechtermuisklik, Inspecteren, klik op het kleurvakje bij een tekstelement) de contrastverhouding. Gewone tekst moet minimaal 4,5 op 1 halen, grote tekst 3 op 1. Pas het aan in je themakleuren of CSS-variabelen, zodat het in één keer sitebreed klopt.
3. Herschrijf je alt-teksten op doel. Elke afbeelding krijgt een alt-tekst die beschrijft wat de afbeelding doet of vertelt. Decoratieve beelden krijgen een bewust lege alt. Zie de uitwerking hieronder.
4. Zet je koppenstructuur en semantische HTML recht. Eén H1 per pagina, daaronder H2's en H3's zonder niveaus over te slaan. Gebruik koppen niet om tekst groter te maken; hoe je tussenkoppen goed inzet, lees je in een apart artikel. Controleer ook dat de taal van je pagina is ingesteld (lang="nl" in de HTML-code).
5. Test vijf minuten zonder muis. Leg je muis weg en loop met alleen Tab, Shift+Tab, Enter en Spatie door menu, formulier en afrekenproces. Waar je vastloopt of niet ziet waar je bent, zit een gebrek.
6. Repareer je formulieren. Elk veld krijgt een zichtbaar label (geen placeholder als enige aanwijzing) en elke foutmelding wordt in tekst uitgelegd bij het veld, niet alleen met een rode rand.
7. Ondertitel je video's en vereenvoudig je taal. Controleer automatische ondertitels handmatig, en herschrijf je belangrijkste pagina's in korte zinnen met uitleg bij vaktermen. Vervang linkteksten als "klik hier" door beschrijvende tekst.
8. Publiceer je toegankelijkheidsverklaring en plan herhaling. Leg vast wat voldoet, wat nog niet en wanneer je het oplost. Zet elk kwartaal een uur in de agenda om de kritieke routes opnieuw te testen.

Hoe schrijf je een goede alt-tekst?

Een alt-tekst beschrijft het doel van een afbeelding, niet het plaatje zelf. Welke tekst je schrijft, hangt af van de functie:

• Functionele afbeelding (knop of icoon): beschrijf de actie. Een vergrootglas-icoon krijgt alt="Zoeken", niet alt="vergrootglas".
• Informatieve afbeelding: beschrijf de inhoud die ertoe doet. Bij een productfoto: "Grijze wollen trui met ronde hals, vooraanzicht", niet "product1.jpg".
• Decoratieve afbeelding: geef een lege alt (alt=""). Let op: een lege alt is iets anders dan een ontbrekende alt. Ontbreekt het attribuut, dan leest een schermlezer vaak de bestandsnaam voor.
• Tekst in een afbeelding: neem die tekst letterlijk op in de alt, of beter nog, zet de tekst als echte HTML op de pagina.

In WordPress vul je dit in de mediabibliotheek in bij het veld Alternatieve tekst. Doe dat daar en niet per bericht, dan geldt het overal waar je de afbeelding gebruikt.

Waar let je op bij de toetsenbordtest en formulieren?

De toetsenbordtest legt in vijf minuten de meeste bedieningsproblemen bloot. Let tijdens het tabben op deze signalen:

• Onzichtbare focus: je ziet niet welk element actief is. Vaak staat er ergens in de CSS outline: none; verwijder die of vervang hem door een duidelijke rand.
• Vastzitten: een pop-up of cookiebanner die je niet met Escape of Tab kunt verlaten.
• Onbereikbare knoppen: elementen die met de muis werken, maar die je met Tab overslaat. Meestal is een div als knop gebouwd in plaats van een echte <button>.
• Onlogische volgorde: de focus springt van het menu naar de footer en dan pas naar de inhoud.

Bij formulieren is de tekstuele foutmelding het belangrijkste punt. Een rood omrand veld zonder tekst is onzichtbaar voor kleurenblinde bezoekers en voor schermlezers. Schrijf daarom een melding die zegt wat er mis is en hoe het goed moet: "Vul een geldig e-mailadres in, bijvoorbeeld naam@bedrijf.nl." Voeg ook autocomplete-attributen toe (zoals autocomplete="email"), zodat browsers velden automatisch invullen. Dat scheelt iedereen typwerk en verhoogt je conversie.

Wil je verder testen met tools en schermlezers, dan vind je in ons artikel over toegankelijkheid testen de controles in de diepte. Dit artikel blijft bij de maatregelen zelf.

Welke maatregelen pak je als eerste aan?

Begin met de maatregelen die weinig tijd kosten en de meeste bezoekers raken: contrast en tekstgrootte, alt-teksten en formulieren. De meeste checklists behandelen alles als even belangrijk, maar in de praktijk verschilt de impact per uur enorm. Onderstaande tabel helpt je kiezen, inclusief wat elke maatregel oplevert voor je vindbaarheid in Google en AI-zoekmachines.

Waarom contrast en tekstgrootte vóór de audit komen

Te lichte grijze tekst en te kleine letters zijn de twee drempels die we het vaakst tegenkomen. Een klassiek voorbeeld: grijs #999999 op wit haalt maar ongeveer 2,8 op 1. De lichtste grijstint die op wit nog net 4,5 op 1 haalt, is #767676. Pas je die waarde aan in je huisstijl, dan herstel je in één keer honderden pagina's.

Controleer daarna of je tekst bij 200 procent zoom nog leesbaar is zonder dat er tekst over elkaar valt of horizontaal moet worden gescrold. Een basislettergrootte van 16 pixels is geen wettelijke eis, maar wel een veilige ondergrens.

Wat haal je in één middag weg?

Heb je maar een middag, dan levert deze volgorde het meest op:

1. Contrast van tekst, knoppen en links corrigeren in je themakleuren (een uur).
2. Alt-teksten invullen voor de afbeeldingen op je vijf kritieke pagina's (een uur).
3. Labels en tekstuele foutmeldingen toevoegen aan je contact- of offerteformulier (een uur).
4. De toetsenbordtest doen en de gevonden fouten noteren voor je developer (een half uur).

Waarom maakt een toegankelijke website je ook beter vindbaar in AI?

Een toegankelijke website is beter leesbaar voor AI-systemen, omdat schermlezers en AI-crawlers je pagina op dezelfde manier benaderen: als tekst en structuur, niet als beeld. Wat een schermlezer niet kan interpreteren, kan ChatGPT, Claude of Gemini meestal ook niet goed interpreteren. Toegankelijkheid en AI-zichtbaarheid zijn daardoor in grote lijnen hetzelfde huiswerk.

Welke maatregelen helpen allebei?

De overlap is bijna een op een:

• Alt-teksten: een crawler ziet geen foto, alleen de beschrijving. Zonder alt bestaat je productbeeld voor een AI-model niet.
• Logische koppen: schermlezergebruikers springen van kop naar kop; AI-systemen knippen pagina's op dezelfde koppen op in losse passages die ze kunnen citeren.
• Semantische HTML: elementen als <main>, <nav> en <button> vertellen een schermlezer wat inhoud en wat navigatie is. Een crawler gebruikt die signalen om je eigenlijke tekst van menu's en footers te scheiden, en daarom hoort het ook in elke technische SEO-check.
• Begrijpelijke taal: een zin die een lezer met leesproblemen direct snapt, is ook een zin die een AI-model zonder omweg kan overnemen in een antwoord.
• Transcripts en ondertitels: gesproken uitleg in een video wordt pas doorzoekbaar en citeerbaar als er tekst van bestaat.

Wat zegt onderzoek over welke sites AI citeert?

Uit eigen onderzoek van Timmermans Media naar 3.600 AI-antwoorden (oktober 2026) blijkt dat Rijksoverheid.nl de meest geciteerde website was bij ChatGPT, in 10,5% van de antwoorden met bronnen. Dat bewijst geen oorzakelijk verband, maar het is wel een site die al jaren aan toegankelijkheidseisen moet voldoen en consequent in begrijpelijke taal schrijft.

Omvang is daarbij geen voorwaarde. In ons onderzoek naar 400 Nederlandse vragen (oktober 2026) had 37% van de 676 verschillende websites die ChatGPT citeerde weinig geschat Google-verkeer uit Nederland, minder dan 1.000 bezoeken per maand. Ook kleinere sites worden dus geciteerd, en een heldere, goed gestructureerde pagina geeft je daarbij de beste uitgangspositie. Met de AI-website-check zie je in een minuut hoe vindbaar je site nu is voor AI.

Dat verkeer is bovendien waardevol: volgens Microsoft Clarity converteert verkeer van AI-platformen 3 keer beter dan traditioneel zoekverkeer, gemeten bij meer dan 1.200 uitgevers en nieuwswebsites. De businesscase voor toegankelijkheid is dus dubbel: je voldoet aan de wet en je verbetert je zichtbaarheid in de kanalen die groeien.

Wat zet je in een toegankelijkheidsverklaring?

Een toegankelijkheidsverklaring is een openbare pagina waarin je uitlegt in hoeverre je website aan de toegankelijkheidseisen voldoet, wat nog niet werkt en wanneer je dat oplost. Je plaatst hem op een vaste, vindbare plek, meestal via een link in de footer van elke pagina.

Voor bedrijven onder de European Accessibility Act is het de gangbare manier om te laten zien hoe je dienst aan de eisen voldoet. Overheden werken met een vast model; als ondernemer heb je meer vrijheid, maar de inhoud is vergelijkbaar.

Welke onderdelen horen erin?

• Reikwijdte: om welke website, webshop of app het gaat.
• Norm: waaraan je toetst, bijvoorbeeld WCAG 2.2 niveau AA.
• Status: wat al voldoet, per onderdeel benoemd.
• Bekende knelpunten: wat nog niet voldoet, met een concrete planning.
• Contact: een e-mailadres of formulier waar bezoekers drempels kunnen melden, en hoe snel je reageert.
• Datum: wanneer de verklaring voor het laatst is gecontroleerd.

Waarom een eerlijke verklaring sterker is dan een perfecte claim

Behandel de verklaring als levend document, niet als juridisch schild. Een verklaring die zegt "onze site voldoet volledig" terwijl het afrekenformulier niet met het toetsenbord werkt, valt bij de eerste controle door de mand. Een eerlijke verklaring met een verbeterplan laat de toezichthouder juist zien dat je serieus bezig bent.

Werk de verklaring bij na elke kwartaalcontrole. Zo blijft hij kloppen en dwingt hij jezelf om de geplande verbeteringen ook echt uit te voeren.

Wanneer schakel je een specialist in?

Je schakelt een specialist in zodra je site meer is dan pagina's en formulieren: bij complexe webapplicaties, maatwerk-afrekenprocessen, klantportalen of als je een formeel auditrapport nodig hebt. De checklist in dit artikel neemt de meeste drempels weg, maar niet alles.

Waar begint het specialistische werk?

• Dynamische onderdelen: filters, carrousels, uitklapmenu's en pop-ups die met JavaScript zijn gebouwd vragen vaak om ARIA-attributen, en die verkeerd toepassen maakt het erger in plaats van beter.
• Formele audit: een volledige toetsing tegen alle WCAG-succescriteria, bijvoorbeeld als onderbouwing van je verklaring.
• Schermlezertests: testen met NVDA of VoiceOver vraagt ervaring om de resultaten goed te interpreteren.

Bij elke websitebouw die wij doen, zoals de volledige site van Noisely, nemen we contrast, koppenstructuur en semantische HTML vanaf het eerste ontwerp mee. Achteraf repareren kost altijd meer dan het meteen goed bouwen, dus ga je binnenkort een nieuwe site laten maken, zet toegankelijkheid dan in de briefing.

Wil je de maatregelen uit dit stappenplan laten uitvoeren, of een nieuwe site die vanaf het eerste ontwerp toegankelijk is? Timmermans Media herstelt contrast, koppenstructuur, formulieren en semantische HTML via webdevelopment, en zet diezelfde structuur in om je zichtbaarder te maken in AI-zoekmachines met GEO. Mail info@timmermansmedia.nl voor een vrijblijvend gesprek.