Tabindex

Der Tabindex ist ein HTML-Attribut, mit dem Du steuerst, ob und in welcher Reihenfolge Elemente einer Website per Tab-Taste erreichbar sind. Für alle, die ohne Maus surfen, entscheidet er darüber, ob eine Seite gut bedienbar ist. Hier erfährst Du, was die Werte -1, 0 und 1 (bzw. positive Zahlen) bedeuten, wie Du den Tabindex richtig einsetzt und welche Fehler Du vermeiden solltest.

Der Tabindex (englisch: tabindex attribute) ist ein globales Attribut in HTML. Global heißt: Du kannst es grundsätzlich jedem Element geben. Als Wert erwartet es eine ganze Zahl. Sie legt fest,

Einige Elemente sind schon von Haus aus fokussierbar, etwa Links mit href, button, input, select, textarea oder ein iFrame. Sie brauchen keinen Tabindex. Ohne das Attribut springt der Fokus in der Reihenfolge, in der diese Elemente im Quellcode stehen.

So sieht der Tabindex in HTML aus:

<div role=“button“ tabindex=“0″>Mehr anzeigen</div>

<p id=“fehler“ tabindex=“-1″>Bitte gib eine gültige E-Mail-Adresse ein.</p>

Entscheidend ist, ob der Wert negativ, null oder positiv ist.

Mit tabindex=“-1″ ist ein Element nicht per Tab-Taste erreichbar, lässt sich aber per JavaScript gezielt fokussieren. Das nutzt Du zum Beispiel für eine Fehlermeldung nach dem Absenden eines Formulars oder für den Inhalt eines eingeblendeten Dialogs. Setzt Du den Wert auf einen Button, verschwindet dieser aus der Tab-Reihenfolge. Seine Kindelemente bleiben dort aber erreichbar.

Mit tabindex=“0″ machst Du ein Element fokussierbar, das es normalerweise nicht ist. Es reiht sich dort ein, wo es im Quellcode steht. Typischer Einsatz sind eigene Steuerelemente, die nicht auf einem nativen Element aufbauen.

Positive Werte wie tabindex=“1″ oder tabindex=“2″ werden vor allen anderen Elementen angesprungen, in aufsteigender Reihenfolge. Erst danach folgen Elemente mit Wert 0 und die nativ fokussierbaren Elemente. Was zunächst praktisch klingt, sorgt schnell für Chaos. Google bezeichnet positive Werte deshalb als Anti-Pattern. Laut MDN liegt der maximal zulässige Wert bei 32767.

Viele Menschen bedienen Websites nur mit der Tastatur, etwa wegen motorischer Einschränkungen oder weil sie einen Screenreader nutzen. Für sie ist die Tab-Reihenfolge der Weg durch Deine Seite. Die Web Content Accessibility Guidelines (WCAG) fordern deshalb, dass alle Funktionen per Tastatur bedienbar sind und die Fokus-Reihenfolge logisch ist.

Seit Juni 2025 verpflichtet zudem das Barrierefreiheitsstärkungsgesetz viele Anbieter digitaler Produkte und Dienstleistungen zu barrierefreien Angeboten. Eine saubere Tab-Reihenfolge verbessert außerdem die User Experience aller Besucher. Ein direkter Rankingfaktor ist der Tabindex nicht. Das Google-Tool Lighthouse prüft im Bereich Barrierefreiheit aber, ob Elemente einen Tabindex größer als 0 haben.

Was ist der Unterschied zwischen tabindex -1 und 0?

Beide Werte machen ein Element fokussierbar. Mit 0 ist es zusätzlich ganz normal per Tab-Taste erreichbar, mit –1 hingegen nur gezielt per Skript.

Kann man den Tabindex in CSS setzen?

Nein. Der Tabindex ist ein reines HTML-Attribut. Per CSS gestaltest Du lediglich, wie der Fokus visuell aussieht, zum Beispiel mit :focus-visible.

Wie setze ich den Tabindex mit JavaScript, React oder Angular?

Warum funktioniert mein Tabindex nicht?

Häufige Ursachen sind versteckte Elemente (display: none oder visibility: hidden), deaktivierte Formularfelder (disabled), ein ungültiger Wert (wie ein leerer String) oder positive Werte an einer völlig anderen Stelle, die die gesamte Reihenfolge der Seite durcheinanderbringen.

Sollte man tabindex auf jedes Element setzen?

Nein. Auch viele Prüftools weisen explizit darauf hin: Der Tabindex gehört auschließlich auf interaktive Elemente. Reine Textabsätze mit tabindex=“0″ verlängern den Weg durch die Seite für Tastaturnutzer unnötig.

Der Tabindex steuert, wie Nutzer per Tastatur durch Deine Website navigieren. Mit -1 machst Du Elemente per Skript fokussierbar, mit 0 holst Du eigene Steuerelemente in die Tab-Reihenfolge. Auf positive Werte solltest Du verzichten. Baue Deinen Quellcode logisch auf und setze auf native HTML-Elemente. So bleibt Deine Seite barrierefrei und angenehm zu bedienen. Weitere Tipps für nutzerfreundliche Websites findest Du in unserem Beitrag zur Usability.