Den HTML tabindex richtig einsetzen

Manchmal fühlt sich das Navigieren mit der Tastatur wirklich an wie eine Runde „Blinde Kuh“ im Web. Die Tab-Taste gedrückt – nichts passiert. Noch einmal und plötzlich landet der Fokus irgendwo im Footer. Wer auf Mausunterstützung verzichten muss oder will, kennt dieses Spiel. Dabei ist es eigentlich ganz einfach: die Richtige Nutzung HTML-Attributs tabindex legt fest, in welcher Reihenfolge ein Nutzer durch interaktive Elemente navigiert – oder ob er sie überhaupt erreicht. Ein kleines Attribut mit großer Wirkung. Und leider auch mit großem Fehlerpotenzial.

Heute geht es darum, wie der tabindex funktioniert, wann er hilft und wann er eher im Weg steht. Los geht’s.

Was ist der HTML tabindex?

Der tabindex entscheidet, ob ein Element fokussierbar ist – und in welcher Reihenfolge es beim Tabben angesteuert wird. Er ist damit entscheidend für alle, die nicht mit der Maus unterwegs sind. Einige HTML-Elemente bringen diesen Fokus von Haus aus mit – ganz ohne zusätzliche Angaben.

Dazu gehören zum Beispiel:

– Links (<a href="…">)
– Buttons (<button>)
– Formularfelder (<input>, <select>, <textarea>)
– Zusammenklappbare Bereiche (<summary>)
– …und ein paar Spezialfälle wie iframe oder area, je nach Kontext

Diese Elemente sind also automatisch Teil der Tab-Reihenfolge. Einfach, weil sie interaktiv sind. Warum also braucht man dann überhaupt noch ein tabindex-Attribut?

Kurz gesagt: Weil man damit die Regeln ein bisschen selbst schreiben kann. Der tabindex hilft, wenn man:

• einem nicht-interaktiven Element wie einem <div> Tastaturfokus geben möchte,
• ein Element absichtlich aus der Tab-Reihenfolge nehmen will,
• oder die Tab-Reihenfolge bewusst beeinflussen muss (aber Vorsicht, dazu kommen wir noch).

Und woher kommt der Name? Nunja, „Tab“ steht für die Tabulatortaste, „index“ für die Reihenfolge. Kein Fancy Tech-Buzzword also.

tabindex = -1, 0, 1? Wo liegt der Unterschied?

Okay, also tabindex ist ein Attribut, das sagt: „Dieses Element soll mit der Tabulatortaste erreichbar sein oder eben nicht.“ Als Wert werden aber Zahlen übergeben. Was bedeuten die? Warum minus eins? Warum null? Warum überhaupt größer als null?

Hier kommt der Überblick, für den es keinen Taschenrechner braucht.

tabindex="0" – die natürliche Ordnung

Mit tabindex="0" wird ein Element fokussierbar, aber es reiht sich brav dort ein, wo es im HTML-Dokument steht. Interaktive Seitenelemente werden also entsprechend ihrer Reihenfolge im Quelltext angesprungen. Das ist ideal für HTML-Elemente, die eigentlich gar keinen Fokus hätten (z. B. ein <div> mit JavaScript-Interaktion) die sich aber in den natürlichen Fluss einsortieren sollen. Das ist das Standardverhalten, das auch alle nativ fokussierbaren Elemente von vorhin besitzen.

tabindex="-1" – Fokus nur auf Einladung

Minus eins (oder eigentlich alle negativen Zahlen) bedeutet: Das Element kann zwar durch JavaScript fokussiert werden, aber nicht per Tab-Taste. Praktisch z. B. für modale Dialoge, die beim Öffnen sofort fokussiert werden sollen – aber nicht durch wildes Tabben erreichbar sein dürfen.

tabindex="1" (oder größer) – Hier entscheide ich

tabindex="1" setzt die Tab-Reihenfolge manuell, unabhängig vom HTML-Aufbau. Die Ordnung der Zahlen legt die Tab-Reihenfolge fest, beginnend bei der kleinsten. Das klingt nach Kontrolle, führt aber oft zu Chaos. Wieso, das erkläre ich später in Ruhe.

Kann der tabindex in CSS gesetzt werden?

Kurze Antwort: Nein – der tabindex ist ein reines HTML-Attribut. Es lässt sich nicht per CSS setzen oder manipulieren.

