Toetsenbordnavigatie verbeteren: complete gids voor WCAG en WordPress

Toetsenbordnavigatie verbeter je door alle interactieve onderdelen zonder muis bereikbaar, zichtbaar en bedienbaar te maken. Test je website met Tab, Shift+Tab, Enter, Spatie en Escape. Controleer vervolgens de focusvolgorde, voorkom dat focus vastloopt en gebruik voor knoppen, links en formulieren zo veel mogelijk semantische HTML. Daarmee maak je je website beter bruikbaar voor bezoekers die geen muis gebruiken.

Wat is toetsenbordnavigatie?

Toetsenbordnavigatie betekent dat een bezoeker alle relevante onderdelen van een pagina kan bereiken en bedienen zonder muis of touchscreen. Denk aan menu's, links, knoppen, formulieren, filters, accordions, tabbladen, carrousels en pop-ups.

Dit is belangrijk voor mensen die bijvoorbeeld een motorische beperking hebben, een screenreader gebruiken of tijdelijk geen muis kunnen gebruiken. Ook voor zakelijke bezoekers die snel met het toetsenbord werken, maakt een voorspelbare bediening een website prettiger.

De richtlijnen voor dit onderwerp staan onder meer in WCAG 2.2. Relevant zijn onder andere succescriteria voor bediening via toetsenbord, het voorkomen van keyboard traps, focusvolgorde, zichtbare focus en focus die niet wordt afgedekt.

Welke toetsen moet je testen?

• Tab: ga naar het volgende focusbare element.
• Shift+Tab: ga terug naar het vorige focusbare element.
• Enter: activeer doorgaans een link of knop.
• Spatie: activeer doorgaans een knop of vinkvak.
• Escape: sluit waar passend een open dialoogvenster, menu of andere tijdelijke interface.
• Pijltjestoetsen: gebruik deze alleen waar het gekozen componentpatroon dat verwacht, bijvoorbeeld binnen bepaalde menu's, tabbladen of keuzelijsten.

De precieze toetsbediening hangt af van het type component. Een gewone HTML-link en HTML-knop geven al veel correct gedrag mee. Zelfgebouwde interacties met niet-semantantische elementen vragen juist extra aandacht.

Toetsenbordnavigatie testen: stappenplan

1. Open een belangrijke pagina in een desktopbrowser. Begin bijvoorbeeld met de homepage, een dienstenpagina, een formulierpagina en een pagina met een menu of pop-up. Gebruik geen muis tijdens de test.
2. Druk op Tab vanaf de adresbalk. Kijk welk element als eerste focus krijgt. Een skiplink mag hier als eerste verschijnen. De focus moet duidelijk zichtbaar zijn.
3. Doorloop de pagina met Tab. Controleer of je achtereenvolgens bij alle zichtbare en relevante links, knoppen, invoervelden en bedieningselementen komt.
4. Loop terug met Shift+Tab. De terugweg moet logisch werken en mag niet onverwacht focus naar verborgen of niet-relevante onderdelen verplaatsen.
5. Activeer elk interactief element. Gebruik Enter en, bij knoppen en selectievakken, ook Spatie. Controleer of dezelfde actie plaatsvindt als met de muis.
6. Test openklappende onderdelen. Open het hoofdmenu, dropdowns, accordions, tabs, filters en carrousels. Controleer of je de inhoud kunt bereiken, bedienen en weer verlaten.
7. Test modals en pop-ups. Open bijvoorbeeld een cookievenster, zoekvenster of formulier in een overlay. Focus hoort in de open dialoog te blijven totdat die sluit. Met Escape moet sluiten mogelijk zijn wanneer dat bij het component past. Na sluiten hoort focus terug te keren naar het element waarmee de dialoog is geopend.
8. Herhaal op mobiel formaat. Maak het browservenster smal of gebruik de apparaatweergave van je browser. Responsive menu's en overlays gedragen zich vaak anders dan op desktop.
9. Leg bevindingen vast per pagina en component. Noteer wat er gebeurt, wat je verwachtte, de URL en een screenshot of schermopname. Zo kan een WordPress-beheerder of ontwikkelaar het probleem gericht reproduceren.

Praktische scorecard voor je website

Gebruik deze scorecard tijdens een eerste controle. Geef per rij een status: in orde, verbeteren of niet van toepassing. De voorbeelden maken duidelijk wat je concreet moet testen.

