WCAG-richtlijnen: wie verplicht is en wat het kost

Toegankelijk webdesign volgens de WCAG-richtlijnen is de UX- en ontwikkelmethode waarmee websites voldoen aan WCAG 2.2 niveau AA en de European Accessibility Act via semantische HTML, volledige toetsenbordnavigatie en minimaal 4,5:1 kleurcontrast op Europese bedrijfswebsites (€4.500 tot €9.000) en maatwerk webportalen.

De meeste organisaties komen het onderwerp tegen als een nalevingsschrik vlak voor een toets. Die volgorde levert het slechtst mogelijke resultaat op: een verzameling pleisters op een afgebouwde site. Vanaf de eerste schets meegenomen kost dezelfde eis vrijwel niets en verbetert de site en passant voor iedereen.

Deze gids behandelt de ontwerpkeuzes in plaats van de norm: welke zes fouten in vrijwel elke audit opduiken, hoe je in tien minuten zelf test, hoe een toets verloopt, en wat het werk kost.

Toegankelijkheid is geen visuele stijl, en dat is het eerste misverstand dat weg moet. Sites die voldoen zien eruit als elke andere goed gemaakte site. Wat verandert is een reeks keuzes die anders onbewust vallen: hoeveel contrast de tekst heeft, wat er gebeurt bij het indrukken van de tabtoets, of een invoerveld nog te begrijpen is als de hulptekst verdwijnt.

Volgens het Web Accessibility Initiative van het W3C rusten de richtlijnen op vier principes: inhoud moet waarneembaar, bedienbaar, begrijpelijk en robuust zijn. Op niveau AA worden die principes meetbare succescriteria. WCAG 2.1 AA is de versie waarnaar de Europese norm EN 301 549 nu verwijst; WCAG 2.2 voegt daar zes criteria op niveau A en AA aan toe, onder meer over focusweergave, sleepbewegingen en de grootte van knoppen, en is de verstandige bouwnorm.

Het commerciële argument is eenvoudiger dan het morele. Ongeveer één op de zes mensen wereldwijd leeft met een betekenisvolle beperking, en het aandeel loopt met de leeftijd duidelijk op, wat telt voor elk product dat aan vijftigplussers wordt verkocht. De tabel hieronder zet per laag het criterium, de typische fout en de fix in code naast elkaar.

Sinds 28 juni 2025 geldt in Nederland de Implementatiewet toegankelijkheidsvoorschriften producten en diensten, die de European Accessibility Act (EAA, Richtlijn 2019/882) omzet in nationaal recht. Die raakt niet elke website, en het wijdverbreide idee dat "elke site nu verplicht toegankelijk moet zijn" klopt feitelijk niet.

Onder de wet vallen producten en diensten die op consumenten gericht zijn, waaronder elektronische handel (webshops), bankdiensten voor consumenten, e-books, telecommunicatie en personenvervoer. Pure zakelijke presentatiewebsites (B2B-brochuresites) zonder transactiefunctie of klantportaal vallen er doorgaans buiten. Wie echter rechtstreeks aan consumenten verkoopt, moet voldoen aan de geharmoniseerde Europese normen.

Voor micro-ondernemingen bestaat een duidelijke wettelijke uitzondering: wie diensten levert met minder dan tien werkzame personen en een jaaromzet of balanstotaal van hoogstens twee miljoen euro is vrijgesteld van de verplichtingen voor diensten. Voor fabrikanten of verkopers van fysieke producten geldt die uitzondering niet.

De overheid en semioverheid zijn al langer gebonden via het Tijdelijk besluit digitale toegankelijkheid overheid en digitoegankelijk.nl, met de Europese norm EN 301 549 als technische maatstaf. De versie van die norm die in het EU-Publicatieblad staat verwijst naar WCAG 2.1 AA; versie 4.1.1 van september 2026 stapt over op WCAG 2.2, maar is nog niet in het Publicatieblad opgenomen. Wie volgens WCAG 2.2 AA bouwt, voldoet aan allebei.

Het toezicht op webshops en telecomdiensten ligt bij de Autoriteit Consument & Markt (ACM); voor producten is de Rijksinspectie Digitale Infrastructuur (RDI) aangewezen. De ACM kan onder de Wet handhaving consumentenbescherming boetes opleggen, maar de bedragen die online rondgaan als "de boete voor een ontoegankelijke website" hebben geen wettelijke basis: de hoogte hangt af van de overtreding en de omstandigheden. Wie zekerheid nodig heeft over de eigen situatie legt dat voor aan een jurist en niet aan een blog.

