Toetsenbordsneltoetsen

Tab
Navigeer tussen interactieve elementen
Shift + Tab
Achterwaartse navigatie
Entrée / Espace
Activeer knoppen en links
Échap
Sluit modals en menu's
↑ ↓
Navigeer in lijsten en menu's

Toetsenbordnavigatie in lijsten

Slecht voorbeeld

Menu met alleen Tab-navigatie:

🏠 Home
📋 Projecten
👥 Team
📊 Statistieken
⚙️ Instellingen
<!-- Slecht: Alleen Tab-navigatie -->
<div class="menu">
  <div tabindex="0">🏠 Home</div>
  <div tabindex="0">📋 Projecten</div>
  <div tabindex="0">👥 Team</div>
  <div tabindex="0">📊 Statistieken</div>
  <div tabindex="0">⚙️ Instellingen</div>
</div>

<!-- Gebruiker moet 5 keer tabben -->
<!-- Geen pijltjesnavigatie -->
<!-- Geen menusemantics -->

Goed voorbeeld

Menu met pijltjesnavigatie:

💡 Gebruik ↑ ↓ om te navigeren, Enter om te selecteren

<!-- Goed: pijltjesnavigatie met roving tabindex -->
<div
  role="menu"
  @keydown="handleKeydown"
>
  <div
    v-for="(item, i) in items"
    role="menuitem"
    :tabindex="selected === i ? 0 : -1"
    @focus="selected = i"
    :class="{ selected: selected === i }"
  >
    {{ item }}
  </div>
</div>
// Pijltjesnavigatie met roving tabindex
function handleKeydown(e) {
  switch(e.key) {
    case 'ArrowDown':
      selected = (selected + 1) % items.length
      break
    case 'ArrowUp':
      selected = selected === 0
        ? items.length - 1
        : selected - 1
      break
    case 'Enter':
      selectItem(selected)
      break
  }
}

Uitleg: Toetsenbordnavigeerbare lijsten maken het mogelijk pijltjestoetsen te gebruiken om tussen elementen te bewegen, naast klassieke Tab-navigatie.

Zichtbare focusstijlen

Slecht voorbeeld

Probeer te navigeren met Tab in dit gebied:

Link naar pagina
/* ❌ Verwijdert alle focusindicatoren */
*:focus {
  outline: none !important;
}

button:focus,
a:focus,
input:focus {
  outline: none !important;
}
<!-- ❌ Toegankelijkheidsproblemen: -->
<button>Knop 1</button>        <!-- Geen type, onzichtbare focus -->
<button>Knop 2</button>        <!-- Geen type, onzichtbare focus -->
<a href="#">Link</a>           <!-- Onzichtbare focus -->
<input type="text" />         <!-- Onzichtbare focus -->

<!-- Toetsenbordnavigatie onmogelijk visueel te volgen -->

Goed voorbeeld

Probeer te navigeren met Tab in dit gebied:

Link naar pagina
/* ✅ Zichtbare en toegankelijke focusindicatoren */
button:focus-visible {
  outline: 3px solid #4F46E5;
  outline-offset: 2px;
}

input:focus-visible {
  border-color: #4F46E5;
  outline: 2px solid #4F46E5;
  outline-offset: 1px;
}
<button type="button">Knop 1</button>
<button type="button">Knop 2</button>
<a href="#">Link naar pagina</a>
<input type="text" placeholder="Voer tekst in" />

Uitleg: Gebruikers die navigeren met toetsenbord hebben duidelijke visuele indicatoren nodig om te weten waar ze zich op de pagina bevinden.

Skip link (Spring naar inhoud)

Slecht voorbeeld

HomeProductenDienstenOverBlogContactOndersteuningMijn account

Hoofdinhoud

De gebruiker moet door alle navigatielinks navigeren...

<!-- Slecht: geen skip link -->
<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">Producten</a>
    <a href="#">Diensten</a>
    <!-- 10+ navigatielinks... -->
  </nav>
</header>
<main>
  <!-- Gebruiker moet alle navigatie doorlopen -->
  <h1>Hoofdinhoud</h1>
</main>

Goed voorbeeld

HomeProductenDienstenOverBlogContactOndersteuningMijn account

Hoofdinhoud

De gebruiker kan hier direct toegang toe krijgen dankzij de skip link!

/* Skip link standaard verborgen, zichtbaar bij focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  border-radius: 0.625rem;
}

.skip-link:focus {
  top: 1rem;
}
<a href="#main-content" class="skip-link">
  Spring naar hoofdinhoud
</a>
<header>
  <nav aria-label="Hoofdnavigatie">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/produits">Producten</a></li>
      <li><a href="/services">Diensten</a></li>
    </ul>
  </nav>
</header>
<main id="main-content">
  <h1>Hoofdinhoud</h1>
</main>

Uitleg: Skip links stellen toetsenbordgebruikers in staat direct naar de hoofdinhoud te gaan zonder alle navigatie te doorlopen.

Modal met focus trap

Slecht voorbeeld

<!-- Slecht: modal zonder focusbeheer -->
<div v-if="modalOpen" class="modal-overlay" @click="close">
  <div class="modal-content" @click.stop>
    <div class="modal-header">
      <h3>Actie bevestigen</h3>
      <button @click="close">×</button>
    </div>
    <div class="modal-body">
      <p>Weet je zeker dat je wilt doorgaan?</p>
      <input type="text" placeholder="Reden (optioneel)" />
    </div>
    <div class="modal-footer">
      <button @click="close">Annuleren</button>
      <button @click="confirm">Bevestigen</button>
    </div>
  </div>
</div>

Goed voorbeeld

<!-- Goed: modal met focus trap -->
<div
  v-if="modalOpen"
  class="modal-overlay"
  @click="closeModal"
  @keydown.esc="closeModal"
>
  <div
    class="modal-content"
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-title"
    @click.stop
  >
    <header class="modal-header">
      <h2 id="modal-title">Actie bevestigen</h2>
      <button
        type="button"
        @click="closeModal"
        aria-label="Modal sluiten"
        class="close-btn"
      >×</button>
    </header>

    <div class="modal-body">
      <p>Weet je zeker dat je wilt doorgaan?</p>
      <input
        ref="firstInput"
        type="text"
        placeholder="Reden (optioneel)"
        @keydown.tab="handleFocusTrap"
      />
    </div>

    <footer class="modal-footer">
      <button
        type="button"
        @click="closeModal"
        @keydown.tab="handleFocusTrap"
      >Annuleren</button>
      <button
        type="button"
        ref="lastButton"
        @click="confirmAction"
        @keydown.tab="handleFocusTrap"
      >Bevestigen</button>
    </footer>
  </div>
</div>
// Essentiële functies :
// - Auto focus op eerste element
// - Focus trap (Tab/Shift+Tab)
// - Sluiten bij Escape
// - Focus terugzetten op trigger-element

function handleFocusTrap(event) {
  const focusableElements = modalContent.querySelectorAll(
    'button, input, [tabindex]:not([tabindex="-1"])'
  )
  const firstElement = focusableElements[0]
  const lastElement = focusableElements[focusableElements.length - 1]

  if (event.shiftKey && document.activeElement === firstElement) {
    event.preventDefault()
    lastElement.focus()
  } else if (!event.shiftKey && document.activeElement === lastElement) {
    event.preventDefault()
    firstElement.focus()
  }
}

Uitleg: Modals moeten de focus erin houden en sluiten mogelijk maken met de Escape-toets. Focus moet terugkeren naar het element dat de modal opende.

© 2026 Romain Malnoult. Alle rechten voorbehouden.