Onderdeel	Concrete test	In orde als	Veelvoorkomende oplossing
Skiplink	Druk als eerste op Tab	Er verschijnt een link waarmee je naar de hoofdinhoud springt	Plaats een zichtbare-bij-focus skiplink vóór de herhaalde navigatie
Hoofdnavigatie	Tab door links en open een submenu	Alle menu-items zijn bereikbaar en een geopend submenu is ook weer te verlaten	Gebruik echte links en knoppen; test de mobiele menuknop apart
Focusindicator	Tab door de hele pagina	Je ziet steeds duidelijk waar de focus staat en deze wordt niet afgedekt	Herstel of ontwerp een duidelijke :focus-stijl en voorkom bedekking door sticky elementen
Formulier	Bereik velden, keuzes en verzenden met Tab	Velden hebben een zichtbaar label en zijn volledig te bedienen zonder muis	Gebruik gekoppelde labels en native invoervelden waar mogelijk
Accordeon	Open en sluit ieder onderdeel met toetsen	De kop werkt als knop en de bijbehorende inhoud is bereikbaar wanneer deze openstaat	Gebruik een button voor de bedieningsknop, niet een klikbare div
Modal of pop-up	Open, doorloop en sluit de dialoog	Focus verdwijnt niet achter de pop-up, loopt niet vast en keert na sluiten logisch terug	Beheer focus bij openen en sluiten en zorg voor een bereikbare sluitknop
Verborgen content	Tab langs gesloten of verborgen onderdelen	Onzichtbare of uitgeschakelde onderdelen ontvangen geen onbedoelde focus	Haal niet-actieve bediening correct uit de focusvolgorde
Foutmelding	Verstuur een onvolledig formulier	De foutmelding is vindbaar en je kunt de invoer herstellen met het toetsenbord	Toon duidelijke fouttekst bij het veld en verplaats focus alleen doelgericht

Focusvolgorde verbeteren

De focusvolgorde is de route die een bezoeker aflegt met Tab. Die route moet aansluiten op de visuele en inhoudelijke volgorde. Iemand moet bijvoorbeeld niet eerst in de footer belanden, daarna in een zijbalk en pas vervolgens bij de hoofdinhoud.

Gebruik de bronvolgorde in HTML als uitgangspunt. Positiebepaling met CSS kan een visuele volgorde creëren die afwijkt van de DOM-volgorde. Dat kan verwarrend zijn voor toetsenbordgebruikers en gebruikers van hulptechnologie.

Vermijd ook positieve waarden voor tabindex, zoals tabindex="1". Daarmee bouw je een kunstmatige tabvolgorde die moeilijk te onderhouden is. Gebruik alleen tabindex="0" wanneer een niet-natief, maar werkelijk interactief element bewust focusbaar moet zijn. In de praktijk is een native button of a meestal de betere keuze.

Zorg dat focus zichtbaar blijft

Een bezoeker moet steeds kunnen zien welk element actief is. Verwijder daarom niet zomaar de standaard focusstijl met CSS. Als je een eigen focusstijl ontwerpt, moet die voldoende opvallen tegen de omgeving en op elk interactief element werken.

Controleer ook of een vaste header, chatknop, cookiebanner of andere overlay het gefocuste element bedekt. Dit speelt vooral bij lange pagina's en bij onderdelen die automatisch naar beeld scrollen. Focus moet zichtbaar blijven zonder dat de bezoeker eerst hoeft te gokken waar hij is.

Focus states zijn één onderdeel van de totale toetsbediening. Bij een nieuw ontwerp of een WordPress-herbouw hoort dit daarom thuis in de functionele en visuele kwaliteitscontrole van strategisch creatief webdesign.

Voorkom keyboard traps

Van een keyboard trap is sprake wanneer iemand met het toetsenbord in een onderdeel terechtkomt, maar er niet meer normaal uit kan navigeren. Een veelvoorkomend voorbeeld is een pop-up waarin Tab blijft rondgaan zonder bereikbare sluitknop. Ook slecht gebouwde menu's, embedded tools en carrousels kunnen dit veroorzaken.

Een modal mag focus tijdelijk binnen de dialoog houden, zodat de achtergrond niet bedienbaar is. Maar de dialoog moet dan wel een duidelijke, toetsenbordbereikbare manier bieden om te sluiten. Bij sluiten moet de focus terug naar een logisch element, meestal de knop die de modal opende.

Menu's, accordions en tabs correct bedienen

Gebruik voor een actie een knop en voor navigatie naar een andere URL een link. Een klikbare div of span lijkt visueel misschien te werken, maar heeft zonder extra code geen betrouwbaar toetsenbordgedrag.

