2.4.3 Focus Order

WCAG – Definition

Wenn Inhalte per Tastatur erreichbar sind, muss die Fokusreihenfolge sinnvoll und verständlich sein. Der Fokus soll der logischen, visuellen und inhaltlichen Struktur der Seite folgen.

Bedeutung

  • Tastatur- und Screenreader-Nutzer verlassen sich auf die Reihenfolge von Tabulator-Schritten.

  • Eine unlogische Reihenfolge (z. B. erst Footer, dann Navigation, dann Inhalt) verwirrt und erschwert die Bedienung.

  • Guter Fokusfluss = bessere Orientierung, geringere Fehlerquote.

Ausreichende Techniken

Standardfluss einhalten

Der Browser folgt dem DOM → semantisches, gut strukturiertes HTML schreiben:

<header>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">Über uns</a>
  </nav>
</header>
<main>
  <h1>Willkommen</h1>
  <p>Inhalt…</p>
</main>
<footer>
  <a href="#impressum">Impressum</a>
</footer>

tabindex sparsam einsetzen

Tab-Reihenfolge beeinflussen:

  • tabindex="0" → Element in normaler Reihenfolge.

  • tabindex="-1" → per JS fokussierbar, nicht über Tab.

  • tabindex > 0 vermeiden → zerstört natürliche Reihenfolge.

<button tabindex="0">OK</button>
<div tabindex="-1" id="maincontent">…</div>

Dynamische Inhalte / Modale korrekt fokussieren

  • Beim Öffnen eines Dialogs Fokus ins Dialogfenster setzen.

  • Beim Schließen zurück zum Auslöser.

openBtn.addEventListener("click", () => {
  dialog.showModal();
  dialog.querySelector("input").focus();
});

Skip-Links unterstützen logischen Fokus

Skip-Link springt korrekt zum Hauptinhalt:

<a href="#main" class="skip-link">Zum Inhalt springen</a>
<main id="main" tabindex="-1">…</main>

Beratungstechnicken

  • Visuelle Reihenfolge = Fokusreihenfolge
    – keine visuellen Tricks, die DOM und Layout entkoppeln.

  • Konsistente Navigation über alle Seiten.

  • Fokusmanagement in SPAs → bei Route-Wechsel Fokus auf <h1> setzen.

  • ARIA-Attribute (aria-labelledby, aria-describedby) für bessere Orientierung.

  • Testen: Seite komplett mit Tastatur bedienen (Tab, Shift+Tab).

Fehler

  • Fokus springt unlogisch (z. B. Header → Footer → Sidebar → Hauptinhalt).
  • Einsatz von tabindex="99" für „wichtige“ Links → zerstört Ordnung.
  • Modale öffnen, aber Fokus bleibt im Hintergrund.
  • Versteckte Elemente bleiben im Fokusfluss (z. B. off-canvas Menü).
  • Skip-Link springt nicht wirklich zum Hauptbereich.