De WCAG, een introductie

De WCAG, wat is dat eigenlijk?

De WCAG is een set richtlijnen, bedoeld om de toegankelijkheid van websites en applicaties te garanderen. WCAG staat voor Web Content Accessibility Guidelines, oftewel Webinhoud Toegankelijkheidsrichtlijnen.

“Inhoud” moet je breed opvatten. Het gaat niet alleen om tekst en afbeeldingen, maar om alles wat een gebruiker tegenkomt:

• Tekst en afbeeldingen
• Video en audio
• Tabellen en grafieken
• Formulieren en navigatie
• Checkout flows en interactieve componenten

En “website” is ook breder: het gaat om websites én applicaties, voor web én mobiel.

Welke sites moeten voldoen aan de WCAG?

Sinds 2018 moeten (semi-)overheidssites en organisaties die voor een belangrijk deel door de overheid worden gefinancierd, aan de WCAG voldoen.

Vanaf juni 2025 zijn daar de grotere webshops bij gekomen. De regelgeving definieert een webshop als een site of applicatie waar een consument een overeenkomst met een leverancier kan afsluiten. De verplichting geldt als:

• De jaaromzet €2 miljoen of meer is, en/of
• Er 10 of meer FTE aan de website werken

En voldoen al die websites en applicaties ook aan de WCAG?

Nee, dat niet. De jaarlijkse WebAIM Million-studie, die een miljoen homepages analyseert, laat zien dat 95,9% van de sites WCAG-fouten heeft. Zeker bij commerciële partijen valt er vaak nog winst te behalen.

Meer cijfers in het WebAIM Million-rapport.

Maar werkt de WCAG eigenlijk wel?

Ja, die werkt op zich prima. De richtlijnen geven een helder kader dat in de praktijk goed toepasbaar is.

Dat betekent niet dat alles perfect is. Maar doordat veel organisaties zich aan de WCAG (moeten) houden, is de toegankelijkheid van websites in het algemeen er flink op vooruitgegaan. Er is nog ruimte voor verbetering, maar de richting is duidelijk.

Natuurlijk blijven er sites die niet voldoen. Maar de algehele toegankelijkheid van het web is er merkbaar op vooruitgegaan.

Maar het is natuurlijk ook een hoop gedoe?

Eigenlijk valt dat wel mee. Er zijn drie talen waarmee webpagina’s worden gemaakt: HTML, CSS en JavaScript. Bij die drie talen is heel goed nagedacht over toegankelijkheid.

HTML geeft de betekenis (semantiek) van de inhoud aan. Als je dat correct doet, ben je al heel ver. Een concreet voorbeeld: in plaats van een generiek <div>-element dat je met JavaScript aanklikbaar maakt, kun je beter een <button> gebruiken. Die is van zichzelf aanklikbaar, want het is specifiek bedoeld voor die functie en betekenis.

Met deze ene keuze los je direct meerdere toegankelijkheidsissues in één keer op:

• Toetsenbordbediening (Enter en Spatie werken automatisch)
• Focus-indicator (de knop krijgt standaard een omlijning bij navigatie)
• Schermlezer-ondersteuning (wordt correct aangekondigd als “knop”)
• Rol en naam (de functie is duidelijk voor hulptechnologieën)

Vier vliegen in één klap. Een groot en heel eenvoudig te verkrijgen voordeel van semantisch HTML.

CSS gebruik je om dat netjes en toegankelijk op te maken. Je moet wel even opletten met bepaalde properties, zie mijn blog over aandachtspunten voor je CSS-code, maar in het algemeen helpt goede CSS je om een toegankelijke layout en opmaak te creëren.

JavaScript kan de toegankelijkheid ondersteunen en is soms zelfs noodzakelijk. Een goed toegankelijk menu kan niet zonder een correct toegevoegd stukje JavaScript.

Weten wat je doet

Je hebt natuurlijk kennis nodig, maar de implementatie in HTML, CSS en JavaScript is in de basis best eenvoudig. Het gaat erom dat je bewust keuzes maakt en weet waarom je iets doet.

Rekening houden vanaf het begin

Het is slim om al bij het ontwerp en bij de bouw rekening te houden met toegankelijkheid. Dan is de implementatie relatief eenvoudig.