Zes fouten vormen het overgrote deel van wat echte audits opleveren, en elk daarvan is een ontwerpkeuze en geen programmeerfout. De jaarlijkse WebAIM Million analyse vindt automatisch detecteerbare tekortkomingen op ruim 95 % van de meestbezochte homepages. In de schets hersteld kosten ze niets; na livegang betekenen ze werk aan afgebouwde sjablonen.

• Te weinig contrast, meestal grijs op wit omdat het in het ontwerp rustiger oogde.
• Ontbrekende alt-teksten, of alt-teksten die de bestandsnaam herhalen.
• Links met de tekst "lees meer", die een schermlezer buiten context voorleest als een rij identieke items.
• Formulieren waarvan het label alleen de hulptekst is, die bij de eerste toetsaanslag verdwijnt.
• Bedienelementen gebouwd van kale divs, onzichtbaar voor hulptechnologie omdat ze geen rol dragen.
• Video zonder ondertiteling, wat dove bezoekers uitsluit en iedereen die zonder geluid kijkt.

Elk hiervan is in een ontwerpbestand in minuten aangepast en in productiecode in uren. Die verhouding is het hele argument om toegankelijkheid als ontwerpvoorwaarde te behandelen en niet als ontwikkeltaak.

Contrast is de meest voorkomende fout en de makkelijkst te voorkomen, omdat je hem kunt controleren voordat er één regel code bestaat. Gevraagd wordt een verhouding van minimaal 4,5 op 1 tussen tekst en achtergrond bij gewone tekst, en 3 op 1 bij grote tekst en bij de zichtbare randen van bedienelementen.

De val zit erin dat merkpaletten worden gekozen op gekalibreerde schermen in verduisterde ruimtes. Een middengrijs dat daar chic oogt, is op de telefoon buiten niet meer te lezen. Het palet al bij de merkontwikkeling controleren in plaats van bij het paginabouwen scheelt een hele categorie herstelwerk.

Kleur mag bovendien niet de enige drager van betekenis zijn. Een formulier dat fouten uitsluitend rood markeert is onbruikbaar voor het aanzienlijke deel mannen met kleurenblindheid. Een pictogram en een zin erbij kosten één regel.

Blijft de focusindicator over. Ontwerpers verwijderen de standaardomlijning van de browser vaak omdat die botst met het ontwerp, en zetten er niets voor terug. Die ene keuze maakt de hele site onbruikbaar met het toetsenbord, en het is de ernstigste fout die we op verder verzorgd werk telkens weer tegenkomen.

Bediening met het toetsenbord is de snelste manier om een site te beoordelen en vraagt geen gereedschap. Leg de muis weg, druk herhaaldelijk op Tab en kijk wat er gebeurt. Wie elk bedienelement bereikt, altijd ziet waar hij is en nergens vastloopt, heeft een site in redelijke staat.

Drie dingen gaan in de praktijk mis. De volgorde springt omdat elementen visueel zijn geplaatst in plaats van geordend in de opmaak. Er opent een dialoog en Tab loopt door de pagina erachter, waardoor de sluitknop onbereikbaar blijft. En een menu dat alleen opengaat bij muisaanwijzing is simpelweg niet te bedienen.

Er moet daarnaast een manier zijn om herhaalde blokken over te slaan. Op een site met een grote kop drukt iemand anders op elke pagina twintig keer Tab voordat de inhoud begint. Een skiplink bestaat uit een paar regels en hoort bij de meest rendabele correcties die er zijn.

Hiervoor is geen schermlezer nodig. Tab, Enter, Escape en de pijltoetsen brengen de meeste ernstige problemen binnen tien minuten aan het licht.

Formulieren zijn de plek waar drempels direct geld kosten, omdat het formulier meestal de conversie is. De eisen zijn kort en weinig spectaculair, en vrijwel elke commerciële site overtreedt er minstens één.

Elk veld heeft een zichtbaar label nodig dat zichtbaar blijft. Hulptekst in het veld is geen label: die verdwijnt bij de eerste toetsaanslag en laat wie werd afgeleid raden. Bij elkaar horende velden hebben groepering nodig zodat een schermlezer ze als geheel aankondigt.

Foutmeldingen moeten zeggen wat te doen, niet wat er misging. "Ongeldige invoer" helpt niemand; "voer de datum in als DD-MM-JJJJ" wel. De melding moet bovendien worden aangekondigd, aan het veld gekoppeld zijn en bereikbaar, en daarop strandt een visueel fraai foutoverzicht bovenaan de pagina vaak.

