Het probleem in de praktijk

Veelvoorkomende fouten die we in audits zien: 1) custom components zonder focusbeheer (divs met click handlers), 2) verborgen of ontbrekende labels in formulieren, 3) visuele focusstijlen die weggefilterd zijn, 4) onduidelijke foutmeldingen en ARIA misuse. Die fouten zorgen voor gebroken keyboard-workflows en problemen met screenreaders.

Voorbeelden van fouten

• Elementen met role=”button” maar zonder tabindex (niet-focusable).
• Formuliervelden zonder <label> of aria-label; of labels die niet gelinkt zijn via for/id.
• Verwijderde outline: button{outline:none} zonder alternatief zichtbaar focus-stijl.
• ARIA-attributes die elkaar tegenwerken, zoals aria-hidden op parent met visuele content.

Zo los je dit op in code

Stap 1 — Gebruik semantisch HTML

Altijd eerst: kies native elementen. Buttons, links, form controls en headings geven automatisch focus en zijn toegankelijk.

<button type="button" class="btn-primary">Verzenden</button>

Stap 2 — Correcte labels en foutmeldingen (HTML + ARIA)

Gebruik <label for> of aria-labelledby; voor inline foutmeldingen gebruik aria-describedby gekoppeld aan het input element.

<label for="email">E-mail</label><input id="email" name="email" type="email" required aria-describedby="email-error"><div id="email-error" aria-live="polite"><span class="error">Voer een geldig e-mailadres in</span></div>

Stap 3 — Focusstijlen die zichtbaar en consistent zijn (CSS)

Verwijder geen outline zonder alternatief. Gebruik :focus-visible voor moderne browsers en zorg voor voldoende contrast.

/* basis focusstijl */:focus-visible{outline:3px solid #005fcc;outline-offset:2px;border-radius:4px}button:focus-visible{box-shadow:0 0 0 3px rgba(0,95,204,0.2)}

Stap 4 — Maak custom components keyboard-accessible (JS + ARIA)

Als je custom elementen gebruikt (div/button replacement), voeg tabindex, keyboard-handlers en ARIA toe.

<div role="button" tabindex="0" aria-pressed="false" id="fav-btn">Favoriet</div>document.getElementById('fav-btn').addEventListener('click',toggleFav);document.getElementById('fav-btn').addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();toggleFav();}});function toggleFav(){const el=document.getElementById('fav-btn');const pressed=el.getAttribute('aria-pressed')==='true';el.setAttribute('aria-pressed',String(!pressed));}

Stap 5 — Focus management bij modals en dialogs

Zorg dat focus bij openen naar het eerste focusbare element gaat en dat focus terugkeert bij sluiten. Gebruik inert of aria-hidden op de achtergrond.

// voorbeeld: eenvoudige focus trapfunction trapFocus(container){const focusable='a[href],button,textarea,input,select,[tabindex]:not([tabindex="-1"])';const nodes=container.querySelectorAll(focusable);const first=nodes[0];const last=nodes[nodes.length-1];container.addEventListener('keydown',function(e){if(e.key==='Tab'){if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});first.focus();}

Checklist voor developers

• Gebruik semantische elementen (button, a, form labels).
• Zorg dat alle interactieve elementen focusable zijn (tabindex alleen als laatste redmiddel).
• Voeg zichtbare focusstijlen toe met voldoende contrast.
• Koppel labels met for/id of aria-labelledby.
• Gebruik aria-describedby voor foutmeldingen en aria-live voor status-updates.
• Controleer keyboard-ondersteuning: Tab, Shift+Tab, Enter, Space, Escape.
• Vermijd aria-hidden op elementen met betekenis voor screenreaders.
• Schat interaction state met aria-pressed/aria-expanded/aria-controls waar relevant.
• Test met onze WCAG checker: wcagtool.nl/checker.
• Installeer de plugin voor snelle checks in je dev-tools: wcagtool.nl/plugin.

Tips voor designers en redacties

Kleurcontrasten en focus zichtbaar maken

Definieer focusstilen in het stijlenpakket (design system) en controleer contrast met tooling. Gebruik minstens 3:1 voor UI-componenten en 4.5:1 voor bodytekst wanneer mogelijk.

Content en microcopy

Schrijf korte, expliciete labels en foutmeldingen. Voeg instructies inline toe en hergebruik aria-describedby voor aanvullende uitleg. Test tekst op leesniveau en vermijd visuele aanwijzingen als enige signaal (zoals kleur alleen).

Design system checklist