Es gab mal Ansätze in diese Richtung. Das CSS-Attribut user-focus und das Mozilla-Pendant -moz-user-focus sollten ursprünglich steuern, ob ein Element fokussierbar ist. Quasi ein CSS-Weg, Tastaturinteraktivität zu beeinflussen. Gedacht war das z. B. für benutzerdefinierte Steuerelemente oder interaktive Komponenten in Web-Anwendungen.

Aber: user-focus wurde nie von den Browser-Herstellern implementiert und auch -moz-user-focus wird inzwischen nicht mehr von Firefox unterstützt. Sie sind damit kein Ersatz für den tabindex.

Chaos stiften – Tabreihenfolge und Barrierefreiheit

Die Reihenfolge, in der sich Nutzer per Tab-Taste durch eine Webseite bewegen, ist mehr als nur Komfort. Für Menschen, die auf die Nutzung der Tastatur angewiesen sind, macht sie einen wichtigen Unterschied und kann entscheiden, wie angenehm nutzbar Ihre Website ist. Ist die Tab-Reihenfolge unlogisch, führt sie in Sackgassen oder überspringt wichtige Inhalte, wird die gesamte Seite schnell zur Barriere.

Was sagen die WCAG?

Die WCAG (Web Content Accessibility Guidelines) formulieren in den Erfolgskriterien 2.1.1 und 2.1.3 Tastatur in unterschiedlicher Strenge:

Alle Funktionalitäten des Inhalts sind durch eine Tastaturschnittstelle bedienbar, ohne dass eine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich ist.

Und Kriterium 2.4.3: Fokus-Reihenfolge ergänzt:

Wenn eine Webseite der Reihe nach navigiert werden kann und die Reihenfolge der Navigation die Bedeutung oder Bedienung beeinflusst, erhalten fokussierbare Komponenten den Fokus in einer Reihenfolge, der Bedeutung und Bedienbarkeit aufrecht erhält.

Das bedeutet:

• Alles was mit der Maus bedient werden kann, muss auch mit der Tastatur nutzbar sein.
• Die Tab-Reihenfolge muss sinnvoll sein und der Bedeutung der Elemente entsprechen.
• Sie sollte der Bedienbarkeit nicht schaden (oder besser: helfen)

Besonders kritisch wird es, wenn modale Fenster oder Overlay-Navigationen geöffnet werden und der Fokus an der richtigen Stelle fortsetzen muss. Mehr über den Umgang mit dem Fokus in diesem Fall finden Sie im Artikel Ein Overlay im HTML-Standard mit dialog und popover umsetzen.

Typische Fehler vermeiden

Auch wenn die Möglichkeiten des tabindex-Attributs begrenzt sind, der Schaden den man anrichten kann ist doch nicht zu vernachlässigen. Schauen wir uns deshalb einmal an, wo typische Stolpersteine zu finden sind.

Wo bin ich?

Ein häufiger Fehler: Unsichtbare Elemente, die plötzlich fokussiert sind. Es dürfen aber nur sichtbare Seitenelemente Fokus erhalten – oder müssen spätestens nachdem sie angesprungen wurden sichtbar werden. Ist ein Element per display: none oder visibility: hidden versteckt, sollte es keinen tabindex haben. Andernfalls verschwindet der Fokus ins Nichts. Ebenso kritisch sind fokussierbare Elemente mit aria-hidden="true". Für Screenreader sind sie „unsichtbar“, obwohl sie per Tastatur erreichbar sind.

Mehr Informationen zur Sichtbarkeit des Fokus gibt es im Artikel Fokus auf CSS – focus, focus-within und focus-visible.

Merksatz:
Kein Fokus auf Unsichtbares, kein aria-hidden auf Fokussierbares.

Was soll ich denn hier?

Ein <div> oder <span> mit tabindex="0" – aber ohne erkennbare Funktion? Ohne erkennbare Rolle oder das Informationen über das erwartete Verhalten sorgt das für Verwirrung und unnötige Stops in der Navigation.

Interaktive Elemente müssen nicht nur erreichbar sein, sondern auch als solche erkennbar. Fehlt die Rolle (role="button" o. ä.) oder kann man nach dem Fokus nichts Sinnvolles tun (oder weiß nicht, wie), entsteht schnell Frust. Nutzen Sie den tabindex also nur mit einer passenden Rolle und/oder Beschreibung, was der Nutzer hier tun kann.

Merksatz:
Fokus nur, wenn Rolle und Funktion klar sind.

1, 2 oder 3? Keine Chance! Vorbei!

tabindex="1", 2, 3 und so weiter – das klingt, als könnte man die Tab-Reihenfolge ganz einfach selbst bestimmen. Kann man auch. Aber genau das ist das Problem.

