Keyboard- en focusbeheer praktisch implementeren (WCAG)
Keyboardtoegankelijkheid en focusbeheer gaat in de praktijk vaak mis: interactieve componenten zijn niet bereikbaar met het toetsenbord, focus verdwijnt in modals, of visuele focusindicaties zijn verwijderd door custom CSS. Dat leidt direct tot ontoegankelijke ervaringen voor mensen die geen muis gebruiken.
Wij helpen developers, frontend engineers, designers en redacties met concrete stappen, codevoorbeelden en testinstructies die je direct kunt toepassen. Test je site meteen met onze WCAG checker/validator op wcagtool.nl/checker of download onze plugin via wcagtool.nl/plugin. Vragen? Gebruik het contactformulier — we reageren binnen 24 uur.
Het probleem in de praktijk
1. Elementen zijn niet focusable
Mist tabindex of zijn buttons vervangen door non-semantic elementen met click handlers, dan werkt toetsenbordnavigatie niet.
2. Focus verdwijnt of wordt niet zichtbaar
Custom CSS resetten of focus traps die verkeerd werken zorgen dat gebruikers de focus kwijtraken of niet zien waar ze zijn.
3. Modals en dialogs vangen focus niet correct
Modals sluiten niet met Escape, focus keert niet terug naar de trigger, of rest van de pagina blijft bereikbaar terwijl modal open is.
Zo los je dit op in code
Skiplinks: altijd eerst toevoegen
Plaats een skiplink die naar de hoofdinhoud springt; maak hem zichtbaar bij focus.
<a href="#main" class="skiplink">Sla navigatie over</a><!-- Plaats als eerste element binnen <body> -->.skiplink{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden} .skiplink:focus{position:static;left:auto;width:auto;height:auto;padding:8px;background:#000;color:#fff;z-index:9999}Gebruik semantische elementen en vermijd role-overuse
Buttons moeten <button> zijn, links <a> met href. Pas aria-rollen alleen toe als semantiek niet mogelijk is.
<!-- goed --><button type="button" class="menu-toggle">Menu</button><!-- slecht --><div role="button" tabindex="0" class="menu-toggle">Menu</div>Focus styles: gebruik :focus-visible en een fallback
Verwijder nooit focus outlines; verbeter ze.
:focus-visible{outline:3px solid #005fcc;outline-offset:2px;border-radius:3px} /* fallback voor browsers zonder :focus-visible */ .no-focus-ring :focus{outline:none} .force-focus-ring :focus{outline:3px solid #005fcc}Focus management in modals (testbaar voorbeeld)
Gebruik aria-modal en trap focus met JavaScript; zorg dat focus terugkeert naar de trigger.
<button id="openModal">Open</button><div id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" hidden><h2 id="modalTitle">Dialog</h2><button id="closeModal">Sluit</button></div>const open=document.getElementById('openModal');const modal=document.getElementById('modal');const close=document.getElementById('closeModal');let lastFocus=null;function trapFocus(e){const focusable='a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),[tabindex]:not([tabindex="-1"])';const nodes=Array.from(modal.querySelectorAll(focusable));if(nodes.length===0)return;const first=nodes[0];const last=nodes[nodes.length-1];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()}}}open.addEventListener('click',()=>{lastFocus=document.activeElement;modal.hidden=false;document.body.setAttribute('aria-hidden','true');modal.removeAttribute('aria-hidden');const focusable='a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';const nodes=Array.from(modal.querySelectorAll(focusable));if(nodes[0])nodes[0].focus();document.addEventListener('keydown',trapFocus);document.addEventListener('keydown',escClose)});close.addEventListener('click',closeModal);function escClose(e){if(e.key==='Escape'){closeModal()}}function closeModal(){modal.hidden=true;document.body.removeAttribute('aria-hidden');if(lastFocus)lastFocus.focus();document.removeEventListener('keydown',trapFocus);document.removeEventListener('keydown',escClose)}Vermijd tabindex=0 op niet-interactieve elementen
Gebruik tabindex alleen om logische tabvolgorde te herstellen; verwijder tabindex voor decoratieve items.
<!-- vermijd dit --><div tabindex="0">Decoratief blok</div> <!-- beter: maak het interactief of niet-focusable -->Checklist voor developers
- Zorg dat alle interactieve controls semantisch zijn (button/link/input).
- Voeg skiplinks toe en maak ze zichtbaar bij focus.
- Gebruik :focus-visible voor focus-indicatoren; laat outlines intact als fallback.
- Implementeer focus trapping in modals en zorg dat focus terugkeert naar de trigger.
- Controleer tabindex gebruik: geen tabindex>0, gebruik tabindex=’-1′ alleen voor programmatic focus.
- Stel aria-hidden op rest van pagina wanneer modal open is.
- Test keyboard-only navigatie systematisch en automatiseer met onze validator.
Tips voor designers en redacties
Ontwerp focus states eerst, dan visuals
Schets focus-ringen in componentdesigns; bepaal kleurcontrast en grootte voor zichtbaarheid.
Content-structuur en koppen
Zorg dat belangrijke content direct via skiplinks en landelementen bereikbaar is; gebruik duidelijke koppen voor snel scannen met toetsenbord.
Component library requirements
Leg vast dat components out-of-the-box keyboard- en screenreader-ervaringen ondersteunen. Documenteer required aria-attributes en expected tab order.
Hoe test je dit?
Handmatige toetsenbordtest (stap-voor-stap)
- Schakel muis uit of leg hem weg; navigeer met Tab/Shift+Tab door de pagina.
- Controleer dat alle interactieve elementen focusbaar zijn en in logische volgorde.
- Open modals en controleer: focus binnen modal, Trap werkt, Escape sluit, focus terug naar trigger.
- Controleer skiplink: focus erop zetten en Enter drukken moet naar hoofdinhoud springen.
- Test focus-indicatoren visueel en via zoom (200%).
Automatisch testen met onze tool
Gebruik onze WCAG checker/validator op wcagtool.nl/checker voor directe feedback op keyboard-toegankelijkheid en ARIA-waarschuwingen. Installeer de plugin via wcagtool.nl/plugin voor CI-integratie en lokale audits.
Devtools en screenreader checks
Gebruik browser Accessibility pane om tabindex en ARIA-attributen te inspecteren. Test met NVDA/VoiceOver en probeer operaties zonder muis.
Concrete quick-fixes
1. Geen focus na klik op custom element
// voeg programma-matige focus toe bij interactie document.querySelector('.custom').addEventListener('click',e=>{e.currentTarget.focus()});2. Snel modal-beheer snippet
// minimal modal open/closeconst modal=document.getElementById('modal');function openModal(trigger){modal.hidden=false;modal.setAttribute('aria-modal','true');modal.focus();}function closeModal(){modal.hidden=true;modal.removeAttribute('aria-modal');}3. Forceer focus-visible in oudere browsers
// polyfill-achtig fallback: detecteer keyboard input let hadKeyboard=false;window.addEventListener('keydown',()=>{hadKeyboard=true;document.documentElement.classList.add('force-focus-ring')});window.addEventListener('mousedown',()=>{if(hadKeyboard)document.documentElement.classList.remove('force-focus-ring')});Extra testinstructie: live-check met wcagtool
Ga naar wcagtool.nl/checker, voer je URL in en kijk specifiek naar de keyboard- en focus-onderdelen. Krijg concrete foutlocaties en code-advies. Download onze plugin via wcagtool.nl/plugin om checks in je buildpipeline te automatiseren. Vragen? Gebruik het contactformulier — we reageren binnen 24 uur.
Praktische tip: voeg direct deze korte snippet toe aan je base stylesheet om focus altijd zichtbaar te maken zonder visuele rommel: :focus{outline:3px solid #005fcc;outline-offset:2px}. Test daarna met onze checker en zorg dat je component library dezelfde regels overneemt.