Toetsenbordnavigatie en focusbeheer
Zorg dat alle interactieve elementen met Tab bereikbaar zijn, beheer de focus programmatisch in dialogen en routing en maak zichtbare focusindicatoren.
Toetsenbordnavigatie en focusbeheer is een gratis Frontend Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Waarom toetsenbordnavigatie belangrijk is
Veel gebruikers kunnen geen muis gebruiken: mensen met motorische beperkingen, schermlezergebruikers en ervaren gebruikers die liever het toetsenbord gebruiken. Als je app niet met het toetsenbord te navigeren is, werkt die voor hen niet.
Tab en Shift+Tab
Tab verplaatst de focus naar het volgende interactieve element. Shift+Tab verplaatst de focus naar het vorige. De volgorde volgt standaard de DOM-volgorde — ga hier niet tegenin; laat de DOM je tabvolgorde bepalen.
Wat standaard focusbaar is
Ingebouwde interactieve elementen kunnen focus krijgen: a[href], button, input, select, textarea, summary. Voor aangepaste elementen heb je tabindex nodig.
Waarden van tabindex
tabindex="0": opgenomen in de tabvolgorde op de positie in de DOM. tabindex="-1": alleen focusbaar via JS (focus via een script, niet via Tab). tabindex=">0": antipatroon — zorgt voor een verwarrende focusvolgorde, dus gebruik dit nooit.
<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>
<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>Zichtbare focusindicator
Verwijder focusomtrekken nooit zonder een vervanging te bieden. WCAG vereist een zichtbare indicator op elk element dat focus kan krijgen.
/* BAD: hides focus for everyone */
*:focus { outline: none; }
/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}:focus-visible
De pseudoklasse :focus-visible wordt alleen geactiveerd wanneer de focus van het toetsenbord komt, niet door een muisklik. Zo kun je muisstijlen eenvoudig houden en toch toetsenbordfocus tonen.
Link om inhoud over te slaan
Het eerste element dat focus kan krijgen, moet een link om inhoud over te slaan zijn, zodat toetsenbordgebruikers voorbij de navigatie in de header direct naar de hoofdinhoud kunnen springen.
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>
/* CSS */
.skip-link {
position: absolute; left: -10000px;
}
.skip-link:focus {
left: 1rem; top: 1rem;
background: white; padding: 0.5rem 1rem;
}Focusval in modale vensters
Wanneer een modaal venster wordt geopend, moet de focus daarbinnen blijven — Tab vanaf het laatste element gaat terug naar het eerste, en Shift+Tab vanaf het eerste gaat naar het laatste. Met Escape sluit je het modale venster.
// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;
// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();Gebruik het dialog-element
Het ingebouwde HTML-element <dialog> regelt automatisch de focusval, sluiten met Escape en de achtergrondlaag van het modale venster.
<dialog id="signup">
<h2>Sign up</h2>
<form method="dialog">
<input name="email" required>
<button>Submit</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
document.getElementById('signup').showModal(); // opens with focus trap
</script>Focusbeheer na een routewijziging
SPA's laden de pagina niet opnieuw, dus schermlezergebruikers krijgen geen signaal dat de navigatie heeft plaatsgevonden. Verplaats de focus bij een routewijziging naar de h1 of main van de nieuwe pagina.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();De focusvolgorde moet overeenkomen met de visuele volgorde
Zorg dat de DOM-volgorde overeenkomt met de visuele stroom. Als CSS elementen in een andere volgorde weergeeft (flex order, grid placement, position absolute), komt de tabvolgorde niet overeen — dat is voor iedereen verwarrend.
Test zonder muis
De nuttigste toegankelijkheidstest: leg je muis weg en probeer je hele app te gebruiken met Tab, Shift+Tab, Enter, Space en de pijltoetsen. Als jij vastloopt, lopen je gebruikers ook vast.
Snelle controle
Met welke CSS-pseudoklasse kun je de focusomtrek alleen opmaken wanneer de focus van het toetsenbord komt, niet door een muisklik?
Samenvatting: toetsenbordnavigatie
Ingebouwde interactieve elementen kunnen standaard focus krijgen. Gebruik tabindex=0 alleen voor aangepaste widgets; gebruik nooit tabindex>0. Toon altijd focus — gebruik :focus-visible. Voeg een link om inhoud over te slaan toe. Houd de focus in modale vensters en herstel die bij het sluiten. Gebruik waar mogelijk het ingebouwde <dialog>. Verplaats de focus bij een routewijziging naar h1/main. Test door je muis weg te leggen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Toetsenbordnavigatie en focusbeheer” gratis?
Ja — de volledige tekst van “Toetsenbordnavigatie en focusbeheer” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Toetsenbordnavigatie en focusbeheer”?
Zorg dat alle interactieve elementen met Tab bereikbaar zijn, beheer de focus programmatisch in dialogen en routing en maak zichtbare focusindicatoren. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Toetsenbordnavigatie en focusbeheer”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- WCAG-niveaus A AA AAA
- Semantische HTML als basis
- ARIA-rollen en attributen
- Toetsenbordnavigatie en focusbeheer