• Dropdownmenu: de bedieningsknop moet bereikbaar zijn; geopende submenu-items moeten bereikbaar en weer te verlaten zijn.
• Accordeon: de kop is een knop die open- en dichtklapt; de inhoud volgt logisch in de pagina.
• Tabs: kies een bekend tabpatroon en implementeer de bijbehorende toetsenbediening volledig. Is dat niet nodig, dan is een accordeon soms eenvoudiger en robuuster.
• Carrousel: geef bedieningselementen duidelijke namen, maak pauzeren mogelijk waar nodig en voorkom dat automatisch wisselende content de focus verstoort.

WordPress-aandachtspunten

WordPress zelf, je theme, pagebuilder en plugins bepalen samen hoe goed toetsenbordnavigatie werkt. Een toegankelijk blok of thema lost problemen in een ingevoegde pop-up, formulierplugin of maatwerksectie niet automatisch op.

Controleer in het bijzonder:

• het mobiele navigatiemenu en submenu's;
• cookiebanners, chatwidgets en nieuwsbriefpop-ups;
• pagebuilder-widgets voor tabs, sliders en accordions;
• zoekfuncties die in een overlay openen;
• formulierplugins en validatiemeldingen;
• maatwerk JavaScript voor filters, productgalerijen of boekingsmodules.

De WordPress-documentatie over toegankelijkheid van block themes geeft specifieke aandachtspunten voor navigatie en toetsenbordgebruik. Voor skiplinks biedt het WordPress Accessibility Handbook praktische richtlijnen.

Wanneer gebruik je ARIA?

ARIA kan extra betekenis geven aan complexe, dynamische interfaceonderdelen, maar vervangt geen goede HTML en JavaScript. Begin daarom met een native link, knop, invoerveld of selectievak wanneer dat past bij de functie.

Gebruik ARIA alleen als je begrijpt welke rol, status, naam en toetsenbordinteractie nodig zijn. Een ARIA-attribuut op een niet-interactieve div maakt een component niet vanzelf volledig toegankelijk. De bediening, focus en statuswijzigingen moeten ook technisch correct werken.

Veelvoorkomende fouten en gerichte oplossingen

• Focus verdwijnt: vaak is de focusstijl verwijderd met CSS. Herstel een duidelijke focusstijl voor links, knoppen en formulierelementen.
• Een kaart is volledig klikbaar maar niet bereikbaar: plaats een echte link rond of in de kaart, met een duidelijke linktekst.
• Een icoonknop heeft geen context: geef de knop een toegankelijke naam, bijvoorbeeld via zichtbare tekst of een passend label.
• Tab bereikt verborgen menu-items: zorg dat gesloten content niet in de tabvolgorde zit.
• Een pop-up sluit, maar focus springt naar de pagina-start: plaats de focus terug op de opener.
• Een knop werkt alleen met een muisklik: vervang de custom klikbare container door een native knop of implementeer alle vereiste toetsenbordinteractie zorgvuldig.

Wanneer schakel je hulp in?

Een eerste toetsentest kun je zelf uitvoeren. Schakel een specialist in wanneer je maatwerkmenu's, complexe filters, boekingstools, overlays of een sterk aangepaste WordPress-omgeving gebruikt. Dat geldt ook als je structureel toegankelijkheid wilt meenemen in ontwerp, ontwikkeling en contentbeheer.

LYNX Media kan toetsenbordtoegankelijkheid meenemen in een bredere beoordeling van je website, ontwerp en conversieflow. Bekijk de diensten van LYNX Media of bespreek je website of online groeikansen met LYNX Media.

Checklist: toetsenbordnavigatie verbeteren

• Alle relevante interactieve elementen zijn met Tab bereikbaar.
• Shift+Tab werkt logisch in de omgekeerde richting.
• Focus is altijd zichtbaar en wordt niet bedekt.
• Links, knoppen en formuliervelden werken zonder muis.
• Menu's, accordions, tabs en overlays zijn te openen én te verlaten.
• Er ontstaat geen keyboard trap.
• Verborgen elementen ontvangen geen onbedoelde focus.
• Een skiplink maakt het mogelijk om herhaalde navigatie over te slaan.
• Modals hebben een bereikbare sluitactie en geven focus logisch terug.
• Je hebt de belangrijkste pagina's ook in mobiele weergave getest.

Let tijdens technisch onderhoud ook op links die niet meer werken. Een goede aanpak voor het opsporen en herstellen daarvan vind je in onze gids over 404- en soft-404-fouten. Toetsenbordnavigatie en technische kwaliteit vragen allebei om terugkerende controle, zeker na wijzigingen aan thema's, plugins of formulieren.