2.4.3 - Fokusreihenfolge

A 2.0 Umsetzung

Ziel

Sicherstellen, dass die Reihenfolge, in der fokussierbare Elemente angesteuert werden, logisch und bedienbar bleibt, um die Navigation durch Inhalte für Tastaturbenutzer zu erleichtern.

Beschreibung

Erleichterung der Navigation durch eine sinnvolle, erwartbare Fokusreihenfolge.
Unterstützung von Tastaturbenutzern und Nutzern assistiver Technologien.
Interaktive Elemente wie Links, Schaltflächen, Formulare oder Dialoge müssen in logischer Reihenfolge bedienbar sein.
Sicherstellen, dass die Reihenfolge mit der Bedeutung und Struktur des Inhalts übereinstimmt.
Fehler wie unlogische Reihenfolgen oder unerwartetes Springen vermeiden.

Anforderungen

Visuelle Anordnung und Fokusreihenfolge konsistent gestalten.

Elemente im HTML- oder DOM-Stream in logischer Reihenfolge platzieren.
Modale Dialoge so programmieren, dass der Fokus bei deren Aktivierung innerhalb bleibt.
<tabindex>-Attribute nur sparsam und sinnvoll einsetzen.
Keine unnötigen Fokuswechsel oder Autofocus-Attribute verwenden, die die natürliche Reihenfolge stören.

Code-Beispiele

Vermeiden von unlogischen Tabulatorreihenfolgen mit tabindex:

<a href="#section1">Zu Abschnitt 1</a>
<div id="section1" tabindex="-1">
  <p>Dies ist Abschnitt 1.</p>
</div>
<a href="#section2">Zu Abschnitt 2</a>
<div id="section2" tabindex="-1">
  <p>Dies ist Abschnitt 2.</p>
</div>