Best Practices für die Tab-Reihenfolge

✅ Best Practices für die Tab-Reihenfolge (Tab Order) einer barrierefreien Website

Die goldene Regel:
Die Tabreihenfolge muss der logischen, visuellen und semantischen Reihenfolge des Inhalts folgen.
Kurz: So wie du die Seite liest, so soll sie sich auch tabben lassen.

Die wichtigsten Grundsätze:

1. Natürliche Reihenfolge durch HTML-Struktur

Die Tabreihenfolge entsteht automatisch durch:

  • den DOM (Document Object Model)
  • alle fokussierbaren Elemente (<a>, <button>, <input>, etc.)

➡️ Der Browser macht es automatisch richtig, wenn der Code logisch aufgebaut ist.
Beste Lösung: Nicht eingreifen, sondern den HTML-Aufbau sauber halten.

2. Finger weg von tabindex – außer sinnvoll!

tabindex ist wie Chili:
Ein kleines bisschen ist toll – zu viel ruiniert dir das Gericht.

Gut:

  • tabindex="0" → macht ein Element fokussierbar, reiht es aber korrekt in die Tabfolge ein
    (z. B. für Custom Controls)

Schlecht:

  • tabindex="1" oder höher → erzwingt eine künstliche Tabreihenfolge
    (führt fast immer zu Chaos)

Verbotene Zone:

  • Massive Nutzung von tabindex zum “Umsortieren” der Seite.
    Das bricht Barrierefreiheit komplett.

3. Fokus nur auf Interaktives

Tab folgt nur Elementen, die bedienbar sind:

  • Links
  • Buttons
  • Formulare
  • Custom Controls (mit ARIA)

NICHT deberían fokussierbar sein:

  • Divs
  • Überschriften
  • Icons
    … außer sie sind tatsächlich interaktiv.

4. Sichtbarer Fokus ist Pflicht

→ Nutzer:innen müssen sehen, wo sie gerade sind.
(Standard-Fokus nicht entfernen – oder eigenen sichtbaren Stil definieren.)

5. Modale Dialoge oder Overlays

  • Beim Öffnen → Fokus springt in das Modal
  • Beim Schließen → Fokus zurück zum auslösenden Element
  • Elemente außerhalb des Modals → nicht tabbar (durch Focus Trap)

6. Skip-Link am Seitenanfang

Ein “skip to content”-Link ist Standard-Barrierefreiheit.

 

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

🔧 Wie wird die Tabreihenfolge definiert?

1. Durch die Position im DOM (natürliche Reihenfolge)

Der wichtigste Punkt:
Alles, was im DOM steht, wird in dieser Reihenfolge getabbt.

Beispiel:

 

<a href="/start">Start</a> <button>Login</button> <input type="text">

→ Tab springt genau in dieser Reihenfolge.

2. Durch tabindex (sparsam einsetzen!)

  • tabindex="0"
    → Element wird in natürlicher Reihenfolge fokussierbar gemacht
  • tabindex="-1"
    → Element ist fokussierbar, aber nicht tabbar
    (z. B. für Fokus per JavaScript)
  • tabindex="1" oder höher
    → Tab-Hölle.
    Verschiebt Elemente künstlich nach vorne.

🧪 Perfekter Workflow für barrierefreie Tab-Navigation

  1. HTML logisch aufbauen (Header → Nav → Main → Footer)
  2. Interaktive Elemente semantisch korrekt nutzen
    („Button bleibt Button“ – nicht „div mit Click-Listener“)
  3. Tabindex nur für Custom Controls
  4. Fokus-Stile nicht entfernen
  5. Keyboard-Test durchführen:
    • Tab vorwärts
    • Shift+Tab rückwärts
    • Enter/Space testen
    • Escape (für modale Dialoge)
  6. Screenreader kurz checken (NVDA, VoiceOver)

Und ja, das Keyboard ist gnadenlos ehrlich — wenn es dort funktioniert, ist die Seite meist gut gebaut.

Tags