Tastenkombinationen

Tab
Zwischen interaktiven Elementen navigieren
Shift + Tab
Rückwärts-Navigation
Entrée / Espace
Schaltflächen und Links aktivieren
Échap
Modals und Menüs schließen
↑ ↓
In Listen und Menüs navigieren

Tastaturnavigation in Listen

Schlechtes Beispiel

Menü nur mit Tab-Navigation:

🏠 Startseite
📋 Projekte
👥 Team
📊 Statistiken
⚙️ Einstellungen
<!-- Schlecht: nur Tab-Navigation -->
<div class="menu">
  <div tabindex="0">🏠 Startseite</div>
  <div tabindex="0">📋 Projekte</div>
  <div tabindex="0">👥 Team</div>
  <div tabindex="0">📊 Statistiken</div>
  <div tabindex="0">⚙️ Einstellungen</div>
</div>

<!-- Benutzer muss 5 Mal Tab drücken -->
<!-- Keine Pfeilnavigation -->
<!-- Keine Menü-Semantik -->

Gutes Beispiel

Menü mit Pfeilnavigation:

💡 Verwenden Sie ↑ ↓ zum Navigieren, Enter zum Auswählen

<!-- Gut: Pfeilnavigation mit 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>
// Pfeilnavigation mit 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
  }
}

Erklärung: Mit der Tastatur navigierbare Listen ermöglichen die Verwendung von Pfeiltasten zum Bewegen zwischen Elementen, zusätzlich zur klassischen Tab-Navigation.

Sichtbare Fokusstile

Schlechtes Beispiel

Versuchen Sie, mit Tab in diesem Bereich zu navigieren:

Link zur Seite
/* ❌ Entfernt alle Fokusindikatoren */
*:focus {
  outline: none !important;
}

button:focus,
a:focus,
input:focus {
  outline: none !important;
}
<!-- ❌ Barrierefreiheitsprobleme: -->
<button>Schaltfläche 1</button>        <!-- Kein Typ, unsichtbarer Fokus -->
<button>Schaltfläche 2</button>        <!-- Kein Typ, unsichtbarer Fokus -->
<a href="#">Link</a>           <!-- Unsichtbarer Fokus -->
<input type="text" />         <!-- Unsichtbarer Fokus -->

<!-- Tastaturnavigation visuell unmöglich zu folgen -->

Gutes Beispiel

Versuchen Sie, mit Tab in diesem Bereich zu navigieren:

Link zur Seite
/* ✅ Sichtbare und barrierefreie Fokusindikatoren */
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">Schaltfläche 1</button>
<button type="button">Schaltfläche 2</button>
<a href="#">Link zur Seite</a>
<input type="text" placeholder="Text eingeben" />

Erklärung: Benutzer, die mit der Tastatur navigieren, benötigen klare visuelle Indikatoren, um zu wissen, wo sie sich auf der Seite befinden.

Skip-Link (Zum Inhalt springen)

Schlechtes Beispiel

StartseiteProdukteDienstleistungenÜber unsBlogKontaktSupportMein Konto

Hauptinhalt

Der Benutzer muss durch alle Navigationslinks gehen...

<!-- Schlecht: kein Skip-Link -->
<header>
  <nav>
    <a href="#">Startseite</a>
    <a href="#">Produkte</a>
    <a href="#">Dienstleistungen</a>
    <!-- 10+ Navigationslinks... -->
  </nav>
</header>
<main>
  <!-- Benutzer muss die gesamte Navigation durchlaufen -->
  <h1>Hauptinhalt</h1>
</main>

Gutes Beispiel

StartseiteProdukteDienstleistungenÜber unsBlogKontaktSupportMein Konto

Hauptinhalt

Der Benutzer kann dank des Skip-Links direkt hierher gelangen!

/* Skip-Link standardmäßig versteckt, bei Fokus sichtbar */
.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">
  Zum Hauptinhalt springen
</a>
<header>
  <nav aria-label="Hauptnavigation">
    <ul>
      <li><a href="/">Startseite</a></li>
      <li><a href="/produits">Produkte</a></li>
      <li><a href="/services">Dienstleistungen</a></li>
    </ul>
  </nav>
</header>
<main id="main-content">
  <h1>Hauptinhalt</h1>
</main>

Erklärung: Skip-Links ermöglichen es Tastatur-Benutzern, direkt zum Hauptinhalt zu springen, ohne durch die gesamte Navigation gehen zu müssen.

Modal mit Fokusfalle

Schlechtes Beispiel

<!-- Schlecht: Modal ohne Fokusverwaltung -->
<div v-if="modalOpen" class="modal-overlay" @click="close">
  <div class="modal-content" @click.stop>
    <div class="modal-header">
      <h3>Aktion bestätigen</h3>
      <button @click="close">×</button>
    </div>
    <div class="modal-body">
      <p>Sind Sie sicher, dass Sie fortfahren möchten?</p>
      <input type="text" placeholder="Grund (optional)" />
    </div>
    <div class="modal-footer">
      <button @click="close">Abbrechen</button>
      <button @click="confirm">Bestätigen</button>
    </div>
  </div>
</div>

Gutes Beispiel

<!-- Gut: Modal mit Fokusfalle -->
<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">Aktion bestätigen</h2>
      <button
        type="button"
        @click="closeModal"
        aria-label="Modal schließen"
        class="close-btn"
      >×</button>
    </header>

    <div class="modal-body">
      <p>Sind Sie sicher, dass Sie fortfahren möchten?</p>
      <input
        ref="firstInput"
        type="text"
        placeholder="Grund (optional)"
        @keydown.tab="handleFocusTrap"
      />
    </div>

    <footer class="modal-footer">
      <button
        type="button"
        @click="closeModal"
        @keydown.tab="handleFocusTrap"
      >Abbrechen</button>
      <button
        type="button"
        ref="lastButton"
        @click="confirmAction"
        @keydown.tab="handleFocusTrap"
      >Bestätigen</button>
    </footer>
  </div>
</div>
// Wesentliche Funktionen :
// - Auto-Fokus auf erstes Element
// - Fokusfalle (Tab/Shift+Tab)
// - Schließen mit Escape
// - Fokus zum auslösenden Element zurückkehren

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()
  }
}

Erklärung: Modals müssen den Fokus innen halten und das Schließen mit der Escape-Taste ermöglichen. Der Fokus muss zum Element zurückkehren, das das Modal geöffnet hat.

© 2026 Romain Malnoult. Alle Rechte vorbehalten.