Sobald Elemente mit Werten größer als 0 versehen werden, entsteht eine künstliche Reihenfolge, die nichts mehr mit dem HTML-Quelltext oder der visuellen Struktur der Seite zu tun haben muss. Ein Button im Footer kann plötzlich vor dem Hauptmenü kommen. Und das alles nur, weil irgendwo ein tabindex="1" gesetzt wurde.

Das Ergebnis: Verwirrung, Sprünge, und Nutzer, die sich fragen, ob ihre Tab-Taste kaputt ist.

Die Wahrheit ist: Diese manuelle Steuerung ist extrem fehleranfällig, besonders in dynamischen Layouts oder wenn Inhalte nachgeladen werden. Denn, wenn du beide Varianten auf einer Seite verwendest, entsteht eine zweigeteilte Fokusreihenfolge. Zuerst werden alle Elemente mit tabindex > 0 in aufsteigender Reihenfolge durchlaufen – unabhängig davon, wo sie im DOM stehen. Erst danach folgen alle Elemente mit tabindex="0" – und zwar in der Reihenfolge, wie sie im HTML-Dokument erscheinen.

Die Verwirrung ist perfekt.

Dabei ist ein tabindex > 0 fast nie nötig. Mit tabindex="0" und sinnvoller HTML-Struktur lässt sich meist alles erreichen, was man braucht.

Merksatz:
Die beste Reihenfolge ist die natürliche.

Logische Reihenfolge = optische Reihenfolge?

Apropos Reihenfolge. Muss die denn immer von oben nach unten und von links nach rechts gehen? Nein, ganz und garnicht. Aber sie sollte der Erwartung des Nutzers entsprechen und Sinn ergeben. In den meisten Fällen haben vor allem sehende Nutzer schon vorm Tab eine Erwartung, wo dieser hin springt. Nutzen Sie das und sparen Sie Nutzern so eine unnötige Suche nach dem Fokusrahmen. Die optische Reihenfolge können Sie unabhängig des Aufbaus im Quelltext (und damit der natürlichen Tab-Reihenfolge) mit CSS beeinflussen und so visuell ein anderes Ergebnis erzeugen. So kann es möglicherweise sinnvoll sein, nach dem Logo direkt die Hauptnavigation anzutabben obwohl sich dazwischen optisch noch andere Buttons befinden.

Aber Achtung: Insbesondere In Formularen sind Nutzer es gewohnt, dass die Tab-Reihenfolge von oben nach unten und links nach rechts wechselt. Greifen Sie hier ein, kann das zu Fehleingaben führen.

Merksatz:
Der Fokus folgt der Erwartung.

Der schon wieder?

Oft haben wir mehrere Links, die alle auf dasselbe Ziel führen – zum Beispiel ein Bild, eine Überschrift und ein „Mehr erfahren“-Text, die alle zur gleichen Detailseite verlinken. Für Nutzer der Maus kein Problem, sogar besonders komfortabel. Für Nutzer der Tastatur dagegen bedeutet das: dreimal Tab für denselben Inhalt.

Das ist nicht nur lästig, sondern auch eine kognitive Belastung. Was wie drei Wege aussieht, ist in Wahrheit nur einer und das frustriert.

Lösung: Den redundanten Links einen tabindex="-1" geben und sie mit aria-hidden="true" aus dem Accessibility Tree entfernen. So bleibt der Inhalt visuell vollständig, aber in der Tastaturnavigation angenehm schlank.

Weitere Informationen:

• Alternative um mehrfache Links auf Teasern zu verhindern: Barrierefreie Cards mit HTML und CSS umsetzen
• Genauere Erklärung zu aria-hidden und anderen Ausblende-Methoden: aria-hidden oder display: none – Inhalte barrierefrei ausblenden

Merksatz:
Ein Ziel, ein Fokus – alles andere stört.

Fazit – ein Attribut, das viel kann, und am besten garnicht genutzt wird

Der tabindex ist kein Zauberstab, aber ein feines Werkzeug. Richtig eingesetzt, sorgt er dafür, dass Webseiten auch ohne Maus logisch, flüssig und frustfrei bedienbar sind. Falsch eingesetzt, wird er schnell zum Stolperstein.

Die gute Nachricht: In den meisten Fällen braucht es gar keine wilden Konstrukte. Wer sich an die natürliche Tab-Reihenfolge hält, semantische Elemente mit automatischem Fokus nutzt und interaktive Elemente klar erkennbar macht, ist schon auf einem sehr guten Weg.