Wat is WCAG en hoe pas je het toe op je website?

Wat is WCAG?

WCAG is de internationale standaard voor digitale toegankelijkheid, ontwikkeld binnen het W3C (de organisatie achter veel webstandaarden). Je kunt het zien als een praktische meetlat: als je website voldoet, is de kans groot dat hij bruikbaar is voor mensen met verschillende beperkingen, zoals visueel, auditief, motorisch of cognitief. Maar WCAG is net zo relevant voor “gewone” situaties, zoals een gebarsten scherm, een trage verbinding of een bezoeker die je video zonder geluid wil volgen.

De WCAG-richtlijnen zijn gebouwd op vier principes die vaak worden afgekort als POUR: Perceivable (Waarneembaar), Operable (Bedienbaar), Understandable (Begrijpelijk) en Robust (Robuust). Informatie moet waarneembaar zijn (bijvoorbeeld door voldoende contrast en tekstalternatieven), de website moet bedienbaar zijn (ook zonder muis), de inhoud moet begrijpelijk zijn (duidelijk en voorspelbaar) en de techniek moet robuust zijn (zodat hulpmiddelen en browsers de pagina kunnen interpreteren, nu en later).

WCAG kent drie niveaus: A, AA en AAA. Niveau A haalt de grootste blokkades weg; AA is de meest gebruikte norm en vaak het niveau waar wetgeving en organisaties op sturen; AAA is het strengst en in de praktijk niet altijd volledig haalbaar voor een complete website. Voor de meeste organisaties is “WCAG 2.1 AA” een realistisch en goed doel. WCAG 2.2 is inmiddels gepubliceerd en voegt vooral verbeteringen toe die helpen bij toetsenbordgebruik, focus en mobiele interactie. Als je nu iets nieuws bouwt, is het slim om die verbeteringen alvast mee te nemen.

Waarom toegankelijkheid loont

Toegankelijkheid wordt soms gezien als een verplicht nummertje, maar in de praktijk is het vooral een kwaliteitsverbetering. Je bereikt meer mensen, omdat je geen drempels opwerpt voor gebruikers met een beperking. Tegelijkertijd wordt je site vaak prettiger voor iedereen: duidelijke navigatie, logische formulieren en goed leesbare tekst zijn onderdeel van een sterke UX.

Ook technisch levert het voordelen op. Websites die goed zijn opgebouwd (met structuur in koppen, betekenisvolle linkteksten en schone HTML) zijn niet alleen beter voor schermlezers, maar vaak ook beter te begrijpen voor zoekmachines. Daardoor lopen toegankelijkheid en SEO regelmatig gelijk op. En dan is er nog het zakelijke aspect: toegankelijkheid voorkomt klachten, supportvragen en imagoschade, zeker in sectoren waar dienstverlening en betrouwbaarheid belangrijk zijn.

WCAG in de praktijk

De grootste winst zit in het consequent toepassen van een paar basisprincipes. Denk in drie lagen: het ontwerp moet leesbaar en voorspelbaar zijn, de content moet helder en goed gestructureerd zijn, en de code moet semantisch kloppen zodat technologie de juiste betekenis kan afleiden.

Eerst zien, dan klikken

Toegankelijk ontwerp begint bij contrast. Veel moderne webdesigns gebruiken subtiele grijstinten en lichte kleuren. Dat kan mooi zijn, maar als je contrast te laag is, wordt lezen inspannend of zelfs onmogelijk. Zeker voor slechtzienden, maar ook voor bezoekers op mobiel in fel licht. Als vuistregel kun je aanhouden dat tekst duidelijk moet afsteken tegen de achtergrond. Bij twijfel test je het met een contrast checker, liefst al in je ontwerpfase.

Daarnaast helpt het enorm als je ontwerp voorspelbaar is. Wanneer navigatie-elementen op elke pagina op dezelfde plek staan en knoppen consistent worden vormgegeven, hoeft niemand telkens opnieuw uit te zoeken hoe de website werkt. Dit is extra belangrijk voor mensen met cognitieve uitdagingen, maar ook voor iedereen die snel wil scannen. 

Maak ook ruimte voor focus: een toetsenbordgebruiker beweegt met Tab door de pagina en moet kunnen zien waar hij is. In veel designs wordt de focus-indicator per ongeluk “weg-gestyled” omdat het niet mooi zou zijn. In plaats daarvan is de betere aanpak om focus juist een zichtbaar en netjes onderdeel van je design te maken.

Wees tot slot bewust van beweging en autoplay. Een pagina die direct geluid afspeelt, is voor veel gebruikers vervelend en voor screenreader-gebruikers ronduit chaotisch. Flitsende animaties kunnen zelfs risico’s opleveren. Animatie kan prima, maar geef gebruikers controle en houd het rustig.

Content die iedereen kan volgen

Toegankelijke content begint met begrijpelijke taal. Dat betekent niet dat je alles kinderachtig moet maken, maar wel dat je lange, ingewikkelde zinnen en overbodig jargon vermijdt. Schrijf je teksten zo dat iemand snel kan scannen en meteen snapt wat de bedoeling is. Een duidelijke structuur met koppen en alinea’s helpt daarbij. Voor screenreader-gebruikers zijn koppen extra belangrijk, omdat zij vaak per kop door een pagina navigeren in plaats van alles lineair te beluisteren.

