Robust: waarom technologie-onafhankelijkheid cruciaal is

Geplaatst op door

Toegankelijke keyboard-navigatie & focusbeheer — Praktische implementatie | WCAGTool

Toegankelijke keyboard-navigatie & focusbeheer

Keyboard-navigatie en focusbeheer faalt in de praktijk vaak omdat interactieve componenten niet semantisch zijn opgebouwd, focus niet zichtbaar of logisch is, en dynamische interfaces (modals, dropdowns, custom widgets) geen duidelijke focus-flow hebben. Dit leidt tot ontoegankelijke ervaringen vooral voor schermlezer- en toetsenbordgebruikers.

Wij lossen dit op met concrete, testbare patterns: semantische HTML, minimaal gebruik van ARIA, duidelijke focus-styling en herbruikbare JavaScript-routines voor focus trapping, return focus en keyboard-actiehandling. Gebruik onze code-snippets direct in je project en test met onze WCAG checker/validator.

Het probleem in de praktijk

Veelvoorkomende fouten

  • Interactieve elementen zijn <div>s of <span>s zonder role/tabindex.
  • Focus verdwijnt na openen van modals of dynamische content.
  • Geen zichtbare focus (outline removed zonder alternatief).
  • Custom widgets missen keyboard-ondersteuning (Arrow keys, Home/End, Esc).
  • Tabvolgorde niet logisch door DOM-manipulatie of tabindex>0 misbruik.

Impact

Gebruikers raken vast, schermlezers krijgen onverwachte context, en veel WCAG-criteria (2.1.1 Keyboard, 2.4.3 Focus Order, 2.4.7 Focus Visible, 4.1.2 name, role, value) worden geschonden.

Zo los je dit op in code

1. Gebruik semantische elementen en correcte roles

Voorkom losse <div>s voor knoppen of links. Gebruik <button> en <a href>. Als je een custom element moet gebruiken, voeg minimaal role en tabindex toe.

<!-- Juist --><button type="button" class="btn-primary">Opslaan</button><!-- Fout --><div role="button" tabindex="0" class="btn-primary">Opslaan</div>

2. Focus zichtbaar maken zonder visuele rommel

Verwijder nooit outline zonder alternatief. Gebruik :focus-visible voor moderne browsers en een fallback.

/* CSS */:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; } .no-focus-outline:focus { box-shadow: 0 0 0 3px rgba(26,115,232,0.2); }

3. Skip links voor directe navigatie

Voeg een skip-to-content link bovenaan toe en zet ‘m zichtbaar bij focus.

<a href="#main" class="skip-link">Spring naar inhoud</a>/* CSS */.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;padding:8px;background:#fff;color:#000;z-index:1000;}

4. Focus beheren bij modals (trap focus + return focus)

Voor modals: trap focus binnen modal, verberg onderliggende content voor screen readers (aria-hidden) en zet focus naar eerste focusbaar element; zet focus terug naar déclencher bij sluiten.

// Minimal focus-trap en return-focus (vanille JS)const openModalBtn=document.querySelector('#openModal');const modal=document.querySelector('#modal');const focusableSelectors='a[href],button:not([disabled]),textarea, input, select,[tabindex]:not([tabindex="-1"])';let lastFocused=null;openModalBtn.addEventListener('click',()=>{lastFocused=document.activeElement; modal.removeAttribute('hidden'); modal.setAttribute('aria-hidden','false'); const focusables=Array.from(modal.querySelectorAll(focusableSelectors)); focusables[0]?.focus(); document.addEventListener('keydown',trapTab);});function trapTab(e){if(e.key!=='Tab')return;const focusables=Array.from(modal.querySelectorAll(focusableSelectors));const first=focusables[0];const last=focusables[focusables.length-1];if(e.shiftKey && document.activeElement===first){e.preventDefault(); last.focus();}else if(!e.shiftKey && document.activeElement===last){e.preventDefault(); first.focus();}}document.querySelector('#closeModal').addEventListener('click',()=>{modal.setAttribute('hidden',''); modal.setAttribute('aria-hidden','true'); document.removeEventListener('keydown',trapTab); lastFocused?.focus();});

5. Keyboard-interacties voor custom widgets (accordion voorbeeld)

Volg WAI-ARIA Authoring Practices: Space/Enter voor toggle, Arrow keys voor navigatie in menugroepen.