• Voorzie componenten van keyboard-states en ARIA-props in design tokens.
• Documenteer focus- en hovergedrag en toon code-snippets in componentbibliotheek.
• Voeg voorbeelden met fouttoestanden en screenreader-teksten toe.

Hoe test je dit?

Stap-voor-stap handmatige tests

1. Keyboard-only navigatie: schakel muis uit (of gebruik alleen toetsen) en navigeer met Tab, Shift+Tab, Enter, Space en Escape. Alle interactieve items moeten bereikbaar en bedienbaar zijn.
2. Screenreader-test: open NVDA/VoiceOver en navigeer door headings, links en formulieren. Labels moeten gelezen worden en foutmeldingen moeten geannonceerd worden.
3. Contrasttest: controleer met onze checker of de contrastratio voldoet. Gebruik wcagtool.nl/checker voor directe scans.
4. Simuleer toetsenbordfocus: inspecteer focusstijlen op verschillende schermgroottes en browsers.

Automatische testvoorbeelden (script)

Snippet voor eenvoudige contrast- en focus-audit via console (kan als basis voor CI):

/* Eenvoudige kleurcontrastscheck (RGB hex input) */function luminance(r,g,b){const a=[r,g,b].map(function(v){v=v/255;return v<=0.03928?v/12.92:Math.pow((v+0.055)/1.055,2.4);});return 0.2126*a[0]+0.7152*a[1]+0.0722*a[2];}function contrast(hex1,hex2){const h1=hex1.replace('#','');const h2=hex2.replace('#','');const rgb1=[parseInt(h1.substr(0,2),16),parseInt(h1.substr(2,2),16),parseInt(h1.substr(4,2),16)];const rgb2=[parseInt(h2.substr(0,2),16),parseInt(h2.substr(2,2),16),parseInt(h2.substr(4,2),16)];const L1=luminance(rgb1[0],rgb1[1],rgb1[2]);const L2=luminance(rgb2[0],rgb2[1],rgb2[2]);return (Math.max(L1,L2)+0.05)/(Math.min(L1,L2)+0.05);}console.log('Contrast:',contrast('#ffffff','#1e1e1e'));

Gebruik onze WCAG checker in CI

Voeg tijdens build de stap toe om je site te scannen: gebruik wcagtool.nl/checker of onze plugin (wcagtool.nl/plugin) voor snelle feedback. Contact ons via wcagtool.nl/contact voor integratiehulp (antwoord binnen 24 uur).

Concrete mini-how-to’s & codevoorbeelden

Toegankelijk formulier voorbeeld

<form id="signup"><div><label for="name">Naam</label><input id="name" name="name" type="text" required aria-required="true"></div><div><label for="email">E-mail</label><input id="email" name="email" type="email" required aria-describedby="email-help email-error"><div id="email-help">We gebruiken je e-mail alleen voor updates.</div><div id="email-error" aria-live="assertive"></div></div><button type="submit">Aanmelden</button></form>document.getElementById('signup').addEventListener('submit',function(e){e.preventDefault();const email=document.getElementById('email');if(!email.checkValidity()){document.getElementById('email-error').textContent='Vul een geldig e-mailadres in.';email.focus();return;}document.getElementById('email-error').textContent='';// proceed with submit});

Quick ARIA live region voorbeeld

<div id="status" aria-live="polite" aria-atomic="true" class="sr-only"></div>// update statusdocument.getElementById('status').textContent='Opslaan voltooid';

Minimal focus-trap bij modal

<dialog id="modal"><button id="close">Sluit</button></dialog>const modal=document.getElementById('modal');const close=document.getElementById('close');function openModal(){modal.showModal();trapFocus(modal);}close.addEventListener('click',function(){modal.close();});

Testbare oplossingen & integratie

Wil je onze check automatisch laten lopen op pull requests? Vraag onze CI-integratie via het contactformulier: wcagtool.nl/contact (antwoord binnen 24 uur). Installeer eerst de plugin voor lokale QA: wcagtool.nl/plugin.

Snelle test instructie voor je site

1. Run Lighthouse / axe in devtools en noteer issues.
2. Fix semantiek en focusstijlen volgens de codevoorbeelden hierboven.
3. Scan de pagina met wcagtool.nl/checker en los resterende items op.

Automatische CI-voorbeeld (schematisch)

# pseudocode CI stap - run accessibility check- name: Run WCAG check  run: curl -X POST -F 'url=https://jouwsite.nl' https://wcagtool.nl/checker/api/scan  # retourneert JSON met issues