Afbeeldingen verdienen speciale aandacht. Als een afbeelding informatie overbrengt (bijvoorbeeld een productfoto, grafiek of illustratie die iets uitlegt) dan heeft die een alt-tekst nodig die beschrijft wat relevant is. Decoratieve afbeeldingen kun je juist “stil” maken met een lege alt-tekst, zodat hulpmiddelen ze overslaan. Daarmee voorkom je dat iemand door een reeks irrelevante “sfeerplaatjes” heen moet.

Video en audio zijn vaak de plekken waar toegankelijkheid vergeten wordt. Toch is het principe simpel: wat je alleen in beeld of alleen in geluid aanbiedt, moet ook in tekst beschikbaar zijn. In de praktijk betekent dit meestal ondertiteling bij video’s en een transcript of samenvatting bij audio. Het mooie is datdie tekst niet alleen toegankelijk is, maar ook herbruikbaar in je contentstrategie.

Ook kleine dingen maken verschil. Linkteksten zoals “klik hier” zijn bijvoorbeeld voor screenreader-gebruikers weinig waard, omdat zij losse linklijsten kunnen opvragen. Een link moet daarom bij voorkeur uit zichzelf duidelijk maken waar hij naartoe gaat of wat je krijgt als je klikt.

Toegankelijkheid begint in de markup

Aan de technische kant is semantische HTML vaak de snelste weg naar betere toegankelijkheid. Als je koppen echte heading-tags zijn, knoppen echte buttons, en navigatie in duidelijke structuurelementen staat, kunnen hulpmiddelen de pagina begrijpen zoals jij hem bedoeld hebt. Veel problemen ontstaan wanneer developers “klikbare divs” bouwen die er wel uitzien als knop, maar zich niet gedragen als knop. Dat werkt visueel, maar niet betrouwbaar voor toetsenbordbediening en screenreaders.

Toetsenbordbediening is een praktische graadmeter. Kun je alle interactieve onderdelen bereiken met tab? Kun je ze bedienen met enter of spatie? En kun je nergens “vast” komen te zitten, bijvoorbeeld in een modal? Als dat goed zit, ben je vaak al een eind op weg. Voor icon-only knoppen (zoals een zoek-icoon) is het belangrijk dat er een toegankelijke naam is, bijvoorbeeld via een aria-label. Een aria-label is een HTML-attribuut dat een onzichtbare, tekstuele omschrijving toevoegt aan interactieve elementen (zoals knoppen, links of formulieren) voor schermlezers. ARIA kan dus nuttig zijn, maar de beste aanpak blijft: gebruik eerst native HTML-elementen die al toegankelijk zijn, en vul alleen aan waar het nodig is.

Een vaak vergeten maar simpele stap is het instellen van de taal van de pagina in de HTML (lang=”nl”). Dat helpt screenreaders om woorden correct uit te spreken en voorkomt vreemd “robot-Engels” op een Nederlandstalige site.

Werkt je website echt voor iedereen?

Toegankelijkheid testen werkt het beste in lagen. Automatische tools zijn handig om snel technische issues te vinden, maar ze zien lang niet alles. Denk aan Lighthouse in Chrome, of extensies zoals WAVE en axe. Daarmee vind je vaak al ontbrekende alt-teksten, te lage contrasten of formuliervelden zonder labels.

Daarna komt de eenvoudige, maar enorm waardevolle handmatige check: navigeer je site alleen met het toetsenbord. Als je dit één keer goed doet, ontdek je bijna altijd plekken waar focus onduidelijk is of waar knoppen niet bereikbaar zijn. Als je nog een stap verder wilt gaan, test dan een pagina met een screenreader (bijvoorbeeld VoiceOver op Mac of NVDA op Windows). Je hoeft geen expert te worden, want het doel is vooral ervaren of de structuur logisch voelt en of knoppen en formulieren begrijpelijk worden aangekondigd.

Wil je echt zekerheid, dan blijft gebruikerstesten met mensen die dagelijks hulpmiddelen gebruiken de meest waardevolle stap. Dat levert vaak inzichten op waar tools niet bij kunnen.

Toegankelijkheid als vast onderdeel van je proces

Toegankelijkheid wordt pas echt makkelijk als je het ziet als onderdeel van je standaard manier van werken. Dat begint met afspraken: bij design reviews check je contrast en focus-states, bij contentpublicatie check je koppenstructuur en alt-teksten, en bij development is toetsenbordbediening onderdeel van de oplevering. Als je met een design system of component library werkt, loont het om je componenten één keer goed toegankelijk te maken, zodat iedereen ze daarna veilig hergebruikt. 

Plan daarnaast af en toe een kort auditmoment om regressies te voorkomen. Eén kleine check per kwartaal is vaak al genoeg om problemen vroeg te vangen.

De kern van digitale toegankelijkheid

WCAG en webtoegankelijkheid lijken op papier complex, maar in de praktijk komt het vaak neer op helderheid, structuur en goed gebruik van standaarden. Wanneer je zorgt voor leesbare content, voorspelbare interactie, toetsenbordbediening en semantische code, maak je je website niet alleen toegankelijker, maar ook prettiger, professioneler en toekomstbestendiger.

Wil je weten waar jouw website nu staat, of wil je praktische hulp om WCAG-verbeteringen door te voeren in design, content of code? Plan dan een vrijblijvend kennismakingsgesprek en kijk samen met ons naar de mogelijkheden.