Wat is WCAG? Een complete introductie voor organisaties
Wat is WCAG? Een complete introductie voor organisaties
WCAG wordt vaak technisch en abstract behandeld, waardoor implementatie op productiesites en apps misgaat: onvolledige ARIA, ontbrekende keyboard support, onleesbare contrasten en dynamische content zonder live-regions zijn dagelijkse problemen. Dit artikel richt zich op praktische, testbare oplossingen die developers, designers en redacties direct kunnen toepassen.
Wij geven concrete codevoorbeelden, checklisten en testinstructies zodat je zonder interpretatievragen aan de slag kunt. Test je site direct met onze WCAG checker/validator, download onze plugin via Download plugin en neem contact op via Contactformulier (reactie binnen 24 uur).
Het probleem in de praktijk
Vaak voorkomende fouten
- Semantiek vervangen door divs zonder roles.
- Buttons als anchors zonder keyboard/ARIA.
- Forms zonder expliciete labels en foutafhandeling met alleen visuele hints.
- Onvoldoende focus-styling en geen skip-links.
- Dynamische content ontbreekt in accessible tree (geen aria-live).
- Kleurcontrasten getest op gevoel, niet kwantitatief.
Waarom dat leidt tot faalgevallen
Screenreaders en toetsenbordgebruikers vertrouwen op semantiek, focus-orde en live-updates. Ontbreekt dat, dan is functionaliteit onbruikbaar. Ook SEO en juridische risico’s spelen mee. Wij lossen dat op met concrete patterns en test-cases.
Zo los je dit op in code
1) Gebruik juiste semantiek en landmarks
Praktische regel: laat zoveel mogelijk default HTML-elementen spreken. Landmarks helpen screenreader-gebruikers en versnellen navigatie.
<header role="banner"><!-- logo, nav --></header><main role="main"><!-- content --></main><nav role="navigation" aria-label="Hoofdmenu"><ul><li><a href="/">Home</a></li></ul></nav><footer role="contentinfo"></footer>2) Skip-link: direct en zichtbare focus
Een skip-link die alleen bij focus zichtbaar wordt is voldoende en vereist bijna geen JS.
<a class="skip-link" href="#main">Sla navigatie over</a><!-- CSS --><style>.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:static;width:auto;height:auto;left:0;background:#000;color:#fff;padding:0.5rem;z-index:1000}</style>3) Buttons en links: correct gebruik
Gebruik <button> voor acties en <a> voor navigatie. Gekke hacks breken keyboard en AT-verwachtingen.
<!-- correct --><button type="button" onclick="doAction()">Bewaar</button><!-- onjuist --><a role="button" href="#" onclick="doAction();return false;">Bewaar</a>4) Forms: labels, validation en aria-describedby
Zorg dat iedere input een expliciet label heeft. Toon foutmeldingen met aria-live en verwijs met aria-describedby.
<label for="email">E-mail</label><input id="email" name="email" type="email" aria-describedby="email-help email-error"><div id="email-help">We gebruiken je e-mail alleen voor updates.</div><div id="email-error" role="alert" aria-live="polite"></div>5) Focus management voor modals en dialogs (testable)
Trap focus in een modal en restore focus bij sluiten. Kort maar werkend voorbeeld:
<!-- HTML --><button id="open">Open modal</button><div id="modal" role="dialog" aria-modal="true" aria-hidden="true"><button id="close">Sluit</button></div><!-- JS --><script>const open=document.getElementById('open');const modal=document.getElementById('modal');const closeBtn=document.getElementById('close');let lastFocus=null;open.addEventListener('click',()=>{lastFocus=document.activeElement;modal.removeAttribute('aria-hidden');const focusable=modal.querySelectorAll('button,a,input,select,textarea,[tabindex]:not([tabindex=\"-1\"])');focusable[0].focus();document.addEventListener('focus',trap,true);});closeBtn.addEventListener('click',()=>{modal.setAttribute('aria-hidden','true');document.removeEventListener('focus',trap,true);if(lastFocus)lastFocus.focus();});function trap(e){if(!modal.contains(e.target)){e.stopPropagation();modal.querySelector('button, a, input').focus();}}6) Dynamische content: aria-live en polite/assertive
Gebruik aria-live voor status-updates. Stel juiste assertive/polite in afhankelijk van urgentie.
<div id="status" aria-live="polite"></div><script>document.getElementById('status').textContent='Bestand geüpload';</script>7) Contrast controleren met een kleine JS-functie
Gebruik deze helper om contrast ratio te berekenen tijdens development.
<script>function luminance(r,g,b){[r,g,b]=[r,g,b].map(v=>{v/=255;return v<=0.03928?v/12.92:Math.pow((v+0.055)/1.055,2.4);});return 0.2126*r+0.7152*g+0.0722*b;}function contrast(rgb1,rgb2){const L1=luminance(...rgb1);const L2=luminance(...rgb2);return (Math.max(L1,L2)+0.05)/(Math.min(L1,L2)+0.05);}console.log('Contrast',contrast([255,255,255],[51,102,153]));</script>Checklist voor developers
- Gebruik semantische HTML: header, nav, main, footer, article, section.
- Elk form-element heeft een <label> of aria-label/aria-labelledby; test met keyboard-only.
- Tabvolgorde volgt visuele flow; test met tab/shift+tab.
- Alle interactieve elementen zijn reachable en hebben zichtbare focus (outline of focus-visible).
- Contrast >= 4.5:1 (tekst) en 3:1 voor grote tekst; check met onze checker.
- Dynamische updates gebruiken aria-live of role=status; modals gebruiken aria-modal en focustrap.
- Afbeeldingen hebben alt-teksten; pure decoratieve images krijgen alt=\"\".
- ARIA niet gebruiken als je semantiek kunt gebruiken; vermijd aria-* hacks.
Tips voor designers en redacties
Headings en content-structuur
Gebruik één H1 per pagina, logische hiërarchie (H2 -> H3). Headings zijn navigatiepunten voor schermlezers.
Beeld en alternatieve tekst
Schrijf alt-teksten die functie en context beschrijven, niet visuele details zonder relevantie. Voor productfoto's: 'Rode trui maat M, merk X'. Voor decoratie: lege alt.
Kleur en contrast
Ontwerp met een toegewezen contraststap: start op een kleurenset die voldoet aan 4.5:1 voor body-tekst. Gebruik design tokens en variabelen zodat developers makkelijk kunnen controleren.
Linktekst en call-to-actions
Gebruik beschrijvende linktekst: 'Lees meer over cookies' i.p.v. 'klik hier'. Zorg dat CTA's unieke tekst hebben voor screenreader users.
Hoe test je dit?
Automatisch testen
1) Draai onze WCAG checker/validator op je productiepagina. 2) Integreer onze plugin (CI/CD) via Download plugin voor continue monitoring. 3) Voeg axe-core in unit/e2e tests: npm install axe-core.
Handmatige tests (stap-voor-stap)
- Keyboard-only: schakel muis uit. Navigeer per Tab en Shift+Tab. Controleer of alle controls focusbaar zijn en volgorde logisch is.
- Screenreader test: gebruik NVDA (Windows) of VoiceOver (macOS). Lees pagina zonder visuele cues. Controleer landmarks, headings en formulieren.
- Contrast test: gebruik onze checker of Chrome DevTools kleurcontraster, of kopieer hex naar onze checker.
- Responsiveness: verander viewport en controleer inhoudsvolgorde en focus.
- Dynamische updates: activeer interacties die content wijzigen; controleer aria-live en of de update wordt aangekondigd.
Test-cases die je direct kunt uitvoeren
1) Verwijder CSS (of zet user agent stylesheet). Kan de gebruiker nog steeds de content begrijpen? 2) Gebruik Tab om het belangrijkste formulier in te vullen zonder muis. 3) Open en sluit modals, zorg dat focus terugkeert.
Handige code-snippets om direct te plakken
Accessible alert component
<div role="status" aria-live="polite" class="alert">Je wijzigingen zijn opgeslagen.</div>Form field met inline error
<label for="phone">Telefoonnummer</label><input id="phone" name="phone" aria-describedby="phone-error"><span id="phone-error" role="alert"></span>CSS voor zichtbare focus zonder layout breuk
.focus-visible:focus{outline:3px solid #ffbf47;outline-offset:2px;border-radius:3px}button::-moz-focus-inner{border:0}Aanpak per team — korte taken
Voor developers
- Voer onze checker uit op 5 belangrijkste pagina's en fix hoogste impact issues (ARIA misbruik, missing labels).
- Implementeer focus-styles en skip-link in base template.
- Voeg eenvoudige contrast-check unit test toe met bovengenoemde functie.
Voor designers
- Maak accessible design tokens (kleuren met contrast en typografie-schaal).
- Documenteer alt-tekst policy en heading rules in component library.
Voor redacties
- Gebruik checklist bij publiceren: H1, alt, linktekst, aard van media (decoratief vs. informatief).
- Controleer automatisch via de plugin vóór go-live.
Hoe wij helpen
Gebruik onze WCAG checker/validator voor snelle scans en onze plugin voor integratie in je ontwikkelworkflow. Vragen? Stuur ze via ons contactformulier — we reageren binnen 24 uur en helpen met concrete fixes en codevoorstellen.
Laatste praktische tip
Voeg deze kleine smoke-test toe aan je release-checklist: open de belangrijkste pagina, tab 20 keer, draai de WCAG checker, en voer de drie snel-fixes uit (labels, focus styles, aria-live). Plak hieronder de minimal JS-check om automatisch te falen bij ontbrekende labels:
<script>(function(){const inputs=document.querySelectorAll('input,select,textarea');const missing=[];inputs.forEach(i=>{if(!i.id && !i.getAttribute('aria-label') && !i.getAttribute('aria-labelledby'))missing.push(i);});if(missing.length>0){console.warn('WCAG check failed: inputs zonder label',missing);document.body.insertAdjacentHTML('afterbegin','<div style=\"background:#ffdddd;color:#900;padding:8px;\">WCAG ALERT: inputs zonder labels gevonden. Bekijk console.</div>');}})();</script>