Tabindex uitgelegd

Hoe werkt tabindex

Wanneer iemand de Tab-toets indrukt, springt de focus naar het volgende focusbare element. De browser bepaalt welk element dat is op basis van drie dingen:

De tabindex-waarde van elementen (als die er is).
De positie in de HTML-code (de DOM-volgorde).
Of een element van nature focusbaar is (links met href, invoervelden, knoppen).

Je kunt op elk moment maar één element tegelijk focussen. Met Shift+Tab ga je terug naar het vorige element.

Volgens WCAG 2.1.1 (Toetsenbord) moet alle functionaliteit bedienbaar zijn via het toetsenbord en WCAG 2.4.3 (Focus volgorde) vereist dat de focus in een volgorde loopt die de betekenis en bediening van de pagina behoudt.

Welke waarden kun je gebruiken

tabindex=”-1″ (negatief getal)

Het element is niet bereikbaar met Tab, maar je kunt er wel programmatisch focus naartoe verplaatsen met JavaScript.

Wanneer gebruik je dit:

Foutmeldingen die na het verzenden van een formulier verschijnen en meteen focus moeten krijgen.
Modals of dialoogvensters die openen en waar de gebruiker direct in moet kunnen typen.
Elementen die tijdelijk verborgen zijn maar straks wel focus nodig hebben.

<div id="foutmelding" tabindex="-1" role="alert">
  <h2>Let op: je invoer bevat fouten</h2>
  <p>Controleer je e-mailadres en probeer opnieuw.</p>
</div>

<script>
  // Na validatie focus verplaatsen naar de melding
  document.getElementById('foutmelding').focus();
</script>

Voordeel: de foutmelding staat niet standaard in de Tab-volgorde (wat extra tabstops zou opleveren), maar krijgt wel aandacht op het juiste moment.

tabindex=”0″ (nul)

Het element doet mee in de normale tabvolgorde volgens zijn positie in de HTML-code.

Wanneer gebruik je dit:

Je maakt een custom component (zoals een klikbare kaart of accordeon-header) die focusbaar moet zijn.
Een element heeft geen standaard toetsenbordondersteuning maar moet wel bereikbaar zijn.

<div class="kaart" tabindex="0" role="button" onclick="openDetail()">
  <h3>Toegankelijkheidsscan</h3>
  <p>Ontdek knelpunten in je website</p>
</div>

Let op: gebruik bij voorkeur een echt <button>-element in plaats van een <div> met tabindex="0". Een button heeft automatisch toetsenbordondersteuning (Enter en Spatie activeren hem) en wordt door schermlezers herkend als bedieningselement.

tabindex=”1″ of hoger (positief getal)

Het element krijgt een expliciete positie in de focusvolgorde, vóór alle elementen met tabindex="0" of zonder tabindex.

Advies: gebruik dit niet. Positieve waarden maken de focusvolgorde onvoorspelbaar en moeilijk te onderhouden. Gebruikers verwachten dat de Tab-toets hen door de pagina leidt in de volgorde waarin content visueel staat.

<label for="naam">Naam:</label>
<input type="text" id="naam" tabindex="3">

<label for="email">E-mail:</label>
<input type="email" id="email" tabindex="1">

<button type="submit" tabindex="2">Versturen</button>

De gebruiker ziet visueel: Naam → E-mail → Versturen. Maar bij tabben gebeurt: E-mail (1) → Versturen (2) → Naam (3). Dit is verwarrend en niet logisch.

Wanneer gebruik je tabindex

tabindex=”0″ voor custom widgets

Als je een interactief element maakt dat geen standaard HTML-knop of link is, maak je het focusbaar met tabindex="0":

<div class="accordion-header" tabindex="0" role="button" aria-expanded="false">
  Wat is WCAG 2.2?
</div>

Vergeet niet om ook toetsenbordondersteuning toe te voegen (bijvoorbeeld Enter en Spatie om de accordion te openen).

tabindex=”-1″ voor focusmanagement

Bij dynamische content zoals modals, meldingen of lazy-loaded secties wil je soms direct de focus verplaatsen:

<div id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-titel">
  <h2 id="modal-titel">Weet je het zeker?</h2>
  <button>Ja, verwijderen</button>
  <button>Annuleren</button>