Tijdslimieten verdienen vermelding omdat ze onzichtbaar zijn tot ze schaden. Een boekingsproces dat de sessie na tien minuten afbreekt sluit iedereen uit die langzamer leest of een schermlezer gebruikt, en die groep doet meetbaar langer over dezelfde route.

Overlay-widgets zoals AccessiBe of UserWay, die zwevende toegankelijkheidsknoppen die tegen een maandelijks abonnement directe naleving beloven, verdienen een rechtstreeks antwoord omdat ze juist aan website-eigenaren worden verkocht.

Ze maken een site niet toegankelijk en bieden nul juridische bescherming. Een overlay is een oppervlakkige JavaScript-laag over de bestaande code. Zo'n script kan de onderliggende DOM-structuur niet herstellen, kan geen correcte ARIA-rollen toewijzen en kan ontbrekende toetsenbordfocus of formulierfouten niet repareren. Wat een overlay wel doet, zoals contrast aanpassen of tekst vergroten, regelen gebruikers van hulptechnologie allang zelf in hun browser of besturingssysteem.

Geautomatiseerde scanners, en meer kan een overlay niet draaien, vangen maar een deel van de problemen af: zelfs het ruimste gepubliceerde cijfer, de dekkingsstudie van Deque zelf, komt op ongeveer 57 %. De rest, waaronder logische schermlezer-volgorde, formulierfoutmeldingen en dynamische dialoogfocus, vereist handmatige toetsing en semantische code.

Het praktische argument weegt zwaarder dan het theoretische. Gebruikers van schermlezers melden al jaren publiekelijk dat dergelijke overlays hun eigen hulptechnologie actief verstoren. Meer dan 800 toegankelijkheidsexperts hebben het Overlay Fact Sheet ondertekend om tegen het gebruik ervan te waarschuwen. Toezichthouders en gebruikers beoordelen de broncode, niet de zwevende widget.

Een bestaande site toetsen gaat in drie rondes, en de volgorde telt omdat elke ronde duurder is dan de vorige. Eerst een externe audit inkopen, vóór de gratis rondes, besteedt het grootste deel van het budget aan bevindingen die je zelf had kunnen verzamelen.

De eerste ronde is automatisch. Een browserextensie of een controleur op de opdrachtregel vindt contrast, ontbrekende alt-teksten en velden zonder label in minuten. Automatische gereedschappen vangen maar een deel van de echte problemen (ongeveer 57 % in de studie van Deque, minder volgens andere schattingen), dus een schoon rapport is het begin en niet het einde.

De tweede ronde is handmatig en gratis: de toetsenbordronde hierboven, plus de pagina met uitgeschakelde afbeeldingen en met 200 % zoom bekijken. Hier komen de structurele problemen boven die geen scanner ziet.

De derde is de expertbeoordeling met hulptechnologie, en die is het geld waard. Die dekt wat geen gereedschap detecteert: of de leesvolgorde klopt, of aankondigingen bruikbaar zijn, en of een taak daadwerkelijk af te ronden is. Koop die in ná de eerste twee rondes, niet ervoor.

Ingebouwd in een nieuwe site kost toegankelijkheid €0 extra. Palettoets, zichtbare focusstaten, gelabelde formuliervelden en semantische opbouw zijn ontwerpprincipes en geen meerwerk, mits een team modern werkt. Volgens onze gepubliceerde prijzen begint een toegankelijke landingspagina bij €1.500 en een complete bedrijfswebsite bij €4.500, met volledige WCAG 2.2 AA-naleving standaard inbegrepen.

Een bestaande website achteraf aanpassen vraagt daarentegen gericht herstelwerk. Eenvoudige ingrepen zoals kleurcontrast en ontbrekende alt-teksten kosten €500 tot €1.500. Structurele herstelwerkzaamheden, zoals het herbouwen van ontoegankelijke menu's, custom select-velden of modale dialoogvensters, liggen doorgaans op €1.500 tot €4.500, afhankelijk van de complexiteit van de sjablonen.

Het getal dat er het meest toe doet is de herstelverhouding. Een contrastprobleem dat in het ontwerpbestand wordt opgemerkt, vraagt vijf minuten. Hetzelfde probleem na livegang raakt elk sjabloon, het stijlsysteem en de kwaliteitscontrole. Prijzen zijn exclusief 21 % btw. Hoe dit in een compleet project past staat in onze gids over de bedrijfswebsite.

Zorginstellingen hebben te maken met extra strenge eisen voor toegankelijkheid en privacy, zoals beschreven in onze gids voor een website voor zorgpraktijken.

Gebruik onze EAA 2027 en WCAG 2.2 AA-checklist om uw sjablonen te toetsen en toegankelijke tokens in uw design system vast te leggen.