ToegankeliJk Logo ToegankeliJk Contact Ons
Contact Ons

Toetsenbordnavigatie implementeren

Zorg dat alle interactieve elementen bereikbaar zijn zonder muis — essentieel voor gebruikers met motorische beperkingen en powersers

9 min leestijd Intermediate April 2026
Toetsenbord met gemarkeerde navigatietoetsen op donkere achtergrond

Waarom toetsenbordnavigatie essentieel is

Niet iedereen kan een muis gebruiken. Veel gebruikers vertrouwen op toetsenbordnavigatie — mensen met motorische beperkingen, maar ook programmeurs en power users die sneller willen werken. En je website moet voor hen even toegankelijk zijn als voor iedereen anders.

Het goede nieuws? Het is niet moeilijk om dit goed te doen. Met de juiste HTML-elementen en een beetje CSS bereik je al heel ver. We laten je precies zien hoe.

Kernvereisten WCAG 2.1 AA

  • Alle functionaliteit bereikbaar via toetsenbord
  • Duidelijke focus-indicator altijd zichtbaar
  • Logische tab-volgorde door de pagina
  • Geen toetsenboerderij (keyboard traps)

Semantische HTML als basis

Hier begint het echt. Als je <button> gebruikt voor een knop, <a> voor een link en <input> voor formuliervelden — dan krijg je toetsenbordnavigatie meestal gratis. Browsers weten namelijk precies hoe je met deze elementen omgaat.

Veel websites gebruiken echter <div> of <span> om knopjes en links na te bootsen. Dat ziet er misschien hetzelfde uit, maar toetsenbordgebruikers kunnen er niet mee omgaan. Je móet echte semantische elementen gebruiken.

Goed

<button>Opslaan</button>
<a href=”/contact”>Contact</a>

Fout

<div class=”button”>Opslaan</div>
<span class=”link”>Contact</span>

Focus-volgorde: het hart van toetsenbordnavigatie

De volgorde waarin elementen focus krijgen als je Tab indrukt — dat is cruciaal. Als je door een formulier tabbt en je beland plotseling in de footer, dan klopt iets niet. De volgorde moet logisch zijn, van links naar rechts en van boven naar beneden.

HTML bepaalt deze volgorde automatisch. Als je je elementen in de juiste volgorde in je HTML zet, dan gebeurt dit vanzelf. Geen CSS-trucjes nodig, geen JavaScript. Gewoon goed HTML schrijven.

Soms moet je deze volgorde aanpassen — bijvoorbeeld als je met CSS elementen verplaatst. Daar is het tabindex -attribuut voor. Maar gebruik het voorzichtig. Tabindex > 0 creëert chaos.

Zichtbare focus-indicatoren: niet verbergen!

Veel websites doen dit verkeerd. Ze verbergen de standaard focus-ring van browsers met outline: none en vergeten vervolgens om een alternatief te bieden. Gevolg: toetsenbordgebruikers zien helemaal niet meer waar ze zijn op de pagina.

Je focus-indicator moet:

  • Duidelijk zichtbaar zijn met minstens 3:1 contrast
  • Rond het element heen lopen (outline of box-shadow)
  • Op alle interactieve elementen werken
  • Consistent dezelfde stijl hebben

Praktische implementatiestappen

1

Controleer je HTML-elementen

Vervang alle <div>-knopjes en -links door echte <button> en <a> elementen. Dit alleen al lost 80% van je toetsenbordproblemen op.

2

Test met Tab-toets

Ga door je hele pagina met alleen Tab en Shift+Tab. Kan je alles bereiken? Gaat de volgorde logisch? Zijn er plekken waar je vast zit (keyboard traps)?

3

Definieer focus-stijlen

Voeg CSS toe voor focus-states. Maak outline of box-shadow duidelijk zichtbaar. Verberg nooit de standaard focus-ring zonder alternatief.

4

Zorg voor Escape-toets

Modals, dropdowns en menus moeten met Escape kunnen sluiten. Dit is een standaard verwachting voor toetsenbordgebruikers.

Veelgemaakte fouten (en hoe je ze vermijdt)

outline: none zonder alternatief

Veel CSS resets verbergen de outline om “er netter uit te zien”. Maar dan verdwijnt de focus-indicator helemaal. Erger: veel ontwerpers merken dit niet eens omdat zij met een muis werken.

Oplossing: Verwijder de CSS-reset die outline: none bevat, of voeg een custom focus-stijl toe met :focus of :focus-visible .

Tabindex > 0 gebruiken

Soms proberen ontwikkelaars met tabindex="1", "2", "3" enz. de focus-volgorde aan te passen. Dit creëert alleen verwarring. Elementen met tabindex > 0 krijgen focus vóór elementen met tabindex 0 of helemaal geen tabindex.

Oplossing: Zet je elementen in de juiste volgorde in je HTML. Gebruik tabindex alleen voor -1 (uit de tab-volgorde halen) of 0 (terug in de normale volgorde).

Dropdowns alleen met mouseover

Hover-menus zijn een nachtmerrie voor toetsenbordgebruikers. Ze openen alleen als je met je muis erover beweegt. Tab-gebruikers kunnen ze niet bereiken.

Oplossing: Zorg dat dropdowns ook openen op focus en Enter/Space. Zet ze in normale <button> of <a> elementen, geen custom JavaScript nodig.

Testen met het toetsenbord: hoe je het doet

Je hoeft geen speciale tools voor. Pak je toetsenbord en test gewoon. Dit is misschien wel de belangrijkste test die je kunt doen.

  1. Tab-toets: Ga door alle interactieve elementen. Ziet elke focus-indicator er goed uit?
  2. Shift+Tab: Ga achteruit. Werkt dit even goed als Tab?
  3. Enter/Space: Activeer links en knopjes. Doen zij wat ze moeten doen?
  4. Arrow-toetsen: Controleer menus en sliders. Werken zij met pijltjes?
  5. Escape: Sluiten modals, menus en dropdowns met Escape.

Klaar om te beginnen

Toetsenbordnavigatie implementeren klinkt misschien ingewikkeld, maar het valt mee. Begin met semantische HTML. Zorg dat je focus-indicatoren zichtbaar zijn. Test met je toetsenbord. Dat zijn de drie dingen die het meeste verschil maken.

En het mooie is: als je dit goed doet, werkt je website niet alleen beter voor mensen met motorische beperkingen. Ook power users en programmeurs zullen het appreciëren. En je code wordt schoner en beter te onderhouden.

Meer weten over webtoegankelijkheid? Bekijk onze volledige gids over WCAG 2.1 implementatie.

Ontdek alle webtoegankelijkheid-onderwerpen

Disclaimer

Dit artikel biedt informatief materiaal over toetsenbordnavigatie en WCAG 2.1-richtlijnen. Het is bedoeld als leergids en referentiemateriaal voor webontwikkelaars en designers. Dit artikel is geen juridisch advies. De implementatie van webtoegankelijkheidsnormen kan per juridische context variëren, met name in relatie tot het Tijdelijk besluit digitale toegankelijkheid in Nederland. We raden aan om altijd de officiële WCAG 2.1 richtlijnen te raadplegen en bij twijfel juridisch advies in te winnen.

Gerelateerde artikelen