Toegankelijkheid van je website (WCAG): Waarom het belangrijk is
Stel je voor: je wilt een nieuwe laptop kopen. Je gaat naar een webshop, vindt het perfecte model en klikt op ‘In winkelmandje’. Maar er gebeurt niets. Je klikt nog een keer. Niets. Frustrerend, toch? Waarschijnlijk verlaat je de site binnen tien seconden en ga je naar de concurrent.
Voor miljoenen Nederlanders is dit geen incidentele frustratie, maar de dagelijkse realiteit. Iemand die blind is en een schermlezer gebruikt, loopt vast omdat de knop geen label heeft. Iemand die kleurenblind is, ziet het verschil niet tussen de rode ‘Annuleren’ knop en de groene ‘Bevestigen’ knop. Iemand met een motorische beperking kan niet door het menu navigeren omdat de muis noodzakelijk is.
Dit is waar website toegankelijkheid om draait. Het gaat erom dat iedereen, ongeacht beperking of situatie, jouw website kan gebruiken.
In dit artikel duik ik diep in de wereld van de WCAG-richtlijnen. Ik leg je uit wat het is, waarom het voor jou als ondernemer commercieel interessant is, en ik geef je 10 praktische tips die ik zelf dagelijks toepas om websites toegankelijker te maken.
Wat is WCAG?
De afkorting WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale standaard voor webtoegankelijkheid, opgesteld door het World Wide Web Consortium (W3C). Zie het W3C als de architecten van het internet; zij bepalen de regels waardoor browsers en websites wereldwijd dezelfde taal spreken.
De WCAG is geen wetboek dat je uit je hoofd hoeft te leren, maar een set richtlijnen om content waarneembaar, bedienbaar en begrijpelijk te maken.
De Drie Niveaus
De richtlijnen zijn opgedeeld in drie niveaus van conformiteit. Als ik een website bouw of optimaliseer, is het belangrijk om te weten waar we naar streven:
- Niveau A (Basis): Dit is het absolute minimum. Als je hier niet aan voldoet, is je website voor sommige groepen totaal onbruikbaar. Denk aan navigatie die alleen met een muis werkt.
- Niveau AA (De Standaard): Dit is de wereldwijde standaard en ook het niveau waar ik bij Marketing Maatwerk altijd op mik. Hierbij is je website goed toegankelijk voor de meeste mensen met een beperking. De Nederlandse overheid en semi-overheid zijn wettelijk verplicht om aan dit niveau te voldoen.
- Niveau AAA (Optimaal): Dit is de overtreffende trap. Denk aan gebarentaal-video’s bij alle audio-content. Dit is voor veel reguliere websites erg kostbaar en vaak niet haalbaar, tenzij je een specifieke doelgroep bedient.
De Vier Kernprincipes (POUR)
De WCAG is gebouwd op vier fundamentele principes. Ik gebruik vaak het acroniem POUR om ze te onthouden:
- Perceivable (Waarneembaar): Informatie mag niet onzichtbaar zijn voor de zintuigen. Een blinde gebruiker moet tekst kunnen ‘horen’ via software. Een dove gebruiker moet audio kunnen ‘lezen’ via ondertiteling.
- Operable (Bedienbaar): De interface moet werken. Je moet kunnen navigeren zonder muis, en je moet genoeg tijd krijgen om formulieren in te vullen.
- Understandable (Begrijpelijk): De informatie en de werking van de interface moeten logisch zijn. Geen jargon, voorspelbare navigatie en duidelijke foutmeldingen.
- Robust (Robuust): De code moet solide zijn zodat deze werkt op verschillende browsers, apparaten en met hulpmiddelen zoals screenreaders.
Waarom Toegankelijkheid Belangrijk Is
Misschien denk je: “Maar Boris, mijn doelgroep heeft geen beperking.” Dat is een gevaarlijke aanname. Ongeveer 15% van de wereldbevolking heeft een vorm van handicap. In Nederland hebben ruim 4 miljoen mensen moeite met het gebruik van internet en computers.
Er zijn drie hoofdredenen waarom ik hamer op toegankelijkheid:
1. De Ethische en Maatschappelijke Reden
Het internet is tegenwoordig net zo essentieel als gas, water en licht. We regelen onze bankzaken, doen boodschappen en maken afspraken online. Door je website niet toegankelijk te maken, sluit je actief een grote groep mensen uit van deelname aan de maatschappij. Een toegankelijke website maken is simpelweg het juiste om te doen.
2. De Commerciële Voordelen
Toegankelijkheid is geen liefdadigheid; het is een slimme business move.
- Groter Bereik: Als 15% van de bevolking jouw site niet kan gebruiken, loop je 15% potentiële omzet mis. Deze groep heeft een enorme koopkracht.
- Betere SEO: Google is in feite een blinde bezoeker. De zoekmachine ‘ziet’ geen plaatjes, maar leest code. Veel optimalisaties voor toegankelijkheid (zoals duidelijke koppenstructuren en alt-teksten) zijn direct goed voor je vindbaarheid.
- Betere Gebruikerservaring (UX): Toegankelijkheid verbetert de ervaring voor iedereen. Duidelijk contrast en simpele taal zijn prettig voor iedereen, niet alleen voor mensen met een beperking.
3. De Juridische Realiteit
In Nederland geldt het ‘Besluit digitale toegankelijkheid overheid’, wat overheidsinstanties verplicht om aan niveau AA te voldoen. Maar er komt meer aan. De European Accessibility Act (EAA) wordt in 2025 van kracht. Deze wet verplicht ook veel commerciële bedrijven (vooral e-commerce en diensten) om hun digitale producten toegankelijk te maken. Het is verstandig om daar nu al op voor te sorteren.
Verschillende Type Beperkingen
Wanneer ik praat over beperkingen, denk ik niet alleen aan blindheid. Het spectrum is veel breder:
- Visueel: Blind, slechtziend, maar ook kleurenblindheid (1 op de 12 mannen!).
- Auditief: Doof of slechthorend.
- Motorisch: Mensen die geen muis kunnen vasthouden door bijvoorbeeld reuma of een dwarslaesie.
- Cognitief: Dyslexie, laaggeletterdheid of concentratieproblemen.
- Tijdelijk & Situationeel: Dit vergeten we vaak. Iemand met een gebroken arm kan tijdelijk geen muis gebruiken. Iemand die in de felle zon op zijn telefoon kijkt, is situationeel slechtziend. Een toegankelijke site helpt hen allemaal.
10 Praktische WCAG-Richtlijnen Die Ik Altijd Toepas
Toegankelijkheid kan technisch en overweldigend klinken. Toch zijn de meeste verbeteringen heel praktisch. Hier zijn 10 richtlijnen die ik standaard toepas in mijn projecten bij Marketing Maatwerk.
1. Alt-teksten voor afbeeldingen
Screenreaders (software die de tekst op het scherm voorleest) kunnen geen plaatjes zien. Met een ‘alternatieve tekst’ beschrijf je wat er op de afbeelding te zien is.
- Fout:
IMG_2043.jpgof “afbeelding”. - Goed: “Boris Kusters aan het werk achter een laptop met WordPress code op het scherm”. Dit is niet alleen essentieel voor blinden, maar vertelt ook aan Google waar de afbeelding over gaat. Dubbele winst dus.
2. Voldoende Kleurcontrast
Tekst moet leesbaar zijn tegen de achtergrond. WCAG niveau AA eist een contrastverhouding van minimaal 4.5:1 voor normale tekst. Ik zie vaak lichtgrijze tekst op een witte achtergrond. Dat ziet er misschien ‘strak’ uit in een design, maar is onleesbaar voor slechtzienden of ouderen. Ik zorg altijd voor harde contrasten. Zwart op wit, donkerblauw op lichtgrijs.
3. Toetsenbordnavigatie
Dit is mijn favoriete test. Gooi je muis aan de kant en probeer je website te bedienen met alleen de Tab toets (om vooruit te gaan) en Enter (om te klikken). Kun je bij elk menu-item? Kun je een formulier invullen en verzenden? Veel mensen met een motorische beperking zijn volledig afhankelijk van het toetsenbord.
4. Duidelijke Focus Indicatoren
Als je met de Tab toets door een site navigeert, moet je kunnen zien waar je bent. Standaard browsers zetten een blauw randje om de geselecteerde knop of link. Veel designers vinden dit randje lelijk en zetten het uit in de CSS (outline: none). Doe dit nooit! Zonder focus indicator is een toetsenbordgebruiker verdwaald. Ik zorg juist voor een duidelijke, opvallende focus-stijl die past bij het design.
5. Formulierlabels en Foutmeldingen
Niets is frustrerender dan een formulier dat niet verstuurt, zonder dat je weet waarom.
- Labels: Elk invulveld moet een duidelijk label hebben dat er permanent bij staat (niet zo’n tekstje in het veld dat verdwijnt zodra je begint met typen).
- Foutmeldingen: Geef niet alleen een rood randje, maar zeg in tekst wat er mis is. Bijvoorbeeld: “Het e-mailadres mist een @-teken”.
6. Heading Hiërarchie (H1-H6)
Koppen zijn er niet alleen om tekst groot of dikgedrukt te maken. Ze geven structuur. Screenreader-gebruikers ‘scannen’ een pagina vaak door van kop naar kop te springen.
- Gebruik één H1 voor de hoofdtitel.
- Gebruik H2 voor de belangrijkste secties.
- Gebruik H3 voor sub-secties onder een H2. Sla geen niveaus over (van H2 naar H4) alleen omdat je de lettergrootte mooier vindt. Dat pas ik wel aan in de CSS.
7. Linkteksten met Context
“Klik hier” of “Lees meer” zijn betekenisloze links. Als een screenreader-gebruiker een lijst met alle links opvraagt, horen ze tien keer “Klik hier”. Waar gaat dat heen? Ik schrijf links altijd beschrijvend:
- Slecht: “Voor meer informatie over SEO, [klik hier].”
- Goed: “Lees meer over [mijn SEO diensten].”
8. Video’s met Ondertiteling en Transcripties
Video is een krachtig medium, maar ontoegankelijk voor doven en slechthorenden zonder ondertiteling. Bovendien kijkt 85% van de mensen op social media video’s zonder geluid. Ondertiteling is dus essentieel voor iedereen. Voor blinden is het belangrijk dat visuele informatie wordt uitgesproken, of dat er een transcriptie (uitgeschreven tekst) beschikbaar is.
9. Consistente Navigatie
Zorg dat je menu, zoekbalk en footer op elke pagina op dezelfde plek staan en op dezelfde manier werken. Voorspelbaarheid is cruciaal voor mensen met cognitieve beperkingen. Als je menu op de homepage rechtsboven zit, en op de contactpagina ineens links, raakt de gebruiker in de war.
10. Voldoende Tijd
Heb je wel eens meegemaakt dat je concertkaartjes wilde bestellen en een teller van 2 minuten zag aflopen? Voor mensen die meer tijd nodig hebben om te lezen of te typen, of die hulpmiddelen gebruiken, is dit funest. Vermijd tijdslimieten waar mogelijk, of geef de gebruiker een makkelijke manier om de tijd te verlengen.
Tools Om Toegankelijkheid Te Testen
Je hoeft niet te gissen of je site toegankelijk is. Er zijn geweldige tools beschikbaar die ik ook gebruik bij mijn audits.
Gratis Browser Extensies
- WAVE (Web Accessibility Evaluation Tool): Een extensie voor Chrome en Firefox. Het injecteert iconen in je pagina die precies aangeven waar fouten zitten, zoals ontbrekende alt-teksten of slechte contrasten.
- Lighthouse: Zit standaard ingebouwd in Google Chrome (F12 > Lighthouse). Het geeft je een score van 0 tot 100 voor toegankelijkheid en tips voor verbetering.
Online Scanners
- WebAIM Color Contrast Checker: Hier kun je twee kleuren invoeren (voorgrond en achtergrond) en de tool vertelt je direct of je voldoet aan de eisen voor niveau AA.
Handmatige Tests
Let op: geautomatiseerde tools vinden slechts 30% tot 40% van de fouten. Ze kunnen bijvoorbeeld zien dat een afbeelding een alt-tekst heeft, maar niet of die tekst slaat op de afbeelding (“afbeelding123” wordt goedgekeurd door de tool, maar is fout voor de gebruiker). Daarom test ik ook altijd handmatig:
- Navigeren met het toetsenbord.
- De pagina vergroten tot 200% (blijft alles leesbaar?).
- Schermlezer-software zoals NVDA (gratis) gebruiken om te horen wat de site ‘zegt’.
Toegankelijkheid in Mijn Workflow
Bij Marketing Maatwerk is toegankelijkheid geen extraatje dat ik er aan het einde nog even tegenaan plak. Het zit in het fundament van mijn proces.
Als ik begin met een Gratis Website Aanvragen of een Maatwerk traject, houd ik vanaf het eerste design rekening met kleurcontrasten en lettergroottes. Tijdens het bouwen (development) zorg ik voor schone, semantische code die screenreaders begrijpen.
Ik geloof dat een website pas echt ‘af’ is als iedereen hem kan gebruiken. Het is zonde om te investeren in design en techniek als je vervolgens de deur dichtgooit voor een grote groep potentiële klanten.
Wil je weten hoe jouw huidige website ervoor staat? Ik kan een snelle scan voor je uitvoeren. Vaak zijn er met kleine aanpassingen al grote stappen te maken richting niveau AA. Stuur me gerust een berichtje via in**@***************rk.nl.
Conclusie
Website toegankelijkheid (WCAG) is in 2025 geen optie meer, maar een basisvoorwaarde voor een professionele website. Het is ethisch juist, het is commercieel slim en het wordt juridisch steeds belangrijker.
Laat je niet afschrikken door de technische termen. Begin bij de basis: zorg voor goede contrasten, beschrijf je afbeeldingen en test je site eens zonder muis. Je zult zien dat deze aanpassingen je website beter maken voor iedereen.
Digitale toegankelijkheid is een proces, geen eindbestemming. Het gaat erom dat je je bewust bent van de drempels en deze stap voor stap wegneemt.
Ik help je graag om jouw website WCAG-proof te maken. Of je nu een nieuwe site wilt laten bouwen die direct goed in elkaar zit, of je bestaande site wilt verbeteren: ik sta voor je klaar.
Boris van Marketing Maatwerk Email: in**@***************rk.nl Telefoon: +31 6 34218964
Verder komen dan lezen
Benieuwd wat dit voor jouw site betekent?
In een half uur kijken we samen naar wat je nu hebt, wat er mist en wat het zou kosten. Geen verkooppraatje, en je zit nergens aan vast.
Meer uit de kennisbank
Schijfruimte analyseren en opschonen: Wat te doen als je pakket vol zit?
Je schijfruimte zit vol door oude emails (60% van de gevallen), vergeten backups of error logs. Check eerst…
Lees verderServermeldingen in Slack: Stop met handmatig controleren
Koppel het Marketing Maatwerk Panel aan Slack via Integrations → Slack → Authorize. Maak een dedicated #server-alerts kanaal…
Lees verderVerborgen bestanden (.htaccess) bewerken: De verkeerstoren van je server
Elke WordPress-website heeft een onzichtbare regelaar die op de achtergrond werkt: het .htaccess bestand. Dit bestand geeft instructies…
Lees verderLiever meteen concreet?
Plan een gratis gesprek.
Een half uur, geen verkooppraatje. We kijken wat je nu hebt, wat je mist en wat het zou kosten.
Uitgebreider: dan weet ik vooraf waar we het over hebben.