Achteraf toegankelijkheid inbouwen kan veel werk met zich meebrengen. Denk aan een hele navigatie die je moet herschrijven, een formulier dat je opnieuw moet structureren of binnen je CMS de mogelijkheden voor koppen of alternatieve teksten toe te voegen. Voorkomen is makkelijker dan genezen.

En wat levert het op?

Een toegankelijke website is goed voor de inclusiviteit en diversiteit van je doelgroep. Je houdt rekening met meer mensen die op verschillende manieren jouw inhoud en interface tot zich nemen en bedienen. Dat is op zichzelf al heel waardevol.

Maar er liggen zeker ook commerciële kansen: grotere doelgroep, hogere conversie, betere UX en SEO.

Grotere doelgroep

Je bereikt meer bezoekers en potentiële klanten. Er zijn in Nederland meer dan 2 miljoen mensen met een visuele, auditieve, motorische of cognitieve beperking, en zij maken een aanzienlijk deel van de bevolking uit. Door je site toegankelijk te maken, sluit je deze groep niet uit.

Hogere conversie

Een toegankelijke interface werkt fijner voor alle gebruikers, niet alleen voor mensen met een beperking. Duidelijke navigatie, goede contrasten en logische formulieren zorgen ervoor dat bezoekers sneller vinden wat ze zoeken en makkelijker tot actie overgaan.

Een toegankelijke checkout flow leidt bijvoorbeeld tot minder afgebroken bestellingen. Minder frictie betekent meer completed orders.

Betere UX voor iedereen

Van een beter, toegankelijker ontwerp profiteert iedereen. Voorbeeld: een duidelijke beschrijving hoe een formulierveld ingevuld moet worden, is niet alleen goed voor mensen met een beperking, maar voor iedere gebruiker. Duidelijke knoppen, leesbare teksten, heldere foutmeldingen, voorspelbare navigatie – het komt alle bezoekers ten goede. Een betere gebruikerservaring leidt natuurlijk ook tot een hogere conversie.

Betere SEO

Veel toegankelijkheidsmaatregelen helpen ook je vindbaarheid in zoekmachines. Semantische HTML, goede koppenstructuur, alt-teksten bij afbeeldingen en duidelijke linkteksten – het zijn allemaal factoren die zowel toegankelijkheid als SEO ten goede komen.

Aan de slag, hoppakee, in 5 stappen

Je vraagt je misschien af: Oké top, dit wil ik. Maar waar begin ik? Hier zijn vijf concrete acties om mee te starten:

1. Doe een eerste (maar beperkte) automatische controle

   Test een pagina op wave.webaim.org of installeer de browser plug-in. De W3C heeft ook een lijst met automatische testtools.

2. Controleer je inhoud op een aantal basiscriteria

   Doe een eerste controle op toegankelijkheid of loop je pagina’s eens na op een aantal easy checks (W3C), zoals de koppenstructuur, kleurcontrasten en alt-teksten bij afbeeldingen. Dit is vaak laaghangend fruit dat direct verschil maakt.

3. Check of alles met toetsenbord te bedienen is

   Kun je navigeren, formulieren invullen, en acties uitvoeren zonder muis?

4. Test je site met een schermlezer

   Installeer NVDA (Windows, gratis) of gebruik VoiceOver (Mac, ingebouwd). Luister hoe je site klinkt en hoe je die kunt bedienen.

5. Betrek gebruikers met een beperking bij je volgende testronde

   Niets vervangt echte feedback van mensen die dagelijks met toegankelijkheid te maken hebben.

Hierna kun je voor jouw organisatie toegankelijkheid borgen in het ontwerp- en ontwikkelproces.

Tot slot

Toegankelijkheid is niet een lastige verplichting maar een kans om je site en app voor iedereen beter te maken. Bezoekers met én zonder beperking profiteren ervan.

Begin klein, leer gaandeweg en integreer stap voor stap je eigen ervaringen in je ontwerp- en ontwikkelproces. Je zult merken dat het meevalt. Het hoeft niet allemaal in een keer, gun jezelf de tijd om verbeteringen door te voeren. De WCAG geeft de richting, maar je bepaalt zelf het tempo en de uitvoering. En onderweg kom je erachter dat goede toegankelijkheid gewoon kwalitatief goed werk is.

Meer weten?

Ik geef regelmatig trainingen over WCAG-richtlijnen en help teams met het inbedden van toegankelijkheid in hun ontwikkelproces. Neem gerust contact op via LinkedIn voor de mogelijkheden.