WCAG 2.1 Normen: Wat Je Moet Weten
Een overzicht van de drie WCAG-niveaus (A, AA, AAA) en welk niveau voor jouw website relevant is.
Toetsenbordnavigatie: Volledige Gids
Veel gebruikers navigeren zonder muis. Leer hoe je focus-states, Tab-volgorde en toetsenbordkortere wegen correct implementeert op je website.
Waarom toetsenbordnavigatie essentieel is
Niet iedereen gebruikt een muis. Motorische beperkingen, motorische aandoeningen, gebruikers van hulpapparatuur — ze verlaten zich allemaal op toetsenbordnavigatie. Plus, veel power users schakelen sowieso liever naar het toetsenbord. Het’s niet alleen over inclusiviteit, het’s over gebruikersgemak.
Volgens de WCAG 2.1-normen (niveau AA) moeten alle functionele elementen via toetsenbord bereikbaar zijn. Geen uitzonderingen. Je website moet volledig bedienbaar zijn zonder muis — en je bezoekers zullen het waarderen.
Focus-states implementeren
Focus-states zijn cruciaal. Wanneer iemand tabben door je website, moeten ze duidelijk zien welk element ze geselecteerd hebben. Veel ontwerpers verwijderen de standaard focus-ring met
outline: none
— grote fout.
In plaats daarvan, maak een sterke focus-state. Dat kan een gekleurde border zijn, een achtergrondkleur, of allebei. Het moet contrast hebben met de normale state. We’s al tientallen sites gezien waar focus onzichtbaar is — gebruikers raken volledig verdwaald.
Pro tip:
Gebruik
:focus-visible
in plaats van
:focus
. Dit toont focus-styles alleen voor toetsenbordnavigatie, niet voor muisklikken — schoner design.
Tab-volgorde: Logisch en voorspelbaar
De volgorde waarin elementen focus krijgen wanneer je Tab indrukt, noemen we de Tab-volgorde. Deze moet logisch zijn — meestal van boven naar beneden, links naar rechts. Niet chaotisch.
HTML bepaalt standaard de Tab-volgorde. Als je goed semantisch HTML gebruikt (echte
<button>
, echte
<a>
links, correct geneste elementen), krijg je de juiste volgorde meestal gratis. Problemen ontstaan meestal wanneer ontwerpers met CSS display: none of position: absolute spelen.
Alleen als je echt iets moet aanpassen, gebruik je
tabindex
. Maar wees voorzichtig — positieve tabindex-waarden kunnen chaos veroorzaken. Stick to 0 of -1.
Toetsenbordkortere wegen voor power users
Skip-links zijn kleine HTML-elementen die verborgen blijven totdat iemand ze via toetsenbord bereikt. Ze’s geweldig. Een skip-link naar “main content” bespaart iemand de moeite om door de hele navigatie te tabben.
- Plaats een skip-link helemaal bovenaan je HTML (net na <body>)
- Maak hem verborgen met CSS, zichtbaar op focus
- Laat hem naar het main-content element linken
Plus, laat gebruikers hun eigen sneltoetsen definiëren waar mogelijk. Consistente shortcuts helpen ook — Alt+S voor search is bijvoorbeeld herkend.
Belangrijk
De informatie in deze gids is educatief en gebaseerd op WCAG 2.1-standaarden. Dit is geen juridisch advies. Implementatie hangt af van je specifieke project en doelgroep. Voor vragen over wettelijke vereisten in België, raadpleeg je juridische adviseurs of contacteer de Vlaamse Raad voor Logistiek.
Praktische implementatie starten
Toetsenbordnavigatie is niet moeilijk. Je hoeft geen ingewikkelde libraries te installeren. Goede focus-states, logische Tab-volgorde, semantisch HTML — dat’s meestal alles. Test je website zelf: sluit je muis in en navigeer alleen met Tab, Shift+Tab, en Enter. Je zult snel zien waar problemen zijn.
De winst is groot. Niet alleen voor gebruikers met beperkingen, maar voor iedereen. Sneller navigeren, beter bereikbaar, schoner code. Dit is web design dat gewoon beter werkt.
Wil je meer leren over webtoegankelijkheid?
Bekijk alle gidsen
