tabindex richtig einsetzen: Tab-Reihenfolge ohne Chaos

Was die tabindex-Werte bedeuten

• ·Kein tabindex: Links, Buttons und Formularfelder sind von Haus aus mit Tab erreichbar, in der Reihenfolge, in der sie im HTML stehen. Das ist fast immer richtig so.
• ·tabindex="0": Ein Element, das normalerweise keinen Fokus bekommt, wird in die normale Reihenfolge aufgenommen. Das brauchst du selten, meist ist ein echter <button> die bessere Wahl.
• ·tabindex="-1": Das Element ist mit Tab nicht erreichbar, kann aber per Skript oder Sprunglink den Fokus bekommen. Typisch für Dialoge oder das Ziel eines Sprunglinks.
• ·tabindex="1" und höher: Diese Elemente kommen vor allen anderen dran, sortiert nach ihrer Zahl. Erst danach geht es mit dem Rest der Seite in HTML-Reihenfolge weiter.

Warum das wichtig ist

Stell dir eine Seite vor, auf der jemand dem Kontaktbutton tabindex="1" gegeben hat, damit er schneller erreichbar ist. Beim ersten Tab landet der Fokus mitten auf der Seite. Beim zweiten springt er zurück zum Logo, weil ab da wieder die normale Reihenfolge gilt. Wer keine Maus nutzen kann, verliert an dieser Stelle die Orientierung.

Noch unübersichtlicher wird es bei Formularen mit durchnummerierten Feldern. Kommt später ein Feld ohne Nummer dazu, springt der Fokus nach dem letzten nummerierten Feld erst wieder hoch zum Menü und erreicht das neue Feld irgendwann im zweiten Durchgang.

Die WCAG verlangen unter 2.4.3 Fokus-Reihenfolge, dass die Reihenfolge Sinn und Bedienbarkeit erhält. Eine mit tabindex zusammengebaute Reihenfolge, die das nicht tut, ist dort als bekannter Fehler beschrieben. Formal verboten sind positive Werte nicht. In der Praxis gehen sie trotzdem fast immer schief, weil niemand sie pflegt, wenn sich die Seite ändert.

So prüfst du es selbst

Im kostenlosen Check von checkfrei suchen wir im HTML nach tabindex-Werten größer als 0. Finden wir einen, gibt es eine Warnung. Selbst prüfen kannst du es so:

1. 01Quelltext öffnen (Strg+U) und nach tabindex suchen. Alles mit einer Zahl ab 1 ist ein Kandidat.
2. 02Oder in der Browser-Konsole (F12) den Befehl unten ausführen. Er listet alle Elemente mit positivem tabindex, auch solche, die erst per JavaScript dazugekommen sind.
3. 03Dann der wichtigste Test: Lade die Seite neu und geh mit der Tab-Taste einmal durch die ganze Seite. Der Fokus sollte ohne Sprünge von oben nach unten wandern.

[...document.querySelectorAll("[tabindex]")].filter((el) => parseInt(el.getAttribute("tabindex"), 10) > 0);

So behebst du es

Meist reicht es, die positiven Werte zu löschen. Stimmt die Reihenfolge danach nicht, steht das HTML in der falschen Reihenfolge, und genau dort setzt du an: Verschieb das Element im Quelltext an die Stelle, an die es logisch gehört.

add_filter( "gform_tabindex", "__return_false" );

<!-- vorher: eigene Reihenfolge per tabindex -->
<a href="/kontakt" tabindex="1">Kontakt</a>

<!-- nachher: kein tabindex, Reihenfolge über das HTML -->
<a href="/kontakt">Kontakt</a>

<!-- statt <div tabindex="0" onclick="..."> -->
<button type="button">Mehr anzeigen</button>

Typische Fehler

• ·Reihenfolge per CSS umgestellt: Mit order in Flexbox oder Grid lässt sich die Anzeige ändern, die Tab-Reihenfolge folgt aber weiter dem HTML. Das findet kein automatischer Check, nur der Test mit der Tastatur.
• ·Fokus unsichtbar gemacht: outline: none ohne Ersatz. Dann weiß niemand, wo der Fokus gerade ist, und 2.4.7 Fokus sichtbar ist verletzt.