Tabindex – Tastaturfokus in HTML gezielt steuern
Das tabindex-Attribut steuert die Reihenfolge, in der Elemente per Tabulatortaste fokussiert werden. Es ist essenziell für barrierefreie Webinterfaces, da viele Nutzer:innen – z. B. mit Screenreader oder ohne Maus – ausschließlich per Tastatur navigieren.
Warumtabindexwichtig ist
Standardmäßig sind nur interaktive HTML-Elemente wie Links, Buttons oder Formularfelder fokussierbar. Mit tabindex kannst du auch andere Elemente (z. B. <div>, <span>) in den Tab-Fokus einfügen oder gezielt von der Navigation ausschließen.
Tabindex-Werte und Bedeutung
| Wert | Verhalten |
|---|---|
| tabindex="0" | Element wird in natürlicher Reihenfolge fokussierbar |
| tabindex="-1" | Element ist nicht per Tab erreichbar, aber fokussierbar per Script |
| tabindex="1" oder größer | Element wird vor dem natürlichen Fluss fokussiert (veraltet, nicht empfohlen) |
Beispiel – Benutzerdefinierter Fokus
<div tabindex="0" role="button" onclick="...">
Menü öffnen
</div>Das Element wird nun per Tab erreichbar – wichtig z. B. für benutzerdefinierte Komponenten oder ARIA-Rollen.
Best Practices
- tabindex="0" verwenden, um benutzerdefinierte Bedienelemente in die natürliche Tab-Reihenfolge einzufügen.
- tabindex="-1" für modale Dialoge, Skiplinks oder programmatisch fokussierte Elemente.
- Werte >0 vermeiden – sie erzeugen unerwartetes Verhalten und erschweren Wartung.
- Fokus-Reihenfolge logisch und konsistent halten – testen mit Tastaturnavigation.
WCAG-Bezug
Der richtige Einsatz von tabindex unterstützt die folgenden WCAG 2.1-Erfolgskriterien:
- 2.1.1 – Tastaturbedienbarkeit
- 2.4.3 – Fokusreihenfolge
- 2.4.7 – Sichtbarer Fokus
Mehr zu unseren Leistungen im Bereich Digitale Barrierefreiheit erfahren Sie hier.
