Tastaturnavigation und Fokusverwaltung
Stellen Sie sicher, dass alle interaktiven Elemente per Tab erreichbar sind, verwalten Sie den Fokus in Dialogen und beim Routing programmatisch und erstellen Sie sichtbare Fokusindikatoren.
Tastaturnavigation und Fokusverwaltung ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Tastaturnavigation wichtig ist
Viele Nutzer können keine Maus verwenden: Menschen mit motorischen Einschränkungen, Nutzer von Screenreadern und erfahrene Nutzer, die lieber die Tastatur verwenden. Wenn Ihre App nicht per Tastatur navigierbar ist, funktioniert sie für diese Nutzer nicht.
Tab und Shift+Tab
Tab bewegt den Fokus zum nächsten interaktiven Element. Shift+Tab bewegt ihn zum vorherigen. Die Reihenfolge folgt standardmäßig der DOM-Reihenfolge – ändern Sie das nicht künstlich, sondern lassen Sie das DOM Ihre Tab-Reihenfolge bestimmen.
Was standardmäßig fokussierbar ist
Native interaktive Elemente sind fokussierbar: a[href], button, input, select, textarea, summary. Benutzerdefinierte Elemente benötigen tabindex.
tabindex-Werte
tabindex="0": wird an seiner Position im DOM in die Tab-Reihenfolge aufgenommen. tabindex="-1": nur über JS fokussierbar (Script-Fokus, nicht über Tab). tabindex=">0": Anti-Pattern – erzeugt eine verwirrende Fokusreihenfolge und sollte niemals verwendet werden.
<!-- 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>Sichtbarer Fokusindikator
Entfernen Sie niemals den Fokusrahmen, ohne einen Ersatz bereitzustellen. WCAG verlangt für jedes fokussierbare Element einen sichtbaren Indikator.
/* 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
Die Pseudoklasse :focus-visible wird nur ausgelöst, wenn der Fokus über die Tastatur und nicht durch einen Mausklick gesetzt wurde. So können Sie saubere Mausdesigns beibehalten und gleichzeitig den Tastaturfokus anzeigen.
Sprunglink zum Inhalt
Das erste fokussierbare Element sollte ein Sprunglink sein, damit Tastaturnutzer die Header-Navigation überspringen und direkt zum Hauptinhalt gelangen können.
<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;
}Fokusfalle in Modalfenstern
Wenn ein Modal geöffnet wird, sollte der Fokus darin eingeschlossen sein – Tab vom letzten Element springt zum ersten, Shift+Tab vom ersten zum letzten. Mit der Escape-Taste wird das Modal geschlossen.
// 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();Das dialog-Element verwenden
Das native <dialog> von HTML übernimmt Fokusfalle, Schließen mit Escape und den Modal-Hintergrund automatisch.
<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>Fokusverwaltung nach einem Routenwechsel
SPAs laden die Seite nicht neu, daher erhalten Screenreader-Nutzer kein Signal, dass eine Navigation stattgefunden hat. Verschieben Sie den Fokus bei einem Routenwechsel auf die h1 oder das main-Element der neuen Seite.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();Die Fokusreihenfolge sollte der visuellen Reihenfolge entsprechen
Stellen Sie sicher, dass die DOM-Reihenfolge dem visuellen Ablauf entspricht. Wenn CSS Elemente neu anordnet (flex order, grid placement, position absolute), stimmt die Tab-Reihenfolge nicht mehr überein – das ist für alle verwirrend.
Testen Sie ohne Maus
Der nützlichste Barrierefreiheitstest: Trennen Sie Ihre Maus und versuchen Sie, die gesamte App mit Tab, Shift+Tab, Enter, Leertaste und den Pfeiltasten zu bedienen. Wenn Sie nicht weiterkommen, kommen auch Ihre Nutzer nicht weiter.
Kurze Überprüfung
Mit welcher CSS-Pseudoklasse können Sie den Fokusrahmen nur dann formatieren, wenn der Fokus von der Tastatur und nicht durch einen Mausklick gesetzt wurde?
Zusammenfassung: Tastaturnavigation
Native interaktive Elemente sind standardmäßig fokussierbar. Verwenden Sie tabindex=0 nur für benutzerdefinierte Widgets, niemals tabindex>0. Zeigen Sie den Fokus immer an – verwenden Sie :focus-visible. Fügen Sie einen Sprunglink zum Inhalt hinzu. Schließen Sie den Fokus in Modalfenstern ein und stellen Sie ihn beim Schließen wieder her. Verwenden Sie nach Möglichkeit das native <dialog>. Verschieben Sie den Fokus bei einem Routenwechsel auf h1/main. Testen Sie ohne Maus.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Tastaturnavigation und Fokusverwaltung“ kostenlos?
Ja — der vollständige Text von „Tastaturnavigation und Fokusverwaltung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Tastaturnavigation und Fokusverwaltung“?
Stellen Sie sicher, dass alle interaktiven Elemente per Tab erreichbar sind, verwalten Sie den Fokus in Dialogen und beim Routing programmatisch und erstellen Sie sichtbare Fokusindikatoren. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Tastaturnavigation und Fokusverwaltung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- WCAG-Stufen A, AA, AAA
- Semantisches HTML als Grundlage
- ARIA-Rollen und -Attribute
- Tastaturnavigation und Fokusverwaltung