<div role="region"><h3><button aria-expanded="false" aria-controls="acc1">Sectie 1</button></h3><div id="acc1" hidden>Inhoud</div></div>/* JS toggle */document.querySelectorAll('[aria-expanded]').forEach(btn=>{btn.addEventListener('click',()=>{const expanded=btn.getAttribute('aria-expanded')==='true';btn.setAttribute('aria-expanded',String(!expanded));const panel=document.getElementById(btn.getAttribute('aria-controls')); if(panel) panel.hidden=expanded;} ); btn.addEventListener('keydown',e=>{if(e.key===' '||e.key==='Enter'){e.preventDefault(); btn.click();}});});

Checklist voor developers

  • Gebruik semantische HTML (button, a, input) in plaats van role+tabindex waar mogelijk.
  • Geen tabindex>0; gebruik tabindex=”-1″ alleen voor programmatic focus.
  • Focus moet altijd zichtbaar zijn (gebruik :focus-visible).
  • Trap focus in modals en zet focus terug bij sluiten.
  • Voor complexe widgets: implementeer volledige keyboard-model (Arrow keys, Home/End, Esc).
  • Test met alleen toetsenbord en met schermlezer (NVDA/VoiceOver).
  • Scan automatisch met onze WCAG checker/validator en gebruik onze plugin voor CI-integratie.

Tips voor designers en redacties

Design system guidelines

Definieer focus-visuals in het design system, toon states voor hover, focus en active. Documenteer keyboard-flow voor componenten en bewaar voorbeelden in Storybook met keyboard tests.

Content-redactie

Zorg dat links en knoppen betekenis hebben zonder context (geen “klik hier”). Voeg aria-labels alleen als tekst geen context kan geven. Check contrast van focus-states tegen achtergrondkleuren.

Hoe test je dit?

Handmatige toetsenbordtests (stap-voor-stap)

  1. Laad pagina en verwijder muis: navigeer met Tab en Shift+Tab — controleer volgorde en zichtbaarheid van focus.
  2. Open modals/dynamische content en controleer focus-trap, Escape sluit en focus keert terug.
  3. Test custom widgets: Enter/Space activeert, Arrow keys navigeren, Home/End springen.
  4. Controleer skip link werkt en brengt direct naar hoofdcontent.

Automatische tools en onze checker

Run onze online WCAG checker: https://wcagtool.nl/checker voor directe scans, of installeer onze plugin (https://wcagtool.nl/plugin) voor CI en lokale audits. Onze validator identificeert tabindex misbruik, ontbrekende roles, en ontbrekende focus-states en geeft concrete fixes.

Screenreader-tests

Gebruik NVDA (Windows) of VoiceOver (macOS). Controleer dat berichten en labels worden aangekondigd en dat focus-aankondigingen overeenkomen met visuele focus.

Concrete test-cases (copy/paste)

/* Testcase: modal focus */1. Open pagina.2. Druk Tab naar knop "Open modal" en druk Enter.3. Controleer dat focus binnen modal blijft (Tab cyclus).4. Druk Escape: modal sluit en focus terug op "Open modal"./* Testcase: accordion */1. Tab naar accordion header.2. Druk Enter of Space: paneel opent en focus blijft op header.3. Druk End/Home binnen header groep om naar laatste/ eerste te springen.

Tips voor integratie in je workflow

  • Integreer onze plugin in CI om regressies te voorkomen.
  • Voeg keyboard-tests toe aan Storybook met @testing-library/user-event.
  • Maak PR-checks verplicht: run wcagtool validator en fix errors binnen dezelfde sprint.

Test je site direct met onze tool: https://wcagtool.nl/checker. Download onze plugin voor CI en lokale tooling: https://wcagtool.nl/plugin. Vragen? Vul het contactformulier in op https://wcagtool.nl/contact en we beantwoorden binnen 24 uur.

Laatste praktische tip: voeg deze kleine util-functie toe voor focusable elementen en hergebruik ‘m in modals, dialogs en widgets:

// Utility: get focusable elementsfunction getFocusable(container=document){return Array.from(container.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'));}

Test nu meteen: run een scan op https://wcagtool.nl/checker, installeer onze plugin via https://wcagtool.nl/plugin en mail ons via https://wcagtool.nl/contact — antwoord binnen 24 uur.