0Pricing
HTML Academy · Lektion

Tastaturnavigation und Fokusreihenfolge

Stellen Sie sicher, dass alle Funktionen per Tastatur erreichbar und logisch bedienbar sind

Tastaturnavigation und Fokusreihenfolge ist eine kostenlose HTML 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 HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Wer benötigt Tastaturnavigation?

Viele Nutzer sind auf Tastaturnavigation angewiesen:

  • Motorische Beeinträchtigungen — die Maus kann nicht verwendet werden
  • Erfahrene Nutzer — bevorzugen Tastenkürzel
  • Screenreader-Nutzer — navigieren vollständig per Tastatur
  • Nutzer von Switch Access — verwenden Schalter, die Tastendrücke simulieren

Von Natur aus fokussierbare Elemente

Diese HTML-Elemente können standardmäßig per Tastatur fokussiert werden:

  • <a href> — Tab bewegt den Fokus dorthin, Enter aktiviert das Element
  • <button> — Tab bewegt den Fokus dorthin, Enter/Leertaste aktiviert das Element
  • <input>, <textarea>, <select> — Tab bewegt den Fokus zu diesen Elementen
  • <details> / <summary> — Tab + Enter

Tab-Reihenfolge

Der Browser bestimmt die Tab-Reihenfolge anhand folgender Regeln:

  • Standardmäßig DOM-Reihenfolge — Elemente werden in der Reihenfolge fokussiert, in der sie im HTML erscheinen
  • Positive tabindex-Werte — diese Elemente werden zuerst in aufsteigender Reihenfolge fokussiert
  • tabindex="0" — an der Position im DOM in die natürliche Tab-Reihenfolge aufgenommen
  • tabindex="-1" — nicht in der Tab-Reihenfolge; nur per Skript fokussierbar

Natürliche Tab-Reihenfolge = DOM-Reihenfolge

Die Lesereihenfolge Ihres HTML sollte der visuellen Anordnung entsprechen:

<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- BAD: visually reordered with CSS, DOM order broken:
     CSS flexbox order: doesn't affect tab order!
     Screen readers and keyboard users follow DOM order, not CSS order -->

Sichtbarer Fokusindikator

WCAG 2.4.7 (Konformitätsstufe AA): Der Tastaturfokus muss sichtbar sein:

/* NEVER do this: */
* { outline: none; }           /* removes all focus outlines */

/* GOOD: styled focus indicator: */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* :focus-visible shows outline for keyboard only
   mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */

Benutzerdefinierte Fokusstile

Fokusstile des Designsystems:

/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}

/* Always ensure 3:1 contrast ratio between
   focus indicator and background (WCAG 2.4.11 Level AA) */

Logische Fokusreihenfolge

Die Fokusreihenfolge sollte logisch und vorhersehbar sein — WCAG 2.4.3 (Konformitätsstufe A):

<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->

<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->

Skiplinks

Skiplinks ermöglichen es Tastaturnutzern, sich wiederholende Navigation zu überspringen:

<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Visually hidden until focused: -->
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #0070f3;
  color: white;
  padding: 0.75rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;  /* visible when focused -->
}

Fokusfalle in Modalfenstern

Modale Fenster müssen den Fokus so lange einschließen, wie sie geöffnet sind:

<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->

const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');

function openModal() {
  modal.removeAttribute('hidden');
  modal.querySelector('button, [tabindex="0"]').focus();
}

function closeModal() {
  modal.setAttribute('hidden', '');
  trigger.focus();
}

Tastenkürzel

Implementieren Sie Tastenkürzel mit Event-Listenern:

document.addEventListener('keydown', (e) => {
  // Close modal on Escape:
  if (e.key === 'Escape') closeModal();

  // Navigate tabs with arrow keys:
  if (e.key === 'ArrowRight') focusNextTab();
  if (e.key === 'ArrowLeft') focusPrevTab();

  // Submit form on Enter (default behavior in inputs):
  // Nothing needed — browser handles this
});

Tastaturnavigation testen

So testen Sie die Barrierefreiheit per Tastatur:

  1. Legen Sie die Maus weg und verwenden Sie ausschließlich die Tastatur
  2. Drücken Sie Tab — können Sie jedes interaktive Element erreichen?
  3. Ist der Fokusindikator immer sichtbar?
  4. Ist die Tab-Reihenfolge logisch?
  5. Können Sie alle Funktionen (Formulare, Modalfenster, Dropdowns) ohne Maus verwenden?
  6. Drücken Sie Umschalt+Tab, um rückwärts zu navigieren

Schnelltest

Welche CSS-Eigenschaft sollten Sie für die Tastaturbarrierefreiheit niemals bei allen Elementen entfernen?

Zusammenfassung: Tastaturnavigation

Wichtige Grundlagen der Tastaturbarrierefreiheit:

  • Alle interaktiven Elemente müssen per Tab erreichbar sein
  • DOM-Reihenfolge = Tab-Reihenfolge — sie muss der visuellen Anordnung entsprechen
  • Entfernen Sie niemals Fokusumrandungen — verwenden Sie :focus-visible für benutzerdefinierte Stile
  • Skiplinks ermöglichen das Überspringen sich wiederholender Navigation
  • Schließen Sie den Fokus in Modalfenstern ein; stellen Sie den Fokus beim Schließen wieder her
  • Testen Sie Ihre Website ausschließlich mit der Tastatur

Häufig gestellte Fragen

Ist die Lektion „Tastaturnavigation und Fokusreihenfolge“ kostenlos?

Ja — der vollständige Text von „Tastaturnavigation und Fokusreihenfolge“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Tastaturnavigation und Fokusreihenfolge“?

Stellen Sie sicher, dass alle Funktionen per Tastatur erreichbar und logisch bedienbar sind Du übst HTML 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 HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML 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 Fokusreihenfolge“?

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 HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML 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

  1. Warum Barrierefreiheit wichtig ist: WCAG-Stufen
  2. Überschriftenhierarchie für Screenreader
  3. Alternativtexte für Bilder: wann und wie
  4. Tastaturnavigation und Fokusreihenfolge
← Zurück zu HTML Academy