</div>

<script>
  function openModal() {
    document.getElementById('modal').style.display = 'block';
    document.getElementById('modal').focus();
  }
</script>

Dit patroon zorgt ervoor dat schermlezers en toetsenbordgebruikers meteen weten dat er een modal is geopend.

Roving tabindex voor complexe componenten

Bij menu’s, tabbladen of galerijen kun je het “roving tabindex”-patroon gebruiken:

Eén element in de groep heeft tabindex="0" (het actieve item).
Alle andere elementen hebben tabindex="-1".
Met pijltjestoetsen beweeg je binnen de groep; met Tab verlaat je de hele groep.

Dit voorkomt dat gebruikers door veel menu-items moeten tabben om bij de volgende sectie te komen.

Veelgemaakte fouten en hoe je ze voorkomt

Fout 1: Positieve tabindex gebruiken

Probleem: Je probeert de focusvolgorde handmatig te sturen met tabindex="1", "2", "3" enzovoort.

Gevolg: De volgorde komt niet overeen met de visuele layout. Gebruikers raken gedesoriënteerd.

Oplossing: Pas de HTML-volgorde aan in plaats van tabindex te gebruiken. Als de visuele volgorde niet klopt, gebruik dan CSS Grid of Flexbox om de layout aan te passen zonder de broncode-structuur te breken.

Fout 2: Belangrijke elementen niet focusbaar maken

Probleem: Je maakt een klikbare kaart of custom button, maar vergeet tabindex="0" toe te voegen.

Gevolg: Toetsenbordgebruikers kunnen het element niet bereiken.

Oplossing: Test je pagina door alleen met Tab en Enter te navigeren. Als je ergens niet komt waar je wel kunt klikken, voeg dan tabindex="0" toe (of beter: gebruik een semantisch element zoals <button>).

Fout 3: Te veel focuspunten creëren

Probleem: Je maakt containers focusbaar terwijl de knoppen erin al focusbaar zijn.

<!-- Fout: zowel de container als de knop zijn focusbaar -->
<div class="actiekaart" tabindex="0">
  <h3>Gratis scan</h3>
  <button>Start nu</button>
</div>

Gevolg: Gebruikers moeten twee keer tabben: eerst naar de <div>, dan naar de <button>. Dit is onnodig en verwarrend.

Oplossing: Maak alleen het element focusbaar dat daadwerkelijk een actie uitvoert (in dit geval de button). Of maak de hele kaart klikbaar met één focusbaar element.

Fout 4: Focus op onzichtbare elementen

Probleem: Een menu of modal is met CSS verborgen, maar de elementen erin hebben nog steeds tabindex="0".

Gevolg: Toetsenbordgebruikers tabben naar onzichtbare knoppen en raken de focus kwijt.

Oplossing: Voeg tabindex="-1" toe aan verborgen elementen, of gebruik display: none of visibility: hidden om ze ook uit de tabvolgorde te halen.

Fout 5: Focusindicator verbergen

Probleem: Je gebruikt outline: none in CSS om de focusring te verbergen, zonder een alternatief te bieden.

Gevolg: Ziende toetsenbordgebruikers zien niet waar ze zijn.

Oplossing: Geef altijd een duidelijke focusindicator, bijvoorbeeld met een outline of een opvallende rand.

button:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

Hoe test je tabindex

Handmatige toetsenbordtest

Klik in de adresbalk van je browser en druk op Tab.
Doorloop alle focusbare elementen met Tab (vooruit) en Shift+Tab (terug).
Controleer of de volgorde logisch is en overeenkomt met de visuele layout.
Controleer of je alle knoppen, links en invoervelden kunt bereiken.
Kijk of de focus altijd zichtbaar is (een ring, border of andere indicator).

Screenreadertest

Test met een screenreader (zoals NVDA of VoiceOver) of de focusvolgorde ook via spraak begrijpelijk blijft. Screenreaders kunnen lineair door content navigeren én met Tab tussen focusbare elementen springen. De ervaring moet in beide gevallen logisch zijn.

Vincent van Brakel

In dit artikel

Inhoudsopgave